feat: Display "Snoozed Until" time on conversation header (#3028)

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

@@ -12,20 +12,23 @@
         <h3 class="user--name text-truncate">
           {{ currentContact.name }}
         </h3>
-        <woot-button
-          class="user--profile__button"
-          size="small"
-          variant="link"
-          @click="$emit('contact-panel-toggle')"
-        >
-          {{
-            `${
-              isContactPanelOpen
-                ? $t('CONVERSATION.HEADER.CLOSE')
-                : $t('CONVERSATION.HEADER.OPEN')
-            } ${$t('CONVERSATION.HEADER.DETAILS')}`
-          }}
-        </woot-button>
+        <div class="conversation--header--actions">
+          <inbox-name :inbox="inbox" class="margin-right-small" />
+          <span
+            v-if="isSnoozed"
+            class="snoozed--display-text margin-right-small"
+          >
+            {{ snoozedDisplayText }}
+          </span>
+          <woot-button
+            class="user--profile__button margin-right-small"
+            size="small"
+            variant="link"
+            @click="$emit('contact-panel-toggle')"
+          >
+            {{ contactPanelToggleText }}
+          </woot-button>
+        </div>
       </div>
     </div>
     <div
@@ -44,9 +47,13 @@ import agentMixin from '../../../mixins/agentMixin.js';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { hasPressedAltAndOKey } from 'shared/helpers/KeyboardHelpers';
+import wootConstants from '../../../constants';
+import differenceInHours from 'date-fns/differenceInHours';
+import InboxName from '../InboxName';
 
 export default {
   components: {
+    InboxName,
     MoreActions,
     Thumbnail,
   },
@@ -61,39 +68,50 @@ export default {
       default: false,
     },
   },
-
-  data() {
-    return {
-      currentChatAssignee: null,
-      inboxId: null,
-    };
-  },
-
   computed: {
     ...mapGetters({
       uiFlags: 'inboxAssignableAgents/getUIFlags',
       currentChat: 'getSelectedChat',
     }),
-
     chatMetadata() {
       return this.chat.meta;
     },
-
-    inbox() {
-      const { inbox_id: inboxId } = this.chat;
-      const stateInbox = this.$store.getters['inboxes/getInbox'](inboxId);
-      return stateInbox;
-    },
-
     currentContact() {
       return this.$store.getters['contacts/getContact'](
         this.chat.meta.sender.id
       );
     },
-  },
-  mounted() {
-    const { inbox_id: inboxId } = this.chat;
-    this.inboxId = inboxId;
+    isSnoozed() {
+      return this.currentChat.status === wootConstants.STATUS_TYPE.SNOOZED;
+    },
+    snoozedDisplayText() {
+      const { snoozed_until: snoozedUntil } = this.currentChat;
+      if (snoozedUntil) {
+        // When the snooze is applied, it schedules the unsnooze event to next day/week 9AM.
+        // By that logic if the time difference is less than or equal to 24 + 9 hours we can consider it tomorrow.
+        const MAX_TIME_DIFFERENCE = 33;
+        const isSnoozedUntilTomorrow =
+          differenceInHours(new Date(snoozedUntil), new Date()) <=
+          MAX_TIME_DIFFERENCE;
+        return this.$t(
+          isSnoozedUntilTomorrow
+            ? 'CONVERSATION.HEADER.SNOOZED_UNTIL_TOMORROW'
+            : 'CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_WEEK'
+        );
+      }
+      return this.$t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
+    },
+    contactPanelToggleText() {
+      return `${
+        this.isContactPanelOpen
+          ? this.$t('CONVERSATION.HEADER.CLOSE')
+          : this.$t('CONVERSATION.HEADER.OPEN')
+      } ${this.$t('CONVERSATION.HEADER.DETAILS')}`;
+    },
+    inbox() {
+      const { inbox_id: inboxId } = this.chat;
+      return this.$store.getters['inboxes/getInbox'](inboxId);
+    },
   },
 
   methods: {
@@ -129,4 +147,28 @@ export default {
     flex-shrink: 0;
   }
 }
+
+.user--name {
+  display: inline-block;
+  font-size: var(--font-size-medium);
+  line-height: 1.3;
+  margin: 0;
+  text-transform: capitalize;
+  width: 100%;
+}
+
+.conversation--header--actions {
+  align-items: center;
+  display: flex;
+  font-size: var(--font-size-mini);
+
+  .user--profile__button {
+    padding: 0;
+  }
+
+  .snoozed--display-text {
+    font-weight: var(--font-weight-medium);
+    color: var(--y-900);
+  }
+}
 </style>