chore: Replace inboxMixin with useInbox composable

This commit is contained in:
Fayaz Ahmed
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>
+1 -1
View File
@@ -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) {
@@ -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 {
@@ -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 {
@@ -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,
@@ -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 {
@@ -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';
@@ -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,
};
}