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

app/javascript/dashboard/components/ui/Wizard.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
+import Icon from 'next/icon/Icon.vue';
 
 const props = defineProps({
   items: {
@@ -12,62 +13,67 @@ const props = defineProps({
 const route = useRoute();
 
 const activeIndex = computed(() => {
-  return props.items.findIndex(i => i.route === route.name);
+  const index = props.items.findIndex(i => i.route === route.name);
+  return index === -1 ? 0 : index;
 });
 
-const isActive = item => {
-  return props.items.indexOf(item) === activeIndex.value;
-};
-
-const isOver = item => {
-  return props.items.indexOf(item) < activeIndex.value;
-};
+const steps = computed(() =>
+  props.items.map((item, index) => {
+    const isActive = index === activeIndex.value;
+    const isOver = index < activeIndex.value;
+    return {
+      ...item,
+      index,
+      isActive,
+      isOver,
+    };
+  })
+);
 </script>
 
 <template>
   <transition-group tag="div">
     <div
-      v-for="(item, index) in items"
-      :key="item.route"
-      class="cursor-pointer flex items-start gap-6 relative after:content-[''] after:absolute after:w-0.5 after:h-full after:top-5 ltr:after:left-4 rtl:after:right-4 before:content-[''] before:absolute before:w-0.5 before:h-4 before:top-0 before:left-4 rtl:before:right-4 last:after:hidden last:before:hidden"
-      :class="
-        isOver(item)
-          ? 'after:bg-n-blue-9 before:bg-n-blue-9'
-          : 'after:bg-n-weak before:bg-n-weak'
-      "
+      v-for="step in steps"
+      :key="step.route"
+      class="cursor-pointer flex items-start gap-6 relative after:content-[''] after:absolute after:w-0.5 after:h-full after:top-5 ltr:after:left-4 rtl:after:right-4 before:content-[''] before:absolute before:w-0.5 before:h-4 before:top-0 before:left-4 rtl:before:right-4 last:after:hidden last:before:hidden after:bg-n-slate-3 before:bg-n-slate-3"
     >
+      <!-- Circle -->
       <div
-        class="rounded-2xl flex-shrink-0 size-8 flex items-center justify-center left-2 outline outline-2 leading-4 z-10 top-5 bg-n-background"
-        :class="
-          isActive(item) || isOver(item) ? 'outline-n-blue-9' : 'outline-n-weak'
-        "
+        class="rounded-2xl flex-shrink-0 size-8 border-2 border-n-slate-3 flex items-center justify-center left-2 leading-4 z-10 top-5 transition-all duration-300 ease-in-out"
+        :class="{
+          'bg-n-slate-3': step.isActive || step.isOver,
+          'bg-n-background': !step.isActive && !step.isOver,
+        }"
       >
         <span
-          class="text-xs font-bold"
-          :class="
-            isActive(item) || isOver(item)
-              ? 'text-n-blue-11'
-              : 'text-n-slate-11'
-          "
+          v-if="!step.isOver"
+          :key="'num-' + step.index"
+          class="text-xs font-bold transition-colors duration-300"
+          :class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-11'"
         >
-          {{ index + 1 }}
+          {{ step.index + 1 }}
         </span>
+        <Icon
+          v-else
+          :key="'check-' + step.index"
+          icon="i-lucide-check"
+          class="text-n-slate-11 size-4"
+        />
       </div>
+
+      <!-- Content -->
       <div class="flex flex-col items-start gap-1.5 pb-10 pt-1">
         <div class="flex items-center">
           <h3
             class="text-sm font-medium overflow-hidden whitespace-nowrap mt-0.5 text-ellipsis leading-tight"
-            :class="
-              isActive(item) || isOver(item)
-                ? 'text-n-blue-11'
-                : 'text-n-slate-12'
-            "
+            :class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-12'"
           >
-            {{ item.title }}
+            {{ step.title }}
           </h3>
         </div>
         <p class="m-0 mt-1.5 text-sm text-n-slate-11">
-          {{ item.body }}
+          {{ step.body }}
         </p>
       </div>
     </div>

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -3,6 +3,7 @@ import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
+import { useVoiceCallStatus } from 'dashboard/composables/useVoiceCallStatus';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import Avatar from 'next/avatar/Avatar.vue';
 import MessagePreview from './MessagePreview.vue';
@@ -82,6 +83,16 @@ const isInboxNameVisible = computed(() => !activeInbox.value);
 
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 
+const callStatus = computed(
+  () => props.chat.additional_attributes?.call_status
+);
+const callDirection = computed(
+  () => props.chat.additional_attributes?.call_direction
+);
+
+const { labelKey: voiceLabelKey, listIconColor: voiceIconColor } =
+  useVoiceCallStatus(callStatus, callDirection);
+
 const inboxId = computed(() => props.chat.inbox_id);
 
 const inbox = computed(() => {
@@ -306,8 +317,23 @@ const deleteConversation = () => {
       >
         {{ currentContact.name }}
       </h4>
+      <div
+        v-if="callStatus"
+        key="voice-status-row"
+        class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
+        :class="messagePreviewClass"
+      >
+        <span
+          class="inline-block -mt-0.5 align-middle text-[16px] i-ph-phone-incoming"
+          :class="[voiceIconColor]"
+        />
+        <span class="mx-1">
+          {{ $t(voiceLabelKey) }}
+        </span>
+      </div>
       <MessagePreview
-        v-if="lastMessageInChat"
+        v-else-if="lastMessageInChat"
+        key="message-preview"
         :message="lastMessageInChat"
         :conversation="chat"
         class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm"
@@ -315,6 +341,7 @@ const deleteConversation = () => {
       />
       <p
         v-else
+        key="no-messages"
         class="text-n-slate-11 text-sm my-0 mx-2 leading-6 h-6 flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"
         :class="messagePreviewClass"
       >