feat: Read/Delivery status for Whatsapp Cloud API (#5157)

Process field statuses received in webhook WhatsApp cloud API

ref: #1021

Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>

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

@@ -59,10 +59,12 @@
           :story-sender="storySender"
           :story-id="storyId"
           :is-a-tweet="isATweet"
+          :is-a-whatsapp-channel="isAWhatsAppChannel"
           :has-instagram-story="hasInstagramStory"
           :is-email="isEmailContentType"
           :is-private="data.private"
           :message-type="data.message_type"
+          :message-status="status"
           :readable-time="readableTime"
           :source-id="data.source_id"
           :inbox-id="data.inbox_id"
@@ -157,6 +159,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isAWhatsAppChannel: {
+      type: Boolean,
+      default: false,
+    },
     hasInstagramStory: {
       type: Boolean,
       default: false,
@@ -231,6 +237,9 @@ export default {
     sender() {
       return this.data.sender || {};
     },
+    status() {
+      return this.data.status;
+    },
     storySender() {
       return this.contentAttributes.story_sender || null;
     },

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

@@ -38,6 +38,7 @@
         class="message--read ph-no-capture"
         :data="message"
         :is-a-tweet="isATweet"
+        :is-a-whatsapp-channel="isAWhatsAppChannel"
         :has-instagram-story="hasInstagramStory"
         :has-user-read-message="
           hasUserReadMessage(message.created_at, getLastSeenAt)
@@ -60,6 +61,7 @@
         class="message--unread ph-no-capture"
         :data="message"
         :is-a-tweet="isATweet"
+        :is-a-whatsapp-channel="isAWhatsAppChannel"
         :has-instagram-story="hasInstagramStory"
         :has-user-read-message="
           hasUserReadMessage(message.created_at, getLastSeenAt)

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -3,20 +3,30 @@
     <span class="time" :class="{ delivered: messageRead }">{{
       readableTime
     }}</span>
-    <span v-if="showSentIndicator" class="time">
+    <span v-if="showReadIndicator" class="read-indicator-wrap">
       <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.SENT')"
-        icon="checkmark"
+        v-tooltip.top-start="$t('CHAT_LIST.MESSAGE_READ')"
+        icon="checkmark-double"
+        class="action--icon read-tick read-indicator"
+        size="14"
+      />
+    </span>
+    <span v-if="showDeliveredIndicator" class="read-indicator-wrap">
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.DELIVERED')"
+        icon="checkmark-double"
+        class="action--icon read-tick"
+        size="14"
+      />
+    </span>
+    <span v-if="showSentIndicator" class="read-indicator-wrap">
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.SENT')"
+        icon="checkmark"
+        class="action--icon read-tick"
         size="14"
       />
     </span>
-    <fluent-icon
-      v-if="messageRead"
-      v-tooltip.top-start="$t('CHAT_LIST.MESSAGE_READ')"
-      icon="checkmark-double"
-      class="action--icon read-tick"
-      size="12"
-    />
     <fluent-icon
       v-if="isEmail"
       v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
@@ -74,7 +84,7 @@
 </template>
 
 <script>
-import { MESSAGE_TYPE } from 'shared/constants/messages';
+import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import inboxMixin from 'shared/mixins/inboxMixin';
 
@@ -117,6 +127,10 @@ export default {
       type: Number,
       default: 1,
     },
+    messageStatus: {
+      type: String,
+      default: '',
+    },
     sourceId: {
       type: String,
       default: '',
@@ -144,6 +158,15 @@ export default {
     isOutgoing() {
       return MESSAGE_TYPE.OUTGOING === this.messageType;
     },
+    isDelivered() {
+      return MESSAGE_STATUS.DELIVERED === this.messageStatus;
+    },
+    isRead() {
+      return MESSAGE_STATUS.READ === this.messageStatus;
+    },
+    isSent() {
+      return MESSAGE_STATUS.SENT === this.messageStatus;
+    },
     screenName() {
       const { additional_attributes: additionalAttributes = {} } =
         this.sender || {};
@@ -168,7 +191,23 @@ export default {
       return (
         this.isOutgoing &&
         this.sourceId &&
-        (this.isAnEmailChannel || this.isAWhatsAppChannel)
+        (this.isAnEmailChannel || (this.isAWhatsAppChannel && this.isSent))
+      );
+    },
+    showDeliveredIndicator() {
+      return (
+        this.isOutgoing &&
+        this.sourceId &&
+        this.isAWhatsAppChannel &&
+        this.isDelivered
+      );
+    },
+    showReadIndicator() {
+      return (
+        this.isOutgoing &&
+        this.sourceId &&
+        this.isAWhatsAppChannel &&
+        this.isRead
       );
     },
   },
@@ -185,16 +224,20 @@ export default {
 
 .right {
   .message-text--metadata {
+    align-items: center;
     .time {
       color: var(--w-100);
     }
 
     .action--icon {
+      color: var(--white);
       &.read-tick {
         color: var(--v-100);
-        margin-top: calc(var(--space-micro) + var(--space-micro) / 2);
       }
-      color: var(--white);
+
+      &.read-indicator {
+        color: var(--g-300);
+      }
     }
 
     .lock--icon--private {
@@ -296,4 +339,10 @@ export default {
 .delivered-icon {
   margin-left: -var(--space-normal);
 }
+
+.read-indicator-wrap {
+  line-height: 1;
+  display: flex;
+  align-items: center;
+}
 </style>