From a716bdf0da35f36df652b2846a3b6a4c5bfad6e0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 15 Jan 2025 14:59:10 +0530
Subject: [PATCH] fix: created exotel call ui

---
 crm/integrations/exotel/handler.py            |   8 +-
 frappe-ui                                     |   2 +-
 frontend/src/components/Icons/AvatarIcon.vue  |  17 +
 frontend/src/components/Icons/NoteIcon.vue    |   3 +-
 frontend/src/components/Layouts/AppHeader.vue |   4 +-
 .../src/components/Mobile/MobileAppHeader.vue |   4 +-
 .../src/components/{ => Telephony}/CallUI.vue |   0
 .../src/components/Telephony/ExotelCallUI.vue | 306 ++++++++++++++++++
 frontend/src/pages/Notes.vue                  |   2 +-
 9 files changed, 339 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/Icons/AvatarIcon.vue
 rename frontend/src/components/{ => Telephony}/CallUI.vue (100%)
 create mode 100644 frontend/src/components/Telephony/ExotelCallUI.vue

diff --git a/crm/integrations/exotel/handler.py b/crm/integrations/exotel/handler.py
index 9abf24ab..4375f0a7 100644
--- a/crm/integrations/exotel/handler.py
+++ b/crm/integrations/exotel/handler.py
@@ -28,6 +28,7 @@ def handle_request(**kwargs):
 			return
 
 		call_payload = kwargs
+
 		frappe.publish_realtime("exotel_call", call_payload)
 		status = call_payload.get("Status")
 		if status == "free":
@@ -56,11 +57,12 @@ def handle_request(**kwargs):
 
 # Outgoing Call
 @frappe.whitelist()
-def make_a_call(from_number, to_number, caller_id=None, link_to_document=None):
+def make_a_call(to_number, from_number=None, caller_id=None, link_to_document=None):
 	if not is_integration_enabled():
 		frappe.throw(_("Please setup Exotel intergration"), title=_("Integration Not Enabled"))
 
 	endpoint = get_exotel_endpoint("Calls/connect.json?details=true")
+
 	if not from_number:
 		from_number = frappe.get_value("CRM Exotel Agent", {"user": frappe.session.user}, "mobile_no")
 
@@ -91,8 +93,10 @@ def make_a_call(from_number, to_number, caller_id=None, link_to_document=None):
 	else:
 		res = response.json()
 		call_payload = res.get("Call", {})
+
 		if link_to_document:
 			link_to_document = json.loads(link_to_document)
+
 		create_call_log(
 			call_id=call_payload.get("Sid"),
 			from_number=call_payload.get("From"),
@@ -105,7 +109,7 @@ def make_a_call(from_number, to_number, caller_id=None, link_to_document=None):
 	return response.json()
 
 
-def get_exotel_endpoint(action):
+def get_exotel_endpoint(action=None):
 	settings = get_exotel_settings()
 	return "https://{api_key}:{api_token}@api.exotel.com/v1/Accounts/{sid}/{action}".format(
 		api_key=settings.api_key,
diff --git a/frappe-ui b/frappe-ui
index d82b3a12..99f0b86f 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit d82b3a12eeb6cb9e83375550508b462ce5cfdaf2
+Subproject commit 99f0b86f15e094b95c32e87494e003c974b4f0df
diff --git a/frontend/src/components/Icons/AvatarIcon.vue b/frontend/src/components/Icons/AvatarIcon.vue
new file mode 100644
index 00000000..d1331ec6
--- /dev/null
+++ b/frontend/src/components/Icons/AvatarIcon.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 7C9.65685 7 11 5.65685 11 4C11 2.34315 9.65685 1 8 1C6.34315 1 5 2.34315 5 4C5 5.65685 6.34315 7 8 7ZM7.5969 8C4.50582 8 2 10.5058 2 13.5969C2 14.118 2.37677 14.5628 2.89081 14.6485L4.52397 14.9207C6.82545 15.3042 9.17455 15.3042 11.476 14.9207L13.1092 14.6485C13.6232 14.5628 14 14.118 14 13.5969C14 10.5058 11.4942 8 8.4031 8H7.5969Z"
+      fill="currentColor"
+      fill-opacity="0.54"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/NoteIcon.vue b/frontend/src/components/Icons/NoteIcon.vue
index 2bbca63f..38fb47ca 100644
--- a/frontend/src/components/Icons/NoteIcon.vue
+++ b/frontend/src/components/Icons/NoteIcon.vue
@@ -9,8 +9,9 @@
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M3.99707 14H11.9971C12.8255 14 13.4971 13.3284 13.4971 12.5V6.49988L12 6.49989C10.6193 6.4999 9.5 5.38061 9.5 3.99989V2H3.99707C3.16864 2 2.49707 2.67157 2.49707 3.5V12.5C2.49707 13.3284 3.16864 14 3.99707 14ZM13.8291 4.2806C14.1476 4.62366 14.3612 5.04668 14.4502 5.49987L14.4968 5.49987L14.4968 5.94777L14.4971 5.98173V12.5C14.4971 13.8807 13.3778 15 11.9971 15H3.99707C2.61636 15 1.49707 13.8807 1.49707 12.5V3.5C1.49707 2.11929 2.61636 1 3.99707 1H9.69261C10.3878 1 11.0516 1.28945 11.5246 1.79887L13.8291 4.2806ZM12 5.49989L13.4176 5.49988C13.3502 5.30132 13.2414 5.11735 13.0963 4.96105L10.7918 2.47932C10.7044 2.38525 10.6063 2.30368 10.5 2.23582V3.99989C10.5 4.82832 11.1716 5.4999 12 5.49989ZM5 11C4.72386 11 4.5 11.2239 4.5 11.5C4.5 11.7761 4.72386 12 5 12H8C8.27614 12 8.5 11.7761 8.5 11.5C8.5 11.2239 8.27614 11 8 11H5ZM10 9.5H5H4.75C4.47386 9.5 4.25 9.27614 4.25 9C4.25 8.72386 4.47386 8.5 4.75 8.5H5H10H11.25C11.5261 8.5 11.75 8.72386 11.75 9C11.75 9.27614 11.5261 9.5 11.25 9.5H10Z"
+      d="M3.99707 14H11.9971C12.8255 14 13.4971 13.3284 13.4971 12.5V6.49988L11 6.4999C10.1716 6.49991 9.5 5.82833 9.5 4.9999V2H3.99707C3.16864 2 2.49707 2.67157 2.49707 3.5V12.5C2.49707 13.3284 3.16864 14 3.99707 14ZM13.8291 4.2806C14.1476 4.62366 14.3612 5.04668 14.4502 5.49987L14.4968 5.49987L14.4968 5.94777L14.4971 5.98173V12.5C14.4971 13.8807 13.3778 15 11.9971 15H3.99707C2.61636 15 1.49707 13.8807 1.49707 12.5V3.5C1.49707 2.11929 2.61636 1 3.99707 1H9.69261C10.3878 1 11.0516 1.28945 11.5246 1.79887L13.8291 4.2806ZM11 5.4999L13.4176 5.49988C13.3502 5.30132 13.2414 5.11735 13.0963 4.96105L10.7918 2.47932C10.7044 2.38525 10.6063 2.30368 10.5 2.23582V4.9999C10.5 5.27604 10.7239 5.4999 11 5.4999ZM5 11C4.72386 11 4.5 11.2239 4.5 11.5C4.5 11.7761 4.72386 12 5 12H11C11.2761 12 11.5 11.7761 11.5 11.5C11.5 11.2239 11.2761 11 11 11H5ZM4.5 9C4.5 8.72386 4.72386 8.5 5 8.5H10H11C11.2761 8.5 11.5 8.72386 11.5 9C11.5 9.27614 11.2761 9.5 11 9.5H10H5C4.72386 9.5 4.5 9.27614 4.5 9Z"
       fill="currentColor"
+      fill-opacity="0.72"
     />
   </svg>
 </template>
diff --git a/frontend/src/components/Layouts/AppHeader.vue b/frontend/src/components/Layouts/AppHeader.vue
index 00a04369..b1b72c35 100644
--- a/frontend/src/components/Layouts/AppHeader.vue
+++ b/frontend/src/components/Layouts/AppHeader.vue
@@ -2,11 +2,13 @@
   <div class="flex border-b pr-5">
     <div id="app-header" class="flex-1"></div>
     <div class="flex items-center justify-center">
+      <ExotelCallUI />
       <CallUI />
     </div>
   </div>
 </template>
 
 <script setup>
-import CallUI from '@/components/CallUI.vue'
+import ExotelCallUI from '@/components/Telephony/ExotelCallUI.vue'
+import CallUI from '@/components/Telephony/CallUI.vue'
 </script>
diff --git a/frontend/src/components/Mobile/MobileAppHeader.vue b/frontend/src/components/Mobile/MobileAppHeader.vue
index de564def..b2c6e354 100644
--- a/frontend/src/components/Mobile/MobileAppHeader.vue
+++ b/frontend/src/components/Mobile/MobileAppHeader.vue
@@ -12,10 +12,12 @@
     <div id="app-header" class="flex-1" />
   </div>
   <CallUI class="mr-3 mt-2" />
+  <ExotelCallUI class="mr-3 mt-2" />
 </template>
 
 <script setup>
 import MenuIcon from '@/components/Icons/MenuIcon.vue'
-import CallUI from '@/components/CallUI.vue'
+import ExotelCallUI from '@/components/Telephony/ExotelCallUI.vue'
+import CallUI from '@/components/Telephony/CallUI.vue'
 import { mobileSidebarOpened as sidebarOpened } from '@/composables/settings'
 </script>
diff --git a/frontend/src/components/CallUI.vue b/frontend/src/components/Telephony/CallUI.vue
similarity index 100%
rename from frontend/src/components/CallUI.vue
rename to frontend/src/components/Telephony/CallUI.vue
diff --git a/frontend/src/components/Telephony/ExotelCallUI.vue b/frontend/src/components/Telephony/ExotelCallUI.vue
new file mode 100644
index 00000000..b4363c36
--- /dev/null
+++ b/frontend/src/components/Telephony/ExotelCallUI.vue
@@ -0,0 +1,306 @@
+<template>
+  <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"
+      @click="toggleCallPopup"
+    >
+      <div
+        class="flex justify-center items-center size-5 rounded-full bg-surface-gray-6"
+      >
+        <Avatar
+          v-if="contact.image"
+          :image="contact.image"
+          :label="contact.full_name"
+          class="size-3"
+        />
+        <AvatarIcon v-else class="size-3" />
+      </div>
+      <div class="text-base font-medium">
+        <span class="">{{ phoneNumber }}</span>
+        <span class="font-normal text-ink-gray-4"> · </span>
+        <span
+          v-if="callStatus == 'In Progress'"
+          class="font-normal text-ink-gray-4"
+        >
+          00:38
+        </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"
+      :options="{
+        title: 'Make a call',
+        actions: [
+          {
+            label: 'Make a Call',
+            variant: 'solid',
+            onClick: makeCall,
+          },
+        ],
+      }"
+    >
+      <template #body-content>
+        <div>
+          <FormControl
+            v-model="phoneNumber"
+            label="Phone Number"
+            placeholder="+917666980887"
+          />
+        </div>
+      </template>
+    </Dialog>
+
+    <div
+      v-show="showCallPopup"
+      ref="callPopup"
+      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>
+        <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>
+      </div>
+      <div class="body flex-1">
+        <div v-if="showNote" class="h-[294px] text-base">{{ note }}</div>
+        <div v-else class="flex items-center gap-3">
+          <Avatar
+            v-if="contact.image"
+            :image="contact.image"
+            :label="contact.full_name"
+            class="!size-8"
+          />
+          <div
+            v-else
+            class="flex justify-center items-center size-8 rounded-full bg-surface-gray-6"
+          >
+            <AvatarIcon class="size-4" />
+          </div>
+          <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>
+          <div v-else class="text-lg font-medium">{{ phoneNumber }}</div>
+        </div>
+      </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"
+            @click="showNoteWindow"
+          >
+            <template #icon>
+              <NoteIcon class="w-4 h-4" />
+            </template>
+          </Button>
+          <Button
+            :icon="'more-horizontal'"
+            class="bg-surface-gray-6 text-ink-white hover:bg-surface-gray-5"
+            size="md"
+          />
+        </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>
+</template>
+<script setup>
+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 { 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'
+
+const { getContact, getLeadContact } = contactsStore()
+const { $socket, setMakeCall } = globalStore()
+
+const callPopup = ref(null)
+const showCallPopup = ref(false)
+const showSmallCallPopup = ref(false)
+
+function toggleCallPopup() {
+  showCallPopup.value = !showCallPopup.value
+  if (showSmallCallPopup.value == undefined) {
+    showSmallCallPopup = !showSmallCallPopup
+  } else {
+    showSmallCallPopup.value = !showSmallCallPopup.value
+  }
+}
+
+const { width, height } = useWindowSize()
+
+let { style } = useDraggable(callPopup, {
+  initialValue: { x: width.value - 350, y: height.value - 250 },
+  preventDefault: true,
+})
+
+const showCallModal = ref(false)
+const callStatus = ref('')
+const phoneNumber = ref('09821259504')
+const callData = ref(null)
+
+const contact = ref({
+  full_name: '',
+  mobile_no: '',
+})
+
+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.',
+)
+
+const showNote = ref(false)
+
+function showNoteWindow() {
+  showNote.value = !showNote.value
+
+  let top = parseInt(callPopup.value.style.top)
+  let updatedTop = 0
+
+  updatedTop = showNote.value ? top - 224 : top + 224
+
+  if (updatedTop < 0) {
+    updatedTop = 10
+  }
+
+  callPopup.value.style.top = updatedTop + 'px'
+}
+
+function showMakeCallModal(number) {
+  showCallModal.value = true
+  phoneNumber.value = 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')
+})
+
+onMounted(() => {
+  $socket.on('exotel_call', (data) => {
+    callData.value = data
+    console.log(data)
+
+    if (
+      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)
+})
+</script>
diff --git a/frontend/src/pages/Notes.vue b/frontend/src/pages/Notes.vue
index 58f39dec..e350296a 100644
--- a/frontend/src/pages/Notes.vue
+++ b/frontend/src/pages/Notes.vue
@@ -55,7 +55,7 @@
           v-if="note.content"
           :content="note.content"
           :editable="false"
-          editor-class="!prose-sm max-w-none !text-sm text-ink-gray-5 focus:outline-none"
+          editor-class="prose-sm text-sm max-w-none text-ink-gray-5 focus:outline-none"
           class="flex-1 overflow-hidden"
         />
         <div class="mt-2 flex items-center justify-between gap-2">