fix: Update the logic to show read status for web (#6107)

2022-12-21 09:58:56 -08:00 · 2022-12-21 09:58:56 -08:00 · 26ada8b342
commit 26ada8b342
parent 3c6bd2c8fd
5 changed files with 75 additions and 76 deletions
--- 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;
    },
--- 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>
--- 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;
      }
    }
--- 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,
--- 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