feat: Move snooze actions to command bar (#7343)

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -59,51 +59,16 @@
           >
             {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
           </woot-button>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="snooze"
+            @click="() => openSnoozeModal()"
+          >
+            {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
+          </woot-button>
         </woot-dropdown-item>
-
-        <woot-dropdown-divider v-if="isOpen" />
-        <woot-dropdown-sub-menu
-          v-if="isOpen"
-          :title="this.$t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE.TITLE')"
-        >
-          <woot-dropdown-item>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="send-clock"
-              @click="() => toggleStatus(STATUS_TYPE.SNOOZED, null)"
-            >
-              {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE.NEXT_REPLY') }}
-            </woot-button>
-          </woot-dropdown-item>
-          <woot-dropdown-item>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="dual-screen-clock"
-              @click="
-                () => toggleStatus(STATUS_TYPE.SNOOZED, snoozeTimes.tomorrow)
-              "
-            >
-              {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE.TOMORROW') }}
-            </woot-button>
-          </woot-dropdown-item>
-          <woot-dropdown-item>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="calendar-clock"
-              @click="
-                () => toggleStatus(STATUS_TYPE.SNOOZED, snoozeTimes.nextWeek)
-              "
-            >
-              {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE.NEXT_WEEK') }}
-            </woot-button>
-          </woot-dropdown-item>
-        </woot-dropdown-sub-menu>
       </woot-dropdown-menu>
     </div>
   </div>
@@ -122,9 +87,7 @@ import {
 } from 'shared/helpers/KeyboardHelpers';
 
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownSubMenu from 'shared/components/ui/dropdown/DropdownSubMenu.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider';
 
 import wootConstants from 'dashboard/constants/globals';
 import {
@@ -137,8 +100,6 @@ export default {
   components: {
     WootDropdownItem,
     WootDropdownMenu,
-    WootDropdownSubMenu,
-    WootDropdownDivider,
   },
   mixins: [clickaway, alertMixin, eventListenerMixins, snoozeTimesMixin],
   props: { conversationId: { type: [String, Number], required: true } },
@@ -252,6 +213,10 @@ export default {
           this.isLoading = false;
         });
     },
+    openSnoozeModal() {
+      const ninja = document.querySelector('ninja-keys');
+      ninja.open({ parent: 'snooze_conversation' });
+    },
   },
 };
 </script>
@@ -270,5 +235,9 @@ export default {
   right: 0;
   max-width: 20rem;
   min-width: 15.6rem;
+
+  .dropdown-menu__item {
+    margin-bottom: 0;
+  }
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue

@@ -15,14 +15,13 @@
         @click="toggleStatus(option.key, null)"
       />
     </template>
-    <menu-item-with-submenu :option="snoozeMenuConfig">
-      <menu-item
-        v-for="(option, i) in snoozeMenuConfig.options"
-        :key="i"
-        :option="option"
-        @click="snoozeConversation(option.snoozedUntil)"
-      />
-    </menu-item-with-submenu>
+    <menu-item
+      v-if="show(snoozeOption.key)"
+      :option="snoozeOption"
+      variant="icon"
+      @click="snoozeConversation()"
+    />
+
     <menu-item-with-submenu :option="priorityConfig">
       <menu-item
         v-for="(option, i) in priorityConfig.options"
@@ -78,7 +77,6 @@
 import MenuItem from './menuItem.vue';
 import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
 import wootConstants from 'dashboard/constants/globals';
-import snoozeTimesMixin from 'dashboard/mixins/conversation/snoozeTimesMixin';
 import agentMixin from 'dashboard/mixins/agentMixin';
 import { mapGetters } from 'vuex';
 import AgentLoadingPlaceholder from './agentLoadingPlaceholder.vue';
@@ -88,7 +86,7 @@ export default {
     MenuItemWithSubmenu,
     AgentLoadingPlaceholder,
   },
-  mixins: [snoozeTimesMixin, agentMixin],
+  mixins: [agentMixin],
   props: {
     status: {
       type: String,
@@ -131,27 +129,10 @@ export default {
           icon: 'arrow-redo',
         },
       ],
-      snoozeMenuConfig: {
-        key: 'snooze',
+      snoozeOption: {
+        key: wootConstants.STATUS_TYPE.SNOOZED,
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.SNOOZE.TITLE'),
         icon: 'snooze',
-        options: [
-          {
-            label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.SNOOZE.NEXT_REPLY'),
-            key: 'next-reply',
-            snoozedUntil: null,
-          },
-          {
-            label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.SNOOZE.TOMORROW'),
-            key: 'tomorrow',
-            snoozedUntil: 'tomorrow',
-          },
-          {
-            label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.SNOOZE.NEXT_WEEK'),
-            key: 'next-week',
-            snoozedUntil: 'nextWeek',
-          },
-        ],
       },
       priorityConfig: {
         key: 'priority',
@@ -234,12 +215,9 @@ export default {
     toggleStatus(status, snoozedUntil) {
       this.$emit('update-conversation', status, snoozedUntil);
     },
-    snoozeConversation(snoozedUntil) {
-      this.$emit(
-        'update-conversation',
-        this.STATUS_TYPE.SNOOZED,
-        this.snoozeTimes[snoozedUntil] || null
-      );
+    snoozeConversation() {
+      const ninja = document.querySelector('ninja-keys');
+      ninja.open({ parent: 'snooze_conversation' });
     },
     assignPriority(priority) {
       this.$emit('assign-priority', priority);

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -54,12 +54,14 @@
       "OPEN": "More",
       "CLOSE": "Close",
       "DETAILS": "details",
+      "SNOOZED_UNTIL": "Snoozed until",
       "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
       "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week",
       "SNOOZED_UNTIL_NEXT_REPLY": "Snoozed until next reply"
     },
     "RESOLVE_DROPDOWN": {
       "MARK_PENDING": "Mark as pending",
+      "SNOOZE_UNTIL": "Snooze",
       "SNOOZE": {
         "TITLE": "Snooze until",
         "NEXT_REPLY": "Next reply",
@@ -67,6 +69,11 @@
         "NEXT_WEEK": "Next week"
       }
     },
+    "CUSTOM_SNOOZE": {
+      "TITLE": "Snooze until",
+      "APPLY": "Snooze",
+      "CANCEL": "Cancel"
+    },
     "PRIORITY": {
       "TITLE": "Priority",
       "OPTIONS": {