fix: show different call status

frontend/src/components/Telephony/ExotelCallUI.vue

@@ -2,14 +2,14 @@
   <div>
     <div
       v-show="showSmallCallPopup"
-      class="ml-2 flex cursor-pointer select-none items-center justify-between gap-2 rounded-full bg-surface-gray-7 px-1.5 py-[7px] text-base text-ink-gray-2"
+      class="ml-2 flex cursor-pointer select-none items-center justify-between gap-2 rounded-full bg-surface-gray-7 px-2 py-[7px] text-base text-ink-gray-2"
       @click="toggleCallPopup"
     >
       <div
         class="flex justify-center items-center size-5 rounded-full bg-surface-gray-6"
       >
         <Avatar
-          v-if="contact.image"
+          v-if="contact?.image"
           :image="contact.image"
           :label="contact.full_name"
           class="size-3"
@@ -17,26 +17,36 @@
         <AvatarIcon v-else class="size-3" />
       </div>
       <div class="text-base font-medium">
-        <span class="">{{ phoneNumber }}</span>
+        <span
-        <span class="font-normal text-ink-gray-4"> · </span>
+          v-if="
+            callStatus == 'Calling...' ||
+            callStatus == 'Ringing...' ||
+            callStatus == 'Incoming Call'
+          "
+          class="font-normal text-ink-gray-4 mr-1"
+        >
+          {{ callStatus }}
+        </span>
+        <span>{{ phoneNumber }}</span>
         <span
           v-if="callStatus == 'In Progress'"
           class="font-normal text-ink-gray-4"
         >
-          00:38
+          <span> · </span>00:38
+        </span>
+        <span
+          v-else-if="callStatus == 'Call Ended' || callStatus == 'No Answer'"
+          class="font-normal text-ink-gray-4"
+          :class="{
+            'text-red-700':
+              callStatus == 'Call Ended' || callStatus == 'No Answer',
+          }"
+        >
+          <span class="text-ink-gray-4"> · </span>
+          <span>{{ callStatus }}</span>
+          <span v-if="callStatus == 'Call Ended'"> <span> · </span>00:38 </span>
         </span>
-        <span v-else class="font-normal text-ink-gray-4">{{ callStatus }}</span>
       </div>
-      <Button
-        variant="solid"
-        theme="red"
-        class="text-white !size-5 rounded-full"
-        @click="endCall"
-      >
-        <template #icon>
-          <PhoneIcon class="w-3 h-3 rotate-[135deg]" />
-        </template>
-      </Button>
     </div>
     <Dialog
       v-model="showCallModal"
@@ -68,25 +78,44 @@
       class="fixed z-20 w-[280px] min-h-44 flex gap-2 cursor-move select-none flex-col rounded-lg bg-surface-gray-7 p-4 pt-2.5 text-ink-gray-2 shadow-2xl"
       :style="style"
     >
-      <!-- <pre>{{ callData }}</pre> -->
       <div class="header flex items-center justify-between gap-2 text-base">
         <div v-if="callStatus == 'In Progress'">00:38</div>
-        <div v-else>{{ __(callStatus) }}</div>
+        <div
-        <Button
+          v-else-if="callStatus == 'Call Ended' || callStatus == 'No Answer'"
-          @click="toggleCallPopup"
+          :class="{
-          class="bg-surface-gray-7 text-ink-white hover:bg-surface-gray-6"
+            'text-red-700':
-          size="md"
+              callStatus == 'Call Ended' || callStatus == 'No Answer',
+          }"
         >
-          <template #icon>
+          <span>{{ __(callStatus) }}</span>
-            <MinimizeIcon class="h-4 w-4 cursor-pointer" />
+          <span v-if="callStatus == 'Call Ended'"><span> · </span>00:38</span>
-          </template>
+        </div>
-        </Button>
+        <div v-else>{{ __(callStatus) }}</div>
+        <div class="flex">
+          <Button
+            @click="toggleCallPopup"
+            class="bg-surface-gray-7 text-ink-white hover:bg-surface-gray-6"
+            size="md"
+          >
+            <template #icon>
+              <MinimizeIcon class="h-4 w-4 cursor-pointer" />
+            </template>
+          </Button>
+          <Button
+            v-if="callStatus == 'Call Ended' || callStatus == 'No Answer'"
+            @click="closeCallPopup"
+            class="bg-surface-gray-7 text-ink-white hover:bg-surface-gray-6"
+            icon="x"
+            size="md"
+          />
+        </div>
       </div>
       <div class="body flex-1">
         <div v-if="showNote" class="h-[294px] text-base">{{ note }}</div>
+        <div v-else-if="showTask" class="h-[294px] text-base">{{ task }}</div>
         <div v-else class="flex items-center gap-3">
           <Avatar
-            v-if="contact.image"
+            v-if="contact?.image"
             :image="contact.image"
             :label="contact.full_name"
             class="!size-8"
@@ -97,7 +126,7 @@
           >
             <AvatarIcon class="size-4" />
           </div>
-          <div v-if="contact.full_name" class="flex flex-col gap-1.5">
+          <div v-if="contact?.full_name" class="flex flex-col gap-1.5">
             <div class="text-lg font-medium">{{ contact.full_name }}</div>
             <div class="text-base text-ink-gray-6">{{ phoneNumber }}</div>
           </div>
@@ -106,12 +135,6 @@
       </div>
       <div class="footer flex justify-between gap-2">
         <div class="flex gap-2">
-          <Button
-            class="bg-surface-gray-6 text-ink-white hover:bg-surface-gray-5"
-            :icon="mute ? 'mic-off' : 'mic'"
-            size="md"
-            @click="toggleMute"
-          />
           <Button
             class="bg-surface-gray-6 text-ink-white hover:bg-surface-gray-5"
             size="md"
@@ -122,22 +145,15 @@
             </template>
           </Button>
           <Button
-            :icon="'more-horizontal'"
             class="bg-surface-gray-6 text-ink-white hover:bg-surface-gray-5"
             size="md"
-          />
+            @click="showTaskWindow"
+          >
+            <template #icon>
+              <TaskIcon class="w-4 h-4" />
+            </template>
+          </Button>
         </div>
-        <Button
-          variant="solid"
-          theme="red"
-          class="text-white"
-          size="md"
-          @click="endCall"
-        >
-          <template #icon>
-            <PhoneIcon class="w-4 h-4 rotate-[135deg]" />
-          </template>
-        </Button>
       </div>
     </div>
   </div>
@@ -146,12 +162,12 @@
 import AvatarIcon from '@/components/Icons/AvatarIcon.vue'
 import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
-import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import { Button, Dialog, FormControl, call, Avatar } from 'frappe-ui'
 import { globalStore } from '@/stores/global'
 import { contactsStore } from '@/stores/contacts'
 import { useDraggable, useWindowSize } from '@vueuse/core'
-import { ref, onBeforeUnmount, onMounted } from 'vue'
+import { ref, computed, onBeforeUnmount, onMounted } from 'vue'
 
 const { getContact, getLeadContact } = contactsStore()
 const { $socket, setMakeCall } = globalStore()
@@ -178,20 +194,23 @@ let { style } = useDraggable(callPopup, {
 
 const showCallModal = ref(false)
 const callStatus = ref('')
-const phoneNumber = ref('09821259504')
+const phoneNumber = ref('')
 const callData = ref(null)
 
-const contact = ref({
+const contact = computed(() => {
-  full_name: '',
+  if (!phoneNumber.value) {
-  mobile_no: '',
+    return {
+      full_name: '',
+      image: '',
+    }
+  }
+  let _contact = getContact(phoneNumber.value)
+  if (!_contact) {
+    _contact = getLeadContact(phoneNumber.value)
+  }
+  return _contact
 })
 
-const mute = ref(false)
-
-function toggleMute() {
-  mute.value = !mute.value
-}
-
 const note = ref(
   'This is a note for the call. This is a note for the call. This is a note for the call. This is a note for the call.',
 )
@@ -200,11 +219,33 @@ const showNote = ref(false)
 
 function showNoteWindow() {
   showNote.value = !showNote.value
+  if (!showTask.value) {
+    updateWindowHeight(showNote.value)
+  }
+  if (showNote.value) {
+    showTask.value = false
+  }
+}
 
+const task = ref('This is a task for the call. This is a task for the call.')
+
+const showTask = ref(false)
+
+function showTaskWindow() {
+  showTask.value = !showTask.value
+  if (!showNote.value) {
+    updateWindowHeight(showTask.value)
+  }
+  if (showTask.value) {
+    showNote.value = false
+  }
+}
+
+function updateWindowHeight(condition) {
   let top = parseInt(callPopup.value.style.top)
   let updatedTop = 0
 
-  updatedTop = showNote.value ? top - 224 : top + 224
+  updatedTop = condition ? top - 224 : top + 224
 
   if (updatedTop < 0) {
     updatedTop = 10
@@ -219,29 +260,15 @@ function showMakeCallModal(number) {
 }
 
 function makeCall() {
-  contact.value = getContact(phoneNumber.value)
-  if (!contact.value) {
-    contact.value = getLeadContact(phoneNumber.value)
-  }
-
   showCallModal.value = false
   callStatus.value = 'Calling...'
   showCallPopup.value = true
 
   call('crm.integrations.exotel.handler.make_a_call', {
     to_number: phoneNumber.value,
-    from_number: '07666980887',
-    caller_id: '08047091710',
   })
 }
 
-function endCall() {
-  callStatus.value = ''
-  showCallPopup.value = false
-  showSmallCallPopup.value = false
-  note.value = ''
-}
-
 onBeforeUnmount(() => {
   $socket.off('exotel_call')
 })
@@ -251,56 +278,61 @@ onMounted(() => {
     callData.value = data
     console.log(data)
 
-    if (
+    callStatus.value = updateStatus(data)
-      data.EventType == 'answered' &&
-      data.Direction == 'outbound-api' &&
-      data.Status == 'in-progress' &&
-      data['Legs[0][Status]'] == 'in-progress' &&
-      data['Legs[1][Status]'] == ''
-    ) {
-      callStatus.value = 'Ringing...'
-    } else if (
-      data.EventType == 'answered' &&
-      data.Direction == 'outbound-api' &&
-      data.Status == 'in-progress' &&
-      data['Legs[1][Status]'] == 'in-progress'
-    ) {
-      callStatus.value = 'In Progress'
-    } else if (
-      data.EventType == 'terminal' &&
-      data.Direction == 'outbound-api' &&
-      (data.Status == 'completed' || data.Status == 'no-answer')
-    ) {
-      callStatus.value = 'Call Ended'
-    }
-
-    if (
-      data.EventType == 'Dial' &&
-      data.Direction == 'incoming' &&
-      data.Status == 'busy'
-    ) {
-      callStatus.value = 'Incoming Call'
-    } else if (
-      data.EventType == 'Terminal' &&
-      data.Direction == 'incoming' &&
-      data.Status == 'free'
-    ) {
-      callStatus.value = 'Call Ended'
-    }
 
     if (!showCallPopup.value && !showSmallCallPopup.value) {
       showCallPopup.value = true
     }
-
-    if (callStatus.value == 'Call Ended') {
-      setTimeout(() => {
-        showCallPopup.value = false
-        showSmallCallPopup.value = false
-        note.value = ''
-      }, 2000)
-    }
   })
 
   setMakeCall(showMakeCallModal)
 })
+
+function closeCallPopup() {
+  showCallPopup.value = false
+  showSmallCallPopup.value = false
+  note.value = ''
+  task.value = ''
+}
+
+function updateStatus(data) {
+  // outgoing call
+  if (
+    data.EventType == 'answered' &&
+    data.Direction == 'outbound-api' &&
+    data.Status == 'in-progress' &&
+    data['Legs[0][Status]'] == 'in-progress' &&
+    data['Legs[1][Status]'] == ''
+  ) {
+    return 'Ringing...'
+  } else if (
+    data.EventType == 'answered' &&
+    data.Direction == 'outbound-api' &&
+    data.Status == 'in-progress' &&
+    data['Legs[1][Status]'] == 'in-progress'
+  ) {
+    return 'In Progress'
+  } else if (
+    data.EventType == 'terminal' &&
+    data.Direction == 'outbound-api' &&
+    (data.Status == 'completed' || data.Status == 'no-answer')
+  ) {
+    return data.Status == 'no-answer' ? 'No Answer' : 'Call Ended'
+  }
+
+  // incoming call
+  if (
+    data.EventType == 'Dial' &&
+    data.Direction == 'incoming' &&
+    data.Status == 'busy'
+  ) {
+    return 'Incoming Call'
+  } else if (
+    data.EventType == 'Terminal' &&
+    data.Direction == 'incoming' &&
+    data.Status == 'free'
+  ) {
+    return 'Call Ended'
+  }
+}
 </script>