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/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/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/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/ReplyBox.vue

@@ -17,6 +17,7 @@ import Banner from 'dashboard/components/ui/Banner.vue';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import WootAudioRecorder from 'dashboard/components/widgets/WootWriter/AudioRecorder.vue';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { AUDIO_FORMATS } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
@@ -26,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';
@@ -60,7 +61,7 @@ export default {
     MessageSignatureMissingAlert,
     ArticleSearchPopover,
   },
-  mixins: [inboxMixin, fileUploadMixin, keyboardEventListenerMixins],
+  mixins: [messageFormatterMixin, fileUploadMixin, keyboardEventListenerMixins],
   props: {
     popoutReplyBox: {
       type: Boolean,
@@ -68,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,
@@ -80,6 +97,20 @@ export default {
       updateUISettings,
       isEditorHotKeyEnabled,
       fetchSignatureFlagFromUISettings,
+      is360DialogWhatsAppChannel,
+      isAPIInbox,
+      isAWhatsAppChannel,
+      isATwitterInbox,
+      isAFacebookInbox,
+      isASmsInbox,
+      isAWebWidgetInbox,
+      isAnEmailChannel,
+      isATelegramChannel,
+      isALineChannel,
+      channelType,
+      isAWhatsAppCloudChannel,
+      isATwilioWhatsAppChannel,
+      inbox,
     };
   },
   data() {
@@ -189,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')
@@ -1202,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/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/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/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/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/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/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/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/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;
-    },
-  },
-};

app/javascript/shared/mixins/specs/inboxMixin.spec.js

@@ -1,286 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import inboxMixin from '../inboxMixin';
-
-function getComponentConfigForInbox(channelType, additionalConfig = {}) {
-  return {
-    render() {},
-    mixins: [inboxMixin],
-    data() {
-      return {
-        inbox: {
-          channel_type: channelType,
-          ...additionalConfig,
-        },
-      };
-    },
-  };
-}
-
-function getComponentConfigForChat(chat) {
-  return {
-    render() {},
-    mixins: [inboxMixin],
-    data() {
-      return {
-        chat,
-      };
-    },
-  };
-}
-
-describe('inboxMixin', () => {
-  it('returns the correct channel type', () => {
-    const Component = getComponentConfigForInbox('Channel::WebWidget');
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.channelType).toBe('Channel::WebWidget');
-  });
-
-  it('isAPIInbox returns true if channel type is API', () => {
-    const Component = getComponentConfigForInbox('Channel::Api');
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isAPIInbox).toBe(true);
-  });
-
-  it('isATwitterInbox returns true if channel type is twitter', () => {
-    const Component = getComponentConfigForInbox('Channel::TwitterProfile');
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isATwitterInbox).toBe(true);
-  });
-
-  it('isAFacebookInbox returns true if channel type is Facebook', () => {
-    const Component = getComponentConfigForInbox('Channel::FacebookPage');
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isAFacebookInbox).toBe(true);
-  });
-
-  it('isAWebWidgetInbox returns true if channel type is Facebook', () => {
-    const Component = getComponentConfigForInbox('Channel::WebWidget');
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isAWebWidgetInbox).toBe(true);
-  });
-
-  it('isASmsInbox returns true if channel type is sms', () => {
-    const Component = getComponentConfigForInbox('Channel::Sms');
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isASmsInbox).toBe(true);
-  });
-
-  it('isASmsInbox returns true if channel type is twilio sms', () => {
-    const Component = getComponentConfigForInbox('Channel::TwilioSms', {
-      medium: 'sms',
-    });
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isASmsInbox).toBe(true);
-  });
-
-  it('isALineChannel returns true if channel type is Line', () => {
-    const Component = getComponentConfigForInbox('Channel::Line');
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isALineChannel).toBe(true);
-  });
-
-  it('isATelegramChannel returns true if channel type is Telegram', () => {
-    const Component = getComponentConfigForInbox('Channel::Telegram');
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isATelegramChannel).toBe(true);
-  });
-
-  it('isATwilioChannel returns true if channel type is Twilio', () => {
-    const Component = getComponentConfigForInbox('Channel::TwilioSms');
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isATwilioChannel).toBe(true);
-  });
-
-  describe('isATwilioSMSChannel', () => {
-    it('returns true if channel type is Twilio and medium is SMS', () => {
-      const Component = getComponentConfigForInbox('Channel::TwilioSms', {
-        medium: 'sms',
-      });
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.isATwilioSMSChannel).toBe(true);
-    });
-
-    it('returns false if channel type is Twilio but medium is not SMS', () => {
-      const Component = getComponentConfigForInbox('Channel::TwilioSms', {
-        medium: 'whatsapp',
-      });
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.isATwilioSMSChannel).toBe(false);
-    });
-
-    it('returns false if channel type is not Twilio but medium is SMS', () => {
-      const Component = getComponentConfigForInbox('Channel::NotTwilio', {
-        medium: 'sms',
-      });
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.isATwilioSMSChannel).toBe(false);
-    });
-
-    it('returns false if neither channel type is Twilio nor medium is SMS', () => {
-      const Component = getComponentConfigForInbox('Channel::NotTwilio', {
-        medium: 'not_sms',
-      });
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.isATwilioSMSChannel).toBe(false);
-    });
-
-    it('returns false if channel type is Twilio but medium is empty', () => {
-      const Component = getComponentConfigForInbox('Channel::TwilioSms', {
-        medium: undefined,
-      });
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.isATwilioSMSChannel).toBe(false);
-    });
-  });
-
-  it('isAnEmailChannel returns true if channel type is email', () => {
-    const Component = getComponentConfigForInbox('Channel::Email');
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isAnEmailChannel).toBe(true);
-  });
-
-  it('isTwitterInboxTweet returns true if Twitter channel type is tweet', () => {
-    const Component = getComponentConfigForChat({
-      channel_type: 'Channel::TwitterProfile',
-      additional_attributes: {
-        type: 'tweet',
-      },
-    });
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isTwitterInboxTweet).toBe(true);
-  });
-
-  it('twilioBadge returns string sms if channel type is Twilio and medium is sms', () => {
-    const Component = getComponentConfigForInbox('Channel::TwilioSms', {
-      medium: 'sms',
-    });
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isATwilioSMSChannel).toBe(true);
-    expect(wrapper.vm.twilioBadge).toBe('sms');
-  });
-
-  it('twitterBadge returns string twitter-tweet if Twitter channel type is tweet', () => {
-    const Component = getComponentConfigForChat({
-      id: 1,
-      additional_attributes: {
-        type: 'tweet',
-      },
-    });
-
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isTwitterInboxTweet).toBe(true);
-    expect(wrapper.vm.twitterBadge).toBe('twitter-tweet');
-  });
-
-  describe('Badges', () => {
-    it('inboxBadge returns string Channel::Telegram if isATwilioChannel and isATwitterInbox is false', () => {
-      const Component = getComponentConfigForInbox('Channel::Telegram');
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.isATwilioChannel).toBe(false);
-      expect(wrapper.vm.isATwitterInbox).toBe(false);
-      expect(wrapper.vm.channelType).toBe('Channel::Telegram');
-    });
-
-    it('inboxBadge returns correct badge for WhatsApp channel', () => {
-      const Component = getComponentConfigForInbox('Channel::Whatsapp');
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.inboxBadge).toBe('whatsapp');
-    });
-
-    it('inboxBadge returns the twitterBadge when isATwitterInbox is true', () => {
-      const Component = getComponentConfigForInbox('Channel::TwitterProfile');
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.inboxBadge).toBe('twitter-dm');
-    });
-
-    it('inboxBadge returns the facebookBadge when isAFacebookInbox is true', () => {
-      const Component = getComponentConfigForInbox('Channel::FacebookPage');
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.inboxBadge).toBe('facebook');
-    });
-
-    it('inboxBadge returns the twilioBadge when isATwilioChannel is true', () => {
-      const Component = getComponentConfigForInbox('Channel::TwilioSms', {
-        medium: 'sms',
-      });
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.inboxBadge).toBe('sms');
-    });
-
-    it('inboxBadge returns "whatsapp" when isAWhatsAppChannel is true', () => {
-      const Component = getComponentConfigForInbox('Channel::Whatsapp');
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.inboxBadge).toBe('whatsapp');
-    });
-
-    it('inboxBadge returns the channelType when no specific condition is true', () => {
-      const Component = getComponentConfigForInbox('Channel::Email');
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.inboxBadge).toBe('Channel::Email');
-    });
-  });
-
-  describe('#inboxHasFeature', () => {
-    it('detects the correct feature', () => {
-      const Component = getComponentConfigForInbox('Channel::Telegram');
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.inboxHasFeature('replyTo')).toBe(true);
-      expect(wrapper.vm.inboxHasFeature('feature-does-not-exist')).toBe(false);
-    });
-
-    it('returns false for feature not included', () => {
-      const Component = getComponentConfigForInbox('Channel::Sms');
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.inboxHasFeature('replyTo')).toBe(false);
-      expect(wrapper.vm.inboxHasFeature('feature-does-not-exist')).toBe(false);
-    });
-  });
-
-  describe('WhatsApp channel', () => {
-    it('returns correct whatsAppAPIProvider', () => {
-      const Component = getComponentConfigForInbox('Channel::Whatsapp', {
-        provider: 'whatsapp_cloud',
-      });
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.whatsAppAPIProvider).toBe('whatsapp_cloud');
-    });
-
-    it('returns empty whatsAppAPIProvider if nothing is present', () => {
-      const Component = getComponentConfigForInbox('Channel::Whatsapp', {
-        provider: undefined,
-      });
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.whatsAppAPIProvider).toBe('');
-    });
-
-    it('isAWhatsAppCloudChannel returns true if channel type is WhatsApp and provider is whatsapp_cloud', () => {
-      const Component = getComponentConfigForInbox('Channel::Whatsapp', {
-        provider: 'whatsapp_cloud',
-      });
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.isAWhatsAppCloudChannel).toBe(true);
-    });
-
-    it('is360DialogWhatsAppChannel returns true if channel type is WhatsApp and provider is default', () => {
-      const Component = getComponentConfigForInbox('Channel::Whatsapp', {
-        provider: 'default',
-      });
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.is360DialogWhatsAppChannel).toBe(true);
-    });
-
-    it('isAWhatsAppChannel returns true if channel type is WhatsApp', () => {
-      const Component = getComponentConfigForInbox('Channel::Whatsapp');
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(true);
-    });
-
-    it('isAWhatsAppChannel returns true if channel type is Twilio and medium is WhatsApp', () => {
-      const Component = getComponentConfigForInbox('Channel::TwilioSms', {
-        medium: 'whatsapp',
-      });
-      const wrapper = shallowMount(Component);
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(true);
-    });
-  });
-});

app/javascript/widget/App.vue

@@ -4,7 +4,7 @@ import { setHeader } from 'widget/helpers/axios';
 import addHours from 'date-fns/addHours';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import configMixin from './mixins/configMixin';
-import { useAvailability } from 'widget/composables/useAvailability';
+import availabilityMixin from 'widget/mixins/availability';
 import { getLocale } from './helpers/urlParamsHelper';
 import { isEmptyObject } from 'widget/helpers/utils';
 import Spinner from 'shared/components/Spinner.vue';
@@ -27,17 +27,13 @@ export default {
   components: {
     Spinner,
   },
-  mixins: [configMixin, routerMixin, darkModeMixin],
+  mixins: [availabilityMixin, configMixin, routerMixin, darkModeMixin],
   data() {
     return {
       isMobile: false,
       campaignsSnoozedTill: undefined,
     };
   },
-  setup() {
-    const { isInBusinessHours } = useAvailability();
-    return { isInBusinessHours };
-  },
   computed: {
     ...mapGetters({
       activeCampaign: 'campaign/getActiveCampaign',

app/javascript/widget/components/ChatHeader.vue

@@ -1,5 +1,5 @@
 <script>
-import { useAvailability } from 'widget/composables/useAvailability';
+import availabilityMixin from 'widget/mixins/availability';
 import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import HeaderActions from './HeaderActions.vue';
@@ -12,7 +12,7 @@ export default {
     FluentIcon,
     HeaderActions,
   },
-  mixins: [nextAvailabilityTime, routerMixin, darkMixin],
+  mixins: [nextAvailabilityTime, availabilityMixin, routerMixin, darkMixin],
   props: {
     avatarUrl: {
       type: String,
@@ -35,11 +35,16 @@ export default {
       default: () => {},
     },
   },
-  setup(props) {
-    const { isOnline, replyWaitMessage } = useAvailability(
-      props.availableAgents
-    );
-    return { isOnline, replyWaitMessage };
+  computed: {
+    isOnline() {
+      const { workingHoursEnabled } = this.channelConfig;
+      const anyAgentOnline = this.availableAgents.length > 0;
+
+      if (workingHoursEnabled) {
+        return this.isInBetweenTheWorkingHours;
+      }
+      return anyAgentOnline;
+    },
   },
   methods: {
     onBackButtonClick() {

app/javascript/widget/components/TeamAvailability.vue

@@ -1,9 +1,10 @@
 <script>
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
+import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import AvailableAgents from 'widget/components/AvailableAgents.vue';
 import configMixin from 'widget/mixins/configMixin';
-import { useAvailability } from 'widget/composables/useAvailability';
+import availabilityMixin from 'widget/mixins/availability';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import { IFrameHelper } from 'widget/helpers/utils';
 import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
@@ -14,7 +15,7 @@ export default {
     AvailableAgents,
     FluentIcon,
   },
-  mixins: [configMixin],
+  mixins: [configMixin, nextAvailabilityTime, availabilityMixin],
   props: {
     availableAgents: {
       type: Array,
@@ -25,12 +26,7 @@ export default {
       default: false,
     },
   },
-  setup(props) {
-    const { isOnline, replyWaitMessage } = useAvailability(
-      props.availableAgents
-    );
-    return { isOnline, replyWaitMessage };
-  },
+
   computed: {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
@@ -38,6 +34,15 @@ export default {
     textColor() {
       return getContrastingTextColor(this.widgetColor);
     },
+    isOnline() {
+      const { workingHoursEnabled } = this.channelConfig;
+      const anyAgentOnline = this.availableAgents.length > 0;
+
+      if (workingHoursEnabled) {
+        return this.isInBetweenTheWorkingHours;
+      }
+      return anyAgentOnline;
+    },
   },
   methods: {
     startConversation() {

app/javascript/widget/composables/useAvailability.js

@@ -1,131 +0,0 @@
-import { computed } from 'vue';
-import { utcToZonedTime } from 'date-fns-tz';
-import { isTimeAfter } from 'shared/helpers/DateHelper';
-import { useI18n } from 'dashboard/composables/useI18n';
-import { useNextAvailability } from './useNextAvailability';
-/**
- * Composable for handling availability-related computations.
- * @param {Object} t - Vue i18n instance for translations.
- * @returns {Object} An object containing computed properties and methods for availability management.
- */
-export function useAvailability(availableAgents) {
-  const { timeLeftToBackInOnline } = useNextAvailability();
-  const { t } = useI18n();
-  const channelConfig = computed(() => window.chatwootWebChannel);
-  const replyTime = computed(() => window.chatwootWebChannel.replyTime);
-
-  const replyTimeStatus = computed(() => {
-    switch (replyTime.value) {
-      case 'in_a_few_minutes':
-        return t('REPLY_TIME.IN_A_FEW_MINUTES');
-      case 'in_a_few_hours':
-        return t('REPLY_TIME.IN_A_FEW_HOURS');
-      case 'in_a_day':
-        return t('REPLY_TIME.IN_A_DAY');
-      default:
-        return t('REPLY_TIME.IN_A_FEW_HOURS');
-    }
-  });
-
-  const replyWaitMessage = computed(() => {
-    const { workingHoursEnabled } = channelConfig.value;
-    if (workingHoursEnabled) {
-      return isOnline.value
-        ? replyTimeStatus.value
-        : `${t('REPLY_TIME.BACK_IN')} ${timeLeftToBackInOnline.value}`;
-    }
-    return isOnline.value
-      ? replyTimeStatus.value
-      : t('TEAM_AVAILABILITY.OFFLINE');
-  });
-
-  const outOfOfficeMessage = computed(
-    () => channelConfig.value.outOfOfficeMessage
-  );
-
-  const currentDayAvailability = computed(() => {
-    const { utcOffset } = channelConfig.value;
-    const dayOfTheWeek = getDateWithOffset(utcOffset).getDay();
-    const [workingHourConfig = {}] = channelConfig.value.workingHours.filter(
-      workingHour => workingHour.day_of_week === dayOfTheWeek
-    );
-    return {
-      closedAllDay: workingHourConfig.closed_all_day,
-      openHour: workingHourConfig.open_hour,
-      openMinute: workingHourConfig.open_minutes,
-      closeHour: workingHourConfig.close_hour,
-      closeMinute: workingHourConfig.close_minutes,
-      openAllDay: workingHourConfig.open_all_day,
-    };
-  });
-
-  const isInBetweenTheWorkingHours = computed(() => {
-    const {
-      openHour,
-      openMinute,
-      closeHour,
-      closeMinute,
-      closedAllDay,
-      openAllDay,
-    } = currentDayAvailability.value;
-
-    if (openAllDay) {
-      return true;
-    }
-
-    if (closedAllDay) {
-      return false;
-    }
-
-    const { utcOffset } = channelConfig.value;
-    const today = getDateWithOffset(utcOffset);
-    const currentHours = today.getHours();
-    const currentMinutes = today.getMinutes();
-    const isAfterStartTime = isTimeAfter(
-      currentHours,
-      currentMinutes,
-      openHour,
-      openMinute
-    );
-    const isBeforeEndTime = isTimeAfter(
-      closeHour,
-      closeMinute,
-      currentHours,
-      currentMinutes
-    );
-    return isAfterStartTime && isBeforeEndTime;
-  });
-
-  const isInBusinessHours = computed(() => {
-    const { workingHoursEnabled } = channelConfig.value;
-    return workingHoursEnabled ? isInBetweenTheWorkingHours.value : true;
-  });
-
-  const getDateWithOffset = utcOffset => {
-    return utcToZonedTime(new Date().toISOString(), utcOffset);
-  };
-
-  const isOnline = computed(() => {
-    if (availableAgents) {
-      const { workingHoursEnabled } = channelConfig.value;
-      const anyAgentOnline = availableAgents.length > 0;
-      if (workingHoursEnabled) {
-        return isInBetweenTheWorkingHours.value || anyAgentOnline;
-      }
-    }
-    return false;
-  });
-
-  return {
-    channelConfig,
-    replyTime,
-    replyTimeStatus,
-    replyWaitMessage,
-    outOfOfficeMessage,
-    currentDayAvailability,
-    isInBetweenTheWorkingHours,
-    isInBusinessHours,
-    isOnline,
-    getDateWithOffset,
-  };
-}

app/javascript/widget/composables/useNextAvailability.js

@@ -1,281 +0,0 @@
-import { ref, computed } from 'vue';
-import { useI18n } from 'dashboard/composables/useI18n';
-import {
-  timeSlotParse,
-  defaultTimeSlot,
-} from 'dashboard/routes/dashboard/settings/inbox/helpers/businessHour.js';
-import { utcToZonedTime } from 'date-fns-tz';
-import { generateRelativeTime } from 'shared/helpers/DateHelper';
-
-const MINUTE_ROUNDING_FACTOR = 5;
-
-/**
- * Composable for handling next availability calculations
- * @returns {Object} An object containing computed properties and methods for next availability management
- */
-export function useNextAvailability() {
-  const { t } = useI18n();
-  const dayNames = t('DAY_NAMES');
-  const timeSlots = ref([...defaultTimeSlot]);
-  const timeSlot = ref({});
-
-  const channelConfig = computed(() => window.chatwootWebChannel);
-  const workingHours = computed(() => channelConfig.value.workingHours);
-  const newDateWithTimeZone = computed(() =>
-    utcToZonedTime(new Date(), timeZoneValue.value)
-  );
-  const presentHour = computed(() => newDateWithTimeZone.value.getHours());
-  const presentMinute = computed(() => newDateWithTimeZone.value.getMinutes());
-  const currentDay = computed(() => {
-    const date = newDateWithTimeZone.value;
-    const day = date.getDay();
-    const currentDay = Object.keys(dayNames).find(
-      key => dayNames[key] === dayNames[day]
-    );
-    return Number(currentDay);
-  });
-  const timeZoneValue = computed(() => channelConfig.value.timezone);
-  const languageCode = computed(() => window.chatwootWebChannel.locale);
-
-  const currentDayWorkingHours = computed(() =>
-    workingHours.value.find(slot => slot.day_of_week === currentDay.value)
-  );
-
-  const nextDayWorkingHours = computed(() => {
-    let nextDay = getNextDay(currentDay.value);
-    let nextWorkingHour = getNextWorkingHour(nextDay);
-
-    while (!nextWorkingHour) {
-      nextDay = getNextDay(nextDay);
-      nextWorkingHour = getNextWorkingHour(nextDay);
-    }
-    return nextWorkingHour;
-  });
-
-  const currentDayTimings = computed(() => {
-    const {
-      open_hour: openHour,
-      open_minutes: openMinute,
-      close_hour: closeHour,
-    } = currentDayWorkingHours.value ?? {};
-    return {
-      openHour,
-      openMinute,
-      closeHour,
-    };
-  });
-
-  const nextDayTimings = computed(() => {
-    const { open_hour: openHour, open_minutes: openMinute } =
-      nextDayWorkingHours.value ?? {};
-    return {
-      openHour,
-      openMinute,
-    };
-  });
-
-  const dayDiff = computed(() => {
-    const nextDay = nextDayWorkingHours.value.day_of_week;
-    const totalDays = 6;
-    return nextDay > currentDay.value
-      ? nextDay - currentDay.value - 1
-      : totalDays - currentDay.value + nextDay;
-  });
-
-  const dayNameOfNextWorkingDay = computed(
-    () => dayNames[nextDayWorkingHours.value.day_of_week]
-  );
-
-  const hoursAndMinutesBackInOnline = computed(() => {
-    if (presentHour.value >= currentDayTimings.value.closeHour) {
-      return getHoursAndMinutesUntilNextDayOpen(
-        nextDayWorkingHours.value.open_all_day
-          ? 0
-          : nextDayTimings.value.openHour,
-        nextDayTimings.value.openMinute,
-        currentDayTimings.value.closeHour
-      );
-    }
-    return getHoursAndMinutesUntilNextDayOpen(
-      currentDayTimings.value.openHour,
-      currentDayTimings.value.openMinute,
-      currentDayTimings.value.closeHour
-    );
-  });
-
-  const exactTimeInAmPm = computed(
-    () =>
-      `${
-        timeSlot.value.day === currentDay.value
-          ? `at ${timeSlot.value.from}`
-          : ''
-      }`
-  );
-
-  const hoursAndMinutesLeft = computed(() => {
-    const { hoursLeft, minutesLeft } = hoursAndMinutesBackInOnline.value;
-
-    const timeLeftChars = [];
-
-    if (hoursLeft > 0) {
-      const roundedUpHoursLeft = minutesLeft > 0 ? hoursLeft + 1 : hoursLeft;
-      const hourRelative = generateRelativeTime(
-        roundedUpHoursLeft,
-        'hour',
-        languageCode.value
-      );
-      timeLeftChars.push(`${hourRelative}`);
-    }
-
-    if (minutesLeft > 0 && hoursLeft === 0) {
-      const roundedUpMinLeft =
-        Math.ceil(minutesLeft / MINUTE_ROUNDING_FACTOR) *
-        MINUTE_ROUNDING_FACTOR;
-      const minRelative = generateRelativeTime(
-        roundedUpMinLeft,
-        'minutes',
-        languageCode.value
-      );
-      timeLeftChars.push(`${minRelative}`);
-    }
-
-    return timeLeftChars.join(' ');
-  });
-
-  const hoursAndMinutesToBack = computed(() => {
-    const { hoursLeft, minutesLeft } = hoursAndMinutesBackInOnline.value;
-    if (hoursLeft >= 3) {
-      return exactTimeInAmPm.value;
-    }
-    if (hoursLeft > 0 || minutesLeft > 0) {
-      return hoursAndMinutesLeft.value;
-    }
-    return 'in some time';
-  });
-
-  const timeLeftToBackInOnline = computed(() => {
-    if (
-      hoursAndMinutesBackInOnline.value.hoursLeft >= 24 ||
-      (timeSlot.value.day !== currentDay.value && dayDiff.value === 0)
-    ) {
-      const hourRelative = generateRelativeTime(
-        dayDiff.value + 1,
-        'days',
-        languageCode.value
-      );
-      return `${hourRelative}`;
-    }
-    if (
-      dayDiff.value >= 1 &&
-      presentHour.value >= currentDayTimings.value.closeHour
-    ) {
-      return `on ${dayNameOfNextWorkingDay.value}`;
-    }
-    return hoursAndMinutesToBack.value;
-  });
-
-  /**
-   * Gets the next day of the week
-   * @param {number} day - Current day of the week
-   * @returns {number} Next day of the week
-   */
-  function getNextDay(day) {
-    return (day + 1) % 7;
-  }
-
-  /**
-   * Gets the next working hour for a given day
-   * @param {number} day - Day of the week
-   * @returns {Object|null} Working hour object for the next working day, or null if not found
-   */
-  function getNextWorkingHour(day) {
-    const workingHour = workingHours.value.find(
-      slot => slot.day_of_week === day
-    );
-    if (workingHour && !workingHour.closed_all_day) {
-      return workingHour;
-    }
-    return null;
-  }
-
-  /**
-   * Calculates hours and minutes until next day open
-   * @param {number} openHour - Opening hour
-   * @param {number} openMinutes - Opening minutes
-   * @param {number} closeHour - Closing hour
-   * @returns {Object} Object containing hours and minutes left
-   */
-  function getHoursAndMinutesUntilNextDayOpen(
-    openHour,
-    openMinutes,
-    closeHour
-  ) {
-    if (closeHour < openHour) {
-      openHour += 24;
-    }
-    let diffMinutes =
-      openHour * 60 +
-      openMinutes -
-      (presentHour.value * 60 + presentMinute.value);
-    diffMinutes = diffMinutes < 0 ? diffMinutes + 24 * 60 : diffMinutes;
-    const [hoursLeft, minutesLeft] = [
-      Math.floor(diffMinutes / 60),
-      diffMinutes % 60,
-    ];
-
-    return { hoursLeft, minutesLeft };
-  }
-
-  /**
-   * Sets the time slot
-   */
-  function setTimeSlot() {
-    const timeSlots = workingHours.value;
-
-    const currentSlot =
-      presentHour.value >= currentDayTimings.value.closeHour
-        ? nextDayWorkingHours.value
-        : currentDayWorkingHours.value;
-
-    const slots = timeSlotParse(timeSlots).length
-      ? timeSlotParse(timeSlots)
-      : defaultTimeSlot;
-    timeSlots.value = slots;
-
-    timeSlot.value = timeSlots.value.find(
-      slot => slot.day === currentSlot.day_of_week
-    );
-  }
-
-  // Call setTimeSlot initially
-  setTimeSlot();
-
-  return {
-    dayNames,
-    timeSlots,
-    timeSlot,
-    channelConfig,
-    workingHours,
-    newDateWithTimeZone,
-    presentHour,
-    presentMinute,
-    currentDay,
-    timeZoneValue,
-    languageCode,
-    currentDayWorkingHours,
-    nextDayWorkingHours,
-    currentDayTimings,
-    nextDayTimings,
-    dayDiff,
-    dayNameOfNextWorkingDay,
-    hoursAndMinutesBackInOnline,
-    exactTimeInAmPm,
-    hoursAndMinutesLeft,
-    hoursAndMinutesToBack,
-    timeLeftToBackInOnline,
-    getNextDay,
-    getNextWorkingHour,
-    getHoursAndMinutesUntilNextDayOpen,
-    setTimeSlot,
-  };
-}

app/javascript/widget/mixins/specs/useAvailabilityComposable.spec.js

@@ -1,104 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { ref } from 'vue';
-import { useAvailability } from '../../composables/useAvailability';
-
-vi.mock('dashboard/composables/useI18n', () => ({
-  useI18n: () => ({
-    t: key => key,
-  }),
-}));
-
-describe('useAvailability', () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-    global.chatwootWebChannel = {
-      workingHoursEnabled: true,
-      workingHours: [
-        {
-          day_of_week: 3,
-          closed_all_day: false,
-          open_hour: 8,
-          open_minutes: 30,
-          close_hour: 17,
-          close_minutes: 35,
-          open_all_day: false,
-        },
-        {
-          day_of_week: 4,
-          closed_all_day: false,
-          open_hour: 8,
-          open_minutes: 30,
-          close_hour: 17,
-          close_minutes: 30,
-          open_all_day: false,
-        },
-      ],
-      utcOffset: '-07:00',
-      replyTime: 'in_a_few_minutes',
-    };
-  });
-
-  it('returns correct replyTimeStatus', () => {
-    const availableAgents = ref([]);
-    const { replyTimeStatus } = useAvailability(availableAgents);
-    expect(replyTimeStatus.value).toBe('REPLY_TIME.IN_A_FEW_MINUTES');
-  });
-
-  it('returns correct isInBetweenTheWorkingHours when in working hours', () => {
-    vi.setSystemTime(new Date('Wed Apr 13 2022 10:00:00 GMT-0700'));
-    const availableAgents = ref([]);
-    const { isInBetweenTheWorkingHours } = useAvailability(availableAgents);
-    expect(isInBetweenTheWorkingHours.value).toBe(true);
-  });
-
-  it('returns correct isInBetweenTheWorkingHours when outside working hours', () => {
-    vi.setSystemTime(new Date('Wed Apr 13 2022 18:00:00 GMT-0700'));
-    const availableAgents = ref([]);
-    const { isInBetweenTheWorkingHours } = useAvailability(availableAgents);
-    expect(isInBetweenTheWorkingHours.value).toBe(false);
-  });
-
-  it('returns true for isInBetweenTheWorkingHours when open all day', () => {
-    global.chatwootWebChannel.workingHours = [
-      { day_of_week: 3, open_all_day: true },
-    ];
-    const availableAgents = ref([]);
-    const { isInBetweenTheWorkingHours } = useAvailability(availableAgents);
-    expect(isInBetweenTheWorkingHours.value).toBe(true);
-  });
-
-  it('returns false for isInBetweenTheWorkingHours when closed all day', () => {
-    global.chatwootWebChannel.workingHours = [
-      { day_of_week: 3, closed_all_day: true },
-    ];
-    const availableAgents = ref([]);
-    const { isInBetweenTheWorkingHours } = useAvailability(availableAgents);
-    expect(isInBetweenTheWorkingHours.value).toBe(false);
-  });
-
-  it('returns correct isOnline status when agents are available', () => {
-    const availableAgents = ref([{ id: 1 }]);
-    const { isOnline } = useAvailability(availableAgents);
-    expect(isOnline.value).toBe(true);
-  });
-
-  it('returns correct isOnline status when no agents are available and outside working hours', () => {
-    vi.setSystemTime(new Date('Wed Apr 13 2022 18:00:00 GMT-0700'));
-    const availableAgents = ref([]);
-    const { isOnline } = useAvailability(availableAgents);
-    expect(isOnline.value).toBe(false);
-  });
-
-  it('returns correct replyWaitMessage when online', () => {
-    const availableAgents = ref([{ id: 1 }]);
-    const { replyWaitMessage } = useAvailability(availableAgents);
-    expect(replyWaitMessage.value).toBe('REPLY_TIME.IN_A_FEW_MINUTES');
-  });
-
-  it('returns correct replyWaitMessage when offline', () => {
-    vi.setSystemTime(new Date('Wed Apr 13 2022 18:00:00 GMT-0700'));
-    const availableAgents = ref([]);
-    const { replyWaitMessage } = useAvailability(availableAgents);
-    expect(replyWaitMessage.value).toBe('REPLY_TIME.BACK_IN at 08:30 AM');
-  });
-});