KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: Displayed WhatsApp API provider name in inbox settings (#5346)

Browse source
This commit is contained in:
Sivin Varghese 2022-08-29 12:40:15 +05:30 • committed by GitHub
parent 9ddf4c205c
commit a9d687565e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 63 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
View file

@ -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;

6
app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
View file

@ -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) {

10
app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
View file

@ -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();

2
app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
View file

@ -168,7 +168,7 @@ export default {
return ( return (
this.isOutgoing && this.isOutgoing &&
this.sourceId && this.sourceId &&
(this.isAnEmailChannel || this.isAWhatsappChannel) (this.isAnEmailChannel || this.isAWhatsAppChannel)
); );
}, },
}, },

23
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
View file

@ -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) {

2
app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
View file

@ -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')"

23
app/javascript/shared/mixins/inboxMixin.js
View file

@ -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
); );
}, },
}, },

4
app/javascript/shared/mixins/specs/inboxMixin.spec.js
View file

@ -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', () => {