chore(merge): downmerge develop into feat/voice-channel — adopt develop voice incoming-call APIs and UI

app/javascript/dashboard/composables/useVoiceCallStatus.js

@@ -0,0 +1,161 @@
+import { computed, unref } from 'vue';
+
+const CALL_STATUSES = {
+  IN_PROGRESS: 'in-progress',
+  RINGING: 'ringing',
+  NO_ANSWER: 'no-answer',
+  BUSY: 'busy',
+  FAILED: 'failed',
+  COMPLETED: 'completed',
+  CANCELED: 'canceled',
+};
+
+const CALL_DIRECTIONS = {
+  INBOUND: 'inbound',
+  OUTBOUND: 'outbound',
+};
+
+/**
+ * Composable for handling voice call status display logic
+ * @param {Ref|string} statusRef - Call status (ringing, in-progress, etc.)
+ * @param {Ref|string} directionRef - Call direction (inbound, outbound)
+ * @returns {Object} UI properties for displaying call status
+ */
+export function useVoiceCallStatus(statusRef, directionRef) {
+  const status = computed(() => unref(statusRef)?.toString());
+  const direction = computed(() => unref(directionRef)?.toString());
+
+  // Status group helpers
+  const isFailedStatus = computed(() =>
+    [
+      CALL_STATUSES.NO_ANSWER,
+      CALL_STATUSES.BUSY,
+      CALL_STATUSES.FAILED,
+    ].includes(status.value)
+  );
+  const isEndedStatus = computed(() =>
+    [CALL_STATUSES.COMPLETED, CALL_STATUSES.CANCELED].includes(status.value)
+  );
+  const isOutbound = computed(
+    () => direction.value === CALL_DIRECTIONS.OUTBOUND
+  );
+
+  const labelKey = computed(() => {
+    const s = status.value;
+
+    if (s === CALL_STATUSES.IN_PROGRESS) {
+      return isOutbound.value
+        ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
+        : 'CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS';
+    }
+
+    if (s === CALL_STATUSES.RINGING) {
+      return isOutbound.value
+        ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
+        : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+    }
+
+    if (s === CALL_STATUSES.NO_ANSWER) {
+      return 'CONVERSATION.VOICE_CALL.MISSED_CALL';
+    }
+
+    if (isFailedStatus.value) {
+      return 'CONVERSATION.VOICE_CALL.NO_ANSWER';
+    }
+
+    if (isEndedStatus.value) {
+      return 'CONVERSATION.VOICE_CALL.CALL_ENDED';
+    }
+
+    return 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+  });
+
+  const subtextKey = computed(() => {
+    const s = status.value;
+
+    if (s === CALL_STATUSES.RINGING) {
+      return 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET';
+    }
+
+    if (s === CALL_STATUSES.IN_PROGRESS) {
+      return isOutbound.value
+        ? 'CONVERSATION.VOICE_CALL.THEY_ANSWERED'
+        : 'CONVERSATION.VOICE_CALL.YOU_ANSWERED';
+    }
+
+    if (isFailedStatus.value) {
+      return 'CONVERSATION.VOICE_CALL.NO_ANSWER';
+    }
+
+    if (isEndedStatus.value) {
+      return 'CONVERSATION.VOICE_CALL.CALL_ENDED';
+    }
+
+    return 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET';
+  });
+
+  const bubbleIconName = computed(() => {
+    const s = status.value;
+
+    if (s === CALL_STATUSES.IN_PROGRESS) {
+      return isOutbound.value
+        ? 'i-ph-phone-outgoing-fill'
+        : 'i-ph-phone-incoming-fill';
+    }
+
+    if (isFailedStatus.value) {
+      return 'i-ph-phone-x-fill';
+    }
+
+    // For ringing/completed/canceled show direction when possible
+    return isOutbound.value
+      ? 'i-ph-phone-outgoing-fill'
+      : 'i-ph-phone-incoming-fill';
+  });
+
+  const bubbleIconBg = computed(() => {
+    const s = status.value;
+
+    if (s === CALL_STATUSES.IN_PROGRESS) {
+      return 'bg-n-teal-9';
+    }
+
+    if (isFailedStatus.value) {
+      return 'bg-n-ruby-9';
+    }
+
+    if (isEndedStatus.value) {
+      return 'bg-n-slate-11';
+    }
+
+    // default (e.g., ringing)
+    return 'bg-n-teal-9 animate-pulse';
+  });
+
+  const listIconColor = computed(() => {
+    const s = status.value;
+
+    if (s === CALL_STATUSES.IN_PROGRESS || s === CALL_STATUSES.RINGING) {
+      return 'text-n-teal-9';
+    }
+
+    if (isFailedStatus.value) {
+      return 'text-n-ruby-9';
+    }
+
+    if (isEndedStatus.value) {
+      return 'text-n-slate-11';
+    }
+
+    return 'text-n-teal-9';
+  });
+
+  return {
+    status,
+    labelKey,
+    subtextKey,
+    bubbleIconName,
+    bubbleIconBg,
+    listIconColor,
+  };
+}