From dd441fbfce1ad6cbc218367a3805ec47f963ce04 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 27 Sep 2024 21:19:37 +0530
Subject: [PATCH] fix: show email status read/sent on UI

---
 crm/api/activities.py                         |  2 ++
 .../src/components/Activities/EmailArea.vue   | 22 +++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/crm/api/activities.py b/crm/api/activities.py
index ead84b1f..31d74580 100644
--- a/crm/api/activities.py
+++ b/crm/api/activities.py
@@ -125,6 +125,7 @@ def get_deal_activities(name):
 				"bcc": communication.bcc,
 				"attachments": get_attachments('Communication', communication.name),
 				"read_by_recipient": communication.read_by_recipient,
+				"delivery_status": communication.delivery_status,
 			},
 			"is_lead": False,
 		}
@@ -238,6 +239,7 @@ def get_lead_activities(name):
 				"bcc": communication.bcc,
 				"attachments": get_attachments('Communication', communication.name),
 				"read_by_recipient": communication.read_by_recipient,
+				"delivery_status": communication.delivery_status,
 			},
 			"is_lead": True,
 		}
diff --git a/frontend/src/components/Activities/EmailArea.vue b/frontend/src/components/Activities/EmailArea.vue
index d42db18c..33e11f16 100644
--- a/frontend/src/components/Activities/EmailArea.vue
+++ b/frontend/src/components/Activities/EmailArea.vue
@@ -16,6 +16,12 @@
         />
       </div>
       <div class="flex items-center gap-2 shrink-0">
+        <Badge
+          v-if="status.label"
+          :label="__(status.label)"
+          variant="subtle"
+          :theme="status.color"
+        />
         <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
           <div class="text-sm text-gray-600">
             {{ __(timeAgo(activity.creation)) }}
@@ -87,6 +93,7 @@ import AttachmentItem from '@/components/AttachmentItem.vue'
 import EmailContent from '@/components/Activities/EmailContent.vue'
 import { Badge, Tooltip } from 'frappe-ui'
 import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
+import { computed } from 'vue'
 
 const props = defineProps({
   activity: Object,
@@ -140,4 +147,19 @@ function reply(email, reply_all = false) {
     .focus('start')
     .run()
 }
+
+const status = computed(() => {
+  let _status = props.activity?.data?.delivery_status
+  let indicator_color = 'red'
+  if (['Sent', 'Clicked'].includes(_status)) {
+    indicator_color = 'green'
+  } else if (['Sending', 'Scheduled'].includes(_status)) {
+    indicator_color = 'orange'
+  } else if (['Opened', 'Read'].includes(_status)) {
+    indicator_color = 'blue'
+  } else if (_status == 'Error') {
+    indicator_color = 'red'
+  }
+  return { label: _status, color: indicator_color }
+})
 </script>