feat: add support to embedded whatsapp coexistence method (#12108)

This update adds support to the coexistence method to Embedded Whatsapp,
allowing users to add their existing whatsapp business number in order
to use it in both places(chatwoot and whatsapp business) at the same
time.

This update require some changes in the permissions for the Meta App, as
described in the Meta Oficial Docs, I'll leave this listed below:

- **history** — describes past messages the business customer has
sent/received
- **smb_app_state_sync** — describes the business customer's current and
new contacts
- **smb_message_echoes** — describes any new messages the business
customer sends with the WhatsApp Business app after having been
onboarded

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Tanmay Deep Sharma <32020192+tds-1@users.noreply.github.com>

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -280,6 +280,11 @@
             "SECURE_AUTH": "Secure OAuth based authentication",
             "AUTO_CONFIG": "Automatic webhook and phone number configuration"
           },
+          "LEARN_MORE": {
+            "TEXT": "To learn more about integrated signup, pricing, and limitations, visit",
+            "LINK_TEXT": "this link.",
+            "LINK_URL": "https://developers.facebook.com/docs/whatsapp/embedded-signup/custom-flows/onboarding-business-app-users#limitations"
+          },
           "SUBMIT_BUTTON": "Connect with WhatsApp Business",
           "AUTH_PROCESSING": "Authenticating with Meta",
           "WAITING_FOR_BUSINESS_INFO": "Please complete business setup in the Meta window...",

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/WhatsappEmbeddedSignup.vue

@@ -107,7 +107,7 @@ const completeSignupFlow = async businessDataParam => {
       code: authCode.value,
       business_id: businessDataParam.business_id,
       waba_id: businessDataParam.waba_id,
-      phone_number_id: businessDataParam.phone_number_id,
+      phone_number_id: businessDataParam?.phone_number_id || '',
     };
 
     const responseData = await store.dispatch(
@@ -127,7 +127,10 @@ const completeSignupFlow = async businessDataParam => {
 
 // Message handling
 const handleEmbeddedSignupData = async data => {
-  if (data.event === 'FINISH') {
+  if (
+    data.event === 'FINISH' ||
+    data.event === 'FINISH_WHATSAPP_BUSINESS_APP_ONBOARDING'
+  ) {
     const businessDataLocal = data.data;
 
     if (isValidBusinessData(businessDataLocal)) {
@@ -262,6 +265,25 @@ onBeforeUnmount(() => {
         </div>
       </div>
 
+      <div class="flex flex-col gap-2 mb-6">
+        <span class="text-sm text-n-slate-11">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.LEARN_MORE.TEXT') }}
+          {{ ' ' }}
+          <a
+            :href="
+              $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.LEARN_MORE.LINK_URL')
+            "
+            target="_blank"
+            rel="noopener noreferrer"
+            class="underline text-primary"
+          >
+            {{
+              $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.LEARN_MORE.LINK_TEXT')
+            }}
+          </a>
+        </span>
+      </div>
+
       <div class="flex mt-4">
         <NextButton
           :disabled="isAuthenticating"

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils.js

@@ -74,7 +74,7 @@ export const initWhatsAppEmbeddedSignup = configId => {
         override_default_response_type: true,
         extras: {
           setup: {},
-          featureType: '',
+          featureType: 'whatsapp_business_app_onboarding',
           sessionInfoVersion: '3',
         },
       }