diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json index 8e10078fa..c493db5ed 100644 --- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json +++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json @@ -637,7 +637,8 @@ "BOT_CONFIGURATION": "Bot Configuration", "ACCOUNT_HEALTH": "Account Health", "CSAT": "CSAT", - "VOICE": "Voice" + "VOICE": "Voice", + "CALLS": "Calls" }, "VOICE_CONFIGURATION": { "ENABLE_VOICE": { @@ -648,6 +649,20 @@ "DESCRIPTION": "Voice calling requires Twilio API Key credentials. These are used to generate tokens for agent voice connections." } }, + "WHATSAPP_CALLING": { + "ENABLE": { + "LABEL": "Enable WhatsApp Calling", + "DESCRIPTION": "Allow agents to receive and place WhatsApp Cloud calls on this inbox. Customers can call this business number directly from WhatsApp." + }, + "PHONE_NUMBER": { + "LABEL": "Business phone number", + "HELP_TEXT": "WhatsApp number that customers will call." + }, + "HOW_IT_WORKS": { + "LABEL": "How it works", + "DESCRIPTION": "Calls are placed peer-to-peer between the agent's browser and Meta — no extra credentials are required. Make sure the agent's browser has microphone permission for this site." + } + }, "CHANNEL_PREFERENCES": "Channel Preferences", "WIDGET_FEATURES": "Widget features", "ACCOUNT_HEALTH": { diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue index a26eb0e18..ae74aef26 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue @@ -22,6 +22,7 @@ import WeeklyAvailability from './components/WeeklyAvailability.vue'; import GreetingsEditor from 'shared/components/GreetingsEditor.vue'; import ConfigurationPage from './settingsPage/ConfigurationPage.vue'; import VoiceConfigurationPage from './settingsPage/VoiceConfigurationPage.vue'; +import WhatsappCallingPage from './settingsPage/WhatsappCallingPage.vue'; import CustomerSatisfactionPage from './settingsPage/CustomerSatisfactionPage.vue'; import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue'; import BotConfiguration from './components/BotConfiguration.vue'; @@ -48,6 +49,7 @@ export default { CollaboratorsPage, ConfigurationPage, VoiceConfigurationPage, + WhatsappCallingPage, CustomerSatisfactionPage, FacebookReauthorize, GreetingsEditor, @@ -249,6 +251,16 @@ export default { ]; } + if (this.isAWhatsAppCloudChannel && this.isEmbeddedSignupWhatsApp) { + visibleToAllChannelTabs = [ + ...visibleToAllChannelTabs, + { + key: 'calls-configuration', + name: this.$t('INBOX_MGMT.TABS.CALLS'), + }, + ]; + } + return visibleToAllChannelTabs; }, currentInboxId() { @@ -1262,6 +1274,12 @@ export default { > +
+ +
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue index f3fe54448..9cd1665bf 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue @@ -44,7 +44,6 @@ export default { allowedDomains: '', isUpdatingAllowedDomains: false, isSettingDefaults: false, - whatsAppCallingEnabled: false, }; }, validations: { @@ -72,10 +71,6 @@ export default { if (!this.isSettingDefaults && this.isAWebWidgetInbox) this.handleHmacFlag(); }, - whatsAppCallingEnabled() { - if (!this.isSettingDefaults && this.isEmbeddedSignupWhatsApp) - this.updateWhatsAppCallingEnabled(); - }, }, mounted() { this.setDefaults(); @@ -88,9 +83,6 @@ export default { this.inbox.selected_feature_flags || [] ).includes('allow_mobile_webview'); this.allowedDomains = this.inbox.allowed_domains || ''; - this.whatsAppCallingEnabled = Boolean( - this.inbox.provider_config?.calling_enabled - ); this.$nextTick(() => { this.isSettingDefaults = false; }); @@ -155,24 +147,6 @@ export default { this.isUpdatingAllowedDomains = false; } }, - async updateWhatsAppCallingEnabled() { - try { - const payload = { - id: this.inbox.id, - formData: false, - channel: { - provider_config: { - ...this.inbox.provider_config, - calling_enabled: this.whatsAppCallingEnabled, - }, - }, - }; - await this.$store.dispatch('inboxes/updateInbox', payload); - useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE')); - } catch (error) { - useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE')); - } - }, async updateWhatsAppInboxAPIKey() { try { const payload = { @@ -400,15 +374,6 @@ export default { - diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/WhatsappCallingPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/WhatsappCallingPage.vue new file mode 100644 index 000000000..5ae810159 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/WhatsappCallingPage.vue @@ -0,0 +1,91 @@ + + +