From 56dc580f50e01a313837acd2da29e7145d3a6858 Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <32020192+tds-1@users.noreply.github.com>
Date: Fri, 10 Jul 2026 15:24:14 +0530
Subject: [PATCH] feat: support manual setup for WhatsApp calls inbox creation
 (#14976)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Re-enables the "WhatsApp Calls" inbox creation option, which disappeared
when embedded signup was disabled on production. The channel card now
only requires the `channel_voice` account feature, and the creation flow
offers the manual WhatsApp Cloud API setup form. Once the channel is
created with manual credentials, calling is enabled automatically — the
same post-setup step the embedded signup flow used to perform.

When an installation has embedded signup configured, the flow still uses
it; the manual form is the fallback (and the effective path on Chatwoot
Cloud today).

## How to test

1. Enable the `channel_voice` feature on the account.
2. Go to Add Inbox → the "WhatsApp Calls" card is visible again → select
it.
3. Fill in the manual Cloud API credentials (inbox name, phone number,
phone number ID, business account ID, API key) and submit.
4. The inbox is created and calling is enabled:
`provider_config.calling_enabled` is true and the Calls tab toggle is
on. If the number isn't enrolled in the Business Calling API, an alert
explains the enable failure but the messaging inbox is still created.

## What changed

- `ChannelItem.vue`: the `whatsapp_call` card is gated only on
`channel_voice` (previously also required the embedded signup app ID).
- `CloudWhatsapp.vue`: new `enableCallingOnComplete` prop that calls the
enable-calling API after channel creation.
- `WhatsappCall.vue`: renders embedded signup when available, otherwise
the manual setup form — both with calling enabled on completion.
---
 .../components/widgets/ChannelItem.vue          | 11 +----------
 .../settings/inbox/channels/CloudWhatsapp.vue   | 15 +++++++++++++++
 .../settings/inbox/channels/WhatsappCall.vue    | 17 ++++++++++++++++-
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/ChannelItem.vue b/app/javascript/dashboard/components/widgets/ChannelItem.vue
index 2652b582b..7ed2505c1 100644
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -56,19 +56,10 @@ const isActive = computed(() => {
     return props.enabledFeatures.channel_tiktok && hasTiktokConfigured.value;
   }
 
-  if (key === 'voice') {
+  if (key === 'voice' || key === 'whatsapp_call') {
     return props.enabledFeatures.channel_voice;
   }
 
-  if (key === 'whatsapp_call') {
-    return (
-      !IS_INSTAGRAM_WHATSAPP_INBOX_CREATION_DISABLED &&
-      props.enabledFeatures.channel_voice &&
-      !!window.chatwootConfig?.whatsappAppId &&
-      window.chatwootConfig.whatsappAppId !== 'none'
-    );
-  }
-
   return [
     'website',
     'twilio',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
index 0c1ac3a14..cb739ac93 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
@@ -5,6 +5,7 @@ import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import { isPhoneE164OrEmpty, isNumber } from 'shared/helpers/Validators';
+import InboxesAPI from 'dashboard/api/inboxes';
 
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
@@ -12,6 +13,12 @@ export default {
   components: {
     NextButton,
   },
+  props: {
+    enableCallingOnComplete: {
+      type: Boolean,
+      default: false,
+    },
+  },
   setup() {
     return { v$: useVuelidate() };
   },
@@ -59,6 +66,14 @@ export default {
           }
         );
 
+        if (this.enableCallingOnComplete) {
+          try {
+            await InboxesAPI.enableWhatsappCalling(whatsappChannel.id);
+          } catch (_) {
+            useAlert(this.$t('INBOX_MGMT.WHATSAPP_CALLING.ENABLE_FAILED'));
+          }
+        }
+
         router.replace({
           name: 'settings_inboxes_add_agents',
           params: {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/WhatsappCall.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/WhatsappCall.vue
index c27cd7d1f..d9ac031e1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/WhatsappCall.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/WhatsappCall.vue
@@ -1,11 +1,26 @@
 <script setup>
+import { computed } from 'vue';
 import WhatsappEmbeddedSignup from './WhatsappEmbeddedSignup.vue';
+import CloudWhatsapp from './CloudWhatsapp.vue';
+import { IS_INSTAGRAM_WHATSAPP_INBOX_CREATION_DISABLED } from 'dashboard/constants/globals';
+
+const hasWhatsappAppId = computed(() => {
+  return (
+    !IS_INSTAGRAM_WHATSAPP_INBOX_CREATION_DISABLED &&
+    window.chatwootConfig?.whatsappAppId &&
+    window.chatwootConfig.whatsappAppId !== 'none'
+  );
+});
 </script>
 
 <template>
   <div class="overflow-auto col-span-6 p-6 w-full h-full">
     <div class="px-6 py-5 rounded-2xl border border-n-weak">
-      <WhatsappEmbeddedSignup enable-calling-on-complete />
+      <WhatsappEmbeddedSignup
+        v-if="hasWhatsappAppId"
+        enable-calling-on-complete
+      />
+      <CloudWhatsapp v-else enable-calling-on-complete />
     </div>
   </div>
 </template>