From a3e5aad753568efa71691e29da8e4a443ef9efc7 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Wed, 21 Dec 2022 09:58:56 -0800
Subject: [PATCH] fix: Update the logic to show read status for web (#6107)

---
 .../widgets/conversation/Message.vue          |  35 +-----
 .../widgets/conversation/MessagesView.vue     |   6 -
 .../widgets/conversation/bubble/Actions.vue   | 103 ++++++++++++------
 .../widgets/conversation/bubble/Text.vue      |   4 -
 .../dashboard/mixins/conversations.js         |   3 -
 5 files changed, 75 insertions(+), 76 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 35dec8322..cccadf160 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -15,7 +15,6 @@
           v-if="data.content"
           :message="message"
           :is-email="isEmailContentType"
-          :readable-time="readableTime"
           :display-quoted-button="displayQuotedButton"
         />
         <span
@@ -29,7 +28,6 @@
             <bubble-image
               v-if="attachment.file_type === 'image' && !hasImageError"
               :url="attachment.data_url"
-              :readable-time="readableTime"
               @error="onImageLoadError"
             />
             <audio v-else-if="attachment.file_type === 'audio'" controls>
@@ -38,7 +36,6 @@
             <bubble-video
               v-else-if="attachment.file_type === 'video'"
               :url="attachment.data_url"
-              :readable-time="readableTime"
             />
             <bubble-location
               v-else-if="attachment.file_type === 'location'"
@@ -46,11 +43,7 @@
               :longitude="attachment.coordinates_long"
               :name="attachment.fallback_title"
             />
-            <bubble-file
-              v-else
-              :url="attachment.data_url"
-              :readable-time="readableTime"
-            />
+            <bubble-file v-else :url="attachment.data_url" />
           </div>
         </div>
         <bubble-actions
@@ -65,10 +58,9 @@
           :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"
-          :message-read="showReadTicks"
+          :created-at="createdAt"
         />
       </div>
       <spinner v-if="isPending" size="tiny" />
@@ -119,8 +111,6 @@
 </template>
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import timeMixin from '../../../mixins/time';
-
 import BubbleMailHead from './bubble/MailHead';
 import BubbleText from './bubble/Text';
 import BubbleImage from './bubble/Image';
@@ -149,7 +139,7 @@ export default {
     ContextMenu,
     Spinner,
   },
-  mixins: [alertMixin, timeMixin, messageFormatterMixin, contentTypeMixin],
+  mixins: [alertMixin, messageFormatterMixin, contentTypeMixin],
   props: {
     data: {
       type: Object,
@@ -167,10 +157,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    hasUserReadMessage: {
-      type: Boolean,
-      default: false,
-    },
     isWebWidgetInbox: {
       type: Boolean,
       default: false,
@@ -273,11 +259,8 @@ export default {
         'has-tweet-menu': this.isATweet,
       };
     },
-    readableTime() {
-      return this.messageStamp(
-        this.contentAttributes.external_created_at || this.data.created_at,
-        'LLL d, h:mm a'
-      );
+    createdAt() {
+      return this.contentAttributes.external_created_at || this.data.created_at;
     },
     isBubble() {
       return [0, 1, 3].includes(this.data.message_type);
@@ -288,14 +271,6 @@ export default {
     isOutgoing() {
       return this.data.message_type === MESSAGE_TYPE.OUTGOING;
     },
-    showReadTicks() {
-      return (
-        (this.isOutgoing || this.isTemplate) &&
-        this.hasUserReadMessage &&
-        this.isWebWidgetInbox &&
-        !this.data.private
-      );
-    },
     isTemplate() {
       return this.data.message_type === MESSAGE_TYPE.TEMPLATE;
     },
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 9df60200e..dad2b28a0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -40,9 +40,6 @@
         :is-a-tweet="isATweet"
         :is-a-whatsapp-channel="isAWhatsAppChannel"
         :has-instagram-story="hasInstagramStory"
-        :has-user-read-message="
-          hasUserReadMessage(message.created_at, getLastSeenAt)
-        "
         :is-web-widget-inbox="isAWebWidgetInbox"
       />
       <li v-show="unreadMessageCount != 0" class="unread--toast">
@@ -63,9 +60,6 @@
         :is-a-tweet="isATweet"
         :is-a-whatsapp-channel="isAWhatsAppChannel"
         :has-instagram-story="hasInstagramStory"
-        :has-user-read-message="
-          hasUserReadMessage(message.created_at, getLastSeenAt)
-        "
         :is-web-widget-inbox="isAWebWidgetInbox"
       />
     </ul>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index e2bc6d0dc..d5423929b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -1,8 +1,14 @@
 <template>
   <div class="message-text--metadata">
-    <span class="time" :class="{ delivered: messageRead }">{{
-      readableTime
-    }}</span>
+    <span
+      class="time"
+      :class="{
+        'has-status-icon':
+          showSentIndicator || showDeliveredIndicator || showReadIndicator,
+      }"
+    >
+      {{ readableTime }}
+    </span>
     <span v-if="showReadIndicator" class="read-indicator-wrap">
       <fluent-icon
         v-tooltip.top-start="$t('CHAT_LIST.MESSAGE_READ')"
@@ -11,7 +17,7 @@
         size="14"
       />
     </span>
-    <span v-if="showDeliveredIndicator" class="read-indicator-wrap">
+    <span v-else-if="showDeliveredIndicator" class="read-indicator-wrap">
       <fluent-icon
         v-tooltip.top-start="$t('CHAT_LIST.DELIVERED')"
         icon="checkmark-double"
@@ -19,7 +25,7 @@
         size="14"
       />
     </span>
-    <span v-if="showSentIndicator" class="read-indicator-wrap">
+    <span v-else-if="showSentIndicator" class="read-indicator-wrap">
       <fluent-icon
         v-tooltip.top-start="$t('CHAT_LIST.SENT')"
         icon="checkmark"
@@ -74,17 +80,19 @@
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import inboxMixin from 'shared/mixins/inboxMixin';
+import { mapGetters } from 'vuex';
+import timeMixin from '../../../../mixins/time';
 
 export default {
-  mixins: [inboxMixin],
+  mixins: [inboxMixin, timeMixin],
   props: {
     sender: {
       type: Object,
       default: () => ({}),
     },
-    readableTime: {
-      type: String,
-      default: '',
+    createdAt: {
+      type: Number,
+      default: 0,
     },
     storySender: {
       type: String,
@@ -130,12 +138,9 @@ export default {
       type: [String, Number],
       default: 0,
     },
-    messageRead: {
-      type: Boolean,
-      default: false,
-    },
   },
   computed: {
+    ...mapGetters({ currentChat: 'getSelectedChat' }),
     inbox() {
       return this.$store.getters['inboxes/getInbox'](this.inboxId);
     },
@@ -145,6 +150,9 @@ export default {
     isOutgoing() {
       return MESSAGE_TYPE.OUTGOING === this.messageType;
     },
+    isTemplate() {
+      return MESSAGE_TYPE.TEMPLATE === this.messageType;
+    },
     isDelivered() {
       return MESSAGE_STATUS.DELIVERED === this.messageStatus;
     },
@@ -154,6 +162,9 @@ export default {
     isSent() {
       return MESSAGE_STATUS.SENT === this.messageStatus;
     },
+    readableTime() {
+      return this.messageStamp(this.createdAt, 'LLL d, h:mm a');
+    },
     screenName() {
       const { additional_attributes: additionalAttributes = {} } =
         this.sender || {};
@@ -174,28 +185,52 @@ export default {
       const { storySender, storyId } = this;
       return `https://www.instagram.com/stories/${storySender}/${storyId}`;
     },
+    showStatusIndicators() {
+      if ((this.isOutgoing || this.isTemplate) && !this.private) {
+        return true;
+      }
+      return false;
+    },
     showSentIndicator() {
-      return (
-        this.isOutgoing &&
-        this.sourceId &&
-        (this.isAnEmailChannel || (this.isAWhatsAppChannel && this.isSent))
-      );
+      if (!this.showStatusIndicators) {
+        return false;
+      }
+
+      if (this.isAnEmailChannel) {
+        return !!this.sourceId;
+      }
+
+      if (this.isAWhatsAppChannel) {
+        return this.sourceId && this.isSent;
+      }
+      return false;
     },
     showDeliveredIndicator() {
-      return (
-        this.isOutgoing &&
-        this.sourceId &&
-        this.isAWhatsAppChannel &&
-        this.isDelivered
-      );
+      if (!this.showStatusIndicators) {
+        return false;
+      }
+
+      if (this.isAWhatsAppChannel) {
+        return this.sourceId && this.isDelivered;
+      }
+
+      return false;
     },
     showReadIndicator() {
-      return (
-        this.isOutgoing &&
-        this.sourceId &&
-        this.isAWhatsAppChannel &&
-        this.isRead
-      );
+      if (!this.showStatusIndicators) {
+        return false;
+      }
+
+      if (this.isAWebWidgetInbox) {
+        const { contact_last_seen_at: contactLastSeenAt } = this.currentChat;
+        return contactLastSeenAt >= this.createdAt;
+      }
+
+      if (this.isAWhatsAppChannel) {
+        return this.sourceId && this.isRead;
+      }
+
+      return false;
     },
   },
   methods: {
@@ -218,12 +253,13 @@ export default {
 
     .action--icon {
       color: var(--white);
+
       &.read-tick {
         color: var(--v-100);
       }
 
       &.read-indicator {
-        color: var(--g-300);
+        color: var(--g-200);
       }
     }
 
@@ -288,8 +324,9 @@ export default {
       position: absolute;
       right: var(--space-small);
       white-space: nowrap;
-      &.delivered {
-        right: var(--space-medium);
+
+      &.has-status-icon {
+        right: var(--space-large);
         line-height: 2;
       }
     }
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
index 6bf9cdc65..e5294db99 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -35,10 +35,6 @@ export default {
       type: String,
       default: '',
     },
-    readableTime: {
-      type: String,
-      default: '',
-    },
     isEmail: {
       type: Boolean,
       default: true,
diff --git a/app/javascript/dashboard/mixins/conversations.js b/app/javascript/dashboard/mixins/conversations.js
index 85797a9bc..f7420c144 100644
--- a/app/javascript/dashboard/mixins/conversations.js
+++ b/app/javascript/dashboard/mixins/conversations.js
@@ -34,9 +34,6 @@ export default {
         lastNonActivityMessageFromAPI
       );
     },
-    hasUserReadMessage(createdAt, contactLastSeen) {
-      return !(contactLastSeen - createdAt < 0);
-    },
     readMessages(m) {
       return m.messages.filter(
         chat => chat.created_at * 1000 <= m.agent_last_seen_at * 1000