From 6577b40f905b377abaae28677d5ab2f98cda3e53 Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <fayazara@gmail.com>
Date: Fri, 23 Aug 2024 15:07:27 +0530
Subject: [PATCH] chore: Replace inboxMixin with useInbox composable

---
 .../widgets/WootWriter/ReplyBottomPanel.vue   |  26 ++-
 .../widgets/conversation/ConversationCard.vue |  17 +-
 .../conversation/ConversationHeader.vue       |  12 +-
 .../widgets/conversation/MessagesView.vue     |  26 ++-
 .../widgets/conversation/ReplyBox.vue         |  48 ++++-
 .../widgets/conversation/bubble/Actions.vue   |  32 +++-
 .../conversation/bubble/Integration.vue       |  15 +-
 app/javascript/dashboard/helper/inbox.js      |   2 +-
 .../conversation/contact/ConversationForm.vue |  15 +-
 .../dashboard/settings/inbox/Settings.vue     |  39 +++-
 .../inbox/components/WeeklyAvailability.vue   |  13 +-
 .../inbox/settingsPage/ConfigurationPage.vue  |  23 ++-
 .../dashboard/store/modules/inboxes.js        |   2 +-
 .../shared/composables/specs/useInbox.spec.js |   0
 app/javascript/shared/composables/useInbox.js | 174 ++++++++++++++++++
 15 files changed, 378 insertions(+), 66 deletions(-)
 create mode 100644 app/javascript/shared/composables/specs/useInbox.spec.js
 create mode 100644 app/javascript/shared/composables/useInbox.js

diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index e4ab0b41d..bc62aec26 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -4,7 +4,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,
@@ -19,7 +18,6 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'ReplyBottomPanel',
   components: { FileUpload, VideoCallButton, AIAssistanceButton },
-  mixins: [inboxMixin],
   props: {
     mode: {
       type: String,
@@ -37,13 +35,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,
@@ -112,6 +103,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 } =
@@ -217,7 +224,6 @@ export default {
       return !this.isOnPrivateNote;
     },
     sendWithSignature() {
-      // channelType is sourced from inboxMixin
       return this.fetchSignatureFlagFromUISettings(this.channelType);
     },
     signatureToggleTooltip() {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 0685ebc53..cfca38e3b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/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 &&
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 428e5549f..98bd78248 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -4,7 +4,7 @@ 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';
@@ -24,7 +24,7 @@ export default {
     SLACardLabel,
     Linear,
   },
-  mixins: [inboxMixin, agentMixin],
+  mixins: [agentMixin],
   props: {
     chat: {
       type: Object,
@@ -45,7 +45,7 @@ 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'),
@@ -55,6 +55,8 @@ export default {
 
     return {
       conversationHeaderActionsRef,
+      inbox,
+      inboxBadge,
     };
   },
   computed: {
@@ -110,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;
     },
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 44c58ac9d..8512b5f70 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -14,7 +14,8 @@ 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
@@ -40,7 +41,7 @@ export default {
     Banner,
     ConversationLabelSuggestion,
   },
-  mixins: [inboxMixin, aiMixin],
+  mixins: [aiMixin],
   props: {
     isContactPanelOpen: {
       type: Boolean,
@@ -52,6 +53,16 @@ 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();
@@ -78,6 +89,14 @@ export default {
       isPopOutReplyBox,
       closePopOutReplyBox,
       showPopOutReplyBox,
+      inbox,
+      isAWhatsAppChannel,
+      isAPIInbox,
+      is360DialogWhatsAppChannel,
+      isAWebWidgetInbox,
+      isAFacebookInbox,
+      isAnEmailChannel,
+      inboxHasFeature,
     };
   },
   data() {
@@ -112,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'
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 1a901d449..d542b3f54 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/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"
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index f3ed9ac51..c608fa8d6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/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;
     },
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
index b31153f1b..99288a74b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
+++ b/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>
diff --git a/app/javascript/dashboard/helper/inbox.js b/app/javascript/dashboard/helper/inbox.js
index 71c615c4b..e9543248b 100644
--- a/app/javascript/dashboard/helper/inbox.js
+++ b/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) {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index 21ed74e6a..553d14fc5 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/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 {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 09ae9add9..ab84c2b15 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/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 {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
index 43cc5bedf..929767ea0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+++ b/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,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
index 170902ec0..c35c3d47c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/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 {
diff --git a/app/javascript/dashboard/store/modules/inboxes.js b/app/javascript/dashboard/store/modules/inboxes.js
index e3f2922b6..f438cacb3 100644
--- a/app/javascript/dashboard/store/modules/inboxes.js
+++ b/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';
diff --git a/app/javascript/shared/composables/specs/useInbox.spec.js b/app/javascript/shared/composables/specs/useInbox.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/javascript/shared/composables/useInbox.js b/app/javascript/shared/composables/useInbox.js
new file mode 100644
index 000000000..f0307740f
--- /dev/null
+++ b/app/javascript/shared/composables/useInbox.js
@@ -0,0 +1,174 @@
+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,
+  ],
+};
+
+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,
+  };
+}