diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json index 9a986523d..5c6eb82cf 100644 --- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json +++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json @@ -600,6 +600,10 @@ "WHATSAPP_SECTION_UPDATE_BUTTON": "Update", "WHATSAPP_WEBHOOK_TITLE": "Webhook Verification Token", "WHATSAPP_WEBHOOK_SUBHEADER": "This token is used to verify the authenticity of the webhook endpoint.", + "WHATSAPP_RECONFIGURE_TITLE": "Reconfigure WhatsApp", + "WHATSAPP_RECONFIGURE_SUBHEADER": "Update your WhatsApp Business account configuration using the embedded signup flow.", + "WHATSAPP_RECONFIGURE_BUTTON": "Reconfigure with WhatsApp", + "WHATSAPP_RECONFIGURE_ERROR": "Failed to initiate WhatsApp reconfiguration. Please try again.", "UPDATE_PRE_CHAT_FORM_SETTINGS": "Update Pre Chat Form Settings", "WHATSAPP_REAUTHORIZE": { "TITLE": "Reauthorize WhatsApp Connection", 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 bc5355c3c..c91da7b26 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue @@ -7,6 +7,7 @@ import SmtpSettings from '../SmtpSettings.vue'; import { useVuelidate } from '@vuelidate/core'; import { required } from '@vuelidate/validators'; import NextButton from 'dashboard/components-next/button/Button.vue'; +import { useWhatsappReauthorization } from 'dashboard/composables/useWhatsappReauthorization'; export default { components: { @@ -34,6 +35,14 @@ export default { validations: { whatsAppInboxAPIKey: { required }, }, + computed: { + isWhatsAppCloudWithEmbeddedSignup() { + return ( + this.inbox.provider === 'whatsapp_cloud' && + this.inbox.provider_config?.source === 'embedded_signup' + ); + }, + }, watch: { inbox() { this.setDefaults(); @@ -83,6 +92,18 @@ export default { useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE')); } }, + reconfigureWhatsApp() { + // Initialize the WhatsApp reauthorization flow + const { launchReauthorization, initialize } = useWhatsappReauthorization( + this.inbox.id + ); + + // Initialize and launch + initialize(); + launchReauthorization(); + + // Note: cleanup will happen when component unmounts or user navigates away + }, }, }; @@ -208,7 +229,21 @@ export default { > + + + {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_RECONFIGURE_BUTTON') }} + + + +