mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-10-31 02:57:57 +00:00 
			
		
		
		
	chore: Displayed WhatsApp API provider name in inbox settings (#5346)
This commit is contained in:
		| @@ -260,7 +260,7 @@ export default { | ||||
|       return this.showAudioRecorder && this.isRecordingAudio; | ||||
|     }, | ||||
|     allowedFileTypes() { | ||||
|       if (this.isATwilioWhatsappChannel) { | ||||
|       if (this.isATwilioWhatsAppChannel) { | ||||
|         return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP; | ||||
|       } | ||||
|       return ALLOWED_FILE_TYPES; | ||||
|   | ||||
| @@ -240,7 +240,7 @@ export default { | ||||
|     }, | ||||
|  | ||||
|     replyWindowBannerMessage() { | ||||
|       if (this.isAWhatsappChannel) { | ||||
|       if (this.isAWhatsAppChannel) { | ||||
|         return this.$t('CONVERSATION.TWILIO_WHATSAPP_CAN_REPLY'); | ||||
|       } | ||||
|       if (this.isAPIInbox) { | ||||
| @@ -256,7 +256,7 @@ export default { | ||||
|       return this.$t('CONVERSATION.CANNOT_REPLY'); | ||||
|     }, | ||||
|     replyWindowLink() { | ||||
|       if (this.isAWhatsappChannel) { | ||||
|       if (this.isAWhatsAppChannel) { | ||||
|         return REPLY_POLICY.FACEBOOK; | ||||
|       } | ||||
|       if (!this.isAPIInbox) { | ||||
| @@ -265,7 +265,7 @@ export default { | ||||
|       return ''; | ||||
|     }, | ||||
|     replyWindowLinkText() { | ||||
|       if (this.isAWhatsappChannel) { | ||||
|       if (this.isAWhatsAppChannel) { | ||||
|         return this.$t('CONVERSATION.24_HOURS_WINDOW'); | ||||
|       } | ||||
|       if (!this.isAPIInbox) { | ||||
|   | ||||
| @@ -277,7 +277,7 @@ export default { | ||||
|       return !!this.uiSettings.enter_to_send_enabled; | ||||
|     }, | ||||
|     isPrivate() { | ||||
|       if (this.currentChat.can_reply || this.isAWhatsappChannel) { | ||||
|       if (this.currentChat.can_reply || this.isAWhatsAppChannel) { | ||||
|         return this.isOnPrivateNote; | ||||
|       } | ||||
|       return true; | ||||
| @@ -324,7 +324,7 @@ export default { | ||||
|       if (this.isAFacebookInbox) { | ||||
|         return MESSAGE_MAX_LENGTH.FACEBOOK; | ||||
|       } | ||||
|       if (this.isAWhatsappChannel) { | ||||
|       if (this.isAWhatsAppChannel) { | ||||
|         return MESSAGE_MAX_LENGTH.TWILIO_WHATSAPP; | ||||
|       } | ||||
|       if (this.isASmsInbox) { | ||||
| @@ -341,7 +341,7 @@ export default { | ||||
|       return ( | ||||
|         this.isAWebWidgetInbox || | ||||
|         this.isAFacebookInbox || | ||||
|         this.isAWhatsappChannel || | ||||
|         this.isAWhatsAppChannel || | ||||
|         this.isAPIInbox || | ||||
|         this.isAnEmailChannel || | ||||
|         this.isASmsInbox || | ||||
| @@ -430,7 +430,7 @@ export default { | ||||
|         return; | ||||
|       } | ||||
|  | ||||
|       if (canReply || this.isAWhatsappChannel) { | ||||
|       if (canReply || this.isAWhatsAppChannel) { | ||||
|         this.replyType = REPLY_EDITOR_MODES.REPLY; | ||||
|       } else { | ||||
|         this.replyType = REPLY_EDITOR_MODES.NOTE; | ||||
| @@ -586,7 +586,7 @@ export default { | ||||
|     setReplyMode(mode = REPLY_EDITOR_MODES.REPLY) { | ||||
|       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.isRecordingAudio) { | ||||
|           this.toggleAudioRecorder(); | ||||
|   | ||||
| @@ -168,7 +168,7 @@ export default { | ||||
|       return ( | ||||
|         this.isOutgoing && | ||||
|         this.sourceId && | ||||
|         (this.isAnEmailChannel || this.isAWhatsappChannel) | ||||
|         (this.isAnEmailChannel || this.isAWhatsAppChannel) | ||||
|       ); | ||||
|     }, | ||||
|   }, | ||||
|   | ||||
| @@ -454,7 +454,7 @@ | ||||
|       "WHATSAPP_SECTION_SUBHEADER": "This API Key is used for the integration with the WhatsApp APIs.", | ||||
|       "WHATSAPP_SECTION_TITLE": "API Key" | ||||
|     }, | ||||
|     "AUTO_ASSIGNMENT":{ | ||||
|     "AUTO_ASSIGNMENT": { | ||||
|       "MAX_ASSIGNMENT_LIMIT": "Auto assignment limit", | ||||
|       "MAX_ASSIGNMENT_LIMIT_RANGE_ERROR": "Please enter a value greater than 0", | ||||
|       "MAX_ASSIGNMENT_LIMIT_SUB_TEXT": "Limit the maximum number of conversations from this inbox that can be auto assigned to an agent" | ||||
| @@ -471,7 +471,7 @@ | ||||
|       "SET_FIELDS_HEADER": { | ||||
|         "FIELDS": "Fields", | ||||
|         "LABEL": "Label", | ||||
|         "PLACE_HOLDER":"Placeholder", | ||||
|         "PLACE_HOLDER": "Placeholder", | ||||
|         "KEY": "Key", | ||||
|         "TYPE": "Type", | ||||
|         "REQUIRED": "Required" | ||||
| @@ -577,11 +577,11 @@ | ||||
|     }, | ||||
|     "NOTE": "Note: ", | ||||
|     "WIDGET_BUILDER": { | ||||
|       "WIDGET_OPTIONS":{ | ||||
|         "AVATAR":{ | ||||
|       "WIDGET_OPTIONS": { | ||||
|         "AVATAR": { | ||||
|           "LABEL": "Website Avatar", | ||||
|           "DELETE":{ | ||||
|             "API":{ | ||||
|           "DELETE": { | ||||
|             "API": { | ||||
|               "SUCCESS_MESSAGE": "Avatar deleted successfully", | ||||
|               "ERROR_MESSAGE": "There was an error, please try again" | ||||
|             } | ||||
| @@ -609,7 +609,7 @@ | ||||
|         "WIDGET_COLOR_LABEL": "Widget Color", | ||||
|         "WIDGET_BUBBLE_POSITION_LABEL": "Widget Bubble Position", | ||||
|         "WIDGET_BUBBLE_TYPE_LABEL": "Widget Bubble Type", | ||||
|         "WIDGET_BUBBLE_LAUNCHER_TITLE":{ | ||||
|         "WIDGET_BUBBLE_LAUNCHER_TITLE": { | ||||
|           "DEFAULT": "Chat with us", | ||||
|           "LABEL": "Widget Bubble Launcher Title", | ||||
|           "PLACE_HOLDER": "Chat with us" | ||||
| @@ -621,15 +621,15 @@ | ||||
|             "ERROR_MESSAGE": "Unable to update widget settings" | ||||
|           } | ||||
|         }, | ||||
|         "WIDGET_VIEW_OPTION":{ | ||||
|         "WIDGET_VIEW_OPTION": { | ||||
|           "PREVIEW": "Preview", | ||||
|           "SCRIPT": "Script" | ||||
|         }, | ||||
|         "WIDGET_BUBBLE_POSITION":{ | ||||
|         "WIDGET_BUBBLE_POSITION": { | ||||
|           "LEFT": "Left", | ||||
|           "RIGHT": "Right" | ||||
|         }, | ||||
|         "WIDGET_BUBBLE_TYPE":{ | ||||
|         "WIDGET_BUBBLE_TYPE": { | ||||
|           "STANDARD": "Standard", | ||||
|           "EXPANDED_BUBBLE": "Expanded Bubble" | ||||
|         } | ||||
| @@ -648,7 +648,7 @@ | ||||
|         "CHAT_INPUT_PLACEHOLDER": "Type your message" | ||||
|       }, | ||||
|       "BODY": { | ||||
|         "TEAM_AVAILABILITY":{ | ||||
|         "TEAM_AVAILABILITY": { | ||||
|           "ONLINE": "We are Online", | ||||
|           "OFFLINE": "We are away at the moment" | ||||
|         }, | ||||
|   | ||||
| @@ -116,6 +116,11 @@ | ||||
|           <woot-color-picker v-model="inbox.widget_color" /> | ||||
|         </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"> | ||||
|           {{ | ||||
|             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL') | ||||
| @@ -388,6 +393,18 @@ export default { | ||||
|     selectedTabKey() { | ||||
|       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() { | ||||
|       const visibleToAllChannelTabs = [ | ||||
|         { | ||||
| @@ -427,7 +444,7 @@ export default { | ||||
|         this.isALineChannel || | ||||
|         this.isAPIInbox || | ||||
|         this.isAnEmailChannel || | ||||
|         this.isAWhatsappChannel | ||||
|         this.isAWhatsAppChannel | ||||
|       ) { | ||||
|         return [ | ||||
|           ...visibleToAllChannelTabs, | ||||
| @@ -447,11 +464,11 @@ export default { | ||||
|       return this.$store.getters['inboxes/getInbox'](this.currentInboxId); | ||||
|     }, | ||||
|     inboxName() { | ||||
|       if (this.isATwilioSMSChannel || this.isATwilioWhatsappChannel) { | ||||
|       if (this.isATwilioSMSChannel || this.isATwilioWhatsAppChannel) { | ||||
|         return `${this.inbox.name} (${this.inbox.messaging_service_sid || | ||||
|           this.inbox.phone_number})`; | ||||
|       } | ||||
|       if (this.isAWhatsappChannel) { | ||||
|       if (this.isAWhatsAppChannel) { | ||||
|         return `${this.inbox.name} (${this.inbox.phone_number})`; | ||||
|       } | ||||
|       if (this.isAnEmailChannel) { | ||||
|   | ||||
| @@ -91,7 +91,7 @@ | ||||
|     <imap-settings :inbox="inbox" /> | ||||
|     <smtp-settings v-if="inbox.imap_enabled" :inbox="inbox" /> | ||||
|   </div> | ||||
|   <div v-else-if="isAWhatsappChannel && !isATwilioChannel"> | ||||
|   <div v-else-if="isAWhatsAppChannel && !isATwilioChannel"> | ||||
|     <div v-if="inbox.provider_config" class="settings--content"> | ||||
|       <settings-section | ||||
|         :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')" | ||||
|   | ||||
| @@ -16,6 +16,9 @@ export default { | ||||
|     channelType() { | ||||
|       return this.inbox.channel_type; | ||||
|     }, | ||||
|     whatsAppAPIProvider() { | ||||
|       return this.inbox.provider || ''; | ||||
|     }, | ||||
|     isAPIInbox() { | ||||
|       return this.channelType === INBOX_TYPES.API; | ||||
|     }, | ||||
| @@ -47,10 +50,22 @@ export default { | ||||
|     isASmsInbox() { | ||||
|       return this.channelType === INBOX_TYPES.SMS || this.isATwilioSMSChannel; | ||||
|     }, | ||||
|     isATwilioWhatsappChannel() { | ||||
|     isATwilioWhatsAppChannel() { | ||||
|       const { medium: medium = '' } = this.inbox; | ||||
|       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() { | ||||
|       const { additional_attributes: additionalAttributes } = this.chat || {}; | ||||
|       return additionalAttributes || {}; | ||||
| @@ -75,15 +90,15 @@ export default { | ||||
|         badgeKey = this.facebookBadge; | ||||
|       } else if (this.isATwilioChannel) { | ||||
|         badgeKey = this.twilioBadge; | ||||
|       } else if (this.isAWhatsappChannel) { | ||||
|       } else if (this.isAWhatsAppChannel) { | ||||
|         badgeKey = 'whatsapp'; | ||||
|       } | ||||
|       return badgeKey || this.channelType; | ||||
|     }, | ||||
|     isAWhatsappChannel() { | ||||
|     isAWhatsAppChannel() { | ||||
|       return ( | ||||
|         this.channelType === INBOX_TYPES.WHATSAPP || | ||||
|         this.isATwilioWhatsappChannel | ||||
|         this.isATwilioWhatsAppChannel | ||||
|       ); | ||||
|     }, | ||||
|   }, | ||||
|   | ||||
| @@ -109,7 +109,7 @@ describe('inboxMixin', () => { | ||||
|     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 = { | ||||
|       render() {}, | ||||
|       mixins: [inboxMixin], | ||||
| @@ -124,7 +124,7 @@ describe('inboxMixin', () => { | ||||
|     }; | ||||
|     const wrapper = shallowMount(Component); | ||||
|     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', () => { | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Sivin Varghese
					Sivin Varghese