Merge branch 'develop' into feat/ui-lib

app/javascript/dashboard/composables/spec/useInbox.spec.js

@@ -48,6 +48,7 @@ const mockStore = createStore({
             12: { id: 12, channel_type: INBOX_TYPES.SMS },
             13: { id: 13, channel_type: INBOX_TYPES.INSTAGRAM },
             14: { id: 14, channel_type: INBOX_TYPES.VOICE },
+            15: { id: 15, channel_type: INBOX_TYPES.TIKTOK },
           };
           return inboxes[id] || null;
         },
@@ -215,6 +216,12 @@ describe('useInbox', () => {
         global: { plugins: [mockStore] },
       });
       expect(wrapper.vm.isAVoiceChannel).toBe(true);
+
+      // Test Tiktok
+      wrapper = mount(createTestComponent(15), {
+        global: { plugins: [mockStore] },
+      });
+      expect(wrapper.vm.isATiktokChannel).toBe(true);
     });
   });
 
@@ -266,6 +273,7 @@ describe('useInbox', () => {
         'is360DialogWhatsAppChannel',
         'isAnEmailChannel',
         'isAnInstagramChannel',
+        'isATiktokChannel',
         'isAVoiceChannel',
       ];
 

app/javascript/dashboard/composables/useCallSession.js

@@ -0,0 +1,110 @@
+import { computed, ref, watch, onUnmounted, onMounted } from 'vue';
+import VoiceAPI from 'dashboard/api/channel/voice/voiceAPIClient';
+import TwilioVoiceClient from 'dashboard/api/channel/voice/twilioVoiceClient';
+import { useCallsStore } from 'dashboard/stores/calls';
+import Timer from 'dashboard/helper/Timer';
+
+export function useCallSession() {
+  const callsStore = useCallsStore();
+  const isJoining = ref(false);
+  const callDuration = ref(0);
+  const durationTimer = new Timer(elapsed => {
+    callDuration.value = elapsed;
+  });
+
+  const activeCall = computed(() => callsStore.activeCall);
+  const incomingCalls = computed(() => callsStore.incomingCalls);
+  const hasActiveCall = computed(() => callsStore.hasActiveCall);
+
+  watch(
+    hasActiveCall,
+    active => {
+      if (active) {
+        durationTimer.start();
+      } else {
+        durationTimer.stop();
+        callDuration.value = 0;
+      }
+    },
+    { immediate: true }
+  );
+
+  onMounted(() => {
+    TwilioVoiceClient.addEventListener('call:disconnected', () =>
+      callsStore.clearActiveCall()
+    );
+  });
+
+  onUnmounted(() => {
+    durationTimer.stop();
+    TwilioVoiceClient.removeEventListener('call:disconnected', () =>
+      callsStore.clearActiveCall()
+    );
+  });
+
+  const endCall = async ({ conversationId, inboxId }) => {
+    await VoiceAPI.leaveConference(inboxId, conversationId);
+    TwilioVoiceClient.endClientCall();
+    durationTimer.stop();
+    callsStore.clearActiveCall();
+  };
+
+  const joinCall = async ({ conversationId, inboxId, callSid }) => {
+    if (isJoining.value) return null;
+
+    isJoining.value = true;
+    try {
+      const device = await TwilioVoiceClient.initializeDevice(inboxId);
+      if (!device) return null;
+
+      const joinResponse = await VoiceAPI.joinConference({
+        conversationId,
+        inboxId,
+        callSid,
+      });
+
+      await TwilioVoiceClient.joinClientCall({
+        to: joinResponse?.conference_sid,
+        conversationId,
+      });
+
+      callsStore.setCallActive(callSid);
+      durationTimer.start();
+
+      return { conferenceSid: joinResponse?.conference_sid };
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Failed to join call:', error);
+      return null;
+    } finally {
+      isJoining.value = false;
+    }
+  };
+
+  const rejectIncomingCall = callSid => {
+    TwilioVoiceClient.endClientCall();
+    callsStore.dismissCall(callSid);
+  };
+
+  const dismissCall = callSid => {
+    callsStore.dismissCall(callSid);
+  };
+
+  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 {
+    activeCall,
+    incomingCalls,
+    hasActiveCall,
+    isJoining,
+    formattedCallDuration,
+    joinCall,
+    endCall,
+    rejectIncomingCall,
+    dismissCall,
+  };
+}

app/javascript/dashboard/composables/useInbox.js

@@ -17,6 +17,7 @@ export const INBOX_FEATURE_MAP = {
     INBOX_TYPES.TWITTER,
     INBOX_TYPES.WHATSAPP,
     INBOX_TYPES.TELEGRAM,
+    INBOX_TYPES.TIKTOK,
     INBOX_TYPES.API,
   ],
   [INBOX_FEATURES.REPLY_TO_OUTGOING]: [
@@ -24,6 +25,7 @@ export const INBOX_FEATURE_MAP = {
     INBOX_TYPES.TWITTER,
     INBOX_TYPES.WHATSAPP,
     INBOX_TYPES.TELEGRAM,
+    INBOX_TYPES.TIKTOK,
     INBOX_TYPES.API,
   ],
 };
@@ -128,6 +130,10 @@ export const useInbox = (inboxId = null) => {
     return channelType.value === INBOX_TYPES.INSTAGRAM;
   });
 
+  const isATiktokChannel = computed(() => {
+    return channelType.value === INBOX_TYPES.TIKTOK;
+  });
+
   const isAVoiceChannel = computed(() => {
     return channelType.value === INBOX_TYPES.VOICE;
   });
@@ -149,6 +155,7 @@ export const useInbox = (inboxId = null) => {
     is360DialogWhatsAppChannel,
     isAnEmailChannel,
     isAnInstagramChannel,
+    isATiktokChannel,
     isAVoiceChannel,
   };
 };