chore: Replace inboxMixin with useInbox composable

2024-08-23 15:07:27 +05:30
parent 8473e72a7e
commit 6577b40f90
15 changed files with 378 additions and 66 deletions
@@ -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() {
@@ -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 &&
@@ -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;
    },
@@ -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'
@@ -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"
@@ -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;
    },
@@ -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>