From 61c8b16ff1f7d9fc63c4d043f1cdcfd92ba9751d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 17 Apr 2024 15:24:55 +0530
Subject: [PATCH] feat: added whatsapp messages on lead/deal page in whatsapp
 tab

---
 crm/api/activities.py                         |  9 +++++
 frontend/src/components/Activities.vue        | 36 +++++++++++++++++
 frontend/src/components/Icons/CheckIcon.vue   | 16 ++++++++
 .../src/components/Icons/DoubleCheckIcon.vue  | 17 ++++++++
 .../src/components/Icons/WhatsAppIcon.vue     | 28 +++++++++++++
 frontend/src/components/WhatsAppArea.vue      | 40 +++++++++++++++++++
 frontend/src/pages/Deal.vue                   |  6 +++
 frontend/src/pages/Lead.vue                   |  6 +++
 8 files changed, 158 insertions(+)
 create mode 100644 frontend/src/components/Icons/CheckIcon.vue
 create mode 100644 frontend/src/components/Icons/DoubleCheckIcon.vue
 create mode 100644 frontend/src/components/Icons/WhatsAppIcon.vue
 create mode 100644 frontend/src/components/WhatsAppArea.vue

diff --git a/crm/api/activities.py b/crm/api/activities.py
index d04678d2..d3a3a63a 100644
--- a/crm/api/activities.py
+++ b/crm/api/activities.py
@@ -336,3 +336,12 @@ def get_linked_tasks(name):
 		],
 	)
 	return tasks or []
+
+@frappe.whitelist()
+def get_whatsapp_messages(name):
+	whatsapp_messages = frappe.db.get_all(
+		"WhatsApp Message",
+		filters={"reference_doctype": "CRM Lead", "reference_name": name, "status": ("not in", ["failed", "Success"])},
+		fields=["name", "type", "to", "from", "content_type", "creation", "message", "status"],
+	)
+	return whatsapp_messages or []
\ No newline at end of file
diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index 8075a792..829468a4 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -35,6 +35,16 @@
       </template>
       <span>{{ __('New Task') }}</span>
     </Button>
+    <Button
+      v-else-if="title == 'WhatsApp'"
+      variant="solid"
+      @click="$refs.whatsappBox.show = true"
+    >
+      <template #prefix>
+        <FeatherIcon name="plus" class="h-4 w-4" />
+      </template>
+      <span>{{ __('New WhatsApp Message') }}</span>
+    </Button>
     <Dropdown
       v-else
       :options="[
@@ -58,6 +68,11 @@
           label: __('New Task'),
           onClick: () => showTask(),
         },
+        {
+          icon: h(WhatsAppIcon, { class: 'h-4 w-4' }),
+          label: __('New WhatsApp Message'),
+          onClick: () => ($refs.emailBox.show = true),
+        },
       ]"
       @click.stop
     >
@@ -338,6 +353,11 @@
         </div>
       </div>
     </div>
+    <WhatsAppArea
+      v-else-if="title == 'WhatsApp'"
+      class="px-10"
+      :messages="activities"
+    />
     <div v-else v-for="(activity, i) in activities" class="activity">
       <div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-10">
         <div
@@ -768,6 +788,8 @@ import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import TaskIcon from '@/components/Icons/TaskIcon.vue'
+import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
+import WhatsAppArea from '@/components/WhatsAppArea.vue'
 import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
 import DurationIcon from '@/components/Icons/DurationIcon.vue'
 import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
@@ -875,6 +897,13 @@ const all_activities = createResource({
   },
 })
 
+const whatsappMessages = createResource({
+  url: 'crm.api.activities.get_whatsapp_messages',
+  params: { name: doc.value.data.name },
+  cache: ['whatsapp', doc.value.data.name],
+  auto: true,
+})
+
 function get_activities() {
   if (!all_activities.data?.versions) return []
   if (!all_activities.data?.calls.length)
@@ -900,6 +929,9 @@ const activities = computed(() => {
   } else if (props.title == 'Notes') {
     if (!all_activities.data?.notes) return []
     return sortByCreation(all_activities.data.notes)
+  } else if (props.title == 'WhatsApp') {
+    if (!whatsappMessages.data) return []
+    return sortByCreation(whatsappMessages.data)
   }
   activities.forEach((activity) => {
     activity.icon = timelineIcon(activity.activity_type, activity.is_lead)
@@ -958,6 +990,8 @@ const emptyText = computed(() => {
     text = 'No Notes'
   } else if (props.title == 'Tasks') {
     text = 'No Tasks'
+  } else if (props.title == 'WhatsApp') {
+    text = 'No WhatsApp Messages'
   }
   return text
 })
@@ -972,6 +1006,8 @@ const emptyTextIcon = computed(() => {
     icon = NoteIcon
   } else if (props.title == 'Tasks') {
     icon = TaskIcon
+  } else if (props.title == 'WhatsApp') {
+    icon = WhatsAppIcon
   }
   return h(icon, { class: 'text-gray-500' })
 })
diff --git a/frontend/src/components/Icons/CheckIcon.vue b/frontend/src/components/Icons/CheckIcon.vue
new file mode 100644
index 00000000..ad94e5df
--- /dev/null
+++ b/frontend/src/components/Icons/CheckIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-check"
+  >
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/DoubleCheckIcon.vue b/frontend/src/components/Icons/DoubleCheckIcon.vue
new file mode 100644
index 00000000..77b7a478
--- /dev/null
+++ b/frontend/src/components/Icons/DoubleCheckIcon.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-check-check"
+  >
+    <path d="M18 6 7 17l-5-5" />
+    <path d="m22 10-7.5 7.5L13 16" />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/WhatsAppIcon.vue b/frontend/src/components/Icons/WhatsAppIcon.vue
new file mode 100644
index 00000000..1b8cdcfe
--- /dev/null
+++ b/frontend/src/components/Icons/WhatsAppIcon.vue
@@ -0,0 +1,28 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6 15.5C7.5 16.5 10.3367 17.2101 12.0757 16.7964C13.8147 16.3826 15.3488 15.3614 16.4015 13.9167C17.4541 12.472 17.9562 10.6988 17.8172 8.91668C17.6781 7.13456 16.9072 5.46069 15.6432 4.19671C14.3792 2.93273 12.7053 2.16176 10.9232 2.02273C9.14108 1.8837 7.36789 2.38575 5.92318 3.43842C4.47847 4.49109 3.45724 6.02514 3.04352 7.76414C2.62979 9.50314 3 12 4 13.5L2.5 17L6 15.5Z"
+      stroke="currentColor"
+      stroke-width="1"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.3355 12.3844L12 11.5C12.4877 11.0123 12.775 11.209 13.4481 11.4793C13.4824 11.4931 13.515 11.5112 13.5445 11.5333L13.8563 11.7664C14.0434 11.8987 14.0487 12.1733 13.8668 12.3126L13.2106 12.8153C12.9462 13.0178 12.5923 13.0604 12.2947 12.91C11.5548 12.536 10.1264 11.74 9.11332 10.7151C8.13237 9.72267 7.42487 8.40546 7.07965 7.68204C6.92664 7.3614 7.0003 6.98556 7.24735 6.72951L7.85039 6.10451C8.00431 5.94497 8.26796 5.97191 8.38609 6.15923L8.79347 6.72951C9.11332 7.24052 8.65816 7.67639 8.38609 7.85843L7.5 8.49417"
+      fill="currentColor"
+    />
+    <path
+      d="M11.3355 12.3844L12 11.5C12.4877 11.0123 12.775 11.209 13.4481 11.4793C13.4824 11.4931 13.515 11.5112 13.5445 11.5333L13.8563 11.7664C14.0434 11.8987 14.0487 12.1733 13.8668 12.3126L13.2106 12.8153C12.9462 13.0178 12.5923 13.0604 12.2947 12.91C11.5548 12.536 10.1264 11.74 9.11332 10.7151C8.13237 9.72267 7.42487 8.40546 7.07965 7.68204C6.92664 7.3614 7.0003 6.98556 7.24735 6.72951L7.85039 6.10451C8.00431 5.94497 8.26796 5.97191 8.38609 6.15923L8.79347 6.72951C9.11332 7.24052 8.65816 7.67639 8.38609 7.85843L7.5 8.49417"
+      stroke="currentColor"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/WhatsAppArea.vue b/frontend/src/components/WhatsAppArea.vue
new file mode 100644
index 00000000..8b70a49e
--- /dev/null
+++ b/frontend/src/components/WhatsAppArea.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div
+      v-for="whatsapp in messages"
+      :key="whatsapp.name"
+      class="flex"
+      :class="{ 'justify-end': whatsapp.type == 'Outgoing' }"
+    >
+      <div
+        class="mb-3 inline-flex max-w-[90%] gap-2 rounded-md bg-gray-50 p-2 text-base shadow-sm"
+      >
+        <div>{{ whatsapp.message }}</div>
+        <div class="-mb-1 flex items-end gap-1 text-gray-600 shrink-0">
+          <Tooltip :text="dateFormat(whatsapp.creation, 'ddd, MMM D, YYYY')">
+            <div class="text-2xs">{{ dateFormat(whatsapp.creation, 'hh:mm a') }}</div>
+          </Tooltip>
+          <div v-if="whatsapp.type == 'Outgoing'">
+            <CheckIcon v-if="whatsapp.status == 'sent'" class="size-4" />
+            <DoubleCheckIcon
+              v-else-if="['read', 'delivered'].includes(whatsapp.status)"
+              class="size-4"
+              :class="{ 'text-blue-500': whatsapp.status == 'read' }"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import CheckIcon from '@/components/Icons/CheckIcon.vue'
+import DoubleCheckIcon from '@/components/Icons/DoubleCheckIcon.vue'
+import { Tooltip } from 'frappe-ui'
+import { dateFormat } from '@/utils'
+
+const props = defineProps({
+  messages: Array,
+})
+</script>
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 2d2345df..607b770f 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -293,6 +293,7 @@ import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
+import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import LinkIcon from '@/components/Icons/LinkIcon.vue'
 import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
@@ -459,6 +460,11 @@ const tabs = [
     label: __('Notes'),
     icon: NoteIcon,
   },
+  {
+    name: 'WhatsApp',
+    label: __('WhatsApp'),
+    icon: WhatsAppIcon,
+  },
 ]
 
 const detailSections = computed(() => {
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index cf22dc8c..aa743872 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -260,6 +260,7 @@ import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
+import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import LinkIcon from '@/components/Icons/LinkIcon.vue'
@@ -423,6 +424,11 @@ const tabs = [
     label: __('Notes'),
     icon: NoteIcon,
   },
+  {
+    name: 'WhatsApp',
+    label: __('WhatsApp'),
+    icon: WhatsAppIcon,
+  },
 ]
 
 function validateFile(file) {