Merge branch 'develop' into chore-replace-inbox-mixin

This is the continuation of the design update PR. This changes the design for the inbox pages.
---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/builders/account_builder.rb

@@ -32,6 +32,8 @@ class AccountBuilder
   end
 
   def validate_email
+    raise InvalidEmail.new({ domain_blocked: domain_blocked }) if domain_blocked?
+
     address = ValidEmail2::Address.new(@email)
     if address.valid? && !address.disposable?
       true
@@ -79,4 +81,21 @@ class AccountBuilder
     @user.confirm if @confirmed
     @user.save!
   end
+
+  def domain_blocked?
+    domain = @email.split('@').last
+
+    blocked_domains.each do |blocked_domain|
+      return true if domain.match?(blocked_domain)
+    end
+
+    false
+  end
+
+  def blocked_domains
+    domains = GlobalConfigService.load('BLOCKED_EMAIL_DOMAINS', '')
+    domains.split("\n").map(&:strip) if domains.present?
+
+    []
+  end
 end

app/controllers/api/v1/accounts/agents_controller.rb

@@ -24,7 +24,7 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
 
   def update
     @agent.update!(agent_params.slice(:name).compact)
-    @agent.current_account_user.update!(agent_params.slice(:role, :availability, :auto_offline).compact)
+    @agent.current_account_user.update!(agent_params.slice(*account_user_attributes).compact)
   end
 
   def destroy
@@ -67,8 +67,16 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
     @agent = agents.find(params[:id])
   end
 
+  def account_user_attributes
+    [:role, :availability, :auto_offline]
+  end
+
+  def allowed_agent_params
+    [:name, :email, :name, :role, :availability, :auto_offline]
+  end
+
   def agent_params
-    params.require(:agent).permit(:name, :email, :name, :role, :availability, :auto_offline)
+    params.require(:agent).permit(allowed_agent_params)
   end
 
   def new_agent_params
@@ -101,3 +109,5 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
     DeleteObjectJob.perform_later(agent) if agent.reload.account_users.blank?
   end
 end
+
+Api::V1::Accounts::AgentsController.prepend_mod_with('Api::V1::Accounts::AgentsController')

app/javascript/dashboard/components/ChatList.vue

@@ -4,6 +4,7 @@ import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAlert } from 'dashboard/composables';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { useFilter } from 'shared/composables/useFilter';
 import VirtualList from 'vue-virtual-scroll-list';
 
 import ChatListHeader from './ChatListHeader.vue';
@@ -16,7 +17,6 @@ import filterQueryGenerator from '../helper/filterQueryGenerator.js';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
-import filterMixin from 'shared/mixins/filterMixin';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import countries from 'shared/constants/countries';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
@@ -41,7 +41,6 @@ export default {
     IntersectionObserver,
     VirtualList,
   },
-  mixins: [filterMixin],
   provide() {
     return {
       // Actions to be performed on virtual list item and context menu.
@@ -91,6 +90,15 @@ export default {
 
     const conversationListRef = ref(null);
 
+    const {
+      setFilterAttributes,
+      initializeStatusAndAssigneeFilterToModal,
+      initializeInboxTeamAndLabelFilterToModal,
+    } = useFilter({
+      filteri18nKey: 'FILTER',
+      attributeModel: 'conversation_attribute',
+    });
+
     const getKeyboardListenerParams = () => {
       const allConversations = conversationListRef.value.querySelectorAll(
         'div.conversations-list div.conversation'
@@ -146,6 +154,9 @@ export default {
     return {
       uiSettings,
       conversationListRef,
+      setFilterAttributes,
+      initializeStatusAndAssigneeFilterToModal,
+      initializeInboxTeamAndLabelFilterToModal,
     };
   },
   data() {
@@ -860,6 +871,25 @@ export default {
     onContextMenuToggle(state) {
       this.isContextMenuOpen = state;
     },
+    initializeExistingFilterToModal() {
+      const statusFilter = this.initializeStatusAndAssigneeFilterToModal(
+        this.activeStatus,
+        this.currentUserDetails,
+        this.activeAssigneeTab
+      );
+      if (statusFilter) {
+        this.appliedFilter.push(statusFilter);
+      }
+
+      const otherFilters = this.initializeInboxTeamAndLabelFilterToModal(
+        this.conversationInbox,
+        this.inbox,
+        this.teamId,
+        this.activeTeam,
+        this.label
+      );
+      this.appliedFilter.push(...otherFilters);
+    },
   },
 };
 </script>

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

@@ -13,7 +13,7 @@ import wootConstants from 'dashboard/constants/globals';
 import {
   CMD_REOPEN_CONVERSATION,
   CMD_RESOLVE_CONVERSATION,
-} from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+} from 'dashboard/helper/commandbar/events';
 
 const store = useStore();
 const getters = useStoreGetters();

app/javascript/dashboard/components/widgets/AIAssistanceButton.vue

@@ -7,7 +7,7 @@ import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { useAI } from 'dashboard/composables/useAI';
 import AICTAModal from './AICTAModal.vue';
 import AIAssistanceModal from './AIAssistanceModal.vue';
-import { CMD_AI_ASSIST } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+import { CMD_AI_ASSIST } from 'dashboard/helper/commandbar/events';
 import AIAssistanceCTAButton from './AIAssistanceCTAButton.vue';
 
 export default {

app/javascript/dashboard/components/widgets/AIAssistanceModal.vue

@@ -1,13 +1,12 @@
 <script>
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { useAI } from 'dashboard/composables/useAI';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import AILoader from './AILoader.vue';
 
 export default {
   components: {
     AILoader,
   },
-  mixins: [messageFormatterMixin],
   props: {
     aiOption: {
       type: String,
@@ -15,12 +14,9 @@ export default {
     },
   },
   setup() {
+    const { formatMessage } = useMessageFormatter();
     const { draftMessage, processEvent, recordAnalytics } = useAI();
-    return {
-      draftMessage,
-      processEvent,
-      recordAnalytics,
-    };
+    return { draftMessage, processEvent, recordAnalytics, formatMessage };
   },
   data() {
     return {

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -3,7 +3,6 @@ import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import FileUpload from 'vue-upload-component';
 import * as ActiveStorage from 'activestorage';
-import inboxMixin from 'shared/mixins/inboxMixin';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import {
   ALLOWED_FILE_TYPES,
@@ -18,7 +17,6 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'ReplyBottomPanel',
   components: { FileUpload, VideoCallButton, AIAssistanceButton },
-  mixins: [inboxMixin],
   props: {
     mode: {
       type: String,
@@ -36,13 +34,6 @@ export default {
       type: String,
       default: '',
     },
-    // inbox prop is used in /mixins/inboxMixin,
-    // remove this props when refactoring to composable if not needed
-    // eslint-disable-next-line vue/no-unused-properties
-    inbox: {
-      type: Object,
-      default: () => ({}),
-    },
     showFileUpload: {
       type: Boolean,
       default: false,
@@ -111,6 +102,22 @@ export default {
       type: String,
       required: true,
     },
+    isALineChannel: {
+      type: Boolean,
+      default: false,
+    },
+    isATwilioWhatsAppChannel: {
+      type: Boolean,
+      default: false,
+    },
+    isAWebWidgetInbox: {
+      type: Boolean,
+      default: false,
+    },
+    isAPIInbox: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup() {
     const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
@@ -211,7 +218,6 @@ export default {
       return !this.isOnPrivateNote;
     },
     sendWithSignature() {
-      // channelType is sourced from inboxMixin
       return this.fetchSignatureFlagFromUISettings(this.channelType);
     },
     signatureToggleTooltip() {

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

@@ -5,7 +5,7 @@ import languages from './advancedFilterItems/languages';
 import countries from 'shared/constants/countries.js';
 import { mapGetters } from 'vuex';
 import { filterAttributeGroups } from './advancedFilterItems';
-import filterMixin from 'shared/mixins/filterMixin';
+import { useFilter } from 'shared/composables/useFilter';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
@@ -14,7 +14,6 @@ export default {
   components: {
     FilterInputBox,
   },
-  mixins: [filterMixin],
   props: {
     onClose: {
       type: Function,
@@ -37,6 +36,15 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const { setFilterAttributes } = useFilter({
+      filteri18nKey: 'FILTER',
+      attributeModel: 'conversation_attribute',
+    });
+    return {
+      setFilterAttributes,
+    };
+  },
   data() {
     return {
       show: true,
@@ -67,7 +75,11 @@ export default {
     },
   },
   mounted() {
-    this.setFilterAttributes();
+    const { filterGroups, filterTypes } = this.setFilterAttributes();
+
+    this.filterTypes = [...this.filterTypes, ...filterTypes];
+    this.filterGroups = filterGroups;
+
     this.$store.dispatch('campaigns/get');
     if (this.getAppliedConversationFilters.length) {
       this.appliedFilters = [];

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

@@ -6,7 +6,7 @@ import MessagePreview from './MessagePreview.vue';
 import router from '../../../routes';
 import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
 import InboxName from '../InboxName.vue';
-import inboxMixin from 'shared/mixins/inboxMixin';
+import { useInbox } from 'shared/composables/useInbox';
 import ConversationContextMenu from './contextMenu/Index.vue';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
@@ -24,7 +24,6 @@ export default {
     PriorityMark,
     SLACardLabel,
   },
-  mixins: [inboxMixin],
   props: {
     activeLabel: {
       type: String,
@@ -67,6 +66,14 @@ export default {
       default: false,
     },
   },
+  setup(props) {
+    const { inbox_id: inboxId } = props.chat;
+    const { inboxBadge, inbox } = useInbox({ inboxId });
+    return {
+      inboxBadge,
+      inbox,
+    };
+  },
   data() {
     return {
       hovered: false,
@@ -121,12 +128,6 @@ export default {
       return getLastMessage(this.chat);
     },
 
-    inbox() {
-      const { inbox_id: inboxId } = this.chat;
-      const stateInbox = this.$store.getters['inboxes/getInbox'](inboxId);
-      return stateInbox;
-    },
-
     showInboxName() {
       return (
         !this.hideInboxName &&

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

@@ -1,8 +1,10 @@
 <script>
+import { ref } from 'vue';
 import { mapGetters } from 'vuex';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import agentMixin from '../../../mixins/agentMixin.js';
 import BackButton from '../BackButton.vue';
-import inboxMixin from 'shared/mixins/inboxMixin';
+import { useInbox } from 'shared/composables/useInbox';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
 import Thumbnail from '../Thumbnail.vue';
@@ -22,7 +24,7 @@ export default {
     SLACardLabel,
     Linear,
   },
-  mixins: [inboxMixin],
+  mixins: [agentMixin],
   props: {
     chat: {
       type: Object,
@@ -42,12 +44,20 @@ export default {
     },
   },
   setup(props, { emit }) {
+    const conversationHeaderActionsRef = ref(null);
+    const { inbox, inboxBadge } = useInbox({ inboxId: props.chat.inbox_id });
     const keyboardEvents = {
       'Alt+KeyO': {
         action: () => emit('contactPanelToggle'),
       },
     };
-    useKeyboardEvents(keyboardEvents);
+    useKeyboardEvents(keyboardEvents, conversationHeaderActionsRef);
+
+    return {
+      conversationHeaderActionsRef,
+      inbox,
+      inboxBadge,
+    };
   },
   computed: {
     ...mapGetters({
@@ -102,10 +112,6 @@ export default {
           : this.$t('CONVERSATION.HEADER.OPEN')
       } ${this.$t('CONVERSATION.HEADER.DETAILS')}`;
     },
-    inbox() {
-      const { inbox_id: inboxId } = this.chat;
-      return this.$store.getters['inboxes/getInbox'](inboxId);
-    },
     hasMultipleInboxes() {
       return this.$store.getters['inboxes/getInboxes'].length > 1;
     },
@@ -175,6 +181,7 @@ export default {
           </div>
 
           <div
+            ref="conversationHeaderActionsRef"
             class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
           >
             <InboxName v-if="hasMultipleInboxes" :inbox="inbox" />

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

@@ -1,5 +1,5 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import BubbleActions from './bubble/Actions.vue';
 import BubbleContact from './bubble/Contact.vue';
 import BubbleFile from './bubble/File.vue';
@@ -39,7 +39,6 @@ export default {
     InstagramStoryReply,
     Spinner,
   },
-  mixins: [messageFormatterMixin],
   props: {
     data: {
       type: Object,
@@ -74,6 +73,12 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   data() {
     return {
       showContextMenu: false,

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

@@ -1,11 +1,10 @@
 <script>
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { ATTACHMENT_ICONS } from 'shared/constants/messages';
 
 export default {
   name: 'MessagePreview',
-  mixins: [messageFormatterMixin],
   props: {
     message: {
       type: Object,
@@ -20,6 +19,12 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { getPlainText } = useMessageFormatter();
+    return {
+      getPlainText,
+    };
+  },
   computed: {
     messageByAgent() {
       const { message_type: messageType } = this.message;

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

@@ -3,7 +3,6 @@ import { ref } from 'vue';
 // composable
 import { useConfig } from 'dashboard/composables/useConfig';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import { useAI } from 'dashboard/composables/useAI';
 
 // components
 import ReplyBox from './ReplyBox.vue';
@@ -15,7 +14,9 @@ import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
 
 // mixins
-import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
+import { useInbox, INBOX_FEATURES } from 'shared/composables/useInbox';
+
+import aiMixin from 'dashboard/mixins/aiMixin';
 
 // utils
 import { getTypingUsersText } from '../../../helper/commons';
@@ -40,7 +41,7 @@ export default {
     Banner,
     ConversationLabelSuggestion,
   },
-  mixins: [inboxMixin],
+  mixins: [aiMixin],
   props: {
     isContactPanelOpen: {
       type: Boolean,
@@ -52,6 +53,17 @@ export default {
     },
   },
   setup() {
+    const {
+      inbox,
+      isAWhatsAppChannel,
+      isAPIInbox,
+      is360DialogWhatsAppChannel,
+      isAWebWidgetInbox,
+      isAFacebookInbox,
+      isAnEmailChannel,
+      inboxHasFeature,
+    } = useInbox({ getCurrentChat: true });
+    const conversationFooterRef = ref(null);
     const isPopOutReplyBox = ref(false);
     const { isEnterprise } = useConfig();
 
@@ -69,24 +81,22 @@ export default {
       },
     };
 
-    useKeyboardEvents(keyboardEvents);
-
-    const {
-      isAIIntegrationEnabled,
-      isLabelSuggestionFeatureEnabled,
-      fetchIntegrationsIfRequired,
-      fetchLabelSuggestions,
-    } = useAI();
+    useKeyboardEvents(keyboardEvents, conversationFooterRef);
 
     return {
       isEnterprise,
+      conversationFooterRef,
       isPopOutReplyBox,
       closePopOutReplyBox,
       showPopOutReplyBox,
-      isAIIntegrationEnabled,
-      isLabelSuggestionFeatureEnabled,
-      fetchIntegrationsIfRequired,
-      fetchLabelSuggestions,
+      inbox,
+      isAWhatsAppChannel,
+      isAPIInbox,
+      is360DialogWhatsAppChannel,
+      isAWebWidgetInbox,
+      isAFacebookInbox,
+      isAnEmailChannel,
+      inboxHasFeature,
     };
   },
   data() {
@@ -121,9 +131,6 @@ export default {
     inboxId() {
       return this.currentChat.inbox_id;
     },
-    inbox() {
-      return this.$store.getters['inboxes/getInbox'](this.inboxId);
-    },
     typingUsersList() {
       const userList = this.$store.getters[
         'conversationTypingStatus/getUserList'
@@ -527,6 +534,7 @@ export default {
       />
     </ul>
     <div
+      ref="conversationFooterRef"
       class="conversation-footer"
       :class="{ 'modal-mask': isPopOutReplyBox }"
     >

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

@@ -7,7 +7,7 @@ import {
   CMD_MUTE_CONVERSATION,
   CMD_SEND_TRANSCRIPT,
   CMD_UNMUTE_CONVERSATION,
-} from '../../../routes/dashboard/commands/commandBarBusEvents';
+} from 'dashboard/helper/commandbar/events';
 
 export default {
   components: {

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

@@ -27,7 +27,7 @@ import {
 } from '@chatwoot/utils';
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
-import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
+import { useInbox, INBOX_FEATURES } from 'shared/composables/useInbox';
 import { trimContent, debounce } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
@@ -61,12 +61,7 @@ export default {
     MessageSignatureMissingAlert,
     ArticleSearchPopover,
   },
-  mixins: [
-    inboxMixin,
-    messageFormatterMixin,
-    fileUploadMixin,
-    keyboardEventListenerMixins,
-  ],
+  mixins: [messageFormatterMixin, fileUploadMixin, keyboardEventListenerMixins],
   props: {
     popoutReplyBox: {
       type: Boolean,
@@ -74,6 +69,22 @@ export default {
     },
   },
   setup() {
+    const {
+      is360DialogWhatsAppChannel,
+      isAPIInbox,
+      isAWhatsAppChannel,
+      isATwitterInbox,
+      isAFacebookInbox,
+      isASmsInbox,
+      isAWebWidgetInbox,
+      isAnEmailChannel,
+      isATelegramChannel,
+      isALineChannel,
+      channelType,
+      isAWhatsAppCloudChannel,
+      isATwilioWhatsAppChannel,
+      inbox,
+    } = useInbox({ getCurrentChat: true });
     const {
       uiSettings,
       updateUISettings,
@@ -86,6 +97,20 @@ export default {
       updateUISettings,
       isEditorHotKeyEnabled,
       fetchSignatureFlagFromUISettings,
+      is360DialogWhatsAppChannel,
+      isAPIInbox,
+      isAWhatsAppChannel,
+      isATwitterInbox,
+      isAFacebookInbox,
+      isASmsInbox,
+      isAWebWidgetInbox,
+      isAnEmailChannel,
+      isATelegramChannel,
+      isALineChannel,
+      channelType,
+      isAWhatsAppCloudChannel,
+      isATwilioWhatsAppChannel,
+      inbox,
     };
   },
   data() {
@@ -195,9 +220,6 @@ export default {
     inboxId() {
       return this.currentChat.inbox_id;
     },
-    inbox() {
-      return this.$store.getters['inboxes/getInbox'](this.inboxId);
-    },
     messagePlaceHolder() {
       return this.isPrivate
         ? this.$t('CONVERSATION.FOOTER.PRIVATE_MSG_INPUT')
@@ -1208,6 +1230,12 @@ export default {
       :message="message"
       :portal-slug="connectedPortalSlug"
       :new-conversation-modal-active="newConversationModalActive"
+      :is-a-line-channel="isALineChannel"
+      :is-a-twilio-whatsapp-channel="isATwilioWhatsAppChannel"
+      :is-a-web-widget-inbox="isAWebWidgetInbox"
+      :is-an-email-channel="isAnEmailChannel"
+      :is-api-inbox="isAPIInbox"
+      :channel-type="channelType"
       @selectWhatsappTemplate="openWhatsappTemplateModal"
       @toggleEditor="toggleRichContentEditor"
       @replaceText="replaceText"

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -1,10 +1,9 @@
 <script>
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
-import inboxMixin from 'shared/mixins/inboxMixin';
+import { useInbox } from 'shared/composables/useInbox';
 import { messageTimestamp } from 'shared/helpers/timeHelper';
 
 export default {
-  mixins: [inboxMixin],
   props: {
     sender: {
       type: Object,
@@ -55,10 +54,33 @@ export default {
       default: 0,
     },
   },
+  setup(props) {
+    const {
+      inbox,
+      isAWhatsAppChannel,
+      isATwilioChannel,
+      isAFacebookInbox,
+      isASmsInbox,
+      isATelegramChannel,
+      isALineChannel,
+      isAWebWidgetInbox,
+      isAPIInbox,
+      isAnEmailChannel,
+    } = useInbox({ inboxId: props.inboxId });
+    return {
+      inbox,
+      isAWhatsAppChannel,
+      isATwilioChannel,
+      isAFacebookInbox,
+      isASmsInbox,
+      isATelegramChannel,
+      isALineChannel,
+      isAWebWidgetInbox,
+      isAPIInbox,
+      isAnEmailChannel,
+    };
+  },
   computed: {
-    inbox() {
-      return this.$store.getters['inboxes/getInbox'](this.inboxId);
-    },
     isIncoming() {
       return MESSAGE_TYPE.INCOMING === this.messageType;
     },

app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue

@@ -1,10 +1,9 @@
 <script>
 import DyteVideoCall from './integrations/Dyte.vue';
-import inboxMixin from 'shared/mixins/inboxMixin';
+import { useInbox } from 'shared/composables/useInbox';
 
 export default {
   components: { DyteVideoCall },
-  mixins: [inboxMixin],
   props: {
     messageId: {
       type: [String, Number],
@@ -19,14 +18,20 @@ export default {
       default: 0,
     },
   },
+  setup(props) {
+    const { isAPIInbox, isAWebWidgetInbox } = useInbox({
+      inboxId: props.inboxId,
+    });
+    return {
+      isAPIInbox,
+      isAWebWidgetInbox,
+    };
+  },
   computed: {
     showDyteIntegration() {
       const isEnabledOnTheInbox = this.isAPIInbox || this.isAWebWidgetInbox;
       return isEnabledOnTheInbox && this.contentAttributes.type === 'dyte';
     },
-    inbox() {
-      return this.$store.getters['inboxes/getInbox'](this.inboxId);
-    },
   },
 };
 </script>

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

@@ -6,7 +6,7 @@ import {
   CMD_BULK_ACTION_SNOOZE_CONVERSATION,
   CMD_BULK_ACTION_REOPEN_CONVERSATION,
   CMD_BULK_ACTION_RESOLVE_CONVERSATION,
-} from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+} from 'dashboard/helper/commandbar/events';
 
 import AgentSelector from './AgentSelector.vue';
 import UpdateActions from './UpdateActions.vue';

app/javascript/dashboard/components/widgets/conversation/linear/index.vue

@@ -48,11 +48,7 @@ const loadLinkedIssue = async () => {
     const issues = response.data;
     linkedIssue.value = issues && issues.length ? issues[0] : null;
   } catch (error) {
-    const errorMessage = parseLinearAPIErrorResponse(
-      error,
-      t('INTEGRATION_SETTINGS.LINEAR.LOADING_ERROR')
-    );
-    useAlert(errorMessage);
+    // We don't want to show an error message here, as it's not critical. When someone clicks on the Linear icon, we can inform them that the integration is disabled.
   }
 };
 

app/javascript/dashboard/composables/commands/spec/fixtures.js

@@ -0,0 +1,197 @@
+export const mockAssignableAgents = [
+  {
+    id: 1,
+    account_id: 1,
+    availability_status: 'online',
+    auto_offline: true,
+    confirmed: true,
+    email: 'john@doe.com',
+    available_name: 'John Doe',
+    name: 'John Doe',
+    role: 'administrator',
+    thumbnail: '',
+  },
+];
+
+export const mockCurrentChat = {
+  meta: {
+    sender: {
+      additional_attributes: {},
+      availability_status: 'offline',
+      email: null,
+      id: 212,
+      name: 'Chatwoot',
+      phone_number: null,
+      identifier: null,
+      thumbnail: '',
+      custom_attributes: {},
+      last_activity_at: 1723553344,
+      created_at: 1722588710,
+    },
+    channel: 'Channel::WebWidget',
+    assignee: {
+      id: 1,
+      account_id: 1,
+      availability_status: 'online',
+      auto_offline: true,
+      confirmed: true,
+      email: 'john@doe.com',
+      available_name: 'John Doe',
+      name: 'John Doe',
+      role: 'administrator',
+      thumbnail: '',
+    },
+    hmac_verified: false,
+  },
+  id: 138,
+  messages: [
+    {
+      id: 3348,
+      content: 'Hello, how can I assist you today?',
+      account_id: 1,
+      inbox_id: 1,
+      conversation_id: 138,
+      message_type: 1,
+      created_at: 1724398739,
+      updated_at: '2024-08-23T07:38:59.763Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Hello, how can I assist you today?',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1724398739,
+        contact_inbox: {
+          source_id: '5e57317d-053b-4a72-8292-a25b9f29c401',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John Doe',
+        available_name: 'John Doe',
+        avatar_url: '',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail: '',
+      },
+    },
+  ],
+  account_id: 1,
+  uuid: '69dd6922-2f0c-4317-8796-bbeb3679cead',
+  additional_attributes: {
+    browser: {
+      device_name: 'Unknown',
+      browser_name: 'Chrome',
+      platform_name: 'macOS',
+      browser_version: '127.0.0.0',
+      platform_version: '10.15.7',
+    },
+    referer: 'http://chatwoot.com/widget_tests?dark_mode=auto',
+    initiated_at: {
+      timestamp: 'Fri Aug 02 2024 15:21:18 GMT+0530 (India Standard Time)',
+    },
+    browser_language: 'en',
+  },
+  agent_last_seen_at: 1724400730,
+  assignee_last_seen_at: 1724400686,
+  can_reply: true,
+  contact_last_seen_at: 1723553351,
+  custom_attributes: {},
+  inbox_id: 1,
+  labels: ['billing'],
+  muted: false,
+  snoozed_until: null,
+  status: 'open',
+  created_at: 1722592278,
+  timestamp: 1724398739,
+  first_reply_created_at: 1722592316,
+  unread_count: 0,
+  last_non_activity_message: {},
+  last_activity_at: 1724398739,
+  priority: null,
+  waiting_since: 0,
+  sla_policy_id: 10,
+  applied_sla: {
+    id: 143,
+    sla_id: 10,
+    sla_status: 'missed',
+    created_at: 1722592279,
+    updated_at: 1722874214,
+    sla_description: '',
+    sla_name: 'Hacker SLA',
+    sla_first_response_time_threshold: 600,
+    sla_next_response_time_threshold: 240,
+    sla_only_during_business_hours: false,
+    sla_resolution_time_threshold: 259200,
+  },
+  sla_events: [
+    {
+      id: 270,
+      event_type: 'nrt',
+      meta: {
+        message_id: 2743,
+      },
+      updated_at: 1722592819,
+      created_at: 1722592819,
+    },
+    {
+      id: 275,
+      event_type: 'rt',
+      meta: {},
+      updated_at: 1722852322,
+      created_at: 1722852322,
+    },
+  ],
+  allMessagesLoaded: false,
+  dataFetched: true,
+};
+
+export const mockTeamsList = [
+  {
+    id: 5,
+    name: 'design',
+    description: 'design team',
+    allow_auto_assign: true,
+    account_id: 1,
+    is_member: false,
+  },
+];
+
+export const mockActiveLabels = [
+  {
+    id: 16,
+    title: 'billing',
+    description: '',
+    color: '#D8EA19',
+    show_on_sidebar: true,
+  },
+];
+
+export const mockInactiveLabels = [
+  {
+    id: 2,
+    title: 'Feature Request',
+    description: '',
+    color: '#D8EA19',
+    show_on_sidebar: true,
+  },
+];
+
+export const MOCK_FEATURE_FLAGS = {
+  CRM: 'crm',
+  AGENT_MANAGEMENT: 'agent_management',
+  TEAM_MANAGEMENT: 'team_management',
+  INBOX_MANAGEMENT: 'inbox_management',
+  REPORTS: 'reports',
+  LABELS: 'labels',
+  CANNED_RESPONSES: 'canned_responses',
+  INTEGRATIONS: 'integrations',
+};

app/javascript/dashboard/composables/commands/spec/useAppearanceHotKeys.spec.js

@@ -0,0 +1,83 @@
+import { useAppearanceHotKeys } from '../useAppearanceHotKeys';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { LocalStorage } from 'shared/helpers/localStorage';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { setColorTheme } from 'dashboard/helper/themeHelper.js';
+
+vi.mock('dashboard/composables/useI18n');
+vi.mock('shared/helpers/localStorage');
+vi.mock('dashboard/helper/themeHelper.js');
+
+describe('useAppearanceHotKeys', () => {
+  beforeEach(() => {
+    useI18n.mockReturnValue({
+      t: vi.fn(key => key),
+    });
+
+    window.matchMedia = vi.fn().mockReturnValue({ matches: false });
+  });
+
+  it('should return goToAppearanceHotKeys computed property', () => {
+    const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+    expect(goToAppearanceHotKeys.value).toBeDefined();
+  });
+
+  it('should have the correct number of appearance options', () => {
+    const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+    expect(goToAppearanceHotKeys.value.length).toBe(4); // 1 parent + 3 theme options
+  });
+
+  it('should have the correct parent option', () => {
+    const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+    const parentOption = goToAppearanceHotKeys.value.find(
+      option => option.id === 'appearance_settings'
+    );
+    expect(parentOption).toBeDefined();
+    expect(parentOption.children.length).toBe(3);
+  });
+
+  it('should have the correct theme options', () => {
+    const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+    const themeOptions = goToAppearanceHotKeys.value.filter(
+      option => option.parent === 'appearance_settings'
+    );
+    expect(themeOptions.length).toBe(3);
+    expect(themeOptions.map(option => option.id)).toEqual([
+      'light',
+      'dark',
+      'auto',
+    ]);
+  });
+
+  it('should call setAppearance when a theme option is selected', () => {
+    const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+    const lightThemeOption = goToAppearanceHotKeys.value.find(
+      option => option.id === 'light'
+    );
+
+    lightThemeOption.handler();
+
+    expect(LocalStorage.set).toHaveBeenCalledWith(
+      LOCAL_STORAGE_KEYS.COLOR_SCHEME,
+      'light'
+    );
+    expect(setColorTheme).toHaveBeenCalledWith(false);
+  });
+
+  it('should handle system dark mode preference', () => {
+    window.matchMedia = vi.fn().mockReturnValue({ matches: true });
+
+    const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+    const autoThemeOption = goToAppearanceHotKeys.value.find(
+      option => option.id === 'auto'
+    );
+
+    autoThemeOption.handler();
+
+    expect(LocalStorage.set).toHaveBeenCalledWith(
+      LOCAL_STORAGE_KEYS.COLOR_SCHEME,
+      'auto'
+    );
+    expect(setColorTheme).toHaveBeenCalledWith(true);
+  });
+});

app/javascript/dashboard/composables/commands/spec/useBulkActionsHotKeys.spec.js

@@ -0,0 +1,102 @@
+import { useBulkActionsHotKeys } from '../useBulkActionsHotKeys';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+import wootConstants from 'dashboard/constants/globals';
+import { emitter } from 'shared/helpers/mitt';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables/useI18n');
+vi.mock('shared/helpers/mitt');
+
+describe('useBulkActionsHotKeys', () => {
+  let store;
+
+  beforeEach(() => {
+    store = {
+      getters: {
+        'bulkActions/getSelectedConversationIds': [],
+      },
+    };
+
+    useStore.mockReturnValue(store);
+    useMapGetter.mockImplementation(key => ({
+      value: store.getters[key],
+    }));
+
+    useI18n.mockReturnValue({ t: vi.fn(key => key) });
+    emitter.emit = vi.fn();
+  });
+
+  it('should return bulk actions when conversations are selected', () => {
+    store.getters['bulkActions/getSelectedConversationIds'] = [1, 2, 3];
+    const { bulkActionsHotKeys } = useBulkActionsHotKeys();
+
+    expect(bulkActionsHotKeys.value.length).toBeGreaterThan(0);
+    expect(bulkActionsHotKeys.value).toContainEqual(
+      expect.objectContaining({
+        id: 'bulk_action_snooze_conversation',
+        title: 'COMMAND_BAR.COMMANDS.SNOOZE_CONVERSATION',
+        section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
+      })
+    );
+    expect(bulkActionsHotKeys.value).toContainEqual(
+      expect.objectContaining({
+        id: 'bulk_action_reopen_conversation',
+        title: 'COMMAND_BAR.COMMANDS.REOPEN_CONVERSATION',
+        section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
+      })
+    );
+    expect(bulkActionsHotKeys.value).toContainEqual(
+      expect.objectContaining({
+        id: 'bulk_action_resolve_conversation',
+        title: 'COMMAND_BAR.COMMANDS.RESOLVE_CONVERSATION',
+        section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
+      })
+    );
+  });
+
+  it('should include snooze options in bulk actions', () => {
+    store.getters['bulkActions/getSelectedConversationIds'] = [1, 2, 3];
+    const { bulkActionsHotKeys } = useBulkActionsHotKeys();
+
+    const snoozeAction = bulkActionsHotKeys.value.find(
+      action => action.id === 'bulk_action_snooze_conversation'
+    );
+    expect(snoozeAction).toBeDefined();
+    expect(snoozeAction.children).toEqual(
+      Object.values(wootConstants.SNOOZE_OPTIONS)
+    );
+  });
+
+  it('should create handlers for reopen and resolve actions', () => {
+    store.getters['bulkActions/getSelectedConversationIds'] = [1, 2, 3];
+    const { bulkActionsHotKeys } = useBulkActionsHotKeys();
+
+    const reopenAction = bulkActionsHotKeys.value.find(
+      action => action.id === 'bulk_action_reopen_conversation'
+    );
+    const resolveAction = bulkActionsHotKeys.value.find(
+      action => action.id === 'bulk_action_resolve_conversation'
+    );
+
+    expect(reopenAction.handler).toBeDefined();
+    expect(resolveAction.handler).toBeDefined();
+
+    reopenAction.handler();
+    expect(emitter.emit).toHaveBeenCalledWith(
+      'CMD_BULK_ACTION_REOPEN_CONVERSATION'
+    );
+
+    resolveAction.handler();
+    expect(emitter.emit).toHaveBeenCalledWith(
+      'CMD_BULK_ACTION_RESOLVE_CONVERSATION'
+    );
+  });
+
+  it('should return an empty array when no conversations are selected', () => {
+    store.getters['bulkActions/getSelectedConversationIds'] = [];
+    const { bulkActionsHotKeys } = useBulkActionsHotKeys();
+
+    expect(bulkActionsHotKeys.value).toEqual([]);
+  });
+});

app/javascript/dashboard/composables/commands/spec/useConversationHotKeys.spec.js

@@ -0,0 +1,204 @@
+import { useConversationHotKeys } from '../useConversationHotKeys';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useRoute } from 'dashboard/composables/route';
+import { useConversationLabels } from 'dashboard/composables/useConversationLabels';
+import { useAI } from 'dashboard/composables/useAI';
+import { useAgentsList } from 'dashboard/composables/useAgentsList';
+import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
+import {
+  mockAssignableAgents,
+  mockCurrentChat,
+  mockTeamsList,
+  mockActiveLabels,
+  mockInactiveLabels,
+} from './fixtures';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables/useI18n');
+vi.mock('dashboard/composables/route');
+vi.mock('dashboard/composables/useConversationLabels');
+vi.mock('dashboard/composables/useAI');
+vi.mock('dashboard/composables/useAgentsList');
+
+describe('useConversationHotKeys', () => {
+  let store;
+
+  beforeEach(() => {
+    store = {
+      dispatch: vi.fn(),
+      getters: {
+        getSelectedChat: mockCurrentChat,
+        'draftMessages/getReplyEditorMode': REPLY_EDITOR_MODES.REPLY,
+        getContextMenuChatId: null,
+        'teams/getTeams': mockTeamsList,
+        'draftMessages/get': vi.fn(),
+      },
+    };
+
+    useStore.mockReturnValue(store);
+    useMapGetter.mockImplementation(key => ({
+      value: store.getters[key],
+    }));
+
+    useI18n.mockReturnValue({ t: vi.fn(key => key) });
+    useRoute.mockReturnValue({ name: 'inbox_conversation' });
+    useConversationLabels.mockReturnValue({
+      activeLabels: { value: mockActiveLabels },
+      inactiveLabels: { value: mockInactiveLabels },
+      addLabelToConversation: vi.fn(),
+      removeLabelFromConversation: vi.fn(),
+    });
+    useAI.mockReturnValue({ isAIIntegrationEnabled: { value: true } });
+    useAgentsList.mockReturnValue({
+      agentsList: { value: [] },
+      assignableAgents: { value: mockAssignableAgents },
+    });
+  });
+
+  it('should return the correct computed properties', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+
+    expect(conversationHotKeys.value).toBeDefined();
+  });
+
+  it('should generate conversation hot keys', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    expect(conversationHotKeys.value.length).toBeGreaterThan(0);
+  });
+
+  it('should include AI assist actions when AI integration is enabled', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    const aiAssistAction = conversationHotKeys.value.find(
+      action => action.id === 'ai_assist'
+    );
+    expect(aiAssistAction).toBeDefined();
+  });
+
+  it('should not include AI assist actions when AI integration is disabled', () => {
+    useAI.mockReturnValue({ isAIIntegrationEnabled: { value: false } });
+    const { conversationHotKeys } = useConversationHotKeys();
+    const aiAssistAction = conversationHotKeys.value.find(
+      action => action.id === 'ai_assist'
+    );
+    expect(aiAssistAction).toBeUndefined();
+  });
+
+  it('should dispatch actions when handlers are called', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    const assignAgentAction = conversationHotKeys.value.find(
+      action => action.id === 'assign_an_agent'
+    );
+    expect(assignAgentAction).toBeDefined();
+
+    if (assignAgentAction && assignAgentAction.children) {
+      const childAction = conversationHotKeys.value.find(
+        action => action.id === assignAgentAction.children[0]
+      );
+      if (childAction && childAction.handler) {
+        childAction.handler({ agentInfo: { id: 2 } });
+        expect(store.dispatch).toHaveBeenCalledWith('assignAgent', {
+          conversationId: 1,
+          agentId: 2,
+        });
+      }
+    }
+  });
+
+  it('should return snooze actions when in snooze context', () => {
+    store.getters.getContextMenuChatId = 1;
+    useMapGetter.mockImplementation(key => ({
+      value: store.getters[key],
+    }));
+    useRoute.mockReturnValue({ name: 'inbox_conversation' });
+
+    const { conversationHotKeys } = useConversationHotKeys();
+    const snoozeAction = conversationHotKeys.value.find(action =>
+      action.id.includes('snooze_conversation')
+    );
+    expect(snoozeAction).toBeDefined();
+  });
+
+  it('should return the correct label actions when there are active labels', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    const addLabelAction = conversationHotKeys.value.find(
+      action => action.id === 'add_a_label_to_the_conversation'
+    );
+    const removeLabelAction = conversationHotKeys.value.find(
+      action => action.id === 'remove_a_label_to_the_conversation'
+    );
+
+    expect(addLabelAction).toBeDefined();
+    expect(removeLabelAction).toBeDefined();
+  });
+
+  it('should return only add label actions when there are no active labels', () => {
+    useConversationLabels.mockReturnValue({
+      activeLabels: { value: [] },
+      inactiveLabels: { value: [{ title: 'inactive_label' }] },
+      addLabelToConversation: vi.fn(),
+      removeLabelFromConversation: vi.fn(),
+    });
+
+    const { conversationHotKeys } = useConversationHotKeys();
+    const addLabelAction = conversationHotKeys.value.find(
+      action => action.id === 'add_a_label_to_the_conversation'
+    );
+    const removeLabelAction = conversationHotKeys.value.find(
+      action => action.id === 'remove_a_label_to_the_conversation'
+    );
+
+    expect(addLabelAction).toBeDefined();
+    expect(removeLabelAction).toBeUndefined();
+  });
+
+  it('should return the correct team assignment actions', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    const assignTeamAction = conversationHotKeys.value.find(
+      action => action.id === 'assign_a_team'
+    );
+
+    expect(assignTeamAction).toBeDefined();
+    expect(assignTeamAction.children.length).toBe(mockTeamsList.length);
+  });
+
+  it('should return the correct priority assignment actions', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    const assignPriorityAction = conversationHotKeys.value.find(
+      action => action.id === 'assign_priority'
+    );
+
+    expect(assignPriorityAction).toBeDefined();
+    expect(assignPriorityAction.children.length).toBe(4);
+  });
+
+  it('should return the correct conversation additional actions', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    const muteAction = conversationHotKeys.value.find(
+      action => action.id === 'mute_conversation'
+    );
+    const sendTranscriptAction = conversationHotKeys.value.find(
+      action => action.id === 'send_transcript'
+    );
+
+    expect(muteAction).toBeDefined();
+    expect(sendTranscriptAction).toBeDefined();
+  });
+
+  it('should return unmute action when conversation is muted', () => {
+    store.getters.getSelectedChat = { ...mockCurrentChat, muted: true };
+    const { conversationHotKeys } = useConversationHotKeys();
+    const unmuteAction = conversationHotKeys.value.find(
+      action => action.id === 'unmute_conversation'
+    );
+
+    expect(unmuteAction).toBeDefined();
+  });
+
+  it('should not return conversation hot keys when not in conversation or inbox route', () => {
+    useRoute.mockReturnValue({ name: 'some_other_route' });
+    const { conversationHotKeys } = useConversationHotKeys();
+
+    expect(conversationHotKeys.value.length).toBe(0);
+  });
+});

app/javascript/dashboard/composables/commands/spec/useGoToCommandHotKeys.spec.js

@@ -0,0 +1,188 @@
+import { useGoToCommandHotKeys } from '../useGoToCommandHotKeys';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useRouter } from 'dashboard/composables/route';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import { MOCK_FEATURE_FLAGS } from './fixtures';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables/useI18n');
+vi.mock('dashboard/composables/route');
+vi.mock('dashboard/composables/useAdmin');
+vi.mock('dashboard/helper/URLHelper');
+
+const mockRoutes = [
+  { path: 'accounts/:accountId/dashboard', name: 'dashboard' },
+  {
+    path: 'accounts/:accountId/contacts',
+    name: 'contacts',
+    featureFlag: MOCK_FEATURE_FLAGS.CRM,
+  },
+  {
+    path: 'accounts/:accountId/settings/agents/list',
+    name: 'agent_settings',
+    featureFlag: MOCK_FEATURE_FLAGS.AGENT_MANAGEMENT,
+  },
+  {
+    path: 'accounts/:accountId/settings/teams/list',
+    name: 'team_settings',
+    featureFlag: MOCK_FEATURE_FLAGS.TEAM_MANAGEMENT,
+  },
+  {
+    path: 'accounts/:accountId/settings/inboxes/list',
+    name: 'inbox_settings',
+    featureFlag: MOCK_FEATURE_FLAGS.INBOX_MANAGEMENT,
+  },
+  { path: 'accounts/:accountId/profile/settings', name: 'profile_settings' },
+  { path: 'accounts/:accountId/notifications', name: 'notifications' },
+  {
+    path: 'accounts/:accountId/reports/overview',
+    name: 'reports_overview',
+    featureFlag: MOCK_FEATURE_FLAGS.REPORTS,
+  },
+  {
+    path: 'accounts/:accountId/settings/labels/list',
+    name: 'label_settings',
+    featureFlag: MOCK_FEATURE_FLAGS.LABELS,
+  },
+  {
+    path: 'accounts/:accountId/settings/canned-response/list',
+    name: 'canned_responses',
+    featureFlag: MOCK_FEATURE_FLAGS.CANNED_RESPONSES,
+  },
+  {
+    path: 'accounts/:accountId/settings/applications',
+    name: 'applications',
+    featureFlag: MOCK_FEATURE_FLAGS.INTEGRATIONS,
+  },
+];
+
+describe('useGoToCommandHotKeys', () => {
+  let store;
+
+  beforeEach(() => {
+    store = {
+      getters: {
+        getCurrentAccountId: 1,
+        'accounts/isFeatureEnabledonAccount': vi.fn().mockReturnValue(true),
+      },
+    };
+
+    useStore.mockReturnValue(store);
+    useMapGetter.mockImplementation(key => ({
+      value: store.getters[key],
+    }));
+
+    useI18n.mockReturnValue({ t: vi.fn(key => key) });
+    useRouter.mockReturnValue({ push: vi.fn() });
+    useAdmin.mockReturnValue({ isAdmin: { value: true } });
+    frontendURL.mockImplementation(url => url);
+  });
+
+  it('should return goToCommandHotKeys computed property', () => {
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    expect(goToCommandHotKeys.value).toBeDefined();
+    expect(goToCommandHotKeys.value.length).toBeGreaterThan(0);
+  });
+
+  it('should filter commands based on feature flags', () => {
+    store.getters['accounts/isFeatureEnabledonAccount'] = vi.fn(
+      (accountId, flag) => flag !== MOCK_FEATURE_FLAGS.CRM
+    );
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+
+    mockRoutes.forEach(route => {
+      const command = goToCommandHotKeys.value.find(cmd =>
+        cmd.id.includes(route.name)
+      );
+      if (route.featureFlag === MOCK_FEATURE_FLAGS.CRM) {
+        expect(command).toBeUndefined();
+      } else if (!route.featureFlag) {
+        expect(command).toBeDefined();
+      }
+    });
+  });
+
+  it('should filter commands for non-admin users', () => {
+    useAdmin.mockReturnValue({ isAdmin: { value: false } });
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+
+    const adminOnlyCommands = goToCommandHotKeys.value.filter(
+      cmd =>
+        cmd.id.includes('agent_settings') ||
+        cmd.id.includes('team_settings') ||
+        cmd.id.includes('inbox_settings')
+    );
+    expect(adminOnlyCommands.length).toBe(0);
+  });
+
+  it('should include commands for both admin and agent roles when user is admin', () => {
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    const adminCommand = goToCommandHotKeys.value.find(cmd =>
+      cmd.id.includes('agent_settings')
+    );
+    const agentCommand = goToCommandHotKeys.value.find(cmd =>
+      cmd.id.includes('profile_settings')
+    );
+    expect(adminCommand).toBeDefined();
+    expect(agentCommand).toBeDefined();
+  });
+
+  it('should translate section and title for each command', () => {
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    goToCommandHotKeys.value.forEach(command => {
+      expect(useI18n().t).toHaveBeenCalledWith(
+        expect.stringContaining('COMMAND_BAR.SECTIONS.')
+      );
+      expect(useI18n().t).toHaveBeenCalledWith(
+        expect.stringContaining('COMMAND_BAR.COMMANDS.')
+      );
+      expect(command.section).toBeDefined();
+      expect(command.title).toBeDefined();
+    });
+  });
+
+  it('should call router.push with correct URL when handler is called', () => {
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    goToCommandHotKeys.value.forEach(command => {
+      command.handler();
+      expect(useRouter().push).toHaveBeenCalledWith(expect.any(String));
+    });
+  });
+
+  it('should use current account ID in the path', () => {
+    store.getters.getCurrentAccountId = 42;
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    goToCommandHotKeys.value.forEach(command => {
+      command.handler();
+      expect(useRouter().push).toHaveBeenCalledWith(
+        expect.stringContaining('42')
+      );
+    });
+  });
+
+  it('should include icon for each command', () => {
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    goToCommandHotKeys.value.forEach(command => {
+      expect(command.icon).toBeDefined();
+    });
+  });
+
+  it('should return commands for all enabled features', () => {
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    const enabledFeatureCommands = goToCommandHotKeys.value.filter(cmd =>
+      mockRoutes.some(route => route.featureFlag && cmd.id.includes(route.name))
+    );
+    expect(enabledFeatureCommands.length).toBeGreaterThan(0);
+  });
+
+  it('should not return commands for disabled features', () => {
+    store.getters['accounts/isFeatureEnabledonAccount'] = vi.fn(() => false);
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    const disabledFeatureCommands = goToCommandHotKeys.value.filter(cmd =>
+      mockRoutes.some(route => route.featureFlag && cmd.id.includes(route.name))
+    );
+    expect(disabledFeatureCommands.length).toBe(0);
+  });
+});

app/javascript/dashboard/composables/commands/spec/useInboxHotKeys.spec.js

@@ -0,0 +1,37 @@
+import { useInboxHotKeys } from '../useInboxHotKeys';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useRoute } from 'dashboard/composables/route';
+import { isAInboxViewRoute } from 'dashboard/helper/routeHelpers';
+
+vi.mock('dashboard/composables/useI18n');
+vi.mock('dashboard/composables/route');
+vi.mock('dashboard/helper/routeHelpers');
+vi.mock('shared/helpers/mitt');
+
+describe('useInboxHotKeys', () => {
+  beforeEach(() => {
+    useI18n.mockReturnValue({ t: vi.fn(key => key) });
+    useRoute.mockReturnValue({ name: 'inbox_dashboard' });
+    isAInboxViewRoute.mockReturnValue(true);
+  });
+
+  it('should return inbox hot keys when on an inbox view route', () => {
+    const { inboxHotKeys } = useInboxHotKeys();
+    expect(inboxHotKeys.value.length).toBeGreaterThan(0);
+    expect(inboxHotKeys.value[0].id).toBe('snooze_notification');
+  });
+
+  it('should return an empty array when not on an inbox view route', () => {
+    isAInboxViewRoute.mockReturnValue(false);
+    const { inboxHotKeys } = useInboxHotKeys();
+    expect(inboxHotKeys.value).toEqual([]);
+  });
+
+  it('should have the correct structure for snooze actions', () => {
+    const { inboxHotKeys } = useInboxHotKeys();
+    const snoozeNotificationAction = inboxHotKeys.value.find(
+      action => action.id === 'snooze_notification'
+    );
+    expect(snoozeNotificationAction).toBeDefined();
+  });
+});

app/javascript/dashboard/composables/commands/useAppearanceHotKeys.js

@@ -0,0 +1,70 @@
+import { computed } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import {
+  ICON_APPEARANCE,
+  ICON_LIGHT_MODE,
+  ICON_DARK_MODE,
+  ICON_SYSTEM_MODE,
+} from 'dashboard/helper/commandbar/icons';
+import { LocalStorage } from 'shared/helpers/localStorage';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { setColorTheme } from 'dashboard/helper/themeHelper.js';
+
+const getThemeOptions = t => [
+  {
+    key: 'light',
+    label: t('COMMAND_BAR.COMMANDS.LIGHT_MODE'),
+    icon: ICON_LIGHT_MODE,
+  },
+  {
+    key: 'dark',
+    label: t('COMMAND_BAR.COMMANDS.DARK_MODE'),
+    icon: ICON_DARK_MODE,
+  },
+  {
+    key: 'auto',
+    label: t('COMMAND_BAR.COMMANDS.SYSTEM_MODE'),
+    icon: ICON_SYSTEM_MODE,
+  },
+];
+
+const setAppearance = theme => {
+  LocalStorage.set(LOCAL_STORAGE_KEYS.COLOR_SCHEME, theme);
+  const isOSOnDarkMode = window.matchMedia(
+    '(prefers-color-scheme: dark)'
+  ).matches;
+  setColorTheme(isOSOnDarkMode);
+};
+
+export function useAppearanceHotKeys() {
+  const { t } = useI18n();
+
+  const themeOptions = computed(() => getThemeOptions(t));
+
+  const goToAppearanceHotKeys = computed(() => {
+    const options = themeOptions.value.map(theme => ({
+      id: theme.key,
+      title: theme.label,
+      parent: 'appearance_settings',
+      section: t('COMMAND_BAR.SECTIONS.APPEARANCE'),
+      icon: theme.icon,
+      handler: () => {
+        setAppearance(theme.key);
+      },
+    }));
+    return [
+      {
+        id: 'appearance_settings',
+        title: t('COMMAND_BAR.COMMANDS.CHANGE_APPEARANCE'),
+        section: t('COMMAND_BAR.SECTIONS.APPEARANCE'),
+        icon: ICON_APPEARANCE,
+        children: options.map(option => option.id),
+      },
+      ...options,
+    ];
+  });
+
+  return {
+    goToAppearanceHotKeys,
+  };
+}

app/javascript/dashboard/composables/commands/useBulkActionsHotKeys.js

@@ -0,0 +1,89 @@
+import { computed } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useMapGetter } from 'dashboard/composables/store';
+import wootConstants from 'dashboard/constants/globals';
+
+import {
+  CMD_BULK_ACTION_SNOOZE_CONVERSATION,
+  CMD_BULK_ACTION_REOPEN_CONVERSATION,
+  CMD_BULK_ACTION_RESOLVE_CONVERSATION,
+} from 'dashboard/helper/commandbar/events';
+import {
+  ICON_SNOOZE_CONVERSATION,
+  ICON_REOPEN_CONVERSATION,
+  ICON_RESOLVE_CONVERSATION,
+} from 'dashboard/helper/commandbar/icons';
+import { emitter } from 'shared/helpers/mitt';
+
+import { createSnoozeHandlers } from 'dashboard/helper/commandbar/actions';
+
+const SNOOZE_OPTIONS = wootConstants.SNOOZE_OPTIONS;
+
+const createEmitHandler = event => () => emitter.emit(event);
+
+const SNOOZE_CONVERSATION_BULK_ACTIONS = [
+  {
+    id: 'bulk_action_snooze_conversation',
+    title: 'COMMAND_BAR.COMMANDS.SNOOZE_CONVERSATION',
+    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
+    icon: ICON_SNOOZE_CONVERSATION,
+    children: Object.values(SNOOZE_OPTIONS),
+  },
+  ...createSnoozeHandlers(
+    CMD_BULK_ACTION_SNOOZE_CONVERSATION,
+    'bulk_action_snooze_conversation',
+    'COMMAND_BAR.SECTIONS.BULK_ACTIONS'
+  ),
+];
+
+const RESOLVED_CONVERSATION_BULK_ACTIONS = [
+  {
+    id: 'bulk_action_reopen_conversation',
+    title: 'COMMAND_BAR.COMMANDS.REOPEN_CONVERSATION',
+    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
+    icon: ICON_REOPEN_CONVERSATION,
+    handler: createEmitHandler(CMD_BULK_ACTION_REOPEN_CONVERSATION),
+  },
+];
+
+const OPEN_CONVERSATION_BULK_ACTIONS = [
+  {
+    id: 'bulk_action_resolve_conversation',
+    title: 'COMMAND_BAR.COMMANDS.RESOLVE_CONVERSATION',
+    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
+    icon: ICON_RESOLVE_CONVERSATION,
+    handler: createEmitHandler(CMD_BULK_ACTION_RESOLVE_CONVERSATION),
+  },
+];
+
+export function useBulkActionsHotKeys() {
+  const { t } = useI18n();
+
+  const selectedConversations = useMapGetter(
+    'bulkActions/getSelectedConversationIds'
+  );
+
+  const prepareActions = actions => {
+    return actions.map(action => ({
+      ...action,
+      title: t(action.title),
+      section: t(action.section),
+    }));
+  };
+
+  const bulkActionsHotKeys = computed(() => {
+    let actions = [];
+    if (selectedConversations.value.length > 0) {
+      actions = [
+        ...SNOOZE_CONVERSATION_BULK_ACTIONS,
+        ...RESOLVED_CONVERSATION_BULK_ACTIONS,
+        ...OPEN_CONVERSATION_BULK_ACTIONS,
+      ];
+    }
+    return prepareActions(actions);
+  });
+
+  return {
+    bulkActionsHotKeys,
+  };
+}

app/javascript/dashboard/composables/commands/useConversationHotKeys.js

@@ -0,0 +1,408 @@
+import { computed } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'dashboard/composables/route';
+import { emitter } from 'shared/helpers/mitt';
+import { useConversationLabels } from 'dashboard/composables/useConversationLabels';
+import { useAI } from 'dashboard/composables/useAI';
+import { useAgentsList } from 'dashboard/composables/useAgentsList';
+import { CMD_AI_ASSIST } from 'dashboard/helper/commandbar/events';
+import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
+
+import wootConstants from 'dashboard/constants/globals';
+
+import {
+  ICON_ADD_LABEL,
+  ICON_ASSIGN_AGENT,
+  ICON_ASSIGN_PRIORITY,
+  ICON_ASSIGN_TEAM,
+  ICON_REMOVE_LABEL,
+  ICON_PRIORITY_URGENT,
+  ICON_PRIORITY_HIGH,
+  ICON_PRIORITY_LOW,
+  ICON_PRIORITY_MEDIUM,
+  ICON_PRIORITY_NONE,
+  ICON_AI_ASSIST,
+  ICON_AI_SUMMARY,
+  ICON_AI_SHORTEN,
+  ICON_AI_EXPAND,
+  ICON_AI_GRAMMAR,
+} from 'dashboard/helper/commandbar/icons';
+
+import {
+  OPEN_CONVERSATION_ACTIONS,
+  SNOOZE_CONVERSATION_ACTIONS,
+  RESOLVED_CONVERSATION_ACTIONS,
+  SEND_TRANSCRIPT_ACTION,
+  UNMUTE_ACTION,
+  MUTE_ACTION,
+} from 'dashboard/helper/commandbar/actions';
+import {
+  isAConversationRoute,
+  isAInboxViewRoute,
+} from 'dashboard/helper/routeHelpers';
+
+const prepareActions = (actions, t) => {
+  return actions.map(action => ({
+    ...action,
+    title: t(action.title),
+    section: t(action.section),
+  }));
+};
+
+const createPriorityOptions = (t, currentPriority) => {
+  return [
+    {
+      label: t('CONVERSATION.PRIORITY.OPTIONS.NONE'),
+      key: null,
+      icon: ICON_PRIORITY_NONE,
+    },
+    {
+      label: t('CONVERSATION.PRIORITY.OPTIONS.URGENT'),
+      key: 'urgent',
+      icon: ICON_PRIORITY_URGENT,
+    },
+    {
+      label: t('CONVERSATION.PRIORITY.OPTIONS.HIGH'),
+      key: 'high',
+      icon: ICON_PRIORITY_HIGH,
+    },
+    {
+      label: t('CONVERSATION.PRIORITY.OPTIONS.MEDIUM'),
+      key: 'medium',
+      icon: ICON_PRIORITY_MEDIUM,
+    },
+    {
+      label: t('CONVERSATION.PRIORITY.OPTIONS.LOW'),
+      key: 'low',
+      icon: ICON_PRIORITY_LOW,
+    },
+  ].filter(item => item.key !== currentPriority);
+};
+
+const createNonDraftMessageAIAssistActions = (t, replyMode) => {
+  if (replyMode === REPLY_EDITOR_MODES.REPLY) {
+    return [
+      {
+        label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.REPLY_SUGGESTION'),
+        key: 'reply_suggestion',
+        icon: ICON_AI_ASSIST,
+      },
+    ];
+  }
+  return [
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.SUMMARIZE'),
+      key: 'summarize',
+      icon: ICON_AI_SUMMARY,
+    },
+  ];
+};
+
+const createDraftMessageAIAssistActions = t => {
+  return [
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.REPHRASE'),
+      key: 'rephrase',
+      icon: ICON_AI_ASSIST,
+    },
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.FIX_SPELLING_GRAMMAR'),
+      key: 'fix_spelling_grammar',
+      icon: ICON_AI_GRAMMAR,
+    },
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.EXPAND'),
+      key: 'expand',
+      icon: ICON_AI_EXPAND,
+    },
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.SHORTEN'),
+      key: 'shorten',
+      icon: ICON_AI_SHORTEN,
+    },
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.MAKE_FRIENDLY'),
+      key: 'make_friendly',
+      icon: ICON_AI_ASSIST,
+    },
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.MAKE_FORMAL'),
+      key: 'make_formal',
+      icon: ICON_AI_ASSIST,
+    },
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.SIMPLIFY'),
+      key: 'simplify',
+      icon: ICON_AI_ASSIST,
+    },
+  ];
+};
+
+export function useConversationHotKeys() {
+  const { t } = useI18n();
+  const store = useStore();
+  const route = useRoute();
+
+  const {
+    activeLabels,
+    inactiveLabels,
+    addLabelToConversation,
+    removeLabelFromConversation,
+  } = useConversationLabels();
+
+  const { isAIIntegrationEnabled } = useAI();
+  const { agentsList } = useAgentsList();
+
+  const currentChat = useMapGetter('getSelectedChat');
+  const replyMode = useMapGetter('draftMessages/getReplyEditorMode');
+  const contextMenuChatId = useMapGetter('getContextMenuChatId');
+  const teams = useMapGetter('teams/getTeams');
+  const getDraftMessage = useMapGetter('draftMessages/get');
+
+  const conversationId = computed(() => currentChat.value?.id);
+  const draftKey = computed(
+    () => `draft-${conversationId.value}-${replyMode.value}`
+  );
+
+  const draftMessage = computed(() => getDraftMessage.value(draftKey.value));
+
+  const hasAnAssignedTeam = computed(() => !!currentChat.value?.meta?.team);
+
+  const teamsList = computed(() => {
+    if (hasAnAssignedTeam.value) {
+      return [{ id: 0, name: t('TEAMS_SETTINGS.LIST.NONE') }, ...teams.value];
+    }
+    return teams.value;
+  });
+
+  const onChangeAssignee = action => {
+    store.dispatch('assignAgent', {
+      conversationId: currentChat.value.id,
+      agentId: action.agentInfo.id,
+    });
+  };
+
+  const onChangePriority = action => {
+    store.dispatch('assignPriority', {
+      conversationId: currentChat.value.id,
+      priority: action.priority.key,
+    });
+  };
+
+  const onChangeTeam = action => {
+    store.dispatch('assignTeam', {
+      conversationId: currentChat.value.id,
+      teamId: action.teamInfo.id,
+    });
+  };
+
+  const statusActions = computed(() => {
+    const isOpen = currentChat.value?.status === wootConstants.STATUS_TYPE.OPEN;
+    const isSnoozed =
+      currentChat.value?.status === wootConstants.STATUS_TYPE.SNOOZED;
+    const isResolved =
+      currentChat.value?.status === wootConstants.STATUS_TYPE.RESOLVED;
+
+    let actions = [];
+    if (isOpen) {
+      actions = [...OPEN_CONVERSATION_ACTIONS, ...SNOOZE_CONVERSATION_ACTIONS];
+    } else if (isResolved || isSnoozed) {
+      actions = RESOLVED_CONVERSATION_ACTIONS;
+    }
+    return prepareActions(actions, t);
+  });
+
+  const priorityOptions = computed(() =>
+    createPriorityOptions(t, currentChat.value?.priority)
+  );
+
+  const assignAgentActions = computed(() => {
+    const agentOptions = agentsList.value.map(agent => ({
+      id: `agent-${agent.id}`,
+      title: agent.name,
+      parent: 'assign_an_agent',
+      section: t('COMMAND_BAR.SECTIONS.CHANGE_ASSIGNEE'),
+      agentInfo: agent,
+      icon: ICON_ASSIGN_AGENT,
+      handler: onChangeAssignee,
+    }));
+    return [
+      {
+        id: 'assign_an_agent',
+        title: t('COMMAND_BAR.COMMANDS.ASSIGN_AN_AGENT'),
+        section: t('COMMAND_BAR.SECTIONS.CONVERSATION'),
+        icon: ICON_ASSIGN_AGENT,
+        children: agentOptions.map(option => option.id),
+      },
+      ...agentOptions,
+    ];
+  });
+
+  const assignPriorityActions = computed(() => {
+    const options = priorityOptions.value.map(priority => ({
+      id: `priority-${priority.key}`,
+      title: priority.label,
+      parent: 'assign_priority',
+      section: t('COMMAND_BAR.SECTIONS.CHANGE_PRIORITY'),
+      priority: priority,
+      icon: priority.icon,
+      handler: onChangePriority,
+    }));
+    return [
+      {
+        id: 'assign_priority',
+        title: t('COMMAND_BAR.COMMANDS.ASSIGN_PRIORITY'),
+        section: t('COMMAND_BAR.SECTIONS.CONVERSATION'),
+        icon: ICON_ASSIGN_PRIORITY,
+        children: options.map(option => option.id),
+      },
+      ...options,
+    ];
+  });
+
+  const assignTeamActions = computed(() => {
+    const teamOptions = teamsList.value.map(team => ({
+      id: `team-${team.id}`,
+      title: team.name,
+      parent: 'assign_a_team',
+      section: t('COMMAND_BAR.SECTIONS.CHANGE_TEAM'),
+      teamInfo: team,
+      icon: ICON_ASSIGN_TEAM,
+      handler: onChangeTeam,
+    }));
+    return [
+      {
+        id: 'assign_a_team',
+        title: t('COMMAND_BAR.COMMANDS.ASSIGN_A_TEAM'),
+        section: t('COMMAND_BAR.SECTIONS.CONVERSATION'),
+        icon: ICON_ASSIGN_TEAM,
+        children: teamOptions.map(option => option.id),
+      },
+      ...teamOptions,
+    ];
+  });
+
+  const addLabelActions = computed(() => {
+    const availableLabels = inactiveLabels.value.map(label => ({
+      id: label.title,
+      title: `#${label.title}`,
+      parent: 'add_a_label_to_the_conversation',
+      section: t('COMMAND_BAR.SECTIONS.ADD_LABEL'),
+      icon: ICON_ADD_LABEL,
+      handler: action => addLabelToConversation({ title: action.id }),
+    }));
+    return [
+      ...availableLabels,
+      {
+        id: 'add_a_label_to_the_conversation',
+        title: t('COMMAND_BAR.COMMANDS.ADD_LABELS_TO_CONVERSATION'),
+        section: t('COMMAND_BAR.SECTIONS.CONVERSATION'),
+        icon: ICON_ADD_LABEL,
+        children: inactiveLabels.value.map(label => label.title),
+      },
+    ];
+  });
+
+  const removeLabelActions = computed(() => {
+    const activeLabelsComputed = activeLabels.value.map(label => ({
+      id: label.title,
+      title: `#${label.title}`,
+      parent: 'remove_a_label_to_the_conversation',
+      section: t('COMMAND_BAR.SECTIONS.REMOVE_LABEL'),
+      icon: ICON_REMOVE_LABEL,
+      handler: action => removeLabelFromConversation(action.id),
+    }));
+    return [
+      ...activeLabelsComputed,
+      {
+        id: 'remove_a_label_to_the_conversation',
+        title: t('COMMAND_BAR.COMMANDS.REMOVE_LABEL_FROM_CONVERSATION'),
+        section: t('COMMAND_BAR.SECTIONS.CONVERSATION'),
+        icon: ICON_REMOVE_LABEL,
+        children: activeLabels.value.map(label => label.title),
+      },
+    ];
+  });
+
+  const labelActions = computed(() => {
+    if (activeLabels.value.length) {
+      return [...addLabelActions.value, ...removeLabelActions.value];
+    }
+    return addLabelActions.value;
+  });
+
+  const conversationAdditionalActions = computed(() => {
+    return prepareActions(
+      [
+        currentChat.value.muted ? UNMUTE_ACTION : MUTE_ACTION,
+        SEND_TRANSCRIPT_ACTION,
+      ],
+      t
+    );
+  });
+
+  const AIAssistActions = computed(() => {
+    const aiOptions = draftMessage.value
+      ? createDraftMessageAIAssistActions(t)
+      : createNonDraftMessageAIAssistActions(t, replyMode.value);
+    const options = aiOptions.map(item => ({
+      id: `ai-assist-${item.key}`,
+      title: item.label,
+      parent: 'ai_assist',
+      section: t('COMMAND_BAR.SECTIONS.AI_ASSIST'),
+      priority: item,
+      icon: item.icon,
+      handler: () => emitter.emit(CMD_AI_ASSIST, item.key),
+    }));
+    return [
+      {
+        id: 'ai_assist',
+        title: t('COMMAND_BAR.COMMANDS.AI_ASSIST'),
+        section: t('COMMAND_BAR.SECTIONS.AI_ASSIST'),
+        icon: ICON_AI_ASSIST,
+        children: options.map(option => option.id),
+      },
+      ...options,
+    ];
+  });
+
+  const isConversationOrInboxRoute = computed(() => {
+    return isAConversationRoute(route.name) || isAInboxViewRoute(route.name);
+  });
+
+  const shouldShowSnoozeOption = computed(() => {
+    return (
+      isAConversationRoute(route.name, true, false) && contextMenuChatId.value
+    );
+  });
+
+  const getDefaultConversationHotKeys = computed(() => {
+    const defaultConversationHotKeys = [
+      ...statusActions.value,
+      ...conversationAdditionalActions.value,
+      ...assignAgentActions.value,
+      ...assignTeamActions.value,
+      ...labelActions.value,
+      ...assignPriorityActions.value,
+    ];
+    if (isAIIntegrationEnabled.value) {
+      return [...defaultConversationHotKeys, ...AIAssistActions.value];
+    }
+    return defaultConversationHotKeys;
+  });
+
+  const conversationHotKeys = computed(() => {
+    if (shouldShowSnoozeOption.value) {
+      return prepareActions(SNOOZE_CONVERSATION_ACTIONS, t);
+    }
+    if (isConversationOrInboxRoute.value) {
+      return getDefaultConversationHotKeys.value;
+    }
+    return [];
+  });
+
+  return {
+    conversationHotKeys,
+  };
+}

app/javascript/dashboard/composables/commands/useGoToCommandHotKeys.js

@@ -1,3 +1,8 @@
+import { computed } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useRouter } from 'dashboard/composables/route';
+import { useAdmin } from 'dashboard/composables/useAdmin';
 import {
   ICON_ACCOUNT_SETTINGS,
   ICON_AGENT_REPORTS,
@@ -14,11 +19,9 @@ import {
   ICON_TEAM_REPORTS,
   ICON_USER_PROFILE,
   ICON_CONVERSATION_REPORTS,
-} from './CommandBarIcons';
-import { frontendURL } from '../../../helper/URLHelper';
-import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import { FEATURE_FLAGS } from '../../../featureFlags';
+} from 'dashboard/helper/commandbar/icons';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 const GO_TO_COMMANDS = [
   {
@@ -172,45 +175,45 @@ const GO_TO_COMMANDS = [
   },
 ];
 
-export default {
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    goToCommandHotKeys() {
-      let commands = GO_TO_COMMANDS.filter(cmd => {
-        if (cmd.featureFlag) {
-          return this.isFeatureEnabledonAccount(
-            this.accountId,
-            cmd.featureFlag
-          );
-        }
-        return true;
-      });
+export function useGoToCommandHotKeys() {
+  const { t } = useI18n();
+  const router = useRouter();
+  const { isAdmin } = useAdmin();
 
-      if (!this.isAdmin) {
-        commands = commands.filter(command => command.role.includes('agent'));
+  const currentAccountId = useMapGetter('getCurrentAccountId');
+  const isFeatureEnabledOnAccount = useMapGetter(
+    'accounts/isFeatureEnabledonAccount'
+  );
+
+  const openRoute = url => {
+    router.push(frontendURL(url));
+  };
+
+  const goToCommandHotKeys = computed(() => {
+    let commands = GO_TO_COMMANDS.filter(cmd => {
+      if (cmd.featureFlag) {
+        return isFeatureEnabledOnAccount.value(
+          currentAccountId.value,
+          cmd.featureFlag
+        );
       }
+      return true;
+    });
 
-      return commands.map(command => ({
-        id: command.id,
-        section: this.$t(command.section),
-        title: this.$t(command.title),
-        icon: command.icon,
-        handler: () => this.openRoute(command.path(this.accountId)),
-      }));
-    },
-  },
-  methods: {
-    openRoute(url) {
-      this.$router.push(frontendURL(url));
-    },
-  },
-};
+    if (!isAdmin.value) {
+      commands = commands.filter(command => command.role.includes('agent'));
+    }
+
+    return commands.map(command => ({
+      id: command.id,
+      section: t(command.section),
+      title: t(command.title),
+      icon: command.icon,
+      handler: () => openRoute(command.path(currentAccountId.value)),
+    }));
+  });
+
+  return {
+    goToCommandHotKeys,
+  };
+}

app/javascript/dashboard/composables/commands/useInboxHotKeys.js

@@ -1,13 +1,19 @@
+import { computed } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useRoute } from 'dashboard/composables/route';
 import wootConstants from 'dashboard/constants/globals';
 
-import { CMD_SNOOZE_NOTIFICATION } from './commandBarBusEvents';
-import { ICON_SNOOZE_NOTIFICATION } from './CommandBarIcons';
+import { CMD_SNOOZE_NOTIFICATION } from 'dashboard/helper/commandbar/events';
+import { ICON_SNOOZE_NOTIFICATION } from 'dashboard/helper/commandbar/icons';
 import { emitter } from 'shared/helpers/mitt';
 
 import { isAInboxViewRoute } from 'dashboard/helper/routeHelpers';
 
 const SNOOZE_OPTIONS = wootConstants.SNOOZE_OPTIONS;
 
+const createSnoozeHandler = option => () =>
+  emitter.emit(CMD_SNOOZE_NOTIFICATION, option);
+
 const INBOX_SNOOZE_EVENTS = [
   {
     id: 'snooze_notification',
@@ -21,8 +27,7 @@ const INBOX_SNOOZE_EVENTS = [
     parent: 'snooze_notification',
     section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
     icon: ICON_SNOOZE_NOTIFICATION,
-    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.AN_HOUR_FROM_NOW),
+    handler: createSnoozeHandler(SNOOZE_OPTIONS.AN_HOUR_FROM_NOW),
   },
   {
     id: SNOOZE_OPTIONS.UNTIL_TOMORROW,
@@ -30,8 +35,7 @@ const INBOX_SNOOZE_EVENTS = [
     section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
     parent: 'snooze_notification',
     icon: ICON_SNOOZE_NOTIFICATION,
-    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_TOMORROW),
+    handler: createSnoozeHandler(SNOOZE_OPTIONS.UNTIL_TOMORROW),
   },
   {
     id: SNOOZE_OPTIONS.UNTIL_NEXT_WEEK,
@@ -39,8 +43,7 @@ const INBOX_SNOOZE_EVENTS = [
     section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
     parent: 'snooze_notification',
     icon: ICON_SNOOZE_NOTIFICATION,
-    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_WEEK),
+    handler: createSnoozeHandler(SNOOZE_OPTIONS.UNTIL_NEXT_WEEK),
   },
   {
     id: SNOOZE_OPTIONS.UNTIL_NEXT_MONTH,
@@ -48,8 +51,7 @@ const INBOX_SNOOZE_EVENTS = [
     section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
     parent: 'snooze_notification',
     icon: ICON_SNOOZE_NOTIFICATION,
-    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_MONTH),
+    handler: createSnoozeHandler(SNOOZE_OPTIONS.UNTIL_NEXT_MONTH),
   },
   {
     id: SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME,
@@ -57,26 +59,30 @@ const INBOX_SNOOZE_EVENTS = [
     section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
     parent: 'snooze_notification',
     icon: ICON_SNOOZE_NOTIFICATION,
-    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME),
+    handler: createSnoozeHandler(SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME),
   },
 ];
-export default {
-  computed: {
-    inboxHotKeys() {
-      if (isAInboxViewRoute(this.$route.name)) {
-        return this.prepareActions(INBOX_SNOOZE_EVENTS);
-      }
-      return [];
-    },
-  },
-  methods: {
-    prepareActions(actions) {
-      return actions.map(action => ({
-        ...action,
-        title: this.$t(action.title),
-        section: this.$t(action.section),
-      }));
-    },
-  },
-};
+
+export function useInboxHotKeys() {
+  const { t } = useI18n();
+  const route = useRoute();
+
+  const prepareActions = actions => {
+    return actions.map(action => ({
+      ...action,
+      title: t(action.title),
+      section: action.section ? t(action.section) : undefined,
+    }));
+  };
+
+  const inboxHotKeys = computed(() => {
+    if (isAInboxViewRoute(route.name)) {
+      return prepareActions(INBOX_SNOOZE_EVENTS);
+    }
+    return [];
+  });
+
+  return {
+    inboxHotKeys,
+  };
+}

app/javascript/dashboard/composables/spec/fixtures/reportFixtures.js

@@ -0,0 +1,37 @@
+export const summary = {
+  avg_first_response_time: '198.6666666666667',
+  avg_resolution_time: '208.3333333333333',
+  conversations_count: 5000,
+  incoming_messages_count: 5,
+  outgoing_messages_count: 3,
+  previous: {
+    avg_first_response_time: '89.0',
+    avg_resolution_time: '145.0',
+    conversations_count: 4,
+    incoming_messages_count: 5,
+    outgoing_messages_count: 4,
+    resolutions_count: 0,
+  },
+  resolutions_count: 3,
+};
+
+export const botSummary = {
+  bot_resolutions_count: 10,
+  bot_handoffs_count: 20,
+  previous: {
+    bot_resolutions_count: 8,
+    bot_handoffs_count: 5,
+  },
+};
+
+export const report = {
+  data: [
+    { value: '0.00', timestamp: 1647541800, count: 0 },
+    { value: '0.00', timestamp: 1647628200, count: 0 },
+    { value: '0.00', timestamp: 1647714600, count: 0 },
+    { value: '0.00', timestamp: 1647801000, count: 0 },
+    { value: '0.01', timestamp: 1647887400, count: 4 },
+    { value: '0.00', timestamp: 1647973800, count: 0 },
+    { value: '0.00', timestamp: 1648060200, count: 0 },
+  ],
+};

app/javascript/dashboard/composables/spec/useAutomation.spec.js

@@ -0,0 +1,295 @@
+import { useAutomation } from '../useAutomation';
+import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from '../useI18n';
+import * as automationHelper from 'dashboard/helper/automationHelper';
+import {
+  customAttributes,
+  agents,
+  teams,
+  labels,
+  statusFilterOptions,
+  campaigns,
+  contacts,
+  inboxes,
+  languages,
+  countries,
+  slaPolicies,
+} from 'dashboard/helper/specs/fixtures/automationFixtures.js';
+import { MESSAGE_CONDITION_VALUES } from 'dashboard/constants/automation';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables');
+vi.mock('../useI18n');
+vi.mock('dashboard/helper/automationHelper');
+
+describe('useAutomation', () => {
+  beforeEach(() => {
+    useStoreGetters.mockReturnValue({
+      'attributes/getAttributes': { value: customAttributes },
+      'attributes/getAttributesByModel': {
+        value: model => {
+          return model === 'conversation_attribute'
+            ? [{ id: 1, name: 'Conversation Attribute' }]
+            : [{ id: 2, name: 'Contact Attribute' }];
+        },
+      },
+    });
+    useMapGetter.mockImplementation(getter => {
+      const getterMap = {
+        'agents/getAgents': agents,
+        'campaigns/getAllCampaigns': campaigns,
+        'contacts/getContacts': contacts,
+        'inboxes/getInboxes': inboxes,
+        'labels/getLabels': labels,
+        'teams/getTeams': teams,
+        'sla/getSLA': slaPolicies,
+      };
+      return { value: getterMap[getter] };
+    });
+    useI18n.mockReturnValue({ t: key => key });
+    useAlert.mockReturnValue(vi.fn());
+
+    // Mock getConditionOptions for different types
+    automationHelper.getConditionOptions.mockImplementation(options => {
+      const { type } = options;
+      switch (type) {
+        case 'status':
+          return statusFilterOptions;
+        case 'team_id':
+          return teams;
+        case 'assignee_id':
+          return agents;
+        case 'contact':
+          return contacts;
+        case 'inbox_id':
+          return inboxes;
+        case 'campaigns':
+          return campaigns;
+        case 'browser_language':
+          return languages;
+        case 'country_code':
+          return countries;
+        case 'message_type':
+          return MESSAGE_CONDITION_VALUES;
+        default:
+          return [];
+      }
+    });
+
+    // Mock getActionOptions for different types
+    automationHelper.getActionOptions.mockImplementation(options => {
+      const { type } = options;
+      switch (type) {
+        case 'add_label':
+          return labels;
+        case 'assign_team':
+          return teams;
+        case 'assign_agent':
+          return agents;
+        case 'send_email_to_team':
+          return teams;
+        case 'send_message':
+          return [];
+        case 'add_sla':
+          return slaPolicies;
+        default:
+          return [];
+      }
+    });
+  });
+
+  it('initializes computed properties correctly', () => {
+    const {
+      agents: computedAgents,
+      campaigns: computedCampaigns,
+      contacts: computedContacts,
+      inboxes: computedInboxes,
+      labels: computedLabels,
+      teams: computedTeams,
+      slaPolicies: computedSlaPolicies,
+    } = useAutomation();
+
+    expect(computedAgents.value).toEqual(agents);
+    expect(computedCampaigns.value).toEqual(campaigns);
+    expect(computedContacts.value).toEqual(contacts);
+    expect(computedInboxes.value).toEqual(inboxes);
+    expect(computedLabels.value).toEqual(labels);
+    expect(computedTeams.value).toEqual(teams);
+    expect(computedSlaPolicies.value).toEqual(slaPolicies);
+  });
+
+  it('appends new condition and action correctly', () => {
+    const { appendNewCondition, appendNewAction } = useAutomation();
+    const mockAutomation = {
+      event_name: 'message_created',
+      conditions: [],
+      actions: [],
+    };
+
+    automationHelper.getDefaultConditions.mockReturnValue([{}]);
+    automationHelper.getDefaultActions.mockReturnValue([{}]);
+
+    appendNewCondition(mockAutomation);
+    appendNewAction(mockAutomation);
+
+    expect(automationHelper.getDefaultConditions).toHaveBeenCalledWith(
+      'message_created'
+    );
+    expect(automationHelper.getDefaultActions).toHaveBeenCalled();
+    expect(mockAutomation.conditions).toHaveLength(1);
+    expect(mockAutomation.actions).toHaveLength(1);
+  });
+
+  it('removes filter and action correctly', () => {
+    const { removeFilter, removeAction } = useAutomation();
+    const mockAutomation = {
+      conditions: [{ id: 1 }, { id: 2 }],
+      actions: [{ id: 1 }, { id: 2 }],
+    };
+
+    removeFilter(mockAutomation, 0);
+    removeAction(mockAutomation, 0);
+
+    expect(mockAutomation.conditions).toHaveLength(1);
+    expect(mockAutomation.actions).toHaveLength(1);
+    expect(mockAutomation.conditions[0].id).toBe(2);
+    expect(mockAutomation.actions[0].id).toBe(2);
+  });
+
+  it('resets filter and action correctly', () => {
+    const { resetFilter, resetAction } = useAutomation();
+    const mockAutomation = {
+      event_name: 'message_created',
+      conditions: [
+        {
+          attribute_key: 'status',
+          filter_operator: 'equal_to',
+          values: 'open',
+        },
+      ],
+      actions: [{ action_name: 'assign_agent', action_params: [1] }],
+    };
+    const mockAutomationTypes = {
+      message_created: {
+        conditions: [
+          { key: 'status', filterOperators: [{ value: 'not_equal_to' }] },
+        ],
+      },
+    };
+
+    resetFilter(
+      mockAutomation,
+      mockAutomationTypes,
+      0,
+      mockAutomation.conditions[0]
+    );
+    resetAction(mockAutomation, 0);
+
+    expect(mockAutomation.conditions[0].filter_operator).toBe('not_equal_to');
+    expect(mockAutomation.conditions[0].values).toBe('');
+    expect(mockAutomation.actions[0].action_params).toEqual([]);
+  });
+
+  it('formats automation correctly', () => {
+    const { formatAutomation } = useAutomation();
+    const mockAutomation = {
+      conditions: [{ attribute_key: 'status', values: ['open'] }],
+      actions: [{ action_name: 'assign_agent', action_params: [1] }],
+    };
+    const mockAutomationTypes = {};
+    const mockAutomationActionTypes = [
+      { key: 'assign_agent', inputType: 'search_select' },
+    ];
+
+    automationHelper.getConditionOptions.mockReturnValue([
+      { id: 'open', name: 'open' },
+    ]);
+    automationHelper.getActionOptions.mockReturnValue([
+      { id: 1, name: 'Agent 1' },
+    ]);
+
+    const result = formatAutomation(
+      mockAutomation,
+      customAttributes,
+      mockAutomationTypes,
+      mockAutomationActionTypes
+    );
+
+    expect(result.conditions[0].values).toEqual([{ id: 'open', name: 'open' }]);
+    expect(result.actions[0].action_params).toEqual([
+      { id: 1, name: 'Agent 1' },
+    ]);
+  });
+
+  it('manifests custom attributes correctly', () => {
+    const { manifestCustomAttributes } = useAutomation();
+    const mockAutomationTypes = {
+      message_created: { conditions: [] },
+      conversation_created: { conditions: [] },
+      conversation_updated: { conditions: [] },
+      conversation_opened: { conditions: [] },
+    };
+
+    automationHelper.generateCustomAttributeTypes.mockReturnValue([]);
+    automationHelper.generateCustomAttributes.mockReturnValue([]);
+
+    manifestCustomAttributes(mockAutomationTypes);
+
+    expect(automationHelper.generateCustomAttributeTypes).toHaveBeenCalledTimes(
+      2
+    );
+    expect(automationHelper.generateCustomAttributes).toHaveBeenCalledTimes(1);
+    Object.values(mockAutomationTypes).forEach(type => {
+      expect(type.conditions).toHaveLength(0);
+    });
+  });
+
+  it('gets condition dropdown values correctly', () => {
+    const { getConditionDropdownValues } = useAutomation();
+
+    expect(getConditionDropdownValues('status')).toEqual(statusFilterOptions);
+    expect(getConditionDropdownValues('team_id')).toEqual(teams);
+    expect(getConditionDropdownValues('assignee_id')).toEqual(agents);
+    expect(getConditionDropdownValues('contact')).toEqual(contacts);
+    expect(getConditionDropdownValues('inbox_id')).toEqual(inboxes);
+    expect(getConditionDropdownValues('campaigns')).toEqual(campaigns);
+    expect(getConditionDropdownValues('browser_language')).toEqual(languages);
+    expect(getConditionDropdownValues('country_code')).toEqual(countries);
+    expect(getConditionDropdownValues('message_type')).toEqual(
+      MESSAGE_CONDITION_VALUES
+    );
+  });
+
+  it('gets action dropdown values correctly', () => {
+    const { getActionDropdownValues } = useAutomation();
+
+    expect(getActionDropdownValues('add_label')).toEqual(labels);
+    expect(getActionDropdownValues('assign_team')).toEqual(teams);
+    expect(getActionDropdownValues('assign_agent')).toEqual(agents);
+    expect(getActionDropdownValues('send_email_to_team')).toEqual(teams);
+    expect(getActionDropdownValues('send_message')).toEqual([]);
+    expect(getActionDropdownValues('add_sla')).toEqual(slaPolicies);
+  });
+
+  it('handles event change correctly', () => {
+    const { onEventChange } = useAutomation();
+    const mockAutomation = {
+      event_name: 'message_created',
+      conditions: [],
+      actions: [],
+    };
+
+    automationHelper.getDefaultConditions.mockReturnValue([{}]);
+    automationHelper.getDefaultActions.mockReturnValue([{}]);
+
+    onEventChange(mockAutomation);
+
+    expect(automationHelper.getDefaultConditions).toHaveBeenCalledWith(
+      'message_created'
+    );
+    expect(automationHelper.getDefaultActions).toHaveBeenCalled();
+    expect(mockAutomation.conditions).toHaveLength(1);
+    expect(mockAutomation.actions).toHaveLength(1);
+  });
+});

app/javascript/dashboard/composables/spec/useMacros.spec.js

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { useMacros } from '../useMacros';
 import { useStoreGetters } from 'dashboard/composables/store';
-import { PRIORITY_CONDITION_VALUES } from 'dashboard/helper/automationHelper.js';
+import { PRIORITY_CONDITION_VALUES } from 'dashboard/constants/automation';
 
 vi.mock('dashboard/composables/store');
 vi.mock('dashboard/helper/automationHelper.js');

app/javascript/dashboard/composables/spec/useReportMetrics.spec.js

@@ -0,0 +1,61 @@
+import { ref } from 'vue';
+import { useReportMetrics } from '../useReportMetrics';
+import { useMapGetter } from 'dashboard/composables/store';
+import { summary, botSummary } from './fixtures/reportFixtures';
+
+vi.mock('dashboard/composables/store');
+vi.mock('@chatwoot/utils', () => ({
+  formatTime: vi.fn(time => `formatted_${time}`),
+}));
+
+describe('useReportMetrics', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useMapGetter.mockReturnValue(ref(summary));
+  });
+
+  it('calculates trend correctly', () => {
+    const { calculateTrend } = useReportMetrics();
+
+    expect(calculateTrend('conversations_count')).toBe(124900);
+    expect(calculateTrend('incoming_messages_count')).toBe(0);
+    expect(calculateTrend('avg_first_response_time')).toBe(123);
+  });
+
+  it('returns 0 for trend when previous value is not available', () => {
+    const { calculateTrend } = useReportMetrics();
+
+    expect(calculateTrend('non_existent_key')).toBe(0);
+  });
+
+  it('identifies average metric types correctly', () => {
+    const { isAverageMetricType } = useReportMetrics();
+
+    expect(isAverageMetricType('avg_first_response_time')).toBe(true);
+    expect(isAverageMetricType('avg_resolution_time')).toBe(true);
+    expect(isAverageMetricType('reply_time')).toBe(true);
+    expect(isAverageMetricType('conversations_count')).toBe(false);
+  });
+
+  it('displays metrics correctly for account', () => {
+    const { displayMetric } = useReportMetrics();
+
+    expect(displayMetric('conversations_count')).toBe('5,000');
+    expect(displayMetric('incoming_messages_count')).toBe('5');
+  });
+
+  it('displays the metric for bot', () => {
+    const customKey = 'getBotSummary';
+    useMapGetter.mockReturnValue(ref(botSummary));
+    const { displayMetric } = useReportMetrics(customKey);
+
+    expect(displayMetric('bot_resolutions_count')).toBe('10');
+    expect(displayMetric('bot_handoffs_count')).toBe('20');
+  });
+
+  it('handles non-existent metrics', () => {
+    const { displayMetric } = useReportMetrics();
+
+    expect(displayMetric('non_existent_key')).toBe('0');
+  });
+});

app/javascript/dashboard/composables/useAutomation.js

@@ -0,0 +1,349 @@
+import { computed } from 'vue';
+import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from './useI18n';
+import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
+import countries from 'shared/constants/countries';
+import {
+  generateCustomAttributeTypes,
+  getActionOptions,
+  getConditionOptions,
+  getCustomAttributeInputType,
+  getDefaultConditions,
+  getDefaultActions,
+  filterCustomAttributes,
+  getStandardAttributeInputType,
+  isCustomAttribute,
+  generateCustomAttributes,
+} from 'dashboard/helper/automationHelper';
+
+/**
+ * Composable for handling automation-related functionality.
+ * @returns {Object} An object containing various automation-related functions and computed properties.
+ */
+export function useAutomation() {
+  const getters = useStoreGetters();
+  const { t } = useI18n();
+
+  const agents = useMapGetter('agents/getAgents');
+  const campaigns = useMapGetter('campaigns/getAllCampaigns');
+  const contacts = useMapGetter('contacts/getContacts');
+  const inboxes = useMapGetter('inboxes/getInboxes');
+  const labels = useMapGetter('labels/getLabels');
+  const teams = useMapGetter('teams/getTeams');
+  const slaPolicies = useMapGetter('sla/getSLA');
+
+  const booleanFilterOptions = computed(() => [
+    { id: true, name: t('FILTER.ATTRIBUTE_LABELS.TRUE') },
+    { id: false, name: t('FILTER.ATTRIBUTE_LABELS.FALSE') },
+  ]);
+
+  const statusFilterOptions = computed(() => {
+    const statusFilters = t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
+    return [
+      ...Object.keys(statusFilters).map(status => ({
+        id: status,
+        name: statusFilters[status].TEXT,
+      })),
+      { id: 'all', name: t('CHAT_LIST.FILTER_ALL') },
+    ];
+  });
+
+  /**
+   * Handles the event change for an automation.
+   * @param {Object} automation - The automation object to update.
+   */
+  const onEventChange = automation => {
+    automation.conditions = getDefaultConditions(automation.event_name);
+    automation.actions = getDefaultActions();
+  };
+
+  /**
+   * Gets the condition dropdown values for a given type.
+   * @param {string} type - The type of condition.
+   * @returns {Array} An array of condition dropdown values.
+   */
+  const getConditionDropdownValues = type => {
+    return getConditionOptions({
+      agents: agents.value,
+      booleanFilterOptions: booleanFilterOptions.value,
+      campaigns: campaigns.value,
+      contacts: contacts.value,
+      customAttributes: getters['attributes/getAttributes'].value,
+      inboxes: inboxes.value,
+      statusFilterOptions: statusFilterOptions.value,
+      teams: teams.value,
+      languages,
+      countries,
+      type,
+    });
+  };
+
+  /**
+   * Appends a new condition to the automation.
+   * @param {Object} automation - The automation object to update.
+   */
+  const appendNewCondition = automation => {
+    automation.conditions.push(...getDefaultConditions(automation.event_name));
+  };
+
+  /**
+   * Appends a new action to the automation.
+   * @param {Object} automation - The automation object to update.
+   */
+  const appendNewAction = automation => {
+    automation.actions.push(...getDefaultActions());
+  };
+
+  /**
+   * Removes a filter from the automation.
+   * @param {Object} automation - The automation object to update.
+   * @param {number} index - The index of the filter to remove.
+   */
+  const removeFilter = (automation, index) => {
+    if (automation.conditions.length <= 1) {
+      useAlert(t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
+    } else {
+      automation.conditions.splice(index, 1);
+    }
+  };
+
+  /**
+   * Removes an action from the automation.
+   * @param {Object} automation - The automation object to update.
+   * @param {number} index - The index of the action to remove.
+   */
+  const removeAction = (automation, index) => {
+    if (automation.actions.length <= 1) {
+      useAlert(t('AUTOMATION.ACTION.DELETE_MESSAGE'));
+    } else {
+      automation.actions.splice(index, 1);
+    }
+  };
+
+  /**
+   * Resets a filter in the automation.
+   * @param {Object} automation - The automation object to update.
+   * @param {Object} automationTypes - The automation types object.
+   * @param {number} index - The index of the filter to reset.
+   * @param {Object} currentCondition - The current condition object.
+   */
+  const resetFilter = (
+    automation,
+    automationTypes,
+    index,
+    currentCondition
+  ) => {
+    automation.conditions[index].filter_operator = automationTypes[
+      automation.event_name
+    ].conditions.find(
+      condition => condition.key === currentCondition.attribute_key
+    ).filterOperators[0].value;
+    automation.conditions[index].values = '';
+  };
+
+  /**
+   * Resets an action in the automation.
+   * @param {Object} automation - The automation object to update.
+   * @param {number} index - The index of the action to reset.
+   */
+  const resetAction = (automation, index) => {
+    automation.actions[index].action_params = [];
+  };
+
+  /**
+   * This function sets the conditions for automation.
+   * It help to format the conditions for the automation when we open the edit automation modal.
+   * @param {Object} automation - The automation object containing conditions to manifest.
+   * @param {Array} allCustomAttributes - List of all custom attributes.
+   * @param {Object} automationTypes - Object containing automation type definitions.
+   * @returns {Array} An array of manifested conditions.
+   */
+  const manifestConditions = (
+    automation,
+    allCustomAttributes,
+    automationTypes
+  ) => {
+    const customAttributes = filterCustomAttributes(allCustomAttributes);
+    return automation.conditions.map(condition => {
+      const customAttr = isCustomAttribute(
+        customAttributes,
+        condition.attribute_key
+      );
+      let inputType = 'plain_text';
+      if (customAttr) {
+        inputType = getCustomAttributeInputType(customAttr.type);
+      } else {
+        inputType = getStandardAttributeInputType(
+          automationTypes,
+          automation.event_name,
+          condition.attribute_key
+        );
+      }
+      if (inputType === 'plain_text' || inputType === 'date') {
+        return { ...condition, values: condition.values[0] };
+      }
+      if (inputType === 'comma_separated_plain_text') {
+        return { ...condition, values: condition.values.join(',') };
+      }
+      return {
+        ...condition,
+        query_operator: condition.query_operator || 'and',
+        values: [...getConditionDropdownValues(condition.attribute_key)].filter(
+          item => [...condition.values].includes(item.id)
+        ),
+      };
+    });
+  };
+
+  /**
+   * Gets the action dropdown values for a given type.
+   * @param {string} type - The type of action.
+   * @returns {Array} An array of action dropdown values.
+   */
+  const getActionDropdownValues = type => {
+    return getActionOptions({
+      agents: agents.value,
+      labels: labels.value,
+      teams: teams.value,
+      slaPolicies: slaPolicies.value,
+      languages,
+      type,
+    });
+  };
+
+  /**
+   * Generates an array of actions for the automation.
+   * @param {Object} action - The action object.
+   * @param {Array} automationActionTypes - List of available automation action types.
+   * @returns {Array|Object} Generated actions array or object based on input type.
+   */
+  const generateActionsArray = (action, automationActionTypes) => {
+    const params = action.action_params;
+    const inputType = automationActionTypes.find(
+      item => item.key === action.action_name
+    ).inputType;
+    if (inputType === 'multi_select' || inputType === 'search_select') {
+      return [...getActionDropdownValues(action.action_name)].filter(item =>
+        [...params].includes(item.id)
+      );
+    }
+    if (inputType === 'team_message') {
+      return {
+        team_ids: [...getActionDropdownValues(action.action_name)].filter(
+          item => [...params[0].team_ids].includes(item.id)
+        ),
+        message: params[0].message,
+      };
+    }
+    return [...params];
+  };
+
+  /**
+   * This function sets the actions for automation.
+   * It help to format the actions for the automation when we open the edit automation modal.
+   * @param {Object} automation - The automation object containing actions.
+   * @param {Array} automationActionTypes - List of available automation action types.
+   * @returns {Array} An array of manifested actions.
+   */
+  const manifestActions = (automation, automationActionTypes) => {
+    return automation.actions.map(action => ({
+      ...action,
+      action_params: action.action_params.length
+        ? generateActionsArray(action, automationActionTypes)
+        : [],
+    }));
+  };
+
+  /**
+   * Formats the automation object for use when we edit the automation.
+   * It help to format the conditions and actions for the automation when we open the edit automation modal.
+   * @param {Object} automation - The automation object to format.
+   * @param {Array} allCustomAttributes - List of all custom attributes.
+   * @param {Object} automationTypes - Object containing automation type definitions.
+   * @param {Array} automationActionTypes - List of available automation action types.
+   * @returns {Object} A new object with formatted automation data, including automation conditions and actions.
+   */
+  const formatAutomation = (
+    automation,
+    allCustomAttributes,
+    automationTypes,
+    automationActionTypes
+  ) => {
+    return {
+      ...automation,
+      conditions: manifestConditions(
+        automation,
+        allCustomAttributes,
+        automationTypes
+      ),
+      actions: manifestActions(automation, automationActionTypes),
+    };
+  };
+
+  /**
+   * This function formats the custom attributes for automation types.
+   * It retrieves custom attributes for conversations and contacts,
+   * generates custom attribute types, and adds them to the relevant automation types.
+   * @param {Object} automationTypes - The automation types object to update with custom attributes.
+   */
+  const manifestCustomAttributes = automationTypes => {
+    const conversationCustomAttributesRaw = getters[
+      'attributes/getAttributesByModel'
+    ].value('conversation_attribute');
+    const contactCustomAttributesRaw =
+      getters['attributes/getAttributesByModel'].value('contact_attribute');
+
+    const conversationCustomAttributeTypes = generateCustomAttributeTypes(
+      conversationCustomAttributesRaw,
+      'conversation_attribute'
+    );
+    const contactCustomAttributeTypes = generateCustomAttributeTypes(
+      contactCustomAttributesRaw,
+      'contact_attribute'
+    );
+
+    const manifestedCustomAttributes = generateCustomAttributes(
+      conversationCustomAttributeTypes,
+      contactCustomAttributeTypes,
+      t('AUTOMATION.CONDITION.CONVERSATION_CUSTOM_ATTR_LABEL'),
+      t('AUTOMATION.CONDITION.CONTACT_CUSTOM_ATTR_LABEL')
+    );
+
+    automationTypes.message_created.conditions.push(
+      ...manifestedCustomAttributes
+    );
+    automationTypes.conversation_created.conditions.push(
+      ...manifestedCustomAttributes
+    );
+    automationTypes.conversation_updated.conditions.push(
+      ...manifestedCustomAttributes
+    );
+    automationTypes.conversation_opened.conditions.push(
+      ...manifestedCustomAttributes
+    );
+  };
+
+  return {
+    agents,
+    campaigns,
+    contacts,
+    inboxes,
+    labels,
+    teams,
+    slaPolicies,
+    booleanFilterOptions,
+    statusFilterOptions,
+    onEventChange,
+    getConditionDropdownValues,
+    appendNewCondition,
+    appendNewAction,
+    removeFilter,
+    removeAction,
+    resetFilter,
+    resetAction,
+    formatAutomation,
+    getActionDropdownValues,
+    manifestCustomAttributes,
+  };
+}

app/javascript/dashboard/composables/useMacros.js

@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 import { useStoreGetters } from 'dashboard/composables/store';
-import { PRIORITY_CONDITION_VALUES } from 'dashboard/helper/automationHelper.js';
+import { PRIORITY_CONDITION_VALUES } from 'dashboard/constants/automation';
 
 /**
  * Composable for handling macro-related functionality

app/javascript/dashboard/composables/useReportMetrics.js

@@ -0,0 +1,57 @@
+import { useMapGetter } from 'dashboard/composables/store';
+import { formatTime } from '@chatwoot/utils';
+
+/**
+ * A composable function for report metrics calculations and display.
+ *
+ * @param {string} [accountSummaryKey='getAccountSummary'] - The key for accessing account summary data.
+ * @returns {Object} An object containing utility functions for report metrics.
+ */
+export function useReportMetrics(accountSummaryKey = 'getAccountSummary') {
+  const accountSummary = useMapGetter(accountSummaryKey);
+
+  /**
+   * Calculates the trend percentage for a given metric.
+   *
+   * @param {string} key - The key of the metric to calculate trend for.
+   * @returns {number} The calculated trend percentage, rounded to the nearest integer.
+   */
+  const calculateTrend = key => {
+    if (!accountSummary.value.previous[key]) return 0;
+    const diff = accountSummary.value[key] - accountSummary.value.previous[key];
+    return Math.round((diff / accountSummary.value.previous[key]) * 100);
+  };
+
+  /**
+   * Checks if a given metric key represents an average metric type.
+   *
+   * @param {string} key - The key of the metric to check.
+   * @returns {boolean} True if the metric is an average type, false otherwise.
+   */
+  const isAverageMetricType = key => {
+    return [
+      'avg_first_response_time',
+      'avg_resolution_time',
+      'reply_time',
+    ].includes(key);
+  };
+
+  /**
+   * Formats and displays a metric value based on its type.
+   *
+   * @param {string} key - The key of the metric to display.
+   * @returns {string} The formatted metric value as a string.
+   */
+  const displayMetric = key => {
+    if (isAverageMetricType(key)) {
+      return formatTime(accountSummary.value[key]);
+    }
+    return Number(accountSummary.value[key] || '').toLocaleString();
+  };
+
+  return {
+    calculateTrend,
+    isAverageMetricType,
+    displayMetric,
+  };
+}

app/javascript/dashboard/constants/automation.js

@@ -0,0 +1,70 @@
+export const DEFAULT_MESSAGE_CREATED_CONDITION = [
+  {
+    attribute_key: 'message_type',
+    filter_operator: 'equal_to',
+    values: '',
+    query_operator: 'and',
+    custom_attribute_type: '',
+  },
+];
+
+export const DEFAULT_CONVERSATION_OPENED_CONDITION = [
+  {
+    attribute_key: 'browser_language',
+    filter_operator: 'equal_to',
+    values: '',
+    query_operator: 'and',
+    custom_attribute_type: '',
+  },
+];
+
+export const DEFAULT_OTHER_CONDITION = [
+  {
+    attribute_key: 'status',
+    filter_operator: 'equal_to',
+    values: '',
+    query_operator: 'and',
+    custom_attribute_type: '',
+  },
+];
+
+export const DEFAULT_ACTIONS = [
+  {
+    action_name: 'assign_agent',
+    action_params: [],
+  },
+];
+
+export const MESSAGE_CONDITION_VALUES = [
+  {
+    id: 'incoming',
+    name: 'Incoming Message',
+  },
+  {
+    id: 'outgoing',
+    name: 'Outgoing Message',
+  },
+];
+
+export const PRIORITY_CONDITION_VALUES = [
+  {
+    id: 'nil',
+    name: 'None',
+  },
+  {
+    id: 'low',
+    name: 'Low',
+  },
+  {
+    id: 'medium',
+    name: 'Medium',
+  },
+  {
+    id: 'high',
+    name: 'High',
+  },
+  {
+    id: 'urgent',
+    name: 'Urgent',
+  },
+];

app/javascript/dashboard/helper/automationHelper.js

@@ -3,41 +3,16 @@ import {
   OPERATOR_TYPES_3,
   OPERATOR_TYPES_4,
 } from 'dashboard/routes/dashboard/settings/automation/operators';
+import {
+  DEFAULT_MESSAGE_CREATED_CONDITION,
+  DEFAULT_CONVERSATION_OPENED_CONDITION,
+  DEFAULT_OTHER_CONDITION,
+  DEFAULT_ACTIONS,
+  MESSAGE_CONDITION_VALUES,
+  PRIORITY_CONDITION_VALUES,
+} from 'dashboard/constants/automation';
 import filterQueryGenerator from './filterQueryGenerator';
 import actionQueryGenerator from './actionQueryGenerator';
-const MESSAGE_CONDITION_VALUES = [
-  {
-    id: 'incoming',
-    name: 'Incoming Message',
-  },
-  {
-    id: 'outgoing',
-    name: 'Outgoing Message',
-  },
-];
-
-export const PRIORITY_CONDITION_VALUES = [
-  {
-    id: 'nil',
-    name: 'None',
-  },
-  {
-    id: 'low',
-    name: 'Low',
-  },
-  {
-    id: 'medium',
-    name: 'Medium',
-  },
-  {
-    id: 'high',
-    name: 'High',
-  },
-  {
-    id: 'urgent',
-    name: 'Urgent',
-  },
-];
 
 export const getCustomAttributeInputType = key => {
   const customAttributeMap = {
@@ -198,45 +173,16 @@ export const getFileName = (action, files = []) => {
 
 export const getDefaultConditions = eventName => {
   if (eventName === 'message_created') {
-    return [
-      {
-        attribute_key: 'message_type',
-        filter_operator: 'equal_to',
-        values: '',
-        query_operator: 'and',
-        custom_attribute_type: '',
-      },
-    ];
+    return DEFAULT_MESSAGE_CREATED_CONDITION;
   }
   if (eventName === 'conversation_opened') {
-    return [
-      {
-        attribute_key: 'browser_language',
-        filter_operator: 'equal_to',
-        values: '',
-        query_operator: 'and',
-        custom_attribute_type: '',
-      },
-    ];
+    return DEFAULT_CONVERSATION_OPENED_CONDITION;
   }
-  return [
-    {
-      attribute_key: 'status',
-      filter_operator: 'equal_to',
-      values: '',
-      query_operator: 'and',
-      custom_attribute_type: '',
-    },
-  ];
+  return DEFAULT_OTHER_CONDITION;
 };
 
 export const getDefaultActions = () => {
-  return [
-    {
-      action_name: 'assign_agent',
-      action_params: [],
-    },
-  ];
+  return DEFAULT_ACTIONS;
 };
 
 export const filterCustomAttributes = customAttributes => {
@@ -297,3 +243,100 @@ export const generateCustomAttributes = (
   }
   return customAttributes;
 };
+
+/**
+ * Get attributes for a given key from automation types.
+ * @param {Object} automationTypes - Object containing automation types.
+ * @param {string} key - The key to get attributes for.
+ * @returns {Array} Array of condition objects for the given key.
+ */
+export const getAttributes = (automationTypes, key) => {
+  return automationTypes[key].conditions;
+};
+
+/**
+ * Get the automation type for a given key.
+ * @param {Object} automationTypes - Object containing automation types.
+ * @param {Object} automation - The automation object.
+ * @param {string} key - The key to get the automation type for.
+ * @returns {Object} The automation type object.
+ */
+export const getAutomationType = (automationTypes, automation, key) => {
+  return automationTypes[automation.event_name].conditions.find(
+    condition => condition.key === key
+  );
+};
+
+/**
+ * Get the input type for a given key.
+ * @param {Array} allCustomAttributes - Array of all custom attributes.
+ * @param {Object} automationTypes - Object containing automation types.
+ * @param {Object} automation - The automation object.
+ * @param {string} key - The key to get the input type for.
+ * @returns {string} The input type.
+ */
+export const getInputType = (
+  allCustomAttributes,
+  automationTypes,
+  automation,
+  key
+) => {
+  const customAttribute = isACustomAttribute(allCustomAttributes, key);
+  if (customAttribute) {
+    return getCustomAttributeInputType(customAttribute.attribute_display_type);
+  }
+  const type = getAutomationType(automationTypes, automation, key);
+  return type.inputType;
+};
+
+/**
+ * Get operators for a given key.
+ * @param {Array} allCustomAttributes - Array of all custom attributes.
+ * @param {Object} automationTypes - Object containing automation types.
+ * @param {Object} automation - The automation object.
+ * @param {string} mode - The mode ('edit' or other).
+ * @param {string} key - The key to get operators for.
+ * @returns {Array} Array of operators.
+ */
+export const getOperators = (
+  allCustomAttributes,
+  automationTypes,
+  automation,
+  mode,
+  key
+) => {
+  if (mode === 'edit') {
+    const customAttribute = isACustomAttribute(allCustomAttributes, key);
+    if (customAttribute) {
+      return getOperatorTypes(customAttribute.attribute_display_type);
+    }
+  }
+  const type = getAutomationType(automationTypes, automation, key);
+  return type.filterOperators;
+};
+
+/**
+ * Get the custom attribute type for a given key.
+ * @param {Object} automationTypes - Object containing automation types.
+ * @param {Object} automation - The automation object.
+ * @param {string} key - The key to get the custom attribute type for.
+ * @returns {string} The custom attribute type.
+ */
+export const getCustomAttributeType = (automationTypes, automation, key) => {
+  return automationTypes[automation.event_name].conditions.find(
+    i => i.key === key
+  ).customAttributeType;
+};
+
+/**
+ * Determine if an action input should be shown.
+ * @param {Array} automationActionTypes - Array of automation action type objects.
+ * @param {string} action - The action to check.
+ * @returns {boolean} True if the action input should be shown, false otherwise.
+ */
+export const showActionInput = (automationActionTypes, action) => {
+  if (action === 'send_email_to_team' || action === 'send_message')
+    return false;
+  const type = automationActionTypes.find(i => i.key === action).inputType;
+  return !!type;
+};

app/javascript/dashboard/helper/commandbar/actions.js

@@ -8,7 +8,7 @@ import {
   CMD_SEND_TRANSCRIPT,
   CMD_SNOOZE_CONVERSATION,
   CMD_UNMUTE_CONVERSATION,
-} from './commandBarBusEvents';
+} from 'dashboard/helper/commandbar/events';
 
 import {
   ICON_MUTE_CONVERSATION,
@@ -17,7 +17,7 @@ import {
   ICON_SEND_TRANSCRIPT,
   ICON_SNOOZE_CONVERSATION,
   ICON_UNMUTE_CONVERSATION,
-} from './CommandBarIcons';
+} from 'dashboard/helper/commandbar/icons';
 
 const SNOOZE_OPTIONS = wootConstants.SNOOZE_OPTIONS;
 
@@ -46,6 +46,7 @@ export const SNOOZE_CONVERSATION_ACTIONS = [
   {
     id: 'snooze_conversation',
     title: 'COMMAND_BAR.COMMANDS.SNOOZE_CONVERSATION',
+    section: 'COMMAND_BAR.SECTIONS.CONVERSATION',
     icon: ICON_SNOOZE_CONVERSATION,
     children: Object.values(SNOOZE_OPTIONS),
   },

app/javascript/dashboard/helper/featureHelper.js

@@ -9,6 +9,7 @@ const FEATURE_HELP_URLS = {
   custom_attributes: 'https://chwt.app/hc/custom-attributes',
   dashboard_apps: 'https://chwt.app/hc/dashboard-apps',
   help_center: 'https://chwt.app/hc/help-center',
+  inboxes: 'https://chwt.app/hc/inboxes',
   integrations: 'https://chwt.app/hc/integrations',
   labels: 'https://chwt.app/hc/labels',
   macros: 'https://chwt.app/hc/macros',

app/javascript/dashboard/helper/inbox.js

@@ -1,4 +1,4 @@
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
+import { INBOX_TYPES } from 'shared/composables/useInbox';
 
 export const getInboxSource = (type, phoneNumber, inbox) => {
   switch (type) {

app/javascript/dashboard/helper/specs/automationHelper.spec.js

@@ -11,11 +11,11 @@ import {
   contactAttrs,
   conversationAttrs,
   expectedOutputForCustomAttributeGenerator,
-} from './automationFixtures';
+} from './fixtures/automationFixtures';
 import { AUTOMATIONS } from 'dashboard/routes/dashboard/settings/automation/constants';
 
-describe('automationMethodsMixin', () => {
-  it('getCustomAttributeInputType returns the attribute input type', () => {
+describe('getCustomAttributeInputType', () => {
+  it('returns the attribute input type', () => {
     expect(helpers.getCustomAttributeInputType('date')).toEqual('date');
     expect(helpers.getCustomAttributeInputType('date')).not.toEqual(
       'some_random_value'
@@ -31,33 +31,32 @@ describe('automationMethodsMixin', () => {
       'plain_text'
     );
   });
-  it('isACustomAttribute returns the custom attribute value if true', () => {
+});
+
+describe('isACustomAttribute', () => {
+  it('returns the custom attribute value if true', () => {
     expect(
       helpers.isACustomAttribute(customAttributes, 'signed_up_at')
     ).toBeTruthy();
     expect(helpers.isACustomAttribute(customAttributes, 'status')).toBeFalsy();
   });
-  it('getCustomAttributeListDropdownValues returns the attribute dropdown values', () => {
+});
+
+describe('getCustomAttributeListDropdownValues', () => {
+  it('returns the attribute dropdown values', () => {
     const myListValues = [
-      {
-        id: 'item1',
-        name: 'item1',
-      },
-      {
-        id: 'item2',
-        name: 'item2',
-      },
-      {
-        id: 'item3',
-        name: 'item3',
-      },
+      { id: 'item1', name: 'item1' },
+      { id: 'item2', name: 'item2' },
+      { id: 'item3', name: 'item3' },
     ];
     expect(
       helpers.getCustomAttributeListDropdownValues(customAttributes, 'my_list')
     ).toEqual(myListValues);
   });
+});
 
-  it('isCustomAttributeCheckbox checks if attribute is a checkbox', () => {
+describe('isCustomAttributeCheckbox', () => {
+  it('checks if attribute is a checkbox', () => {
     expect(
       helpers.isCustomAttributeCheckbox(customAttributes, 'prime_user')
         .attribute_display_type
@@ -70,13 +69,19 @@ describe('automationMethodsMixin', () => {
       helpers.isCustomAttributeCheckbox(customAttributes, 'my_list')
     ).not.toEqual('checkbox');
   });
-  it('isCustomAttributeList checks if attribute is a list', () => {
+});
+
+describe('isCustomAttributeList', () => {
+  it('checks if attribute is a list', () => {
     expect(
       helpers.isCustomAttributeList(customAttributes, 'my_list')
         .attribute_display_type
     ).toEqual('list');
   });
-  it('getOperatorTypes returns the correct custom attribute operators', () => {
+});
+
+describe('getOperatorTypes', () => {
+  it('returns the correct custom attribute operators', () => {
     expect(helpers.getOperatorTypes('list')).toEqual(OPERATOR_TYPES_1);
     expect(helpers.getOperatorTypes('text')).toEqual(OPERATOR_TYPES_3);
     expect(helpers.getOperatorTypes('number')).toEqual(OPERATOR_TYPES_1);
@@ -85,93 +90,44 @@ describe('automationMethodsMixin', () => {
     expect(helpers.getOperatorTypes('checkbox')).toEqual(OPERATOR_TYPES_1);
     expect(helpers.getOperatorTypes('some_random')).toEqual(OPERATOR_TYPES_1);
   });
-  it('generateConditionOptions returns expected conditions options array', () => {
-    const testConditions = [
-      {
-        id: 123,
-        title: 'Fayaz',
-        email: 'test@test.com',
-      },
-      {
-        title: 'John',
-        id: 324,
-        email: 'test@john.com',
-      },
-    ];
+});
 
+describe('generateConditionOptions', () => {
+  it('returns expected conditions options array', () => {
+    const testConditions = [
+      { id: 123, title: 'Fayaz', email: 'test@test.com' },
+      { title: 'John', id: 324, email: 'test@john.com' },
+    ];
     const expectedConditions = [
-      {
-        id: 123,
-        name: 'Fayaz',
-      },
-      {
-        id: 324,
-        name: 'John',
-      },
+      { id: 123, name: 'Fayaz' },
+      { id: 324, name: 'John' },
     ];
     expect(helpers.generateConditionOptions(testConditions)).toEqual(
       expectedConditions
     );
   });
-  it('getActionOptions returns expected actions options array', () => {
+});
+
+describe('getActionOptions', () => {
+  it('returns expected actions options array', () => {
     const expectedOptions = [
-      {
-        id: 'testlabel',
-        name: 'testlabel',
-      },
-      {
-        id: 'snoozes',
-        name: 'snoozes',
-      },
+      { id: 'testlabel', name: 'testlabel' },
+      { id: 'snoozes', name: 'snoozes' },
     ];
     expect(helpers.getActionOptions({ labels, type: 'add_label' })).toEqual(
       expectedOptions
     );
   });
-  it('getConditionOptions returns expected conditions options', () => {
+});
+
+describe('getConditionOptions', () => {
+  it('returns expected conditions options', () => {
     const testOptions = [
-      {
-        id: 'open',
-        name: 'Open',
-      },
-      {
-        id: 'resolved',
-        name: 'Resolved',
-      },
-      {
-        id: 'pending',
-        name: 'Pending',
-      },
-      {
-        id: 'snoozed',
-        name: 'Snoozed',
-      },
-      {
-        id: 'all',
-        name: 'All',
-      },
-    ];
-    const expectedOptions = [
-      {
-        id: 'open',
-        name: 'Open',
-      },
-      {
-        id: 'resolved',
-        name: 'Resolved',
-      },
-      {
-        id: 'pending',
-        name: 'Pending',
-      },
-      {
-        id: 'snoozed',
-        name: 'Snoozed',
-      },
-      {
-        id: 'all',
-        name: 'All',
-      },
+      { id: 'open', name: 'Open' },
+      { id: 'resolved', name: 'Resolved' },
+      { id: 'pending', name: 'Pending' },
+      { id: 'snoozed', name: 'Snoozed' },
+      { id: 'all', name: 'All' },
     ];
     expect(
       helpers.getConditionOptions({
@@ -180,14 +136,20 @@ describe('automationMethodsMixin', () => {
         statusFilterOptions: testOptions,
         type: 'status',
       })
-    ).toEqual(expectedOptions);
+    ).toEqual(testOptions);
   });
-  it('getFileName returns the correct file name', () => {
+});
+
+describe('getFileName', () => {
+  it('returns the correct file name', () => {
     expect(
       helpers.getFileName(automation.actions[0], automation.files)
     ).toEqual('pfp.jpeg');
   });
-  it('getDefaultConditions returns the resp default condition model', () => {
+});
+
+describe('getDefaultConditions', () => {
+  it('returns the resp default condition model', () => {
     const messageCreatedModel = [
       {
         attribute_key: 'message_type',
@@ -211,7 +173,10 @@ describe('automationMethodsMixin', () => {
     );
     expect(helpers.getDefaultConditions()).toEqual(genericConditionModel);
   });
-  it('getDefaultActions returns the resp default action model', () => {
+});
+
+describe('getDefaultActions', () => {
+  it('returns the resp default action model', () => {
     const genericActionModel = [
       {
         action_name: 'assign_agent',
@@ -220,7 +185,10 @@ describe('automationMethodsMixin', () => {
     ];
     expect(helpers.getDefaultActions()).toEqual(genericActionModel);
   });
-  it('filterCustomAttributes filters the raw custom attributes', () => {
+});
+
+describe('filterCustomAttributes', () => {
+  it('filters the raw custom attributes', () => {
     const filteredAttributes = [
       { key: 'signed_up_at', name: 'Signed Up At', type: 'date' },
       { key: 'prime_user', name: 'Prime User', type: 'checkbox' },
@@ -235,7 +203,10 @@ describe('automationMethodsMixin', () => {
       filteredAttributes
     );
   });
-  it('getStandardAttributeInputType returns the resp default action model', () => {
+});
+
+describe('getStandardAttributeInputType', () => {
+  it('returns the resp default action model', () => {
     expect(
       helpers.getStandardAttributeInputType(
         AUTOMATIONS,
@@ -258,7 +229,10 @@ describe('automationMethodsMixin', () => {
       )
     ).toEqual('plain_text');
   });
-  it('generateAutomationPayload returns the resp default action model', () => {
+});
+
+describe('generateAutomationPayload', () => {
+  it('returns the resp default action model', () => {
     const testPayload = {
       name: 'Test',
       description: 'This is a test',
@@ -300,7 +274,10 @@ describe('automationMethodsMixin', () => {
       expectedPayload
     );
   });
-  it('isCustomAttribute returns the resp default action model', () => {
+});
+
+describe('isCustomAttribute', () => {
+  it('returns the resp default action model', () => {
     const attrs = helpers.filterCustomAttributes(customAttributes);
     expect(helpers.isCustomAttribute(attrs, 'my_list')).toBeTruthy();
     expect(helpers.isCustomAttribute(attrs, 'my_check')).toBeTruthy();
@@ -309,8 +286,10 @@ describe('automationMethodsMixin', () => {
     expect(helpers.isCustomAttribute(attrs, 'prime_user')).toBeTruthy();
     expect(helpers.isCustomAttribute(attrs, 'hello')).toBeFalsy();
   });
+});
 
-  it('generateCustomAttributes generates and returns correct condition attribute', () => {
+describe('generateCustomAttributes', () => {
+  it('generates and returns correct condition attribute', () => {
     expect(
       helpers.generateCustomAttributes(
         conversationAttrs,
@@ -321,3 +300,116 @@ describe('automationMethodsMixin', () => {
     ).toEqual(expectedOutputForCustomAttributeGenerator);
   });
 });
+
+describe('getAttributes', () => {
+  it('returns the conditions for the given automation type', () => {
+    const result = helpers.getAttributes(AUTOMATIONS, 'message_created');
+    expect(result).toEqual(AUTOMATIONS.message_created.conditions);
+  });
+});
+
+describe('getAttributes', () => {
+  it('returns the conditions for the given automation type', () => {
+    const result = helpers.getAttributes(AUTOMATIONS, 'message_created');
+    expect(result).toEqual(AUTOMATIONS.message_created.conditions);
+  });
+});
+
+describe('getAutomationType', () => {
+  it('returns the automation type for the given key', () => {
+    const mockAutomation = { event_name: 'message_created' };
+    const result = helpers.getAutomationType(
+      AUTOMATIONS,
+      mockAutomation,
+      'message_type'
+    );
+    expect(result).toEqual(
+      AUTOMATIONS.message_created.conditions.find(c => c.key === 'message_type')
+    );
+  });
+});
+
+describe('getInputType', () => {
+  it('returns the input type for a custom attribute', () => {
+    const mockAutomation = { event_name: 'message_created' };
+    const result = helpers.getInputType(
+      customAttributes,
+      AUTOMATIONS,
+      mockAutomation,
+      'signed_up_at'
+    );
+    expect(result).toEqual('date');
+  });
+
+  it('returns the input type for a standard attribute', () => {
+    const mockAutomation = { event_name: 'message_created' };
+    const result = helpers.getInputType(
+      customAttributes,
+      AUTOMATIONS,
+      mockAutomation,
+      'message_type'
+    );
+    expect(result).toEqual('search_select');
+  });
+});
+
+describe('getOperators', () => {
+  it('returns operators for a custom attribute in edit mode', () => {
+    const mockAutomation = { event_name: 'message_created' };
+    const result = helpers.getOperators(
+      customAttributes,
+      AUTOMATIONS,
+      mockAutomation,
+      'edit',
+      'signed_up_at'
+    );
+    expect(result).toEqual(OPERATOR_TYPES_4);
+  });
+
+  it('returns operators for a standard attribute', () => {
+    const mockAutomation = { event_name: 'message_created' };
+    const result = helpers.getOperators(
+      customAttributes,
+      AUTOMATIONS,
+      mockAutomation,
+      'create',
+      'message_type'
+    );
+    expect(result).toEqual(
+      AUTOMATIONS.message_created.conditions.find(c => c.key === 'message_type')
+        .filterOperators
+    );
+  });
+});
+
+describe('getCustomAttributeType', () => {
+  it('returns the custom attribute type for the given key', () => {
+    const mockAutomation = { event_name: 'message_created' };
+    const result = helpers.getCustomAttributeType(
+      AUTOMATIONS,
+      mockAutomation,
+      'message_type'
+    );
+    expect(result).toEqual(
+      AUTOMATIONS.message_created.conditions.find(c => c.key === 'message_type')
+        .customAttributeType
+    );
+  });
+});
+
+describe('showActionInput', () => {
+  it('returns false for send_email_to_team and send_message actions', () => {
+    expect(helpers.showActionInput([], 'send_email_to_team')).toBe(false);
+    expect(helpers.showActionInput([], 'send_message')).toBe(false);
+  });
+
+  it('returns true if the action has an input type', () => {
+    const mockActionTypes = [{ key: 'add_label', inputType: 'select' }];
+    expect(helpers.showActionInput(mockActionTypes, 'add_label')).toBe(true);
+  });
+
+  it('returns false if the action does not have an input type', () => {
+    const mockActionTypes = [{ key: 'some_action', inputType: null }];
+    expect(helpers.showActionInput(mockActionTypes, 'some_action')).toBe(false);
+  });
+});

app/javascript/dashboard/helper/specs/fixtures/automationFixtures.js

@@ -1,6 +1,6 @@
-import allLanguages from '../../../dashboard/components/widgets/conversation/advancedFilterItems/languages.js';
+import allLanguages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 
-import allCountries from '../../../shared/constants/countries.js';
+import allCountries from 'shared/constants/countries.js';
 
 export const customAttributes = [
   {

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

@@ -1,7 +1,8 @@
 {
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
-    "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "DESCRIPTION": "A channel is the mode of communication your customer chooses to interact with you. An inbox is where you manage interactions for a specific channel. It can include communications from various sources such as email, live chat, and social media.",
+    "LEARN_MORE": "Learn more about inboxes",
     "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
     "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
@@ -745,6 +746,18 @@
       "MICROSOFT": "Microsoft",
       "GOOGLE": "Google",
       "OTHER_PROVIDERS": "Other Providers"
+    },
+    "CHANNELS": {
+      "MESSENGER": "Messenger",
+      "WEB_WIDGET": "Website",
+      "TWITTER_PROFILE": "Twitter",
+      "TWILIO_SMS": "Twilio SMS",
+      "WHATSAPP": "WhatsApp",
+      "SMS": "SMS",
+      "EMAIL": "Email",
+      "TELEGRAM": "Telegram",
+      "LINE": "Line",
+      "API": "API Channel"
     }
   }
 }

app/javascript/dashboard/mixins/automations/methodsMixin.js

@@ -1,314 +0,0 @@
-import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
-import countries from 'shared/constants/countries';
-import { validateAutomation } from 'dashboard/helper/validations';
-
-import {
-  generateCustomAttributeTypes,
-  getActionOptions,
-  getConditionOptions,
-  getCustomAttributeInputType,
-  getOperatorTypes,
-  isACustomAttribute,
-  getFileName,
-  getDefaultConditions,
-  getDefaultActions,
-  filterCustomAttributes,
-  generateAutomationPayload,
-  getStandardAttributeInputType,
-  isCustomAttribute,
-  generateCustomAttributes,
-} from 'dashboard/helper/automationHelper';
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-
-export default {
-  computed: {
-    ...mapGetters({
-      agents: 'agents/getAgents',
-      campaigns: 'campaigns/getAllCampaigns',
-      contacts: 'contacts/getContacts',
-      inboxes: 'inboxes/getInboxes',
-      labels: 'labels/getLabels',
-      teams: 'teams/getTeams',
-      slaPolicies: 'sla/getSLA',
-    }),
-    booleanFilterOptions() {
-      return [
-        {
-          id: true,
-          name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
-        },
-        {
-          id: false,
-          name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
-        },
-      ];
-    },
-
-    statusFilterOptions() {
-      const statusFilters = this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
-      return [
-        ...Object.keys(statusFilters).map(status => {
-          return {
-            id: status,
-            name: statusFilters[status].TEXT,
-          };
-        }),
-        {
-          id: 'all',
-          name: this.$t('CHAT_LIST.FILTER_ALL'),
-        },
-      ];
-    },
-  },
-  methods: {
-    getFileName,
-    onEventChange() {
-      this.automation.conditions = getDefaultConditions(
-        this.automation.event_name
-      );
-      this.automation.actions = getDefaultActions();
-    },
-    getAttributes(key) {
-      return this.automationTypes[key].conditions;
-    },
-    getInputType(key) {
-      const customAttribute = isACustomAttribute(this.allCustomAttributes, key);
-      if (customAttribute) {
-        return getCustomAttributeInputType(
-          customAttribute.attribute_display_type
-        );
-      }
-      const type = this.getAutomationType(key);
-      return type.inputType;
-    },
-    getOperators(key) {
-      if (this.mode === 'edit') {
-        const customAttribute = isACustomAttribute(
-          this.allCustomAttributes,
-          key
-        );
-        if (customAttribute) {
-          return getOperatorTypes(customAttribute.attribute_display_type);
-        }
-      }
-      const type = this.getAutomationType(key);
-      return type.filterOperators;
-    },
-    getAutomationType(key) {
-      return this.automationTypes[this.automation.event_name].conditions.find(
-        condition => condition.key === key
-      );
-    },
-    getCustomAttributeType(key) {
-      const type = this.automationTypes[
-        this.automation.event_name
-      ].conditions.find(i => i.key === key).customAttributeType;
-      return type;
-    },
-    getConditionDropdownValues(type) {
-      const {
-        agents,
-        allCustomAttributes: customAttributes,
-        booleanFilterOptions,
-        campaigns,
-        contacts,
-        inboxes,
-        statusFilterOptions,
-        teams,
-      } = this;
-      return getConditionOptions({
-        agents,
-        booleanFilterOptions,
-        campaigns,
-        contacts,
-        customAttributes,
-        inboxes,
-        statusFilterOptions,
-        teams,
-        languages,
-        countries,
-        type,
-      });
-    },
-    appendNewCondition() {
-      this.automation.conditions.push(
-        ...getDefaultConditions(this.automation.event_name)
-      );
-    },
-    appendNewAction() {
-      this.automation.actions.push(...getDefaultActions());
-    },
-    removeFilter(index) {
-      if (this.automation.conditions.length <= 1) {
-        useAlert(this.$t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
-      } else {
-        this.automation.conditions.splice(index, 1);
-      }
-    },
-    removeAction(index) {
-      if (this.automation.actions.length <= 1) {
-        useAlert(this.$t('AUTOMATION.ACTION.DELETE_MESSAGE'));
-      } else {
-        this.automation.actions.splice(index, 1);
-      }
-    },
-    submitAutomation() {
-      // we assign it to this.errors so that it can be accessed in the template
-      // it is supposed to be declared in the data function
-      this.errors = validateAutomation(this.automation);
-      if (Object.keys(this.errors).length === 0) {
-        const automation = generateAutomationPayload(this.automation);
-        this.$emit('saveAutomation', automation, this.mode);
-      }
-    },
-    resetFilter(index, currentCondition) {
-      this.automation.conditions[index].filter_operator = this.automationTypes[
-        this.automation.event_name
-      ].conditions.find(
-        condition => condition.key === currentCondition.attribute_key
-      ).filterOperators[0].value;
-      this.automation.conditions[index].values = '';
-    },
-    showUserInput(type) {
-      return !(type === 'is_present' || type === 'is_not_present');
-    },
-    showActionInput(action) {
-      if (action === 'send_email_to_team' || action === 'send_message')
-        return false;
-      const type = this.automationActionTypes.find(
-        i => i.key === action
-      ).inputType;
-      return !!type;
-    },
-    resetAction(index) {
-      this.automation.actions[index].action_params = [];
-    },
-    manifestConditions(automation) {
-      const customAttributes = filterCustomAttributes(this.allCustomAttributes);
-      const conditions = automation.conditions.map(condition => {
-        const customAttr = isCustomAttribute(
-          customAttributes,
-          condition.attribute_key
-        );
-        let inputType = 'plain_text';
-        if (customAttr) {
-          inputType = getCustomAttributeInputType(customAttr.type);
-        } else {
-          inputType = getStandardAttributeInputType(
-            this.automationTypes,
-            automation.event_name,
-            condition.attribute_key
-          );
-        }
-        if (inputType === 'plain_text' || inputType === 'date') {
-          return {
-            ...condition,
-            values: condition.values[0],
-          };
-        }
-        if (inputType === 'comma_separated_plain_text') {
-          return {
-            ...condition,
-            values: condition.values.join(','),
-          };
-        }
-        return {
-          ...condition,
-          query_operator: condition.query_operator || 'and',
-          values: [
-            ...this.getConditionDropdownValues(condition.attribute_key),
-          ].filter(item => [...condition.values].includes(item.id)),
-        };
-      });
-      return conditions;
-    },
-    generateActionsArray(action) {
-      const params = action.action_params;
-      let actionParams = [];
-      const inputType = this.automationActionTypes.find(
-        item => item.key === action.action_name
-      ).inputType;
-      if (inputType === 'multi_select' || inputType === 'search_select') {
-        actionParams = [
-          ...this.getActionDropdownValues(action.action_name),
-        ].filter(item => [...params].includes(item.id));
-      } else if (inputType === 'team_message') {
-        actionParams = {
-          team_ids: [
-            ...this.getActionDropdownValues(action.action_name),
-          ].filter(item => [...params[0].team_ids].includes(item.id)),
-          message: params[0].message,
-        };
-      } else actionParams = [...params];
-      return actionParams;
-    },
-    manifestActions(automation) {
-      let actionParams = [];
-      const actions = automation.actions.map(action => {
-        if (action.action_params.length) {
-          actionParams = this.generateActionsArray(action);
-        }
-        return {
-          ...action,
-          action_params: actionParams,
-        };
-      });
-      return actions;
-    },
-    formatAutomation(automation) {
-      this.automation = {
-        ...automation,
-        conditions: this.manifestConditions(automation),
-        actions: this.manifestActions(automation),
-      };
-    },
-    getActionDropdownValues(type) {
-      const { agents, labels, teams, slaPolicies } = this;
-      return getActionOptions({
-        agents,
-        labels,
-        teams,
-        slaPolicies,
-        languages,
-        type,
-      });
-    },
-    manifestCustomAttributes() {
-      const conversationCustomAttributesRaw = this.$store.getters[
-        'attributes/getAttributesByModel'
-      ]('conversation_attribute');
-
-      const contactCustomAttributesRaw =
-        this.$store.getters['attributes/getAttributesByModel'](
-          'contact_attribute'
-        );
-      const conversationCustomAttributeTypes = generateCustomAttributeTypes(
-        conversationCustomAttributesRaw,
-        'conversation_attribute'
-      );
-      const contactCustomAttributeTypes = generateCustomAttributeTypes(
-        contactCustomAttributesRaw,
-        'contact_attribute'
-      );
-      let manifestedCustomAttributes = generateCustomAttributes(
-        conversationCustomAttributeTypes,
-        contactCustomAttributeTypes,
-        this.$t('AUTOMATION.CONDITION.CONVERSATION_CUSTOM_ATTR_LABEL'),
-        this.$t('AUTOMATION.CONDITION.CONTACT_CUSTOM_ATTR_LABEL')
-      );
-      this.automationTypes.message_created.conditions.push(
-        ...manifestedCustomAttributes
-      );
-      this.automationTypes.conversation_created.conditions.push(
-        ...manifestedCustomAttributes
-      );
-      this.automationTypes.conversation_updated.conditions.push(
-        ...manifestedCustomAttributes
-      );
-      this.automationTypes.conversation_opened.conditions.push(
-        ...manifestedCustomAttributes
-      );
-    },
-  },
-};

app/javascript/dashboard/mixins/reportMixin.js

@@ -1,51 +0,0 @@
-import { mapGetters } from 'vuex';
-import { formatTime } from '@chatwoot/utils';
-
-export default {
-  props: {
-    accountSummaryKey: {
-      type: String,
-      default: 'getAccountSummary',
-    },
-  },
-  computed: {
-    ...mapGetters({
-      accountReport: 'getAccountReports',
-    }),
-    accountSummary() {
-      return this.$store.getters[this.accountSummaryKey];
-    },
-  },
-  methods: {
-    calculateTrend(key) {
-      if (!this.accountSummary.previous[key]) return 0;
-      const diff = this.accountSummary[key] - this.accountSummary.previous[key];
-      return Math.round((diff / this.accountSummary.previous[key]) * 100);
-    },
-    displayMetric(key) {
-      if (this.isAverageMetricType(key)) {
-        return formatTime(this.accountSummary[key]);
-      }
-      return Number(this.accountSummary[key] || '').toLocaleString();
-    },
-    displayInfoText(key) {
-      if (this.metrics[this.currentSelection].KEY !== key) {
-        return '';
-      }
-      if (this.isAverageMetricType(key)) {
-        const total = this.accountReport.data
-          .map(item => item.count)
-          .reduce((prev, curr) => prev + curr, 0);
-        return `${this.metrics[this.currentSelection].INFO_TEXT} ${total}`;
-      }
-      return '';
-    },
-    isAverageMetricType(key) {
-      return [
-        'avg_first_response_time',
-        'avg_resolution_time',
-        'reply_time',
-      ].includes(key);
-    },
-  },
-};

app/javascript/dashboard/mixins/specs/reportMixin.spec.js

@@ -1,136 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import reportMixin from '../reportMixin';
-import reportFixtures from './reportMixinFixtures';
-import Vuex from 'vuex';
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('reportMixin', () => {
-  let getters;
-  let store;
-  beforeEach(() => {
-    getters = {
-      getAccountSummary: () => reportFixtures.summary,
-      getBotSummary: () => reportFixtures.botSummary,
-      getAccountReports: () => reportFixtures.report,
-    };
-    store = new Vuex.Store({ getters });
-  });
-
-  it('display the metric for account', async () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [reportMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    await wrapper.setProps({
-      accountSummaryKey: 'getAccountSummary',
-    });
-    expect(wrapper.vm.displayMetric('conversations_count')).toEqual('5,000');
-    expect(wrapper.vm.displayMetric('avg_first_response_time')).toEqual(
-      '3 Min 18 Sec'
-    );
-  });
-
-  it('display the metric for bot', async () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [reportMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    await wrapper.setProps({
-      accountSummaryKey: 'getBotSummary',
-    });
-    expect(wrapper.vm.displayMetric('bot_resolutions_count')).toEqual('10');
-    expect(wrapper.vm.displayMetric('bot_handoffs_count')).toEqual('20');
-  });
-
-  it('display the metric', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [reportMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.displayMetric('conversations_count')).toEqual('5,000');
-    expect(wrapper.vm.displayMetric('avg_first_response_time')).toEqual(
-      '3 Min 18 Sec'
-    );
-  });
-
-  it('calculate the trend', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [reportMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.calculateTrend('conversations_count')).toEqual(124900);
-    expect(wrapper.vm.calculateTrend('resolutions_count')).toEqual(0);
-  });
-
-  it('display info text', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [reportMixin],
-      data() {
-        return {
-          currentSelection: 0,
-        };
-      },
-      computed: {
-        metrics() {
-          return [
-            {
-              DESC: '( Avg )',
-              INFO_TEXT: 'Total number of conversations used for computation:',
-              KEY: 'avg_first_response_time',
-              NAME: 'First Response Time',
-            },
-          ];
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.displayInfoText('avg_first_response_time')).toEqual(
-      'Total number of conversations used for computation: 4'
-    );
-  });
-
-  it('do not display info text', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [reportMixin],
-      data() {
-        return {
-          currentSelection: 0,
-        };
-      },
-      computed: {
-        metrics() {
-          return [
-            {
-              DESC: '( Total )',
-              INFO_TEXT: '',
-              KEY: 'conversation_count',
-              NAME: 'Conversations',
-            },
-            {
-              DESC: '( Avg )',
-              INFO_TEXT: 'Total number of conversations used for computation:',
-              KEY: 'avg_first_response_time',
-              NAME: 'First Response Time',
-            },
-          ];
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.displayInfoText('conversation_count')).toEqual('');
-    expect(wrapper.vm.displayInfoText('incoming_messages_count')).toEqual('');
-  });
-});

app/javascript/dashboard/mixins/specs/reportMixinFixtures.js

@@ -1,37 +0,0 @@
-export default {
-  summary: {
-    avg_first_response_time: '198.6666666666667',
-    avg_resolution_time: '208.3333333333333',
-    conversations_count: 5000,
-    incoming_messages_count: 5,
-    outgoing_messages_count: 3,
-    previous: {
-      avg_first_response_time: '89.0',
-      avg_resolution_time: '145.0',
-      conversations_count: 4,
-      incoming_messages_count: 5,
-      outgoing_messages_count: 4,
-      resolutions_count: 0,
-    },
-    resolutions_count: 3,
-  },
-  botSummary: {
-    bot_resolutions_count: 10,
-    bot_handoffs_count: 20,
-    previous: {
-      bot_resolutions_count: 8,
-      bot_handoffs_count: 5,
-    },
-  },
-  report: {
-    data: [
-      { value: '0.00', timestamp: 1647541800, count: 0 },
-      { value: '0.00', timestamp: 1647628200, count: 0 },
-      { value: '0.00', timestamp: 1647714600, count: 0 },
-      { value: '0.00', timestamp: 1647801000, count: 0 },
-      { value: '0.01', timestamp: 1647887400, count: 4 },
-      { value: '0.00', timestamp: 1647973800, count: 0 },
-      { value: '0.00', timestamp: 1648060200, count: 0 },
-    ],
-  },
-};

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -1,7 +1,7 @@
 <script>
 import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import AddCannedModal from 'dashboard/routes/dashboard/settings/canned/AddCanned.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { conversationUrl, frontendURL } from '../../../helper/URLHelper';
@@ -18,7 +18,6 @@ export default {
     TranslateModal,
     MenuItem,
   },
-  mixins: [messageFormatterMixin],
   props: {
     message: {
       type: Object,
@@ -37,6 +36,12 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    const { getPlainText } = useMessageFormatter();
+    return {
+      getPlainText,
+    };
+  },
   data() {
     return {
       isCannedResponseModalOpen: false,

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -1,15 +1,12 @@
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 
 export default {
   components: {
     Thumbnail,
   },
-
-  mixins: [messageFormatterMixin],
-
   props: {
     id: {
       type: Number,
@@ -28,6 +25,12 @@ export default {
       default: 0,
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   data() {
     return {
       showDeleteModal: false,

app/javascript/dashboard/modules/search/components/MessageContent.vue

@@ -1,12 +1,11 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import ReadMore from './ReadMore.vue';
 
 export default {
   components: {
     ReadMore,
   },
-  mixins: [messageFormatterMixin],
   props: {
     author: {
       type: String,
@@ -21,6 +20,13 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { formatMessage, highlightContent } = useMessageFormatter();
+    return {
+      formatMessage,
+      highlightContent,
+    };
+  },
   data() {
     return {
       isOverflowing: false,

app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue

@@ -6,7 +6,7 @@ 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 { CMD_SNOOZE_CONVERSATION } from 'dashboard/helper/commandbar/events';
 import wootConstants from 'dashboard/constants/globals';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
 

app/javascript/dashboard/routes/dashboard/commands/appearanceHotKeys.js

@@ -1,65 +0,0 @@
-import {
-  ICON_APPEARANCE,
-  ICON_LIGHT_MODE,
-  ICON_DARK_MODE,
-  ICON_SYSTEM_MODE,
-} from './CommandBarIcons';
-import { LocalStorage } from 'shared/helpers/localStorage';
-import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
-import { setColorTheme } from 'dashboard/helper/themeHelper.js';
-
-export default {
-  computed: {
-    themeOptions() {
-      return [
-        {
-          key: 'light',
-          label: this.$t('COMMAND_BAR.COMMANDS.LIGHT_MODE'),
-          icon: ICON_LIGHT_MODE,
-        },
-        {
-          key: 'dark',
-          label: this.$t('COMMAND_BAR.COMMANDS.DARK_MODE'),
-          icon: ICON_DARK_MODE,
-        },
-
-        {
-          key: 'auto',
-          label: this.$t('COMMAND_BAR.COMMANDS.SYSTEM_MODE'),
-          icon: ICON_SYSTEM_MODE,
-        },
-      ];
-    },
-    goToAppearanceHotKeys() {
-      const options = this.themeOptions.map(theme => ({
-        id: theme.key,
-        title: theme.label,
-        parent: 'appearance_settings',
-        section: this.$t('COMMAND_BAR.SECTIONS.APPEARANCE'),
-        icon: theme.icon,
-        handler: () => {
-          this.setAppearance(theme.key);
-        },
-      }));
-      return [
-        {
-          id: 'appearance_settings',
-          title: this.$t('COMMAND_BAR.COMMANDS.CHANGE_APPEARANCE'),
-          section: this.$t('COMMAND_BAR.SECTIONS.APPEARANCE'),
-          icon: ICON_APPEARANCE,
-          children: options.map(option => option.id),
-        },
-        ...options,
-      ];
-    },
-  },
-  methods: {
-    setAppearance(theme) {
-      LocalStorage.set(LOCAL_STORAGE_KEYS.COLOR_SCHEME, theme);
-      const isOSOnDarkMode = window.matchMedia(
-        '(prefers-color-scheme: dark)'
-      ).matches;
-      setColorTheme(isOSOnDarkMode);
-    },
-  },
-};

app/javascript/dashboard/routes/dashboard/commands/bulkActionsHotKeys.js

@@ -1,86 +0,0 @@
-import { mapGetters } from 'vuex';
-import wootConstants from 'dashboard/constants/globals';
-
-import {
-  CMD_BULK_ACTION_SNOOZE_CONVERSATION,
-  CMD_BULK_ACTION_REOPEN_CONVERSATION,
-  CMD_BULK_ACTION_RESOLVE_CONVERSATION,
-} from './commandBarBusEvents';
-import {
-  ICON_SNOOZE_CONVERSATION,
-  ICON_REOPEN_CONVERSATION,
-  ICON_RESOLVE_CONVERSATION,
-} from './CommandBarIcons';
-import { emitter } from 'shared/helpers/mitt';
-
-import { createSnoozeHandlers } from './commandBarActions';
-
-const SNOOZE_OPTIONS = wootConstants.SNOOZE_OPTIONS;
-
-export const SNOOZE_CONVERSATION_BULK_ACTIONS = [
-  {
-    id: 'bulk_action_snooze_conversation',
-    title: 'COMMAND_BAR.COMMANDS.SNOOZE_CONVERSATION',
-    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
-    icon: ICON_SNOOZE_CONVERSATION,
-    children: Object.values(SNOOZE_OPTIONS),
-  },
-  ...createSnoozeHandlers(
-    CMD_BULK_ACTION_SNOOZE_CONVERSATION,
-    'bulk_action_snooze_conversation',
-    'COMMAND_BAR.SECTIONS.BULK_ACTIONS'
-  ),
-];
-
-export const RESOLVED_CONVERSATION_BULK_ACTIONS = [
-  {
-    id: 'bulk_action_reopen_conversation',
-    title: 'COMMAND_BAR.COMMANDS.REOPEN_CONVERSATION',
-    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
-    icon: ICON_REOPEN_CONVERSATION,
-    handler: () => emitter.emit(CMD_BULK_ACTION_REOPEN_CONVERSATION),
-  },
-];
-
-export const OPEN_CONVERSATION_BULK_ACTIONS = [
-  {
-    id: 'bulk_action_resolve_conversation',
-    title: 'COMMAND_BAR.COMMANDS.RESOLVE_CONVERSATION',
-    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
-    icon: ICON_RESOLVE_CONVERSATION,
-    handler: () => emitter.emit(CMD_BULK_ACTION_RESOLVE_CONVERSATION),
-  },
-];
-
-export default {
-  computed: {
-    ...mapGetters({
-      selectedConversations: 'bulkActions/getSelectedConversationIds',
-    }),
-    bulkActionsHotKeys() {
-      let actions = [];
-      if (this.selectedConversations.length > 0) {
-        actions = [
-          ...SNOOZE_CONVERSATION_BULK_ACTIONS,
-          ...RESOLVED_CONVERSATION_BULK_ACTIONS,
-          ...OPEN_CONVERSATION_BULK_ACTIONS,
-        ];
-      }
-      return this.prepareActions(actions);
-    },
-  },
-  watch: {
-    selectedConversations() {
-      this.setCommandbarData();
-    },
-  },
-  methods: {
-    prepareActions(actions) {
-      return actions.map(action => ({
-        ...action,
-        title: this.$t(action.title),
-        section: this.$t(action.section),
-      }));
-    },
-  },
-};

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

@@ -1,118 +1,85 @@
-<script>
+<script setup>
 import '@chatwoot/ninja-keys';
-import { useConversationLabels } from 'dashboard/composables/useConversationLabels';
-import { useAI } from 'dashboard/composables/useAI';
-import { useAgentsList } from 'dashboard/composables/useAgentsList';
+import { ref, computed, watchEffect, onMounted } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useTrack } from 'dashboard/composables';
+import { useI18n } from 'dashboard/composables/useI18n';
+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 conversationHotKeysMixin from './conversationHotKeys';
-import bulkActionsHotKeysMixin from './bulkActionsHotKeys';
-import inboxHotKeysMixin from './inboxHotKeys';
-import goToCommandHotKeys from './goToCommandHotKeys';
-import appearanceHotKeys from './appearanceHotKeys';
-import { GENERAL_EVENTS } from '../../../helper/AnalyticsHelper/events';
+import { GENERAL_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
-export default {
-  mixins: [
-    conversationHotKeysMixin,
-    bulkActionsHotKeysMixin,
-    inboxHotKeysMixin,
-    appearanceHotKeys,
-    goToCommandHotKeys,
-  ],
-  setup() {
-    // used in conversationHotKeysMixin
-    const {
-      activeLabels,
-      inactiveLabels,
-      addLabelToConversation,
-      removeLabelFromConversation,
-    } = useConversationLabels();
+const store = useStore();
+const track = useTrack();
+const { t } = useI18n();
 
-    const { isAIIntegrationEnabled } = useAI();
-    const { agentsList, assignableAgents } = useAgentsList();
+const ninjakeys = ref(null);
 
-    return {
-      agentsList,
-      assignableAgents,
-      activeLabels,
-      inactiveLabels,
-      addLabelToConversation,
-      removeLabelFromConversation,
-      isAIIntegrationEnabled,
-    };
-  },
-  data() {
-    return {
-      // 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
-      selectedSnoozeType: null,
-    };
-  },
-  computed: {
-    placeholder() {
-      return this.$t('COMMAND_BAR.SEARCH_PLACEHOLDER');
-    },
-    accountId() {
-      return this.$store.getters.getCurrentAccountId;
-    },
-    routeName() {
-      return this.$route.name;
-    },
-    hotKeys() {
-      return [
-        ...this.inboxHotKeys,
-        ...this.conversationHotKeys,
-        ...this.bulkActionsHotKeys,
-        ...this.goToCommandHotKeys,
-        ...this.goToAppearanceHotKeys,
-      ];
-    },
-  },
-  watch: {
-    routeName() {
-      this.setCommandbarData();
-    },
-  },
-  mounted() {
-    this.setCommandbarData();
-  },
-  methods: {
-    setCommandbarData() {
-      this.$refs.ninjakeys.data = this.hotKeys;
-    },
-    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) {
-        this.selectedSnoozeType =
-          wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME;
-      } else {
-        this.selectedSnoozeType = null;
-      }
-      this.$track(GENERAL_EVENTS.COMMAND_BAR, {
-        section,
-        action: title,
-      });
-      this.setCommandbarData();
-    },
-    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 (
-        this.selectedSnoozeType !==
-        wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME
-      ) {
-        this.$store.dispatch('setContextMenuChatId', 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;
+  }
+
+  track(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 -->

app/javascript/dashboard/routes/dashboard/commands/conversationHotKeys.js

@@ -1,413 +0,0 @@
-import { mapGetters } from 'vuex';
-import wootConstants from 'dashboard/constants/globals';
-import { emitter } from 'shared/helpers/mitt';
-
-import { CMD_AI_ASSIST } from './commandBarBusEvents';
-import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
-import {
-  ICON_ADD_LABEL,
-  ICON_ASSIGN_AGENT,
-  ICON_ASSIGN_PRIORITY,
-  ICON_ASSIGN_TEAM,
-  ICON_REMOVE_LABEL,
-  ICON_PRIORITY_URGENT,
-  ICON_PRIORITY_HIGH,
-  ICON_PRIORITY_LOW,
-  ICON_PRIORITY_MEDIUM,
-  ICON_PRIORITY_NONE,
-  ICON_AI_ASSIST,
-  ICON_AI_SUMMARY,
-  ICON_AI_SHORTEN,
-  ICON_AI_EXPAND,
-  ICON_AI_GRAMMAR,
-} from './CommandBarIcons';
-
-import {
-  OPEN_CONVERSATION_ACTIONS,
-  SNOOZE_CONVERSATION_ACTIONS,
-  RESOLVED_CONVERSATION_ACTIONS,
-  SEND_TRANSCRIPT_ACTION,
-  UNMUTE_ACTION,
-  MUTE_ACTION,
-} from './commandBarActions';
-import {
-  isAConversationRoute,
-  isAInboxViewRoute,
-} from '../../../helper/routeHelpers';
-export default {
-  watch: {
-    assignableAgents() {
-      this.setCommandbarData();
-    },
-    currentChat() {
-      this.setCommandbarData();
-    },
-    teamsList() {
-      this.setCommandbarData();
-    },
-    activeLabels() {
-      this.setCommandbarData();
-    },
-    draftMessage() {
-      this.setCommandbarData();
-    },
-    replyMode() {
-      this.setCommandbarData();
-    },
-    contextMenuChatId() {
-      this.setCommandbarData();
-    },
-  },
-  computed: {
-    ...mapGetters({
-      currentChat: 'getSelectedChat',
-      replyMode: 'draftMessages/getReplyEditorMode',
-      contextMenuChatId: 'getContextMenuChatId',
-      teams: 'teams/getTeams',
-    }),
-    draftMessage() {
-      return this.$store.getters['draftMessages/get'](this.draftKey);
-    },
-    draftKey() {
-      return `draft-${this.conversationId}-${this.replyMode}`;
-    },
-    inboxId() {
-      return this.currentChat?.inbox_id;
-    },
-    conversationId() {
-      return this.currentChat?.id;
-    },
-    hasAnAssignedTeam() {
-      return !!this.currentChat?.meta?.team;
-    },
-    teamsList() {
-      if (this.hasAnAssignedTeam) {
-        return [
-          { id: 0, name: this.$t('TEAMS_SETTINGS.LIST.NONE') },
-          ...this.teams,
-        ];
-      }
-      return this.teams;
-    },
-    statusActions() {
-      const isOpen =
-        this.currentChat?.status === wootConstants.STATUS_TYPE.OPEN;
-      const isSnoozed =
-        this.currentChat?.status === wootConstants.STATUS_TYPE.SNOOZED;
-      const isResolved =
-        this.currentChat?.status === wootConstants.STATUS_TYPE.RESOLVED;
-
-      let actions = [];
-      if (isOpen) {
-        actions = [
-          ...OPEN_CONVERSATION_ACTIONS,
-          ...SNOOZE_CONVERSATION_ACTIONS,
-        ];
-      } else if (isResolved || isSnoozed) {
-        actions = RESOLVED_CONVERSATION_ACTIONS;
-      }
-      return this.prepareActions(actions);
-    },
-
-    priorityOptions() {
-      return [
-        {
-          label: this.$t('CONVERSATION.PRIORITY.OPTIONS.NONE'),
-          key: null,
-          icon: ICON_PRIORITY_NONE,
-        },
-        {
-          label: this.$t('CONVERSATION.PRIORITY.OPTIONS.URGENT'),
-          key: 'urgent',
-          icon: ICON_PRIORITY_URGENT,
-        },
-        {
-          label: this.$t('CONVERSATION.PRIORITY.OPTIONS.HIGH'),
-          key: 'high',
-          icon: ICON_PRIORITY_HIGH,
-        },
-        {
-          label: this.$t('CONVERSATION.PRIORITY.OPTIONS.MEDIUM'),
-          key: 'medium',
-          icon: ICON_PRIORITY_MEDIUM,
-        },
-        {
-          label: this.$t('CONVERSATION.PRIORITY.OPTIONS.LOW'),
-          key: 'low',
-          icon: ICON_PRIORITY_LOW,
-        },
-      ].filter(item => item.key !== this.currentChat?.priority);
-    },
-    assignAgentActions() {
-      const agentOptions = this.agentsList.map(agent => ({
-        id: `agent-${agent.id}`,
-        title: agent.name,
-        parent: 'assign_an_agent',
-        section: this.$t('COMMAND_BAR.SECTIONS.CHANGE_ASSIGNEE'),
-        agentInfo: agent,
-        icon: ICON_ASSIGN_AGENT,
-        handler: this.onChangeAssignee,
-      }));
-      return [
-        {
-          id: 'assign_an_agent',
-          title: this.$t('COMMAND_BAR.COMMANDS.ASSIGN_AN_AGENT'),
-          section: this.$t('COMMAND_BAR.SECTIONS.CONVERSATION'),
-          icon: ICON_ASSIGN_AGENT,
-          children: agentOptions.map(option => option.id),
-        },
-        ...agentOptions,
-      ];
-    },
-    assignPriorityActions() {
-      const options = this.priorityOptions.map(priority => ({
-        id: `priority-${priority.key}`,
-        title: priority.label,
-        parent: 'assign_priority',
-        section: this.$t('COMMAND_BAR.SECTIONS.CHANGE_PRIORITY'),
-        priority: priority,
-        icon: priority.icon,
-        handler: this.onChangePriority,
-      }));
-      return [
-        {
-          id: 'assign_priority',
-          title: this.$t('COMMAND_BAR.COMMANDS.ASSIGN_PRIORITY'),
-          section: this.$t('COMMAND_BAR.SECTIONS.CONVERSATION'),
-          icon: ICON_ASSIGN_PRIORITY,
-          children: options.map(option => option.id),
-        },
-        ...options,
-      ];
-    },
-    assignTeamActions() {
-      const teamOptions = this.teamsList.map(team => ({
-        id: `team-${team.id}`,
-        title: team.name,
-        parent: 'assign_a_team',
-        section: this.$t('COMMAND_BAR.SECTIONS.CHANGE_TEAM'),
-        teamInfo: team,
-        icon: ICON_ASSIGN_TEAM,
-        handler: this.onChangeTeam,
-      }));
-      return [
-        {
-          id: 'assign_a_team',
-          title: this.$t('COMMAND_BAR.COMMANDS.ASSIGN_A_TEAM'),
-          section: this.$t('COMMAND_BAR.SECTIONS.CONVERSATION'),
-          icon: ICON_ASSIGN_TEAM,
-          children: teamOptions.map(option => option.id),
-        },
-        ...teamOptions,
-      ];
-    },
-
-    addLabelActions() {
-      const availableLabels = this.inactiveLabels.map(label => ({
-        id: label.title,
-        title: `#${label.title}`,
-        parent: 'add_a_label_to_the_conversation',
-        section: this.$t('COMMAND_BAR.SECTIONS.ADD_LABEL'),
-        icon: ICON_ADD_LABEL,
-        handler: action => this.addLabelToConversation({ title: action.id }),
-      }));
-      return [
-        ...availableLabels,
-        {
-          id: 'add_a_label_to_the_conversation',
-          title: this.$t('COMMAND_BAR.COMMANDS.ADD_LABELS_TO_CONVERSATION'),
-          section: this.$t('COMMAND_BAR.SECTIONS.CONVERSATION'),
-          icon: ICON_ADD_LABEL,
-          children: this.inactiveLabels.map(label => label.title),
-        },
-      ];
-    },
-    removeLabelActions() {
-      const activeLabels = this.activeLabels.map(label => ({
-        id: label.title,
-        title: `#${label.title}`,
-        parent: 'remove_a_label_to_the_conversation',
-        section: this.$t('COMMAND_BAR.SECTIONS.REMOVE_LABEL'),
-        icon: ICON_REMOVE_LABEL,
-        handler: action => this.removeLabelFromConversation(action.id),
-      }));
-      return [
-        ...activeLabels,
-        {
-          id: 'remove_a_label_to_the_conversation',
-          title: this.$t('COMMAND_BAR.COMMANDS.REMOVE_LABEL_FROM_CONVERSATION'),
-          section: this.$t('COMMAND_BAR.SECTIONS.CONVERSATION'),
-          icon: ICON_REMOVE_LABEL,
-          children: this.activeLabels.map(label => label.title),
-        },
-      ];
-    },
-    labelActions() {
-      if (this.activeLabels.length) {
-        return [...this.addLabelActions, ...this.removeLabelActions];
-      }
-      return this.addLabelActions;
-    },
-    conversationAdditionalActions() {
-      return this.prepareActions([
-        this.currentChat.muted ? UNMUTE_ACTION : MUTE_ACTION,
-        SEND_TRANSCRIPT_ACTION,
-      ]);
-    },
-
-    nonDraftMessageAIAssistActions() {
-      if (this.replyMode === REPLY_EDITOR_MODES.REPLY) {
-        return [
-          {
-            label: this.$t(
-              'INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.REPLY_SUGGESTION'
-            ),
-            key: 'reply_suggestion',
-            icon: ICON_AI_ASSIST,
-          },
-        ];
-      }
-      return [
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.SUMMARIZE'),
-          key: 'summarize',
-          icon: ICON_AI_SUMMARY,
-        },
-      ];
-    },
-
-    draftMessageAIAssistActions() {
-      return [
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.REPHRASE'),
-          key: 'rephrase',
-          icon: ICON_AI_ASSIST,
-        },
-        {
-          label: this.$t(
-            'INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.FIX_SPELLING_GRAMMAR'
-          ),
-          key: 'fix_spelling_grammar',
-          icon: ICON_AI_GRAMMAR,
-        },
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.EXPAND'),
-          key: 'expand',
-          icon: ICON_AI_EXPAND,
-        },
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.SHORTEN'),
-          key: 'shorten',
-          icon: ICON_AI_SHORTEN,
-        },
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.MAKE_FRIENDLY'),
-          key: 'make_friendly',
-          icon: ICON_AI_ASSIST,
-        },
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.MAKE_FORMAL'),
-          key: 'make_formal',
-          icon: ICON_AI_ASSIST,
-        },
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.SIMPLIFY'),
-          key: 'simplify',
-          icon: ICON_AI_ASSIST,
-        },
-      ];
-    },
-
-    AIAssistActions() {
-      const aiOptions = this.draftMessage
-        ? this.draftMessageAIAssistActions
-        : this.nonDraftMessageAIAssistActions;
-      const options = aiOptions.map(item => ({
-        id: `ai-assist-${item.key}`,
-        title: item.label,
-        parent: 'ai_assist',
-        section: this.$t('COMMAND_BAR.SECTIONS.AI_ASSIST'),
-        priority: item,
-        icon: item.icon,
-        handler: () => emitter.emit(CMD_AI_ASSIST, item.key),
-      }));
-      return [
-        {
-          id: 'ai_assist',
-          title: this.$t('COMMAND_BAR.COMMANDS.AI_ASSIST'),
-          section: this.$t('COMMAND_BAR.SECTIONS.AI_ASSIST'),
-          icon: ICON_AI_ASSIST,
-          children: options.map(option => option.id),
-        },
-        ...options,
-      ];
-    },
-
-    isConversationOrInboxRoute() {
-      return (
-        isAConversationRoute(this.$route.name) ||
-        isAInboxViewRoute(this.$route.name)
-      );
-    },
-
-    shouldShowSnoozeOption() {
-      return (
-        isAConversationRoute(this.$route.name, true, false) &&
-        this.contextMenuChatId
-      );
-    },
-
-    getDefaultConversationHotKeys() {
-      const defaultConversationHotKeys = [
-        ...this.statusActions,
-        ...this.conversationAdditionalActions,
-        ...this.assignAgentActions,
-        ...this.assignTeamActions,
-        ...this.labelActions,
-        ...this.assignPriorityActions,
-      ];
-      if (this.isAIIntegrationEnabled) {
-        return [...defaultConversationHotKeys, ...this.AIAssistActions];
-      }
-      return defaultConversationHotKeys;
-    },
-
-    conversationHotKeys() {
-      if (this.shouldShowSnoozeOption) {
-        return this.prepareActions(SNOOZE_CONVERSATION_ACTIONS);
-      }
-      if (this.isConversationOrInboxRoute) {
-        return this.getDefaultConversationHotKeys;
-      }
-      return [];
-    },
-  },
-
-  methods: {
-    onChangeAssignee(action) {
-      this.$store.dispatch('assignAgent', {
-        conversationId: this.currentChat.id,
-        agentId: action.agentInfo.id,
-      });
-    },
-    onChangePriority(action) {
-      this.$store.dispatch('assignPriority', {
-        conversationId: this.currentChat.id,
-        priority: action.priority.key,
-      });
-    },
-    onChangeTeam(action) {
-      this.$store.dispatch('assignTeam', {
-        conversationId: this.currentChat.id,
-        teamId: action.teamInfo.id,
-      });
-    },
-    prepareActions(actions) {
-      return actions.map(action => ({
-        ...action,
-        title: this.$t(action.title),
-        section: this.$t(action.section),
-      }));
-    },
-  },
-};

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue

@@ -4,7 +4,7 @@ import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue
 import countries from 'shared/constants/countries.js';
 import { mapGetters } from 'vuex';
 import { filterAttributeGroups } from '../contactFilterItems';
-import filterMixin from 'shared/mixins/filterMixin';
+import { useFilter } from 'shared/composables/useFilter';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
@@ -13,7 +13,6 @@ export default {
   components: {
     FilterInputBox,
   },
-  mixins: [filterMixin],
   props: {
     onClose: {
       type: Function,
@@ -36,6 +35,15 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { setFilterAttributes } = useFilter({
+      filteri18nKey: 'CONTACTS_FILTER',
+      attributeModel: 'contact_attribute',
+    });
+    return {
+      setFilterAttributes,
+    };
+  },
   data() {
     return {
       show: true,
@@ -69,7 +77,10 @@ export default {
     },
   },
   mounted() {
-    this.setFilterAttributes();
+    const { filterGroups, filterTypes } = this.setFilterAttributes();
+    this.filterTypes = [...this.filterTypes, ...filterTypes];
+    this.filterGroups = filterGroups;
+
     if (this.getAppliedContactFilters.length) {
       this.appliedFilters = [...this.getAppliedContactFilters];
     } else if (!this.isSegmentsView) {

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -9,12 +9,11 @@ import CannedResponse from 'dashboard/components/widgets/conversation/CannedResp
 import MessageSignatureMissingAlert from 'dashboard/components/widgets/conversation/MessageSignatureMissingAlert';
 import InboxDropdownItem from 'dashboard/components/widgets/InboxDropdownItem.vue';
 import WhatsappTemplates from './WhatsappTemplates.vue';
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { getInboxSource } from 'dashboard/helper/inbox';
 import { useVuelidate } from '@vuelidate/core';
 import { required, requiredIf } from '@vuelidate/validators';
-import inboxMixin from 'shared/mixins/inboxMixin';
+import { useInbox, INBOX_TYPES } from 'shared/composables/useInbox';
 import FileUpload from 'vue-upload-component';
 import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview';
 import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
@@ -36,7 +35,7 @@ export default {
     AttachmentPreview,
     MessageSignatureMissingAlert,
   },
-  mixins: [inboxMixin, fileUploadMixin],
+  mixins: [fileUploadMixin],
   props: {
     contact: {
       type: Object,
@@ -47,12 +46,18 @@ export default {
       default: () => {},
     },
   },
-  setup() {
+  setup(props) {
+    const { channelType } = useInbox({ inboxObj: props.targetInbox });
     const { fetchSignatureFlagFromUISettings, setSignatureFlagForInbox } =
       useUISettings();
     const v$ = useVuelidate();
 
-    return { fetchSignatureFlagFromUISettings, setSignatureFlagForInbox, v$ };
+    return {
+      fetchSignatureFlagFromUISettings,
+      setSignatureFlagForInbox,
+      v$,
+      channelType,
+    };
   },
   data() {
     return {

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -1,6 +1,5 @@
 <script>
 import { mapGetters } from 'vuex';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import SwitchLayout from './SwitchLayout.vue';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 export default {
@@ -14,7 +13,6 @@ export default {
       },
     },
   },
-  mixins: [messageFormatterMixin],
   props: {
     isOnExpandedLayout: {
       type: Boolean,

app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue

@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { getUnixTime } from 'date-fns';
-import { CMD_SNOOZE_NOTIFICATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+import { CMD_SNOOZE_NOTIFICATION } from 'dashboard/helper/commandbar/events';
 import wootConstants from 'dashboard/constants/globals';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';

app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue

@@ -1,9 +1,17 @@
 <script>
 import { mapGetters } from 'vuex';
-import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
 import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
 import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
-
+import { useAutomation } from 'dashboard/composables/useAutomation';
+import { validateAutomation } from 'dashboard/helper/validations';
+import {
+  generateAutomationPayload,
+  getAttributes,
+  getInputType,
+  getOperators,
+  getCustomAttributeType,
+  showActionInput,
+} from 'dashboard/helper/automationHelper';
 import {
   AUTOMATION_RULE_EVENTS,
   AUTOMATION_ACTION_TYPES,
@@ -14,13 +22,38 @@ export default {
     FilterInputBox,
     AutomationActionInput,
   },
-  mixins: [automationMethodsMixin],
   props: {
     onClose: {
       type: Function,
       default: () => {},
     },
   },
+  setup() {
+    const {
+      onEventChange,
+      getConditionDropdownValues,
+      appendNewCondition,
+      appendNewAction,
+      removeFilter,
+      removeAction,
+      resetFilter,
+      resetAction,
+      getActionDropdownValues,
+      manifestCustomAttributes,
+    } = useAutomation();
+    return {
+      onEventChange,
+      getConditionDropdownValues,
+      appendNewCondition,
+      appendNewAction,
+      removeFilter,
+      removeAction,
+      resetFilter,
+      resetAction,
+      getActionDropdownValues,
+      manifestCustomAttributes,
+    };
+  },
   data() {
     return {
       automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
@@ -82,12 +115,24 @@ export default {
     this.$store.dispatch('labels/get');
     this.$store.dispatch('campaigns/get');
     this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
-    this.manifestCustomAttributes();
+    this.manifestCustomAttributes(this.automationTypes);
   },
   methods: {
+    getAttributes,
+    getInputType,
+    getOperators,
+    getCustomAttributeType,
+    showActionInput,
     isFeatureEnabled(flag) {
       return this.isFeatureEnabledonAccount(this.accountId, flag);
     },
+    emitSaveAutomation() {
+      this.errors = validateAutomation(this.automation);
+      if (Object.keys(this.errors).length === 0) {
+        const automation = generateAutomationPayload(this.automation);
+        this.$emit('saveAutomation', automation, this.mode);
+      }
+    },
   },
 };
 </script>
@@ -121,7 +166,7 @@ export default {
             <select
               v-model="automation.event_name"
               class="m-0"
-              @change="onEventChange()"
+              @change="onEventChange(automation)"
             >
               <option
                 v-for="event in automationRuleEvents"
@@ -154,9 +199,26 @@ export default {
               v-for="(condition, i) in automation.conditions"
               :key="i"
               v-model="automation.conditions[i]"
-              :filter-attributes="getAttributes(automation.event_name)"
-              :input-type="getInputType(automation.conditions[i].attribute_key)"
-              :operators="getOperators(automation.conditions[i].attribute_key)"
+              :filter-attributes="
+                getAttributes(automationTypes, automation.event_name)
+              "
+              :input-type="
+                getInputType(
+                  allCustomAttributes,
+                  automationTypes,
+                  automation,
+                  automation.conditions[i].attribute_key
+                )
+              "
+              :operators="
+                getOperators(
+                  allCustomAttributes,
+                  automationTypes,
+                  automation,
+                  mode,
+                  automation.conditions[i].attribute_key
+                )
+              "
               :dropdown-values="
                 getConditionDropdownValues(
                   automation.conditions[i].attribute_key
@@ -164,15 +226,26 @@ export default {
               "
               :show-query-operator="i !== automation.conditions.length - 1"
               :custom-attribute-type="
-                getCustomAttributeType(automation.conditions[i].attribute_key)
+                getCustomAttributeType(
+                  automationTypes,
+                  automation,
+                  automation.conditions[i].attribute_key
+                )
               "
               :error-message="
                 errors[`condition_${i}`]
                   ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
                   : ''
               "
-              @resetFilter="resetFilter(i, automation.conditions[i])"
-              @removeFilter="removeFilter(i)"
+              @resetFilter="
+                resetFilter(
+                  automation,
+                  automationTypes,
+                  i,
+                  automation.conditions[i]
+                )
+              "
+              @removeFilter="removeFilter(automation, i)"
             />
             <div class="mt-4">
               <woot-button
@@ -180,7 +253,7 @@ export default {
                 color-scheme="success"
                 variant="smooth"
                 size="small"
-                @click="appendNewCondition"
+                @click="appendNewCondition(automation)"
               >
                 {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
               </woot-button>
@@ -205,15 +278,18 @@ export default {
                 getActionDropdownValues(automation.actions[i].action_name)
               "
               :show-action-input="
-                showActionInput(automation.actions[i].action_name)
+                showActionInput(
+                  automationActionTypes,
+                  automation.actions[i].action_name
+                )
               "
               :error-message="
                 errors[`action_${i}`]
                   ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
                   : ''
               "
-              @resetAction="resetAction(i)"
-              @removeAction="removeAction(i)"
+              @resetAction="resetAction(automation, i)"
+              @removeAction="removeAction(automation, i)"
             />
             <div class="mt-4">
               <woot-button
@@ -221,7 +297,7 @@ export default {
                 color-scheme="success"
                 variant="smooth"
                 size="small"
-                @click="appendNewAction"
+                @click="appendNewAction(automation)"
               >
                 {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
               </woot-button>
@@ -234,7 +310,7 @@ export default {
             <woot-button class="button clear" @click.prevent="onClose">
               {{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
             </woot-button>
-            <woot-button @click="submitAutomation">
+            <woot-button @click="emitSaveAutomation">
               {{ $t('AUTOMATION.ADD.SUBMIT') }}
             </woot-button>
           </div>

app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue

@@ -1,8 +1,18 @@
 <script>
 import { mapGetters } from 'vuex';
-import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
+import { useAutomation } from 'dashboard/composables/useAutomation';
 import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
 import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+import {
+  getFileName,
+  generateAutomationPayload,
+  getAttributes,
+  getInputType,
+  getOperators,
+  getCustomAttributeType,
+  showActionInput,
+} from 'dashboard/helper/automationHelper';
+import { validateAutomation } from 'dashboard/helper/validations';
 
 import {
   AUTOMATION_RULE_EVENTS,
@@ -15,7 +25,6 @@ export default {
     FilterInputBox,
     AutomationActionInput,
   },
-  mixins: [automationMethodsMixin],
   props: {
     onClose: {
       type: Function,
@@ -26,6 +35,34 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    const {
+      onEventChange,
+      getConditionDropdownValues,
+      appendNewCondition,
+      appendNewAction,
+      removeFilter,
+      removeAction,
+      resetFilter,
+      resetAction,
+      getActionDropdownValues,
+      formatAutomation,
+      manifestCustomAttributes,
+    } = useAutomation();
+    return {
+      onEventChange,
+      getConditionDropdownValues,
+      appendNewCondition,
+      appendNewAction,
+      removeFilter,
+      removeAction,
+      resetFilter,
+      resetAction,
+      getActionDropdownValues,
+      formatAutomation,
+      manifestCustomAttributes,
+    };
+  },
   data() {
     return {
       automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
@@ -61,14 +98,33 @@ export default {
     },
   },
   mounted() {
-    this.manifestCustomAttributes();
+    this.manifestCustomAttributes(this.automationTypes);
     this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
-    this.formatAutomation(this.selectedResponse);
+
+    this.automation = this.formatAutomation(
+      this.selectedResponse,
+      this.allCustomAttributes,
+      this.automationTypes,
+      this.automationActionTypes
+    );
   },
   methods: {
+    getFileName,
+    getAttributes,
+    getInputType,
+    getOperators,
+    getCustomAttributeType,
+    showActionInput,
     isFeatureEnabled(flag) {
       return this.isFeatureEnabledonAccount(this.accountId, flag);
     },
+    emitSaveAutomation() {
+      this.errors = validateAutomation(this.automation);
+      if (Object.keys(this.errors).length === 0) {
+        const automation = generateAutomationPayload(this.automation);
+        this.$emit('saveAutomation', automation, this.mode);
+      }
+    },
   },
 };
 </script>
@@ -99,7 +155,10 @@ export default {
         <div class="event_wrapper">
           <label :class="{ error: errors.event_name }">
             {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
-            <select v-model="automation.event_name" @change="onEventChange()">
+            <select
+              v-model="automation.event_name"
+              @change="onEventChange(automation)"
+            >
               <option
                 v-for="event in automationRuleEvents"
                 :key="event.key"
@@ -125,16 +184,37 @@ export default {
               v-for="(condition, i) in automation.conditions"
               :key="i"
               v-model="automation.conditions[i]"
-              :filter-attributes="getAttributes(automation.event_name)"
-              :input-type="getInputType(automation.conditions[i].attribute_key)"
-              :operators="getOperators(automation.conditions[i].attribute_key)"
+              :filter-attributes="
+                getAttributes(automationTypes, automation.event_name)
+              "
+              :input-type="
+                getInputType(
+                  allCustomAttributes,
+                  automationTypes,
+                  automation,
+                  automation.conditions[i].attribute_key
+                )
+              "
+              :operators="
+                getOperators(
+                  allCustomAttributes,
+                  automationTypes,
+                  automation,
+                  mode,
+                  automation.conditions[i].attribute_key
+                )
+              "
               :dropdown-values="
                 getConditionDropdownValues(
                   automation.conditions[i].attribute_key
                 )
               "
               :custom-attribute-type="
-                getCustomAttributeType(automation.conditions[i].attribute_key)
+                getCustomAttributeType(
+                  automationTypes,
+                  automation,
+                  automation.conditions[i].attribute_key
+                )
               "
               :show-query-operator="i !== automation.conditions.length - 1"
               :error-message="
@@ -142,8 +222,15 @@ export default {
                   ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
                   : ''
               "
-              @resetFilter="resetFilter(i, automation.conditions[i])"
-              @removeFilter="removeFilter(i)"
+              @resetFilter="
+                resetFilter(
+                  automation,
+                  automationTypes,
+                  i,
+                  automation.conditions[i]
+                )
+              "
+              @removeFilter="removeFilter(automation, i)"
             />
             <div class="mt-4">
               <woot-button
@@ -151,7 +238,7 @@ export default {
                 color-scheme="success"
                 variant="smooth"
                 size="small"
-                @click="appendNewCondition"
+                @click="appendNewCondition(automation)"
               >
                 {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
               </woot-button>
@@ -173,15 +260,17 @@ export default {
               v-model="automation.actions[i]"
               :action-types="automationActionTypes"
               :dropdown-values="getActionDropdownValues(action.action_name)"
-              :show-action-input="showActionInput(action.action_name)"
+              :show-action-input="
+                showActionInput(automationActionTypes, action.action_name)
+              "
               :error-message="
                 errors[`action_${i}`]
                   ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
                   : ''
               "
               :initial-file-name="getFileName(action, automation.files)"
-              @resetAction="resetAction(i)"
-              @removeAction="removeAction(i)"
+              @resetAction="resetAction(automation, i)"
+              @removeAction="removeAction(automation, i)"
             />
             <div class="mt-4">
               <woot-button
@@ -189,7 +278,7 @@ export default {
                 color-scheme="success"
                 variant="smooth"
                 size="small"
-                @click="appendNewAction"
+                @click="appendNewAction(automation)"
               >
                 {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
               </woot-button>
@@ -206,7 +295,7 @@ export default {
             >
               {{ $t('AUTOMATION.EDIT.CANCEL_BUTTON_TEXT') }}
             </woot-button>
-            <woot-button @click="submitAutomation">
+            <woot-button @click="emitSaveAutomation">
               {{ $t('AUTOMATION.EDIT.SUBMIT') }}
             </woot-button>
           </div>

app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue

@@ -1,5 +1,5 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 import { mapGetters } from 'vuex';
 import { useAccount } from 'dashboard/composables/useAccount';
@@ -7,12 +7,12 @@ import BillingItem from './components/BillingItem.vue';
 
 export default {
   components: { BillingItem },
-  mixins: [messageFormatterMixin],
   setup() {
     const { accountId } = useAccount();
-
+    const { formatMessage } = useMessageFormatter();
     return {
       accountId,
+      formatMessage,
     };
   },
   computed: {

app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue

@@ -4,7 +4,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import campaignMixin from 'shared/mixins/campaignMixin';
+import { useCampaign } from 'shared/composables/useCampaign';
 import WootDateTimePicker from 'dashboard/components/ui/DateTimePicker.vue';
 import { URLPattern } from 'urlpattern-polyfill';
 import { CAMPAIGNS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
@@ -14,9 +14,9 @@ export default {
     WootDateTimePicker,
     WootMessageEditor,
   },
-  mixins: [campaignMixin],
   setup() {
-    return { v$: useVuelidate() };
+    const { campaignType, isOngoingType, isOneOffType } = useCampaign();
+    return { v$: useVuelidate(), campaignType, isOngoingType, isOneOffType };
   },
   data() {
     return {

app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue

@@ -1,7 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import campaignMixin from 'shared/mixins/campaignMixin';
+import { useCampaign } from 'shared/composables/useCampaign';
 import CampaignsTable from './CampaignsTable.vue';
 import EditCampaign from './EditCampaign.vue';
 export default {
@@ -9,13 +9,16 @@ export default {
     CampaignsTable,
     EditCampaign,
   },
-  mixins: [campaignMixin],
   props: {
     type: {
       type: String,
       default: '',
     },
   },
+  setup() {
+    const { campaignType } = useCampaign();
+    return { campaignType };
+  },
   data() {
     return {
       showEditPopup: false,

app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue

@@ -1,7 +1,7 @@
 <script>
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
 import InboxName from 'dashboard/components/widgets/InboxName.vue';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { messageStamp } from 'shared/helpers/timeHelper';
 
 export default {
@@ -9,7 +9,6 @@ export default {
     UserAvatarWithName,
     InboxName,
   },
-  mixins: [messageFormatterMixin],
   props: {
     campaign: {
       type: Object,
@@ -20,7 +19,12 @@ export default {
       default: true,
     },
   },
-
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   computed: {
     campaignStatus() {
       if (this.isOngoingType) {

app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue

@@ -1,7 +1,7 @@
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import campaignMixin from 'shared/mixins/campaignMixin';
+import { useCampaign } from 'shared/composables/useCampaign';
 import CampaignCard from './CampaignCard.vue';
 
 export default {
@@ -10,9 +10,6 @@ export default {
     Spinner,
     CampaignCard,
   },
-
-  mixins: [campaignMixin],
-
   props: {
     campaigns: {
       type: Array,
@@ -27,7 +24,10 @@ export default {
       default: false,
     },
   },
-
+  setup() {
+    const { isOngoingType } = useCampaign();
+    return { isOngoingType };
+  },
   computed: {
     currentInboxId() {
       return this.$route.params.inboxId;

app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue

@@ -4,14 +4,13 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import campaignMixin from 'shared/mixins/campaignMixin';
+import { useCampaign } from 'shared/composables/useCampaign';
 import { URLPattern } from 'urlpattern-polyfill';
 
 export default {
   components: {
     WootMessageEditor,
   },
-  mixins: [campaignMixin],
   props: {
     selectedCampaign: {
       type: Object,
@@ -19,7 +18,8 @@ export default {
     },
   },
   setup() {
-    return { v$: useVuelidate() };
+    const { isOngoingType } = useCampaign();
+    return { v$: useVuelidate(), isOngoingType };
   },
   data() {
     return {

app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue

@@ -1,5 +1,5 @@
 <script>
-import campaignMixin from 'shared/mixins/campaignMixin';
+import { useCampaign } from 'shared/composables/useCampaign';
 import Campaign from './Campaign.vue';
 import AddCampaign from './AddCampaign.vue';
 
@@ -8,7 +8,10 @@ export default {
     Campaign,
     AddCampaign,
   },
-  mixins: [campaignMixin],
+  setup() {
+    const { isOngoingType } = useCampaign();
+    return { isOngoingType };
+  },
   data() {
     return { showAddPopup: false };
   },

app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue

@@ -1,219 +1,177 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
 import { useAlert } from 'dashboard/composables';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import { useAdmin } from 'dashboard/composables/useAdmin';
-import { useAccount } from 'dashboard/composables/useAccount';
-import Settings from './Settings.vue';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import SettingsLayout from '../SettingsLayout.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import { computed, ref } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import ChannelName from './components/ChannelName.vue';
 
-export default {
-  components: {
-    Settings,
-  },
-  mixins: [globalConfigMixin],
-  setup() {
-    const { isAdmin } = useAdmin();
-    const { accountScopedUrl } = useAccount();
-    return {
-      isAdmin,
-      accountScopedUrl,
-    };
-  },
-  data() {
-    return {
-      loading: {},
-      showSettings: false,
-      showDeletePopup: false,
-      selectedInbox: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      inboxesList: 'inboxes/getInboxes',
-      globalConfig: 'globalConfig/get',
-    }),
-    // Delete Modal
-    deleteConfirmText() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.YES')} ${
-        this.selectedInbox.name
-      }`;
-    },
-    deleteRejectText() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.NO')} ${
-        this.selectedInbox.name
-      }`;
-    },
-    confirmDeleteMessage() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.MESSAGE')} ${
-        this.selectedInbox.name
-      }?`;
-    },
-    confirmPlaceHolderText() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
-        inboxName: this.selectedInbox.name,
-      })}`;
-    },
-  },
-  methods: {
-    twilioChannelName(item) {
-      const { medium = '' } = item;
-      if (medium === 'whatsapp') return 'WhatsApp';
-      return 'Twilio SMS';
-    },
-    openSettings(inbox) {
-      this.showSettings = true;
-      this.selectedInbox = inbox;
-    },
-    closeSettings() {
-      this.showSettings = false;
-      this.selectedInbox = {};
-    },
-    async deleteInbox({ id }) {
-      try {
-        await this.$store.dispatch('inboxes/delete', id);
-        useAlert(this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
+const getters = useStoreGetters();
+const store = useStore();
+const { t } = useI18n();
+const { isAdmin } = useAdmin();
 
-    confirmDeletion() {
-      this.deleteInbox(this.selectedInbox);
-      this.closeDelete();
-    },
-    openDelete(inbox) {
-      this.showDeletePopup = true;
-      this.selectedInbox = inbox;
-    },
-    closeDelete() {
-      this.showDeletePopup = false;
-      this.selectedInbox = {};
-    },
-  },
+const showDeletePopup = ref(false);
+const selectedInbox = ref({});
+
+const inboxesList = computed(() => getters['inboxes/getInboxes'].value);
+const uiFlags = computed(() => getters['inboxes/getUIFlags'].value);
+
+const deleteConfirmText = computed(
+  () => `${t('INBOX_MGMT.DELETE.CONFIRM.YES')} ${selectedInbox.value.name}`
+);
+
+const deleteRejectText = computed(
+  () => `${t('INBOX_MGMT.DELETE.CONFIRM.NO')} ${selectedInbox.value.name}`
+);
+
+const confirmDeleteMessage = computed(
+  () => `${t('INBOX_MGMT.DELETE.CONFIRM.MESSAGE')} ${selectedInbox.value.name}?`
+);
+const confirmPlaceHolderText = computed(
+  () =>
+    `${t('INBOX_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
+      inboxName: selectedInbox.value.name,
+    })}`
+);
+
+const deleteInbox = async ({ id }) => {
+  try {
+    await store.dispatch('inboxes/delete', id);
+    useAlert(t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE'));
+  }
+};
+const closeDelete = () => {
+  showDeletePopup.value = false;
+  selectedInbox.value = {};
+};
+
+const confirmDeletion = () => {
+  deleteInbox(selectedInbox.value);
+  closeDelete();
+};
+const openDelete = inbox => {
+  showDeletePopup.value = true;
+  selectedInbox.value = inbox;
 };
 </script>
 
 <template>
-  <div class="flex-1 overflow-auto">
-    <div class="flex flex-row gap-4 p-8">
-      <div class="w-full lg:w-3/5">
-        <p
-          v-if="!inboxesList.length"
-          class="flex flex-col items-center justify-center h-full"
-        >
-          {{ $t('INBOX_MGMT.LIST.404') }}
+  <SettingsLayout
+    :no-records-found="!inboxesList.length"
+    :no-records-message="$t('INBOX_MGMT.LIST.404')"
+    :is-loading="uiFlags.isFetching"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('INBOX_MGMT.HEADER')"
+        :description="$t('INBOX_MGMT.DESCRIPTION')"
+        :link-text="$t('INBOX_MGMT.LEARN_MORE')"
+        feature-name="inboxes"
+      >
+        <template #actions>
           <router-link
             v-if="isAdmin"
-            :to="accountScopedUrl('settings/inboxes/new')"
+            class="button nice rounded-md"
+            :to="{ name: 'settings_inbox_new' }"
           >
+            <fluent-icon icon="add-circle" />
             {{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
           </router-link>
-        </p>
-
-        <table v-if="inboxesList.length" class="woot-table">
-          <tbody>
-            <tr v-for="item in inboxesList" :key="item.id">
-              <td>
-                <img
-                  v-if="item.avatar_url"
-                  class="woot-thumbnail"
-                  :src="item.avatar_url"
-                  alt="No Page Image"
+        </template>
+      </BaseSettingsHeader>
+    </template>
+    <template #body>
+      <table
+        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
+      >
+        <tbody
+          class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
+        >
+          <tr v-for="inbox in inboxesList" :key="inbox.id">
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
+              <div class="flex items-center flex-row gap-4">
+                <Thumbnail
+                  v-if="inbox.avatar_url"
+                  class="bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm"
+                  :src="inbox.avatar_url"
+                  :username="inbox.name"
+                  size="48px"
                 />
-                <img
+                <div
                   v-else
-                  class="woot-thumbnail"
-                  src="~dashboard/assets/images/flag.svg"
-                  alt="No Page Image"
-                />
-              </td>
-              <!-- Short Code  -->
-              <td>
-                <span class="agent-name">{{ item.name }}</span>
-                <span v-if="item.channel_type === 'Channel::FacebookPage'">
-                  {{ 'Facebook' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::WebWidget'">
-                  {{ 'Website' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::TwitterProfile'">
-                  {{ 'Twitter' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::TwilioSms'">
-                  {{ twilioChannelName(item) }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Whatsapp'">
-                  {{ 'Whatsapp' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Sms'">
-                  {{ 'Sms' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Email'">
-                  {{ 'Email' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Telegram'">
-                  {{ 'Telegram' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Line'">
-                  {{ 'Line' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Api'">
-                  {{ globalConfig.apiChannelName || 'API' }}
-                </span>
-              </td>
-
-              <!-- Action Buttons -->
-              <td>
-                <div class="button-wrapper">
-                  <router-link
-                    :to="accountScopedUrl(`settings/inboxes/${item.id}`)"
+                  class="w-12 h-12 bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm block"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="32"
+                    height="32"
+                    viewBox="0 0 24 24"
+                    class="opacity-80 p-1"
                   >
-                    <woot-button
-                      v-if="isAdmin"
-                      v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
-                      variant="smooth"
-                      size="tiny"
-                      icon="settings"
-                      color-scheme="secondary"
-                      class-names="grey-btn"
+                    <path
+                      fill="currentColor"
+                      d="M1 12c0-5.185 0-7.778 1.61-9.39C4.223 1 6.816 1 12 1s7.778 0 9.39 1.61C23 4.223 23 6.816 23 12s0 7.778-1.61 9.39C19.777 23 17.184 23 12 23s-7.778 0-9.39-1.61C1 19.777 1 17.184 1 12"
+                      opacity=".35"
                     />
-                  </router-link>
-
-                  <woot-button
-                    v-if="isAdmin"
-                    v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
-                    variant="smooth"
-                    color-scheme="alert"
-                    size="tiny"
-                    class-names="grey-btn"
-                    :is-loading="loading[item.id]"
-                    icon="dismiss-circle"
-                    @click="openDelete(item)"
+                    <path
+                      fill="currentColor"
+                      d="M2.61 21.389c1.612 1.61 4.205 1.61 9.39 1.61s7.778 0 9.39-1.61c1.492-1.493 1.601-3.829 1.61-8.29h-3.476c-.996 0-1.494 0-1.931.202c-.438.201-.762.58-1.41 1.335l-.666.777c-.648.756-.972 1.134-1.41 1.335s-.935.202-1.93.202h-.353c-.996 0-1.494 0-1.931-.202c-.438-.2-.762-.579-1.41-1.335l-.666-.777c-.648-.756-.972-1.134-1.41-1.335s-.935-.201-1.93-.201H1c.008 4.46.118 6.796 1.61 8.289"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <span class="block font-medium capitalize">
+                    {{ inbox.name }}
+                  </span>
+                  <ChannelName
+                    :channel-type="inbox.channel_type"
+                    :medium="inbox.medium"
                   />
                 </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+              </div>
+            </td>
 
-      <div class="hidden w-1/3 lg:block">
-        <span
-          v-dompurify-html="
-            useInstallationName(
-              $t('INBOX_MGMT.SIDEBAR_TXT'),
-              globalConfig.installationName
-            )
-          "
-        />
-      </div>
-    </div>
-    <Settings
-      v-if="showSettings"
-      :show.sync="showSettings"
-      :on-close="closeSettings"
-      :inbox="selectedInbox"
-    />
+            <td class="py-4">
+              <div class="flex gap-1 justify-end">
+                <router-link
+                  :to="{
+                    name: 'settings_inbox_show',
+                    params: { inboxId: inbox.id },
+                  }"
+                >
+                  <woot-button
+                    v-if="isAdmin"
+                    v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
+                    variant="smooth"
+                    size="tiny"
+                    icon="settings"
+                    color-scheme="secondary"
+                    class-names="grey-btn"
+                  />
+                </router-link>
+
+                <woot-button
+                  v-if="isAdmin"
+                  v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
+                  variant="smooth"
+                  color-scheme="alert"
+                  size="tiny"
+                  class-names="grey-btn"
+                  icon="dismiss-circle"
+                  @click="openDelete(inbox)"
+                />
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
 
     <woot-confirm-delete-modal
       v-if="showDeletePopup"
@@ -227,5 +185,5 @@ export default {
       @onConfirm="confirmDeletion"
       @onClose="closeDelete"
     />
-  </div>
+  </SettingsLayout>
 </template>

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -5,7 +5,7 @@ import { useAlert } from 'dashboard/composables';
 import { useVuelidate } from '@vuelidate/core';
 import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.vue';
 import SettingsSection from '../../../../components/SettingsSection.vue';
-import inboxMixin from 'shared/mixins/inboxMixin';
+import { useInbox } from 'shared/composables/useInbox';
 import FacebookReauthorize from './facebook/Reauthorize.vue';
 import PreChatFormSettings from './PreChatForm/Settings.vue';
 import WeeklyAvailability from './components/WeeklyAvailability.vue';
@@ -33,9 +33,42 @@ export default {
     SenderNameExamplePreview,
     MicrosoftReauthorize,
   },
-  mixins: [inboxMixin],
   setup() {
-    return { v$: useVuelidate() };
+    const {
+      isAMicrosoftInbox,
+      isAGoogleInbox,
+      isAPIInbox,
+      isATwitterInbox,
+      isAFacebookInbox,
+      isAWebWidgetInbox,
+      isATwilioChannel,
+      isALineChannel,
+      isAnEmailChannel,
+      isATwilioSMSChannel,
+      isASmsInbox,
+      isATwilioWhatsAppChannel,
+      isAWhatsAppCloudChannel,
+      is360DialogWhatsAppChannel,
+      isAWhatsAppChannel,
+    } = useInbox({ inboxId: this.currentInboxId });
+    return {
+      v$: useVuelidate(),
+      isAMicrosoftInbox,
+      isAGoogleInbox,
+      isAPIInbox,
+      isATwitterInbox,
+      isAFacebookInbox,
+      isAWebWidgetInbox,
+      isATwilioChannel,
+      isALineChannel,
+      isAnEmailChannel,
+      isATwilioSMSChannel,
+      isASmsInbox,
+      isATwilioWhatsAppChannel,
+      isAWhatsAppCloudChannel,
+      is360DialogWhatsAppChannel,
+      isAWhatsAppChannel,
+    };
   },
   data() {
     return {

app/javascript/dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters } from 'dashboard/composables/store';
+import { computed } from 'vue';
+
+const props = defineProps({
+  channelType: {
+    type: String,
+    required: true,
+  },
+  medium: {
+    type: String,
+    default: '',
+  },
+});
+const getters = useStoreGetters();
+const { t } = useI18n();
+const globalConfig = computed(() => getters['globalConfig/get'].value);
+
+const i18nMap = {
+  'Channel::FacebookPage': 'MESSENGER',
+  'Channel::WebWidget': 'WEB_WIDGET',
+  'Channel::TwitterProfile': 'TWITTER_PROFILE',
+  'Channel::TwilioSms': 'TWILIO_SMS',
+  'Channel::Whatsapp': 'WHATSAPP',
+  'Channel::Sms': 'SMS',
+  'Channel::Email': 'EMAIL',
+  'Channel::Telegram': 'TELEGRAM',
+  'Channel::Line': 'LINE',
+  'Channel::Api': 'API',
+};
+
+const twilioChannelName = () => {
+  if (props.medium === 'whatsapp') {
+    return t(`INBOX_MGMT.CHANNELS.WHATSAPP`);
+  }
+  return t(`INBOX_MGMT.CHANNELS.TWILIO_SMS`);
+};
+
+const readableChannelName = computed(() => {
+  if (props.channelType === 'Channel::Api') {
+    return globalConfig.value.apiChannelName || t('INBOX_MGMT.CHANNELS.API');
+  }
+  if (props.channelType === 'Channel::TwilioSms') {
+    return twilioChannelName();
+  }
+  return t(`INBOX_MGMT.CHANNELS.${i18nMap[props.channelType]}`);
+});
+</script>
+
+<template>
+  <span>
+    {{ readableChannelName }}
+  </span>
+</template>

app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue

@@ -1,7 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import inboxMixin from 'shared/mixins/inboxMixin';
+import { useInbox } from 'shared/composables/useInbox';
 import SettingsSection from 'dashboard/components/SettingsSection.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import BusinessDay from './BusinessDay.vue';
@@ -23,13 +23,22 @@ export default {
     BusinessDay,
     WootMessageEditor,
   },
-  mixins: [inboxMixin],
   props: {
     inbox: {
       type: Object,
       default: () => ({}),
     },
   },
+  setup(props) {
+    const { isATwilioChannel, isATwitterInbox, isAFacebookInbox } = useInbox({
+      inboxObj: props.inbox,
+    });
+    return {
+      isATwitterInbox,
+      isAFacebookInbox,
+      isATwilioChannel,
+    };
+  },
   data() {
     return {
       isBusinessHoursEnabled: false,

app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js

@@ -1,8 +1,8 @@
-/* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../../helper/URLHelper';
 import channelFactory from './channel-factory';
 
 const SettingsContent = () => import('../Wrapper.vue');
+const SettingWrapper = () => import('../SettingsWrapper.vue');
 const InboxHome = () => import('./Index.vue');
 const Settings = () => import('./Settings.vue');
 const InboxChannel = () => import('./InboxChannels.vue');
@@ -12,6 +12,24 @@ const FinishSetup = () => import('./FinishSetup.vue');
 
 export default {
   routes: [
+    {
+      path: frontendURL('accounts/:accountId/settings/inboxes'),
+      component: SettingWrapper,
+      children: [
+        {
+          path: '',
+          redirect: 'list',
+        },
+        {
+          path: 'list',
+          name: 'settings_inbox_list',
+          component: InboxHome,
+          meta: {
+            permissions: ['administrator'],
+          },
+        },
+      ],
+    },
     {
       path: frontendURL('accounts/:accountId/settings/inboxes'),
       component: SettingsContent,
@@ -26,18 +44,6 @@ export default {
         };
       },
       children: [
-        {
-          path: '',
-          redirect: 'list',
-        },
-        {
-          path: 'list',
-          name: 'settings_inbox_list',
-          component: InboxHome,
-          meta: {
-            permissions: ['administrator'],
-          },
-        },
         {
           path: 'new',
           component: InboxChannel,

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue

@@ -1,6 +1,6 @@
 <script>
 import { useAlert } from 'dashboard/composables';
-import inboxMixin from 'shared/mixins/inboxMixin';
+import { useInbox } from 'shared/composables/useInbox';
 import SettingsSection from '../../../../../components/SettingsSection.vue';
 import ImapSettings from '../ImapSettings.vue';
 import SmtpSettings from '../SmtpSettings.vue';
@@ -13,15 +13,30 @@ export default {
     ImapSettings,
     SmtpSettings,
   },
-  mixins: [inboxMixin],
   props: {
     inbox: {
       type: Object,
       default: () => ({}),
     },
   },
-  setup() {
-    return { v$: useVuelidate() };
+  setup(props) {
+    const {
+      isAPIInbox,
+      isAWebWidgetInbox,
+      isATwilioChannel,
+      isALineChannel,
+      isAnEmailChannel,
+    } = useInbox({
+      inboxObj: props.inbox,
+    });
+    return {
+      v$: useVuelidate(),
+      isAPIInbox,
+      isAWebWidgetInbox,
+      isATwilioChannel,
+      isALineChannel,
+      isAnEmailChannel,
+    };
   },
   data() {
     return {

app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue

@@ -2,7 +2,6 @@
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import Integration from './Integration.vue';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import SelectChannelWarning from './Slack/SelectChannelWarning.vue';
 import SlackIntegrationHelpText from './Slack/SlackIntegrationHelpText.vue';
 import Spinner from 'shared/components/Spinner.vue';
@@ -13,7 +12,7 @@ export default {
     SelectChannelWarning,
     SlackIntegrationHelpText,
   },
-  mixins: [globalConfigMixin, messageFormatterMixin],
+  mixins: [globalConfigMixin],
   props: {
     code: { type: String, default: '' },
   },

app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue

@@ -2,16 +2,22 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 export default {
-  mixins: [globalConfigMixin, messageFormatterMixin],
+  mixins: [globalConfigMixin],
   props: {
     hasConnectedAChannel: {
       type: Boolean,
       default: true,
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   data() {
     return { selectedChannelId: '', availableChannels: [] };
   },

app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue

@@ -1,13 +1,18 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 export default {
-  mixins: [messageFormatterMixin],
   props: {
     selectedChannelName: {
       type: String,
       required: true,
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
 };
 </script>
 

app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue

@@ -3,7 +3,6 @@ import { useAlert } from 'dashboard/composables';
 import BotMetrics from './components/BotMetrics.vue';
 import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
-import reportMixin from 'dashboard/mixins/reportMixin';
 import ReportContainer from './ReportContainer.vue';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 
@@ -14,7 +13,6 @@ export default {
     ReportFilterSelector,
     ReportContainer,
   },
-  mixins: [reportMixin],
   data() {
     return {
       from: 0,

app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue

@@ -4,7 +4,6 @@ import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
 import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
-import reportMixin from 'dashboard/mixins/reportMixin';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import ReportContainer from './ReportContainer.vue';
 
@@ -24,7 +23,6 @@ export default {
     ReportFilterSelector,
     ReportContainer,
   },
-  mixins: [reportMixin],
   data() {
     return {
       from: 0,

app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue

@@ -1,19 +1,23 @@
 <script>
+import { mapGetters } from 'vuex';
+import { useReportMetrics } from 'dashboard/composables/useReportMetrics';
 import { GROUP_BY_FILTER, METRIC_CHART } from './constants';
 import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
 import { formatTime } from '@chatwoot/utils';
-import reportMixin from 'dashboard/mixins/reportMixin';
 import ChartStats from './components/ChartElements/ChartStats.vue';
 
 export default {
   components: { ChartStats },
-  mixins: [reportMixin],
   props: {
     groupBy: {
       type: Object,
       default: () => ({}),
     },
+    accountSummaryKey: {
+      type: String,
+      default: 'getAccountSummary',
+    },
     reportKeys: {
       type: Object,
       default: () => ({
@@ -27,7 +31,16 @@ export default {
       }),
     },
   },
+  setup(props) {
+    const { calculateTrend, isAverageMetricType } = useReportMetrics(
+      props.accountSummaryKey
+    );
+    return { calculateTrend, isAverageMetricType };
+  },
   computed: {
+    ...mapGetters({
+      accountReport: 'getAccountReports',
+    }),
     metrics() {
       const reportKeys = Object.keys(this.reportKeys);
       const infoText = {
@@ -121,12 +134,12 @@ export default {
 
 <template>
   <div
-    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 bg-white dark:bg-slate-800 p-2 border border-slate-100 dark:border-slate-700 rounded-md"
+    class="grid grid-cols-1 p-2 bg-white border rounded-md md:grid-cols-2 lg:grid-cols-3 dark:bg-slate-800 border-slate-100 dark:border-slate-700"
   >
     <div
       v-for="metric in metrics"
       :key="metric.KEY"
-      class="p-4 rounded-md mb-3"
+      class="p-4 mb-3 rounded-md"
     >
       <ChartStats :metric="metric" :account-summary-key="accountSummaryKey" />
       <div class="mt-4 h-72">
@@ -135,12 +148,12 @@ export default {
           class="text-xs"
           :message="$t('REPORT.LOADING_CHART')"
         />
-        <div v-else class="h-72 flex items-center justify-center">
+        <div v-else class="flex items-center justify-center h-72">
           <woot-bar
             v-if="accountReport.data[metric.KEY].length"
             :collection="getCollection(metric)"
             :chart-options="getChartOptions(metric)"
-            class="h-72 w-full"
+            class="w-full h-72"
           />
           <span v-else class="text-sm text-slate-600">
             {{ $t('REPORT.NO_ENOUGH_DATA') }}

app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue

@@ -1,25 +1,30 @@
-<script>
-import reportMixin from 'dashboard/mixins/reportMixin';
-export default {
-  mixins: [reportMixin],
-  props: {
-    metric: {
-      type: Object,
-      default: () => ({}),
-    },
+<script setup>
+import { useReportMetrics } from 'dashboard/composables/useReportMetrics';
+
+const props = defineProps({
+  metric: {
+    type: Object,
+    default: () => ({}),
   },
-  methods: {
-    trendColor(value, key) {
-      if (this.isAverageMetricType(key)) {
-        return value > 0
-          ? 'border-red-500 text-red-500'
-          : 'border-green-500 text-green-500';
-      }
-      return value < 0
-        ? 'border-red-500 text-red-500'
-        : 'border-green-500 text-green-500';
-    },
+  accountSummaryKey: {
+    type: String,
+    default: 'getAccountSummary',
   },
+});
+
+const { calculateTrend, displayMetric, isAverageMetricType } = useReportMetrics(
+  props.accountSummaryKey
+);
+
+const trendColor = (value, key) => {
+  if (isAverageMetricType(key)) {
+    return value > 0
+      ? 'border-red-500 text-red-500'
+      : 'border-green-500 text-green-500';
+  }
+  return value < 0
+    ? 'border-red-500 text-red-500'
+    : 'border-green-500 text-green-500';
 };
 </script>
 
@@ -29,7 +34,7 @@ export default {
       {{ metric.NAME }}
     </span>
     <div class="flex items-end">
-      <div class="font-medium text-xl">
+      <div class="text-xl font-medium">
         {{ displayMetric(metric.KEY) }}
       </div>
       <div v-if="metric.trend" class="text-xs ml-4 flex items-center mb-0.5">

app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue

@@ -3,7 +3,6 @@ import { useAlert } from 'dashboard/composables';
 import ReportFilters from './ReportFilters.vue';
 import ReportContainer from '../ReportContainer.vue';
 import { GROUP_BY_FILTER } from '../constants';
-import reportMixin from '../../../../../mixins/reportMixin';
 import { generateFileName } from '../../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 
@@ -22,7 +21,6 @@ export default {
     ReportFilters,
     ReportContainer,
   },
-  mixins: [reportMixin],
   props: {
     type: {
       type: String,

app/javascript/dashboard/store/modules/inboxes.js

@@ -1,6 +1,6 @@
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import * as types from '../mutation-types';
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
+import { INBOX_TYPES } from 'shared/composables/useInbox';
 import InboxesAPI from '../../api/inboxes';
 import WebChannel from '../../api/channel/webChannel';
 import FBChannel from '../../api/channel/fbChannel';

app/javascript/portal/components/SearchSuggestions.vue

@@ -1,10 +1,9 @@
 <script>
 import { ref, computed, nextTick } from 'vue';
 import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 export default {
-  mixins: [messageFormatterMixin],
   props: {
     items: {
       type: Array,
@@ -30,7 +29,7 @@ export default {
   setup(props) {
     const selectedIndex = ref(-1);
     const portalSearchSuggestionsRef = ref(null);
-
+    const { highlightContent } = useMessageFormatter();
     const adjustScroll = () => {
       nextTick(() => {
         portalSearchSuggestionsRef.value.scrollTop = 102 * selectedIndex.value;
@@ -53,6 +52,7 @@ export default {
       selectedIndex,
       portalSearchSuggestionsRef,
       isSearchItemActive,
+      highlightContent,
     };
   },
 

app/javascript/shared/components/ChatOptions.vue

@@ -1,12 +1,11 @@
 <script>
 import ChatOption from 'shared/components/ChatOption.vue';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 export default {
   components: {
     ChatOption,
   },
-  mixins: [messageFormatterMixin],
   props: {
     title: {
       type: String,
@@ -25,6 +24,12 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   methods: {
     isSelected(option) {
       return this.selected === option.id;

app/javascript/shared/composables/specs/useCampaign.spec.js

@@ -0,0 +1,47 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useCampaign } from '../useCampaign';
+import { useRoute } from 'dashboard/composables/route';
+import { CAMPAIGN_TYPES } from '../../constants/campaign';
+
+// Mock the useRoute composable
+vi.mock('dashboard/composables/route', () => ({
+  useRoute: vi.fn(),
+}));
+
+describe('useCampaign', () => {
+  it('returns the correct campaign type for ongoing campaigns', () => {
+    useRoute.mockReturnValue({ name: 'ongoing_campaigns' });
+    const { campaignType } = useCampaign();
+    expect(campaignType.value).toBe(CAMPAIGN_TYPES.ONGOING);
+  });
+
+  it('returns the correct campaign type for one-off campaigns', () => {
+    useRoute.mockReturnValue({ name: 'one_off' });
+    const { campaignType } = useCampaign();
+    expect(campaignType.value).toBe(CAMPAIGN_TYPES.ONE_OFF);
+  });
+
+  it('isOngoingType returns true for ongoing campaigns', () => {
+    useRoute.mockReturnValue({ name: 'ongoing_campaigns' });
+    const { isOngoingType } = useCampaign();
+    expect(isOngoingType.value).toBe(true);
+  });
+
+  it('isOngoingType returns false for one-off campaigns', () => {
+    useRoute.mockReturnValue({ name: 'one_off' });
+    const { isOngoingType } = useCampaign();
+    expect(isOngoingType.value).toBe(false);
+  });
+
+  it('isOneOffType returns true for one-off campaigns', () => {
+    useRoute.mockReturnValue({ name: 'one_off' });
+    const { isOneOffType } = useCampaign();
+    expect(isOneOffType.value).toBe(true);
+  });
+
+  it('isOneOffType returns false for ongoing campaigns', () => {
+    useRoute.mockReturnValue({ name: 'ongoing_campaigns' });
+    const { isOneOffType } = useCampaign();
+    expect(isOneOffType.value).toBe(false);
+  });
+});

app/javascript/shared/composables/specs/useFilter.spec.js

@@ -0,0 +1,145 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useFilter } from '../useFilter';
+import { useStore } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+
+// Mock the dependencies
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables/useI18n');
+
+describe('useFilter', () => {
+  // Setup mocks
+  beforeEach(() => {
+    vi.mocked(useStore).mockReturnValue({
+      getters: {
+        'attributes/getAttributesByModel': vi.fn(),
+      },
+    });
+    vi.mocked(useI18n).mockReturnValue({
+      t: vi.fn(key => key),
+    });
+  });
+
+  it('should return the correct functions', () => {
+    const {
+      setFilterAttributes,
+      initializeStatusAndAssigneeFilterToModal,
+      initializeInboxTeamAndLabelFilterToModal,
+    } = useFilter({ filteri18nKey: 'TEST', attributeModel: 'conversation' });
+
+    expect(setFilterAttributes).toBeDefined();
+    expect(initializeStatusAndAssigneeFilterToModal).toBeDefined();
+    expect(initializeInboxTeamAndLabelFilterToModal).toBeDefined();
+  });
+
+  describe('setFilterAttributes', () => {
+    it('should return filterGroups and filterTypes', () => {
+      const mockAttributes = [
+        {
+          attribute_key: 'test_key',
+          attribute_display_name: 'Test Name',
+          attribute_display_type: 'text',
+        },
+      ];
+      vi.mocked(useStore)().getters[
+        'attributes/getAttributesByModel'
+      ].mockReturnValue(mockAttributes);
+
+      const { setFilterAttributes } = useFilter({
+        filteri18nKey: 'TEST',
+        attributeModel: 'conversation',
+      });
+      const result = setFilterAttributes();
+
+      expect(result).toHaveProperty('filterGroups');
+      expect(result).toHaveProperty('filterTypes');
+      expect(result.filterGroups.length).toBeGreaterThan(0);
+      expect(result.filterTypes.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('initializeStatusAndAssigneeFilterToModal', () => {
+    it('should return status filter when activeStatus is provided', () => {
+      const { initializeStatusAndAssigneeFilterToModal } = useFilter({
+        filteri18nKey: 'TEST',
+        attributeModel: 'conversation',
+      });
+      const result = initializeStatusAndAssigneeFilterToModal('open', {}, '');
+
+      expect(result).toEqual({
+        attribute_key: 'status',
+        attribute_model: 'standard',
+        filter_operator: 'equal_to',
+        values: [
+          { id: 'open', name: 'CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.open.TEXT' },
+        ],
+        query_operator: 'and',
+        custom_attribute_type: '',
+      });
+    });
+
+    it('should return null when no active filters', () => {
+      const { initializeStatusAndAssigneeFilterToModal } = useFilter({
+        filteri18nKey: 'TEST',
+        attributeModel: 'conversation',
+      });
+      const result = initializeStatusAndAssigneeFilterToModal('', {}, '');
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('initializeInboxTeamAndLabelFilterToModal', () => {
+    it('should return filters for inbox, team, and label when provided', () => {
+      const { initializeInboxTeamAndLabelFilterToModal } = useFilter({
+        filteri18nKey: 'TEST',
+        attributeModel: 'conversation',
+      });
+      const result = initializeInboxTeamAndLabelFilterToModal(
+        1,
+        { name: 'Inbox 1' },
+        2,
+        [{ id: 2, name: 'Team 2' }],
+        'Label 1'
+      );
+
+      expect(result).toHaveLength(3);
+      expect(result[0]).toHaveProperty('attribute_key', 'inbox_id');
+      expect(result[1]).toHaveProperty('attribute_key', 'team_id');
+      expect(result[2]).toHaveProperty('attribute_key', 'labels');
+    });
+
+    it('should return empty array when no filters are provided', () => {
+      const { initializeInboxTeamAndLabelFilterToModal } = useFilter({
+        filteri18nKey: 'TEST',
+        attributeModel: 'conversation',
+      });
+      const result = initializeInboxTeamAndLabelFilterToModal(
+        null,
+        null,
+        null,
+        null,
+        null
+      );
+
+      expect(result).toEqual([]);
+    });
+
+    it('should return only inbox filter when only inbox is provided', () => {
+      const { initializeInboxTeamAndLabelFilterToModal } = useFilter({
+        filteri18nKey: 'TEST',
+        attributeModel: 'conversation',
+      });
+      const result = initializeInboxTeamAndLabelFilterToModal(
+        1,
+        { name: 'Inbox 1' },
+        null,
+        null,
+        null
+      );
+
+      expect(result).toHaveLength(1);
+      expect(result[0]).toHaveProperty('attribute_key', 'inbox_id');
+    });
+  });
+});

app/javascript/shared/composables/specs/useInbox.spec.js

@@ -0,0 +1,148 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useInbox } from '../useInbox';
+
+// Mock the useStore composable
+vi.mock('dashboard/composables/store', () => ({
+  useStore: () => ({
+    getters: {
+      'inboxes/getInbox': vi.fn(id => ({
+        id,
+        channel_type: 'Channel::WebWidget',
+      })),
+      getSelectedChat: {
+        id: 1,
+        inbox_id: 1,
+        channel_type: 'Channel::WebWidget',
+      },
+    },
+  }),
+}));
+
+describe('useInbox', () => {
+  const createInbox = (channelType, additionalConfig = {}) => ({
+    channel_type: channelType,
+    ...additionalConfig,
+  });
+
+  it('returns the correct channel type', () => {
+    const inbox = createInbox('Channel::WebWidget');
+    const { channelType } = useInbox({ inboxObj: inbox });
+    expect(channelType.value).toBe('Channel::WebWidget');
+  });
+
+  it('isAPIInbox returns true if channel type is API', () => {
+    const inbox = createInbox('Channel::Api');
+    const { isAPIInbox } = useInbox({ inboxObj: inbox });
+    expect(isAPIInbox.value).toBe(true);
+  });
+
+  it('isATwitterInbox returns true if channel type is twitter', () => {
+    const inbox = createInbox('Channel::TwitterProfile');
+    const { isATwitterInbox } = useInbox({ inboxObj: inbox });
+    expect(isATwitterInbox.value).toBe(true);
+  });
+
+  it('isAFacebookInbox returns true if channel type is Facebook', () => {
+    const inbox = createInbox('Channel::FacebookPage');
+    const { isAFacebookInbox } = useInbox({ inboxObj: inbox });
+    expect(isAFacebookInbox.value).toBe(true);
+  });
+
+  it('isAWebWidgetInbox returns true if channel type is WebWidget', () => {
+    const inbox = createInbox('Channel::WebWidget');
+    const { isAWebWidgetInbox } = useInbox({ inboxObj: inbox });
+    expect(isAWebWidgetInbox.value).toBe(true);
+  });
+
+  it('isASmsInbox returns true if channel type is sms', () => {
+    const inbox = createInbox('Channel::Sms');
+    const { isASmsInbox } = useInbox({ inboxObj: inbox });
+    expect(isASmsInbox.value).toBe(true);
+  });
+
+  it('isASmsInbox returns true if channel type is twilio sms', () => {
+    const inbox = createInbox('Channel::TwilioSms', { medium: 'sms' });
+    const { isASmsInbox } = useInbox({ inboxObj: inbox });
+    expect(isASmsInbox.value).toBe(true);
+  });
+
+  describe('isATwilioSMSChannel', () => {
+    it('returns true if channel type is Twilio and medium is SMS', () => {
+      const inbox = createInbox('Channel::TwilioSms', { medium: 'sms' });
+      const { isATwilioSMSChannel } = useInbox({ inboxObj: inbox });
+      expect(isATwilioSMSChannel.value).toBe(true);
+    });
+
+    it('returns false if channel type is Twilio but medium is not SMS', () => {
+      const inbox = createInbox('Channel::TwilioSms', { medium: 'whatsapp' });
+      const { isATwilioSMSChannel } = useInbox({ inboxObj: inbox });
+      expect(isATwilioSMSChannel.value).toBe(false);
+    });
+
+    it('returns false if channel type is not Twilio but medium is SMS', () => {
+      const inbox = createInbox('Channel::NotTwilio', { medium: 'sms' });
+      const { isATwilioSMSChannel } = useInbox({ inboxObj: inbox });
+      expect(isATwilioSMSChannel.value).toBe(false);
+    });
+  });
+
+  describe('Badges', () => {
+    it('inboxBadge returns correct badge for Telegram', () => {
+      const inbox = createInbox('Channel::Telegram');
+      const { inboxBadge } = useInbox({ inboxObj: inbox });
+      expect(inboxBadge.value).toBe('Channel::Telegram');
+    });
+
+    it('inboxBadge returns correct badge for WhatsApp channel', () => {
+      const inbox = createInbox('Channel::Whatsapp');
+      const { inboxBadge } = useInbox({ inboxObj: inbox });
+      expect(inboxBadge.value).toBe('whatsapp');
+    });
+
+    it('inboxBadge returns the twitterBadge when isATwitterInbox is true', () => {
+      const inbox = createInbox('Channel::TwitterProfile');
+      const { inboxBadge } = useInbox({ inboxObj: inbox });
+      expect(inboxBadge.value).toBe('twitter-dm');
+    });
+  });
+
+  describe('WhatsApp channel', () => {
+    it('returns correct whatsAppAPIProvider', () => {
+      const inbox = createInbox('Channel::Whatsapp', {
+        provider: 'whatsapp_cloud',
+      });
+      const { whatsAppAPIProvider } = useInbox({ inboxObj: inbox });
+      expect(whatsAppAPIProvider.value).toBe('whatsapp_cloud');
+    });
+
+    it('isAWhatsAppCloudChannel returns true if channel type is WhatsApp and provider is whatsapp_cloud', () => {
+      const inbox = createInbox('Channel::Whatsapp', {
+        provider: 'whatsapp_cloud',
+      });
+      const { isAWhatsAppCloudChannel } = useInbox({ inboxObj: inbox });
+      expect(isAWhatsAppCloudChannel.value).toBe(true);
+    });
+
+    it('is360DialogWhatsAppChannel returns true if channel type is WhatsApp and provider is default', () => {
+      const inbox = createInbox('Channel::Whatsapp', { provider: 'default' });
+      const { is360DialogWhatsAppChannel } = useInbox({ inboxObj: inbox });
+      expect(is360DialogWhatsAppChannel.value).toBe(true);
+    });
+  });
+
+  describe('#inboxHasFeature', () => {
+    it('detects the correct feature', () => {
+      const inbox = createInbox('Channel::Telegram');
+      const { inboxHasFeature } = useInbox({ inboxObj: inbox });
+      expect(inboxHasFeature('replyTo')).toBe(true);
+      expect(inboxHasFeature('feature-does-not-exist')).toBe(false);
+    });
+
+    it('returns false for feature not included', () => {
+      const inbox = createInbox('Channel::Sms');
+      const { inboxHasFeature } = useInbox({ inboxObj: inbox });
+      expect(inboxHasFeature('replyTo')).toBe(false);
+      expect(inboxHasFeature('feature-does-not-exist')).toBe(false);
+    });
+  });
+});

app/javascript/shared/composables/specs/useMessageFormatter.spec.js

@@ -0,0 +1,79 @@
+import { useMessageFormatter } from '../useMessageFormatter';
+
+describe('useMessageFormatter', () => {
+  let messageFormatter;
+
+  beforeEach(() => {
+    messageFormatter = useMessageFormatter();
+  });
+
+  describe('formatMessage', () => {
+    it('should format a regular message correctly', () => {
+      const message = 'This is a [test](https://example.com) message';
+      const result = messageFormatter.formatMessage(message, false, false);
+      expect(result).toContain('<a href="https://example.com"');
+      expect(result).toContain('class="link"');
+    });
+
+    it('should format a tweet correctly', () => {
+      const message = '@user #hashtag';
+      const result = messageFormatter.formatMessage(message, true, false);
+      expect(result).toContain('<a href="http://twitter.com/user"');
+      expect(result).toContain('<a href="https://twitter.com/hashtag/hashtag"');
+    });
+
+    it('should not format mentions and hashtags for private notes', () => {
+      const message = '@user #hashtag';
+      const result = messageFormatter.formatMessage(message, false, true);
+      expect(result).not.toContain('<a href="http://twitter.com/user"');
+      expect(result).not.toContain(
+        '<a href="https://twitter.com/hashtag/hashtag"'
+      );
+    });
+  });
+
+  describe('truncateMessage', () => {
+    it('should not truncate short messages', () => {
+      const message = 'Short message';
+      const result = messageFormatter.truncateMessage(message);
+      expect(result).toBe(message);
+    });
+
+    it('should truncate long messages', () => {
+      const message = 'A'.repeat(150);
+      const result = messageFormatter.truncateMessage(message);
+      expect(result.length).toBe(100);
+      expect(result.endsWith('...')).toBe(true);
+    });
+  });
+
+  describe('highlightContent', () => {
+    it('should highlight search term in content', () => {
+      const content = 'This is a test message';
+      const searchTerm = 'test';
+      const highlightClass = 'highlight';
+      const result = messageFormatter.highlightContent(
+        content,
+        searchTerm,
+        highlightClass
+      );
+      expect(result.trim()).toBe(
+        'This is a <span class="highlight">test</span> message'
+      );
+    });
+
+    it('should handle special characters in search term', () => {
+      const content = 'This (message) contains [special] characters';
+      const searchTerm = '(message)';
+      const highlightClass = 'highlight';
+      const result = messageFormatter.highlightContent(
+        content,
+        searchTerm,
+        highlightClass
+      );
+      expect(result.trim()).toBe(
+        'This <span class="highlight">(message)</span> contains [special] characters'
+      );
+    });
+  });
+});

app/javascript/shared/composables/useCampaign.js

@@ -0,0 +1,43 @@
+import { computed } from 'vue';
+import { useRoute } from 'dashboard/composables/route';
+import { CAMPAIGN_TYPES } from '../constants/campaign';
+
+/**
+ * Composable to manage campaign types.
+ *
+ * @returns {Object} - Computed properties for campaign type and its checks.
+ */
+export const useCampaign = () => {
+  const route = useRoute();
+
+  /**
+   * Computed property to determine the current campaign type based on the route name.
+   */
+  const campaignType = computed(() => {
+    const campaignTypeMap = {
+      ongoing_campaigns: CAMPAIGN_TYPES.ONGOING,
+      one_off: CAMPAIGN_TYPES.ONE_OFF,
+    };
+    return campaignTypeMap[route.name];
+  });
+
+  /**
+   * Computed property to check if the current campaign type is 'ongoing'.
+   */
+  const isOngoingType = computed(() => {
+    return campaignType.value === CAMPAIGN_TYPES.ONGOING;
+  });
+
+  /**
+   * Computed property to check if the current campaign type is 'one-off'.
+   */
+  const isOneOffType = computed(() => {
+    return campaignType.value === CAMPAIGN_TYPES.ONE_OFF;
+  });
+
+  return {
+    campaignType,
+    isOngoingType,
+    isOneOffType,
+  };
+};

app/javascript/shared/composables/useFilter.js

@@ -0,0 +1,175 @@
+import wootConstants from 'dashboard/constants/globals';
+import { useStore } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { filterAttributeGroups } from 'dashboard/components/widgets/conversation/advancedFilterItems';
+import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
+
+const customAttributeInputType = key => {
+  switch (key) {
+    case 'date':
+      return 'date';
+    case 'text':
+      return 'plain_text';
+    case 'list':
+      return 'search_select';
+    case 'checkbox':
+      return 'search_select';
+    default:
+      return 'plain_text';
+  }
+};
+
+const getOperatorTypes = key => {
+  switch (key) {
+    case 'list':
+      return OPERATORS.OPERATOR_TYPES_1;
+    case 'text':
+      return OPERATORS.OPERATOR_TYPES_3;
+    case 'number':
+      return OPERATORS.OPERATOR_TYPES_1;
+    case 'link':
+      return OPERATORS.OPERATOR_TYPES_1;
+    case 'date':
+      return OPERATORS.OPERATOR_TYPES_4;
+    case 'checkbox':
+      return OPERATORS.OPERATOR_TYPES_1;
+    default:
+      return OPERATORS.OPERATOR_TYPES_1;
+  }
+};
+
+export const useFilter = ({ filteri18nKey, attributeModel }) => {
+  const { t: $t } = useI18n();
+  const { getters } = useStore();
+
+  const setFilterAttributes = () => {
+    const allCustomAttributes =
+      getters['attributes/getAttributesByModel'](attributeModel);
+
+    const customAttributesFormatted = {
+      name: $t(`${filteri18nKey}.GROUPS.CUSTOM_ATTRIBUTES`),
+      attributes: allCustomAttributes.map(attr => {
+        return {
+          key: attr.attribute_key,
+          name: attr.attribute_display_name,
+        };
+      }),
+    };
+
+    const allFilterGroups = filterAttributeGroups.map(group => {
+      return {
+        name: $t(`${filteri18nKey}.GROUPS.${group.i18nGroup}`),
+        attributes: group.attributes.map(attribute => {
+          return {
+            key: attribute.key,
+            name: $t(`${filteri18nKey}.ATTRIBUTES.${attribute.i18nKey}`),
+          };
+        }),
+      };
+    });
+
+    const customAttributeTypes = allCustomAttributes.map(attr => {
+      return {
+        attributeKey: attr.attribute_key,
+        attributeI18nKey: `CUSTOM_ATTRIBUTE_${attr.attribute_display_type.toUpperCase()}`,
+        inputType: customAttributeInputType(attr.attribute_display_type),
+        filterOperators: getOperatorTypes(attr.attribute_display_type),
+        attributeModel: 'custom_attributes',
+      };
+    });
+
+    return {
+      filterGroups: [...allFilterGroups, customAttributesFormatted],
+      filterTypes: [...customAttributeTypes],
+    };
+  };
+
+  const initializeStatusAndAssigneeFilterToModal = (
+    activeStatus,
+    currentUserDetails,
+    activeAssigneeTab
+  ) => {
+    if (activeStatus !== '') {
+      return {
+        attribute_key: 'status',
+        attribute_model: 'standard',
+        filter_operator: 'equal_to',
+        values: [
+          {
+            id: activeStatus,
+            name: $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`),
+          },
+        ],
+        query_operator: 'and',
+        custom_attribute_type: '',
+      };
+    }
+    if (activeAssigneeTab === wootConstants.ASSIGNEE_TYPE.ME) {
+      return {
+        attribute_key: 'assignee_id',
+        filter_operator: 'equal_to',
+        values: currentUserDetails,
+        query_operator: 'and',
+        custom_attribute_type: '',
+      };
+    }
+    return null;
+  };
+
+  const initializeInboxTeamAndLabelFilterToModal = (
+    conversationInbox,
+    inbox,
+    teamId,
+    activeTeam,
+    label
+  ) => {
+    const filters = [];
+    if (conversationInbox) {
+      filters.push({
+        attribute_key: 'inbox_id',
+        attribute_model: 'standard',
+        filter_operator: 'equal_to',
+        values: [
+          {
+            id: conversationInbox,
+            name: inbox.name,
+          },
+        ],
+        query_operator: 'and',
+        custom_attribute_type: '',
+      });
+    }
+    if (teamId) {
+      filters.push({
+        attribute_key: 'team_id',
+        attribute_model: 'standard',
+        filter_operator: 'equal_to',
+        values: activeTeam,
+        query_operator: 'and',
+        custom_attribute_type: '',
+      });
+    }
+    if (label) {
+      filters.push({
+        attribute_key: 'labels',
+        attribute_model: 'standard',
+        filter_operator: 'equal_to',
+        values: [
+          {
+            id: label,
+            name: label,
+          },
+        ],
+        query_operator: 'and',
+        custom_attribute_type: '',
+      });
+    }
+    return filters;
+  };
+
+  return {
+    setFilterAttributes,
+    initializeStatusAndAssigneeFilterToModal,
+    initializeInboxTeamAndLabelFilterToModal,
+  };
+};

app/javascript/shared/composables/useInbox.js

@@ -0,0 +1,180 @@
+import { computed, ref } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+
+export const INBOX_TYPES = {
+  WEB: 'Channel::WebWidget',
+  FB: 'Channel::FacebookPage',
+  TWITTER: 'Channel::TwitterProfile',
+  TWILIO: 'Channel::TwilioSms',
+  WHATSAPP: 'Channel::Whatsapp',
+  API: 'Channel::Api',
+  EMAIL: 'Channel::Email',
+  TELEGRAM: 'Channel::Telegram',
+  LINE: 'Channel::Line',
+  SMS: 'Channel::Sms',
+};
+
+export const INBOX_FEATURES = {
+  REPLY_TO: 'replyTo',
+  REPLY_TO_OUTGOING: 'replyToOutgoing',
+};
+
+export const INBOX_FEATURE_MAP = {
+  [INBOX_FEATURES.REPLY_TO]: [
+    INBOX_TYPES.FB,
+    INBOX_TYPES.WEB,
+    INBOX_TYPES.TWITTER,
+    INBOX_TYPES.WHATSAPP,
+    INBOX_TYPES.TELEGRAM,
+    INBOX_TYPES.API,
+  ],
+  [INBOX_FEATURES.REPLY_TO_OUTGOING]: [
+    INBOX_TYPES.WEB,
+    INBOX_TYPES.TWITTER,
+    INBOX_TYPES.WHATSAPP,
+    INBOX_TYPES.TELEGRAM,
+    INBOX_TYPES.API,
+  ],
+};
+
+// useInbox(inboxId) {}
+// useChatInbox {
+// chat = getCurrentChat
+//  return useInbox(chat.inboxId)
+// }
+
+export function useInbox({ inboxObj, inboxId, chat, getCurrentChat }) {
+  const store = useStore();
+  const inbox = ref(null);
+  if (inboxObj) {
+    inbox.value = inboxObj;
+  }
+  if (inboxId) {
+    inbox.value = store.getters['inboxes/getInbox'](inboxId);
+  }
+  if (getCurrentChat) {
+    inbox.value = store.getters.getSelectedChat;
+  }
+  const channelType = computed(() => inbox.value.channel_type);
+  const whatsAppAPIProvider = computed(() => inbox.value.provider || '');
+
+  const isAPIInbox = computed(() => channelType.value === INBOX_TYPES.API);
+  const isATwitterInbox = computed(
+    () => channelType.value === INBOX_TYPES.TWITTER
+  );
+  const isAFacebookInbox = computed(() => channelType.value === INBOX_TYPES.FB);
+  const isAWebWidgetInbox = computed(
+    () => channelType.value === INBOX_TYPES.WEB
+  );
+  const isATwilioChannel = computed(
+    () => channelType.value === INBOX_TYPES.TWILIO
+  );
+  const isALineChannel = computed(() => channelType.value === INBOX_TYPES.LINE);
+  const isAnEmailChannel = computed(
+    () => channelType.value === INBOX_TYPES.EMAIL
+  );
+  const isATelegramChannel = computed(
+    () => channelType.value === INBOX_TYPES.TELEGRAM
+  );
+
+  const isATwilioSMSChannel = computed(() => {
+    const medium = inbox.value.medium || '';
+    return isATwilioChannel.value && medium === 'sms';
+  });
+
+  const isAMicrosoftInbox = computed(
+    () => isAnEmailChannel.value && inbox.value.provider === 'microsoft'
+  );
+
+  const isAGoogleInbox = computed(
+    () => isAnEmailChannel.value && inbox.value.provider === 'google'
+  );
+
+  const isASmsInbox = computed(
+    () => channelType.value === INBOX_TYPES.SMS || isATwilioSMSChannel.value
+  );
+
+  const isATwilioWhatsAppChannel = computed(() => {
+    const medium = inbox.value.medium || '';
+    return isATwilioChannel.value && medium === 'whatsapp';
+  });
+
+  const isAWhatsAppCloudChannel = computed(
+    () =>
+      channelType.value === INBOX_TYPES.WHATSAPP &&
+      whatsAppAPIProvider.value === 'whatsapp_cloud'
+  );
+
+  const is360DialogWhatsAppChannel = computed(
+    () =>
+      channelType.value === INBOX_TYPES.WHATSAPP &&
+      whatsAppAPIProvider.value === 'default'
+  );
+
+  const chatAdditionalAttributes = computed(() => {
+    return chat?.additional_attributes || {};
+  });
+
+  const isTwitterInboxTweet = computed(
+    () => chatAdditionalAttributes.value.type === 'tweet'
+  );
+
+  const twilioBadge = computed(
+    () => `${isATwilioSMSChannel.value ? 'sms' : 'whatsapp'}`
+  );
+
+  const twitterBadge = computed(
+    () => `${isTwitterInboxTweet.value ? 'twitter-tweet' : 'twitter-dm'}`
+  );
+
+  const facebookBadge = computed(
+    () => chatAdditionalAttributes.value.type || 'facebook'
+  );
+
+  const isAWhatsAppChannel = computed(
+    () =>
+      channelType.value === INBOX_TYPES.WHATSAPP ||
+      isATwilioWhatsAppChannel.value
+  );
+
+  const inboxBadge = computed(() => {
+    if (isATwitterInbox.value) return twitterBadge.value;
+    if (isAFacebookInbox.value) return facebookBadge.value;
+    if (isATwilioChannel.value) return twilioBadge.value;
+    if (isAWhatsAppChannel.value) return 'whatsapp';
+    return channelType.value;
+  });
+
+  function inboxHasFeature(feature) {
+    return INBOX_FEATURE_MAP[feature]?.includes(channelType.value) ?? false;
+  }
+
+  return {
+    channelType,
+    whatsAppAPIProvider,
+    isAMicrosoftInbox,
+    isAGoogleInbox,
+    isAPIInbox,
+    inbox,
+    isATwitterInbox,
+    isAFacebookInbox,
+    isAWebWidgetInbox,
+    isATwilioChannel,
+    isALineChannel,
+    isAnEmailChannel,
+    isATelegramChannel,
+    isATwilioSMSChannel,
+    isASmsInbox,
+    isATwilioWhatsAppChannel,
+    isAWhatsAppCloudChannel,
+    is360DialogWhatsAppChannel,
+    chatAdditionalAttributes,
+    isTwitterInboxTweet,
+    twilioBadge,
+    twitterBadge,
+    facebookBadge,
+    inboxBadge,
+    isAWhatsAppChannel,
+    inboxHasFeature,
+  };
+}

app/javascript/shared/composables/useMessageFormatter.js

@@ -0,0 +1,82 @@
+import MessageFormatter from '../helpers/MessageFormatter';
+
+/**
+ * A composable providing utility functions for message formatting.
+ *
+ * @returns {Object} A set of functions for message formatting.
+ */
+export const useMessageFormatter = () => {
+  /**
+   * Formats a message based on specified conditions.
+   *
+   * @param {string} message - The message to be formatted.
+   * @param {boolean} isATweet - Whether the message is a tweet.
+   * @param {boolean} isAPrivateNote - Whether the message is a private note.
+   * @returns {string} - The formatted message.
+   */
+  const formatMessage = (message, isATweet, isAPrivateNote) => {
+    const messageFormatter = new MessageFormatter(
+      message,
+      isATweet,
+      isAPrivateNote
+    );
+    return messageFormatter.formattedMessage;
+  };
+
+  /**
+   * Converts a message to plain text.
+   *
+   * @param {string} message - The message to be converted.
+   * @param {boolean} isATweet - Whether the message is a tweet.
+   * @returns {string} - The plain text message.
+   */
+  const getPlainText = (message, isATweet) => {
+    const messageFormatter = new MessageFormatter(message, isATweet);
+    return messageFormatter.plainText;
+  };
+
+  /**
+   * Truncates a description to a maximum length of 100 characters.
+   *
+   * @param {string} [description=''] - The description to be truncated.
+   * @returns {string} - The truncated description.
+   */
+  const truncateMessage = (description = '') => {
+    if (description.length < 100) {
+      return description;
+    }
+
+    return `${description.slice(0, 97)}...`;
+  };
+
+  /**
+   * Highlights occurrences of a search term within given content.
+   *
+   * @param {string} [content=''] - The content in which to search.
+   * @param {string} [searchTerm=''] - The term to search for.
+   * @param {string} [highlightClass=''] - The CSS class to apply to the highlighted term.
+   * @returns {string} - The content with highlighted terms.
+   */
+  const highlightContent = (
+    content = '',
+    searchTerm = '',
+    highlightClass = ''
+  ) => {
+    const plainTextContent = getPlainText(content);
+
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
+    const escapedSearchTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+    return plainTextContent.replace(
+      new RegExp(`(${escapedSearchTerm})`, 'ig'),
+      `<span class="${highlightClass}">$1</span>`
+    );
+  };
+
+  return {
+    formatMessage,
+    getPlainText,
+    truncateMessage,
+    highlightContent,
+  };
+};

app/javascript/shared/mixins/campaignMixin.js

@@ -1,19 +0,0 @@
-import { CAMPAIGN_TYPES } from '../constants/campaign';
-
-export default {
-  computed: {
-    campaignType() {
-      const campaignTypeMap = {
-        ongoing_campaigns: CAMPAIGN_TYPES.ONGOING,
-        one_off: CAMPAIGN_TYPES.ONE_OFF,
-      };
-      return campaignTypeMap[this.$route.name];
-    },
-    isOngoingType() {
-      return this.campaignType === CAMPAIGN_TYPES.ONGOING;
-    },
-    isOneOffType() {
-      return this.campaignType === CAMPAIGN_TYPES.ONE_OFF;
-    },
-  },
-};

app/javascript/shared/mixins/filterMixin.js

@@ -1,119 +0,0 @@
-import wootConstants from 'dashboard/constants/globals';
-
-export default {
-  methods: {
-    setFilterAttributes() {
-      const allCustomAttributes = this.$store.getters[
-        'attributes/getAttributesByModel'
-      ](this.attributeModel);
-      const customAttributesFormatted = {
-        name: this.$t(`${this.filtersFori18n}.GROUPS.CUSTOM_ATTRIBUTES`),
-        attributes: allCustomAttributes.map(attr => {
-          return {
-            key: attr.attribute_key,
-            name: attr.attribute_display_name,
-          };
-        }),
-      };
-      const allFilterGroups = this.filterAttributeGroups.map(group => {
-        return {
-          name: this.$t(`${this.filtersFori18n}.GROUPS.${group.i18nGroup}`),
-          attributes: group.attributes.map(attribute => {
-            return {
-              key: attribute.key,
-              name: this.$t(
-                `${this.filtersFori18n}.ATTRIBUTES.${attribute.i18nKey}`
-              ),
-            };
-          }),
-        };
-      });
-      const customAttributeTypes = allCustomAttributes.map(attr => {
-        return {
-          attributeKey: attr.attribute_key,
-          attributeI18nKey: `CUSTOM_ATTRIBUTE_${attr.attribute_display_type.toUpperCase()}`,
-          inputType: this.customAttributeInputType(attr.attribute_display_type),
-          filterOperators: this.getOperatorTypes(attr.attribute_display_type),
-          attributeModel: 'custom_attributes',
-        };
-      });
-      this.filterTypes = [...this.filterTypes, ...customAttributeTypes];
-      this.filterGroups = [...allFilterGroups, customAttributesFormatted];
-    },
-
-    initializeExistingFilterToModal() {
-      this.initializeStatusAndAssigneeFilterToModal();
-      this.initializeInboxTeamAndLabelFilterToModal();
-    },
-    initializeStatusAndAssigneeFilterToModal() {
-      if (this.activeStatus !== '') {
-        this.appliedFilter.push({
-          attribute_key: 'status',
-          attribute_model: 'standard',
-          filter_operator: 'equal_to',
-          values: [
-            {
-              id: this.activeStatus,
-              name: this.$t(
-                `CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${this.activeStatus}.TEXT`
-              ),
-            },
-          ],
-          query_operator: 'and',
-          custom_attribute_type: '',
-        });
-      }
-      if (this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE.ME) {
-        this.appliedFilter.push({
-          attribute_key: 'assignee_id',
-          filter_operator: 'equal_to',
-          values: this.currentUserDetails,
-          query_operator: 'and',
-          custom_attribute_type: '',
-        });
-      }
-    },
-    initializeInboxTeamAndLabelFilterToModal() {
-      if (this.conversationInbox) {
-        this.appliedFilter.push({
-          attribute_key: 'inbox_id',
-          attribute_model: 'standard',
-          filter_operator: 'equal_to',
-          values: [
-            {
-              id: this.conversationInbox,
-              name: this.inbox.name,
-            },
-          ],
-          query_operator: 'and',
-          custom_attribute_type: '',
-        });
-      }
-      if (this.teamId) {
-        this.appliedFilter.push({
-          attribute_key: 'team_id',
-          attribute_model: 'standard',
-          filter_operator: 'equal_to',
-          values: this.activeTeam,
-          query_operator: 'and',
-          custom_attribute_type: '',
-        });
-      }
-      if (this.label) {
-        this.appliedFilter.push({
-          attribute_key: 'labels',
-          attribute_model: 'standard',
-          filter_operator: 'equal_to',
-          values: [
-            {
-              id: this.label,
-              name: this.label,
-            },
-          ],
-          query_operator: 'and',
-          custom_attribute_type: '',
-        });
-      }
-    },
-  },
-};

app/javascript/shared/mixins/inboxMixin.js

@@ -1,141 +0,0 @@
-export const INBOX_TYPES = {
-  WEB: 'Channel::WebWidget',
-  FB: 'Channel::FacebookPage',
-  TWITTER: 'Channel::TwitterProfile',
-  TWILIO: 'Channel::TwilioSms',
-  WHATSAPP: 'Channel::Whatsapp',
-  API: 'Channel::Api',
-  EMAIL: 'Channel::Email',
-  TELEGRAM: 'Channel::Telegram',
-  LINE: 'Channel::Line',
-  SMS: 'Channel::Sms',
-};
-
-export const INBOX_FEATURES = {
-  REPLY_TO: 'replyTo',
-  REPLY_TO_OUTGOING: 'replyToOutgoing',
-};
-
-// This is a single source of truth for inbox features
-// This is used to check if a feature is available for a particular inbox or not
-export const INBOX_FEATURE_MAP = {
-  [INBOX_FEATURES.REPLY_TO]: [
-    INBOX_TYPES.FB,
-    INBOX_TYPES.WEB,
-    INBOX_TYPES.TWITTER,
-    INBOX_TYPES.WHATSAPP,
-    INBOX_TYPES.TELEGRAM,
-    INBOX_TYPES.API,
-  ],
-  [INBOX_FEATURES.REPLY_TO_OUTGOING]: [
-    INBOX_TYPES.WEB,
-    INBOX_TYPES.TWITTER,
-    INBOX_TYPES.WHATSAPP,
-    INBOX_TYPES.TELEGRAM,
-    INBOX_TYPES.API,
-  ],
-};
-
-export default {
-  computed: {
-    channelType() {
-      return this.inbox.channel_type;
-    },
-    whatsAppAPIProvider() {
-      return this.inbox.provider || '';
-    },
-    isAMicrosoftInbox() {
-      return this.isAnEmailChannel && this.inbox.provider === 'microsoft';
-    },
-    isAGoogleInbox() {
-      return this.isAnEmailChannel && this.inbox.provider === 'google';
-    },
-    isAPIInbox() {
-      return this.channelType === INBOX_TYPES.API;
-    },
-    isATwitterInbox() {
-      return this.channelType === INBOX_TYPES.TWITTER;
-    },
-    isAFacebookInbox() {
-      return this.channelType === INBOX_TYPES.FB;
-    },
-    isAWebWidgetInbox() {
-      return this.channelType === INBOX_TYPES.WEB;
-    },
-    isATwilioChannel() {
-      return this.channelType === INBOX_TYPES.TWILIO;
-    },
-    isALineChannel() {
-      return this.channelType === INBOX_TYPES.LINE;
-    },
-    isAnEmailChannel() {
-      return this.channelType === INBOX_TYPES.EMAIL;
-    },
-    isATelegramChannel() {
-      return this.channelType === INBOX_TYPES.TELEGRAM;
-    },
-    isATwilioSMSChannel() {
-      const { medium: medium = '' } = this.inbox;
-      return this.isATwilioChannel && medium === 'sms';
-    },
-    isASmsInbox() {
-      return this.channelType === INBOX_TYPES.SMS || this.isATwilioSMSChannel;
-    },
-    isATwilioWhatsAppChannel() {
-      const { medium: medium = '' } = this.inbox;
-      return this.isATwilioChannel && medium === 'whatsapp';
-    },
-    isAWhatsAppCloudChannel() {
-      return (
-        this.channelType === INBOX_TYPES.WHATSAPP &&
-        this.whatsAppAPIProvider === 'whatsapp_cloud'
-      );
-    },
-    is360DialogWhatsAppChannel() {
-      return (
-        this.channelType === INBOX_TYPES.WHATSAPP &&
-        this.whatsAppAPIProvider === 'default'
-      );
-    },
-    chatAdditionalAttributes() {
-      const { additional_attributes: additionalAttributes } = this.chat || {};
-      return additionalAttributes || {};
-    },
-    isTwitterInboxTweet() {
-      return this.chatAdditionalAttributes.type === 'tweet';
-    },
-    twilioBadge() {
-      return `${this.isATwilioSMSChannel ? 'sms' : 'whatsapp'}`;
-    },
-    twitterBadge() {
-      return `${this.isTwitterInboxTweet ? 'twitter-tweet' : 'twitter-dm'}`;
-    },
-    facebookBadge() {
-      return this.chatAdditionalAttributes.type || 'facebook';
-    },
-    inboxBadge() {
-      let badgeKey = '';
-      if (this.isATwitterInbox) {
-        badgeKey = this.twitterBadge;
-      } else if (this.isAFacebookInbox) {
-        badgeKey = this.facebookBadge;
-      } else if (this.isATwilioChannel) {
-        badgeKey = this.twilioBadge;
-      } else if (this.isAWhatsAppChannel) {
-        badgeKey = 'whatsapp';
-      }
-      return badgeKey || this.channelType;
-    },
-    isAWhatsAppChannel() {
-      return (
-        this.channelType === INBOX_TYPES.WHATSAPP ||
-        this.isATwilioWhatsAppChannel
-      );
-    },
-  },
-  methods: {
-    inboxHasFeature(feature) {
-      return INBOX_FEATURE_MAP[feature]?.includes(this.channelType) ?? false;
-    },
-  },
-};