From 646cfb97e733c4e2d9e496270ef53e5b1b0a8e1f Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 7 Aug 2024 18:57:29 +0530
Subject: [PATCH] fix: Snooze conversation not working in Inbox view (#9875)

---
 .../components/buttons/ResolveAction.vue      |  4 +-
 .../commands/CmdBarConversationSnooze.vue     | 72 +++++++++++++++++++
 .../routes/dashboard/commands/commandbar.vue  |  6 +-
 .../routes/dashboard/commands/inboxHotKeys.js |  2 +-
 .../conversation/ConversationView.vue         | 61 +---------------
 .../routes/dashboard/inbox/InboxList.vue      |  3 +
 6 files changed, 84 insertions(+), 64 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue

diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 54ddbfb6e..7c4c4daaa 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -54,7 +54,7 @@ const showAdditionalActions = computed(
 );
 
 const showOpenButton = computed(() => {
-  return isResolved.value || isSnoozed.value;
+  return isPending.value || isSnoozed.value;
 });
 
 const getConversationParams = () => {
@@ -208,7 +208,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
             color-scheme="secondary"
             size="small"
             icon="book-clock"
-            @click="() => toggleStatus(STATUS_TYPE.PENDING)"
+            @click="() => toggleStatus(wootConstants.STATUS_TYPE.PENDING)"
           >
             {{ t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
           </woot-button>
diff --git a/app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue b/app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue
new file mode 100644
index 000000000..529b624b0
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { getUnixTime } from 'date-fns';
+import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
+import { CMD_SNOOZE_CONVERSATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+import wootConstants from 'dashboard/constants/globals';
+import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
+
+const store = useStore();
+const getters = useStoreGetters();
+const { t } = useI18n();
+const showCustomSnoozeModal = ref(false);
+
+const selectedChat = computed(() => getters.getSelectedChat.value);
+const contextMenuChatId = computed(() => getters.getContextMenuChatId.value);
+
+const toggleStatus = async (status, snoozedUntil) => {
+  await store.dispatch('toggleStatus', {
+    conversationId: selectedChat.value?.id || contextMenuChatId.value,
+    status,
+    snoozedUntil,
+  });
+  store.dispatch('setContextMenuChatId', null);
+  useAlert(t('CONVERSATION.CHANGE_STATUS'));
+};
+
+const onCmdSnoozeConversation = snoozeType => {
+  if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
+    showCustomSnoozeModal.value = true;
+  } else {
+    toggleStatus(
+      wootConstants.STATUS_TYPE.SNOOZED,
+      findSnoozeTime(snoozeType) || null
+    );
+  }
+};
+
+const chooseSnoozeTime = customSnoozeTime => {
+  showCustomSnoozeModal.value = false;
+  if (customSnoozeTime) {
+    toggleStatus(
+      wootConstants.STATUS_TYPE.SNOOZED,
+      getUnixTime(customSnoozeTime)
+    );
+  }
+};
+
+const hideCustomSnoozeModal = () => {
+  // if we select custom snooze and the custom snooze modal is open
+  // Then if the custom snooze modal is closed then set the context menu chat id to null
+  store.dispatch('setContextMenuChatId', null);
+  showCustomSnoozeModal.value = false;
+};
+
+useEmitter(CMD_SNOOZE_CONVERSATION, onCmdSnoozeConversation);
+</script>
+
+<template>
+  <woot-modal
+    :show.sync="showCustomSnoozeModal"
+    :on-close="hideCustomSnoozeModal"
+  >
+    <CustomSnoozeModal
+      @close="hideCustomSnoozeModal"
+      @chooseTime="chooseSnoozeTime"
+    />
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
index dcc25e223..dff1f53f4 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/attribute-hyphenation -->
 <script>
 import '@chatwoot/ninja-keys';
 import wootConstants from 'dashboard/constants/globals';
@@ -97,11 +96,12 @@ export default {
 };
 </script>
 
+<!-- eslint-disable vue/attribute-hyphenation -->
 <template>
   <ninja-keys
     ref="ninjakeys"
-    no-auto-load-md-icons
-    hide-breadcrumbs
+    noAutoLoadMdIcons
+    hideBreadcrumbs
     :placeholder="placeholder"
     @selected="onSelected"
     @closed="onClosed"
diff --git a/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js b/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js
index d83f00f51..37b1986f0 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js
+++ b/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js
@@ -53,7 +53,7 @@ const INBOX_SNOOZE_EVENTS = [
   },
   {
     id: SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME,
-    title: 'COMMAND_BAR.COMMANDS.CUSTOM',
+    title: 'COMMAND_BAR.COMMANDS.UNTIL_CUSTOM_TIME',
     section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
     parent: 'snooze_notification',
     icon: ICON_SNOOZE_NOTIFICATION,
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index a4838a482..48b7ec89f 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -1,23 +1,19 @@
 <script>
 import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-import { getUnixTime } from 'date-fns';
 import ChatList from '../../../components/ChatList.vue';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
 import PopOverSearch from './search/PopOverSearch.vue';
-import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { CMD_SNOOZE_CONVERSATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
-import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
+import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 
 export default {
   components: {
     ChatList,
     ConversationBox,
     PopOverSearch,
-    CustomSnoozeModal,
+    CmdBarConversationSnooze,
   },
   props: {
     inboxId: {
@@ -56,14 +52,12 @@ export default {
   data() {
     return {
       showSearchModal: false,
-      showCustomSnoozeModal: false,
     };
   },
   computed: {
     ...mapGetters({
       chatList: 'getAllConversations',
       currentChat: 'getSelectedChat',
-      contextMenuChatId: 'getContextMenuChatId',
     }),
     showConversationList() {
       return this.isOnExpandedLayout ? !this.conversationId : true;
@@ -100,10 +94,6 @@ export default {
     this.$watch('chatList.length', () => {
       this.setActiveChat();
     });
-    this.$emitter.on(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
-  },
-  beforeDestroy() {
-    this.$emitter.off(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
   },
 
   methods: {
@@ -178,43 +168,6 @@ export default {
     closeSearch() {
       this.showSearchModal = false;
     },
-    onCmdSnoozeConversation(snoozeType) {
-      if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
-        this.showCustomSnoozeModal = true;
-      } else {
-        this.toggleStatus(
-          wootConstants.STATUS_TYPE.SNOOZED,
-          findSnoozeTime(snoozeType) || null
-        );
-      }
-    },
-    chooseSnoozeTime(customSnoozeTime) {
-      this.showCustomSnoozeModal = false;
-      if (customSnoozeTime) {
-        this.toggleStatus(
-          wootConstants.STATUS_TYPE.SNOOZED,
-          getUnixTime(customSnoozeTime)
-        );
-      }
-    },
-    toggleStatus(status, snoozedUntil) {
-      this.$store
-        .dispatch('toggleStatus', {
-          conversationId: this.currentChat?.id || this.contextMenuChatId,
-          status,
-          snoozedUntil,
-        })
-        .then(() => {
-          this.$store.dispatch('setContextMenuChatId', null);
-          useAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
-        });
-    },
-    hideCustomSnoozeModal() {
-      // if we select custom snooze and the custom snooze modal is open
-      // Then if the custom snooze modal is closed then set the context menu chat id to null
-      this.$store.dispatch('setContextMenuChatId', null);
-      this.showCustomSnoozeModal = false;
-    },
   },
 };
 </script>
@@ -243,15 +196,7 @@ export default {
       :is-on-expanded-layout="isOnExpandedLayout"
       @contactPanelToggle="onToggleContactPanel"
     />
-    <woot-modal
-      :show.sync="showCustomSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <CustomSnoozeModal
-        @close="hideCustomSnoozeModal"
-        @chooseTime="chooseSnoozeTime"
-      />
-    </woot-modal>
+    <CmdBarConversationSnooze />
   </section>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index fe025ff8d..2093d6b05 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -8,12 +8,14 @@ import InboxCard from './components/InboxCard.vue';
 import InboxListHeader from './components/InboxListHeader.vue';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
+import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 
 export default {
   components: {
     InboxCard,
     InboxListHeader,
     IntersectionObserver,
+    CmdBarConversationSnooze,
   },
   setup() {
     const { uiSettings } = useUISettings();
@@ -209,5 +211,6 @@ export default {
       </div>
     </div>
     <router-view />
+    <CmdBarConversationSnooze />
   </section>
 </template>