add translations for wa embedded signup

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",

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
+    },
   },
 };
 </script>
@@ -208,7 +229,21 @@ export default {
       >
         <woot-code :script="inbox.provider_config.api_key" />
       </SettingsSection>
+      <!-- Show reconfigure button for WhatsApp Cloud with embedded signup -->
       <SettingsSection
+        v-if="isWhatsAppCloudWithEmbeddedSignup"
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_RECONFIGURE_TITLE')"
+        :sub-title="
+          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_RECONFIGURE_SUBHEADER')
+        "
+      >
+        <NextButton class="mt-2" @click="reconfigureWhatsApp">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_RECONFIGURE_BUTTON') }}
+        </NextButton>
+      </SettingsSection>
+      <!-- Show API key update for non-embedded signup WhatsApp -->
+      <SettingsSection
+        v-else
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
         :sub-title="
           $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')