feat: add call duration

app/javascript/dashboard/components-next/message/bubbles/VoiceCall.spec.js

@@ -77,4 +77,15 @@ describe('VoiceCall.vue', () => {
 
     expect(wrapper.text()).toContain('You answered');
   });
+
+  it('shows the formatted duration when a call has ended', () => {
+    messageContext.contentAttributes.value.data.status =
+      VOICE_CALL_STATUS.COMPLETED;
+    messageContext.contentAttributes.value.data.meta.duration = 133;
+
+    const wrapper = mountComponent();
+
+    expect(wrapper.text()).toContain('Call ended');
+    expect(wrapper.text()).toContain('02:13');
+  });
 });

app/javascript/dashboard/components-next/message/bubbles/VoiceCall.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMessageContext } from '../provider.js';
 import { MESSAGE_TYPES, VOICE_CALL_STATUS } from '../constants';
+import { formatDuration } from 'shared/helpers/timeHelper';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
@@ -29,6 +30,9 @@ const status = computed(() => data.value?.status?.toString());
 const joinedBy = computed(() => {
   return data.value?.meta?.joinedBy || data.value?.meta?.joined_by;
 });
+const callDuration = computed(() => {
+  return data.value?.meta?.duration;
+});
 
 const isOutbound = computed(() => messageType.value === MESSAGE_TYPES.OUTGOING);
 const isFailed = computed(() =>
@@ -64,7 +68,10 @@ const subtext = computed(() => {
   }
 
   if (status.value === VOICE_CALL_STATUS.COMPLETED) {
-    return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
+    return (
+      formatDuration(callDuration.value) ||
+      t('CONVERSATION.VOICE_CALL.CALL_ENDED')
+    );
   }
 
   if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {

app/javascript/dashboard/composables/useCallSession.js

@@ -5,6 +5,7 @@ import TwilioVoiceClient from 'dashboard/api/channel/voice/twilioVoiceClient';
 import { useAlert } from 'dashboard/composables';
 import { useCallsStore } from 'dashboard/stores/calls';
 import Timer from 'dashboard/helper/Timer';
+import { formatDuration } from 'shared/helpers/timeHelper';
 
 export function useCallSession() {
   const callsStore = useCallsStore();
@@ -98,9 +99,7 @@ export function useCallSession() {
   };
 
   const formattedCallDuration = computed(() => {
-    const minutes = Math.floor(callDuration.value / 60);
-    const seconds = callDuration.value % 60;
-    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    return formatDuration(callDuration.value);
   });
 
   return {