chore: Displayed WhatsApp API provider name in inbox settings (#5346)
This commit is contained in:
parent
9ddf4c205c
commit
a9d687565e
9 changed files with 63 additions and 31 deletions
|
@ -260,7 +260,7 @@ export default {
|
||||||
return this.showAudioRecorder && this.isRecordingAudio;
|
return this.showAudioRecorder && this.isRecordingAudio;
|
||||||
},
|
},
|
||||||
allowedFileTypes() {
|
allowedFileTypes() {
|
||||||
if (this.isATwilioWhatsappChannel) {
|
if (this.isATwilioWhatsAppChannel) {
|
||||||
return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
|
return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
|
||||||
}
|
}
|
||||||
return ALLOWED_FILE_TYPES;
|
return ALLOWED_FILE_TYPES;
|
||||||
|
|
|
@ -240,7 +240,7 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
replyWindowBannerMessage() {
|
replyWindowBannerMessage() {
|
||||||
if (this.isAWhatsappChannel) {
|
if (this.isAWhatsAppChannel) {
|
||||||
return this.$t('CONVERSATION.TWILIO_WHATSAPP_CAN_REPLY');
|
return this.$t('CONVERSATION.TWILIO_WHATSAPP_CAN_REPLY');
|
||||||
}
|
}
|
||||||
if (this.isAPIInbox) {
|
if (this.isAPIInbox) {
|
||||||
|
@ -256,7 +256,7 @@ export default {
|
||||||
return this.$t('CONVERSATION.CANNOT_REPLY');
|
return this.$t('CONVERSATION.CANNOT_REPLY');
|
||||||
},
|
},
|
||||||
replyWindowLink() {
|
replyWindowLink() {
|
||||||
if (this.isAWhatsappChannel) {
|
if (this.isAWhatsAppChannel) {
|
||||||
return REPLY_POLICY.FACEBOOK;
|
return REPLY_POLICY.FACEBOOK;
|
||||||
}
|
}
|
||||||
if (!this.isAPIInbox) {
|
if (!this.isAPIInbox) {
|
||||||
|
@ -265,7 +265,7 @@ export default {
|
||||||
return '';
|
return '';
|
||||||
},
|
},
|
||||||
replyWindowLinkText() {
|
replyWindowLinkText() {
|
||||||
if (this.isAWhatsappChannel) {
|
if (this.isAWhatsAppChannel) {
|
||||||
return this.$t('CONVERSATION.24_HOURS_WINDOW');
|
return this.$t('CONVERSATION.24_HOURS_WINDOW');
|
||||||
}
|
}
|
||||||
if (!this.isAPIInbox) {
|
if (!this.isAPIInbox) {
|
||||||
|
|
|
@ -277,7 +277,7 @@ export default {
|
||||||
return !!this.uiSettings.enter_to_send_enabled;
|
return !!this.uiSettings.enter_to_send_enabled;
|
||||||
},
|
},
|
||||||
isPrivate() {
|
isPrivate() {
|
||||||
if (this.currentChat.can_reply || this.isAWhatsappChannel) {
|
if (this.currentChat.can_reply || this.isAWhatsAppChannel) {
|
||||||
return this.isOnPrivateNote;
|
return this.isOnPrivateNote;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
|
@ -324,7 +324,7 @@ export default {
|
||||||
if (this.isAFacebookInbox) {
|
if (this.isAFacebookInbox) {
|
||||||
return MESSAGE_MAX_LENGTH.FACEBOOK;
|
return MESSAGE_MAX_LENGTH.FACEBOOK;
|
||||||
}
|
}
|
||||||
if (this.isAWhatsappChannel) {
|
if (this.isAWhatsAppChannel) {
|
||||||
return MESSAGE_MAX_LENGTH.TWILIO_WHATSAPP;
|
return MESSAGE_MAX_LENGTH.TWILIO_WHATSAPP;
|
||||||
}
|
}
|
||||||
if (this.isASmsInbox) {
|
if (this.isASmsInbox) {
|
||||||
|
@ -341,7 +341,7 @@ export default {
|
||||||
return (
|
return (
|
||||||
this.isAWebWidgetInbox ||
|
this.isAWebWidgetInbox ||
|
||||||
this.isAFacebookInbox ||
|
this.isAFacebookInbox ||
|
||||||
this.isAWhatsappChannel ||
|
this.isAWhatsAppChannel ||
|
||||||
this.isAPIInbox ||
|
this.isAPIInbox ||
|
||||||
this.isAnEmailChannel ||
|
this.isAnEmailChannel ||
|
||||||
this.isASmsInbox ||
|
this.isASmsInbox ||
|
||||||
|
@ -430,7 +430,7 @@ export default {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (canReply || this.isAWhatsappChannel) {
|
if (canReply || this.isAWhatsAppChannel) {
|
||||||
this.replyType = REPLY_EDITOR_MODES.REPLY;
|
this.replyType = REPLY_EDITOR_MODES.REPLY;
|
||||||
} else {
|
} else {
|
||||||
this.replyType = REPLY_EDITOR_MODES.NOTE;
|
this.replyType = REPLY_EDITOR_MODES.NOTE;
|
||||||
|
@ -586,7 +586,7 @@ export default {
|
||||||
setReplyMode(mode = REPLY_EDITOR_MODES.REPLY) {
|
setReplyMode(mode = REPLY_EDITOR_MODES.REPLY) {
|
||||||
const { can_reply: canReply } = this.currentChat;
|
const { can_reply: canReply } = this.currentChat;
|
||||||
|
|
||||||
if (canReply || this.isAWhatsappChannel) this.replyType = mode;
|
if (canReply || this.isAWhatsAppChannel) this.replyType = mode;
|
||||||
if (this.showRichContentEditor) {
|
if (this.showRichContentEditor) {
|
||||||
if (this.isRecordingAudio) {
|
if (this.isRecordingAudio) {
|
||||||
this.toggleAudioRecorder();
|
this.toggleAudioRecorder();
|
||||||
|
|
|
@ -168,7 +168,7 @@ export default {
|
||||||
return (
|
return (
|
||||||
this.isOutgoing &&
|
this.isOutgoing &&
|
||||||
this.sourceId &&
|
this.sourceId &&
|
||||||
(this.isAnEmailChannel || this.isAWhatsappChannel)
|
(this.isAnEmailChannel || this.isAWhatsAppChannel)
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -116,6 +116,11 @@
|
||||||
<woot-color-picker v-model="inbox.widget_color" />
|
<woot-color-picker v-model="inbox.widget_color" />
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
<label v-if="isAWhatsAppChannel" class="medium-9 columns settings-item">
|
||||||
|
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
|
||||||
|
<input v-model="whatsAppAPIProviderName" type="text" disabled />
|
||||||
|
</label>
|
||||||
|
|
||||||
<label class="medium-9 columns settings-item">
|
<label class="medium-9 columns settings-item">
|
||||||
{{
|
{{
|
||||||
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
|
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
|
||||||
|
@ -388,6 +393,18 @@ export default {
|
||||||
selectedTabKey() {
|
selectedTabKey() {
|
||||||
return this.tabs[this.selectedTabIndex]?.key;
|
return this.tabs[this.selectedTabIndex]?.key;
|
||||||
},
|
},
|
||||||
|
whatsAppAPIProviderName() {
|
||||||
|
if (this.isAWhatsAppCloudChannel) {
|
||||||
|
return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD');
|
||||||
|
}
|
||||||
|
if (this.is360DialogWhatsAppChannel) {
|
||||||
|
return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.360_DIALOG');
|
||||||
|
}
|
||||||
|
if (this.isATwilioWhatsAppChannel) {
|
||||||
|
return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO');
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
tabs() {
|
tabs() {
|
||||||
const visibleToAllChannelTabs = [
|
const visibleToAllChannelTabs = [
|
||||||
{
|
{
|
||||||
|
@ -427,7 +444,7 @@ export default {
|
||||||
this.isALineChannel ||
|
this.isALineChannel ||
|
||||||
this.isAPIInbox ||
|
this.isAPIInbox ||
|
||||||
this.isAnEmailChannel ||
|
this.isAnEmailChannel ||
|
||||||
this.isAWhatsappChannel
|
this.isAWhatsAppChannel
|
||||||
) {
|
) {
|
||||||
return [
|
return [
|
||||||
...visibleToAllChannelTabs,
|
...visibleToAllChannelTabs,
|
||||||
|
@ -447,11 +464,11 @@ export default {
|
||||||
return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
|
return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
|
||||||
},
|
},
|
||||||
inboxName() {
|
inboxName() {
|
||||||
if (this.isATwilioSMSChannel || this.isATwilioWhatsappChannel) {
|
if (this.isATwilioSMSChannel || this.isATwilioWhatsAppChannel) {
|
||||||
return `${this.inbox.name} (${this.inbox.messaging_service_sid ||
|
return `${this.inbox.name} (${this.inbox.messaging_service_sid ||
|
||||||
this.inbox.phone_number})`;
|
this.inbox.phone_number})`;
|
||||||
}
|
}
|
||||||
if (this.isAWhatsappChannel) {
|
if (this.isAWhatsAppChannel) {
|
||||||
return `${this.inbox.name} (${this.inbox.phone_number})`;
|
return `${this.inbox.name} (${this.inbox.phone_number})`;
|
||||||
}
|
}
|
||||||
if (this.isAnEmailChannel) {
|
if (this.isAnEmailChannel) {
|
||||||
|
|
|
@ -91,7 +91,7 @@
|
||||||
<imap-settings :inbox="inbox" />
|
<imap-settings :inbox="inbox" />
|
||||||
<smtp-settings v-if="inbox.imap_enabled" :inbox="inbox" />
|
<smtp-settings v-if="inbox.imap_enabled" :inbox="inbox" />
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="isAWhatsappChannel && !isATwilioChannel">
|
<div v-else-if="isAWhatsAppChannel && !isATwilioChannel">
|
||||||
<div v-if="inbox.provider_config" class="settings--content">
|
<div v-if="inbox.provider_config" class="settings--content">
|
||||||
<settings-section
|
<settings-section
|
||||||
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')"
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')"
|
||||||
|
|
|
@ -16,6 +16,9 @@ export default {
|
||||||
channelType() {
|
channelType() {
|
||||||
return this.inbox.channel_type;
|
return this.inbox.channel_type;
|
||||||
},
|
},
|
||||||
|
whatsAppAPIProvider() {
|
||||||
|
return this.inbox.provider || '';
|
||||||
|
},
|
||||||
isAPIInbox() {
|
isAPIInbox() {
|
||||||
return this.channelType === INBOX_TYPES.API;
|
return this.channelType === INBOX_TYPES.API;
|
||||||
},
|
},
|
||||||
|
@ -47,10 +50,22 @@ export default {
|
||||||
isASmsInbox() {
|
isASmsInbox() {
|
||||||
return this.channelType === INBOX_TYPES.SMS || this.isATwilioSMSChannel;
|
return this.channelType === INBOX_TYPES.SMS || this.isATwilioSMSChannel;
|
||||||
},
|
},
|
||||||
isATwilioWhatsappChannel() {
|
isATwilioWhatsAppChannel() {
|
||||||
const { medium: medium = '' } = this.inbox;
|
const { medium: medium = '' } = this.inbox;
|
||||||
return this.isATwilioChannel && medium === 'whatsapp';
|
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() {
|
chatAdditionalAttributes() {
|
||||||
const { additional_attributes: additionalAttributes } = this.chat || {};
|
const { additional_attributes: additionalAttributes } = this.chat || {};
|
||||||
return additionalAttributes || {};
|
return additionalAttributes || {};
|
||||||
|
@ -75,15 +90,15 @@ export default {
|
||||||
badgeKey = this.facebookBadge;
|
badgeKey = this.facebookBadge;
|
||||||
} else if (this.isATwilioChannel) {
|
} else if (this.isATwilioChannel) {
|
||||||
badgeKey = this.twilioBadge;
|
badgeKey = this.twilioBadge;
|
||||||
} else if (this.isAWhatsappChannel) {
|
} else if (this.isAWhatsAppChannel) {
|
||||||
badgeKey = 'whatsapp';
|
badgeKey = 'whatsapp';
|
||||||
}
|
}
|
||||||
return badgeKey || this.channelType;
|
return badgeKey || this.channelType;
|
||||||
},
|
},
|
||||||
isAWhatsappChannel() {
|
isAWhatsAppChannel() {
|
||||||
return (
|
return (
|
||||||
this.channelType === INBOX_TYPES.WHATSAPP ||
|
this.channelType === INBOX_TYPES.WHATSAPP ||
|
||||||
this.isATwilioWhatsappChannel
|
this.isATwilioWhatsAppChannel
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -109,7 +109,7 @@ describe('inboxMixin', () => {
|
||||||
expect(wrapper.vm.isASmsInbox).toBe(true);
|
expect(wrapper.vm.isASmsInbox).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('isATwilioWhatsappChannel returns true if channel type is Twilio and medium is whatsapp', () => {
|
it('isATwilioWhatsAppChannel returns true if channel type is Twilio and medium is WhatsApp', () => {
|
||||||
const Component = {
|
const Component = {
|
||||||
render() {},
|
render() {},
|
||||||
mixins: [inboxMixin],
|
mixins: [inboxMixin],
|
||||||
|
@ -124,7 +124,7 @@ describe('inboxMixin', () => {
|
||||||
};
|
};
|
||||||
const wrapper = shallowMount(Component);
|
const wrapper = shallowMount(Component);
|
||||||
expect(wrapper.vm.isATwilioChannel).toBe(true);
|
expect(wrapper.vm.isATwilioChannel).toBe(true);
|
||||||
expect(wrapper.vm.isATwilioWhatsappChannel).toBe(true);
|
expect(wrapper.vm.isATwilioWhatsAppChannel).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('isAnEmailChannel returns true if channel type is email', () => {
|
it('isAnEmailChannel returns true if channel type is email', () => {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue