Restructure omni services and add Chatwoot research snapshot

research/chatwoot/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 'vue-i18n';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { getUnixTime } from 'date-fns';
+import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
+import { CMD_SNOOZE_CONVERSATION } from 'dashboard/helper/commandbar/events';
+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
+    v-model:show="showCustomSnoozeModal"
+    :on-close="hideCustomSnoozeModal"
+  >
+    <CustomSnoozeModal
+      @close="hideCustomSnoozeModal"
+      @choose-time="chooseSnoozeTime"
+    />
+  </woot-modal>
+</template>

research/chatwoot/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue

@@ -0,0 +1,117 @@
+<script setup>
+import '@chatwoot/ninja-keys';
+import { ref, computed, watchEffect, onMounted } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useTrack } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { useAppearanceHotKeys } from 'dashboard/composables/commands/useAppearanceHotKeys';
+import { useInboxHotKeys } from 'dashboard/composables/commands/useInboxHotKeys';
+import { useGoToCommandHotKeys } from 'dashboard/composables/commands/useGoToCommandHotKeys';
+import { useBulkActionsHotKeys } from 'dashboard/composables/commands/useBulkActionsHotKeys';
+import { useConversationHotKeys } from 'dashboard/composables/commands/useConversationHotKeys';
+import wootConstants from 'dashboard/constants/globals';
+import { GENERAL_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+const store = useStore();
+const { t } = useI18n();
+
+const ninjakeys = ref(null);
+
+// Added selectedSnoozeType to track the selected snooze type
+// So if the selected snooze type is "custom snooze" then we set selectedSnoozeType with the CMD action id
+// So that we can track the selected snooze type and when we close the command bar
+const selectedSnoozeType = ref(null);
+
+const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+const { inboxHotKeys } = useInboxHotKeys();
+const { goToCommandHotKeys } = useGoToCommandHotKeys();
+const { bulkActionsHotKeys } = useBulkActionsHotKeys();
+const { conversationHotKeys } = useConversationHotKeys();
+
+const placeholder = computed(() => t('COMMAND_BAR.SEARCH_PLACEHOLDER'));
+
+const hotKeys = computed(() => [
+  ...inboxHotKeys.value,
+  ...goToCommandHotKeys.value,
+  ...goToAppearanceHotKeys.value,
+  ...bulkActionsHotKeys.value,
+  ...conversationHotKeys.value,
+]);
+
+const setCommandBarData = () => {
+  ninjakeys.value.data = hotKeys.value;
+};
+
+const onSelected = item => {
+  const {
+    detail: { action: { title = null, section = null, id = null } = {} } = {},
+  } = item;
+  // Added this condition to prevent setting the selectedSnoozeType to null
+  // When we select the "custom snooze" (CMD bar will close and the custom snooze modal will open)
+  if (id === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
+    selectedSnoozeType.value = wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME;
+  } else {
+    selectedSnoozeType.value = null;
+  }
+
+  useTrack(GENERAL_EVENTS.COMMAND_BAR, {
+    section,
+    action: title,
+  });
+
+  setCommandBarData();
+};
+
+const onClosed = () => {
+  // If the selectedSnoozeType is not "SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME (custom snooze)" then we set the context menu chat id to null
+  // Else we do nothing and its handled in the ChatList.vue hideCustomSnoozeModal() method
+  if (
+    selectedSnoozeType.value !== wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME
+  ) {
+    store.dispatch('setContextMenuChatId', null);
+  }
+};
+
+watchEffect(() => {
+  if (ninjakeys.value) {
+    ninjakeys.value.data = hotKeys.value;
+  }
+});
+
+onMounted(setCommandBarData);
+</script>
+
+<!-- eslint-disable vue/attribute-hyphenation -->
+<template>
+  <ninja-keys
+    ref="ninjakeys"
+    noAutoLoadMdIcons
+    hideBreadcrumbs
+    :placeholder="placeholder"
+    @selected="onSelected"
+    @closed="onClosed"
+  />
+</template>
+
+<style lang="scss">
+ninja-keys {
+  --ninja-accent-color: rgba(39, 129, 246, 1);
+  --ninja-font-family: 'Inter';
+  z-index: 9999;
+}
+
+// Wrapped with body.dark to avoid overriding the default theme
+// If OS is in dark theme and app is in light mode, It will prevent showing dark theme in command bar
+body.dark {
+  ninja-keys {
+    --ninja-overflow-background: rgba(26, 29, 30, 0.5);
+    --ninja-modal-background: #151718;
+    --ninja-secondary-background-color: #26292b;
+    --ninja-selected-background: #26292b;
+    --ninja-footer-background: #2b2f31;
+    --ninja-text-color: #f8faf9;
+    --ninja-icon-color: #f8faf9;
+    --ninja-secondary-text-color: #c2c9c6;
+  }
+}
+</style>