feat(whatsapp): add calling enable/disable toggle in inbox settings UI

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -20,11 +20,16 @@ const FloatingCallWidget = defineAsyncComponent(
   () => import('dashboard/components/widgets/FloatingCallWidget.vue')
 );
 
+const WhatsappCallWidget = defineAsyncComponent(
+  () => import('dashboard/components/widgets/WhatsappCallWidget.vue')
+);
+
 import CopilotLauncher from 'dashboard/components-next/copilot/CopilotLauncher.vue';
 import CopilotContainer from 'dashboard/components/copilot/CopilotContainer.vue';
 
 import MobileSidebarLauncher from 'dashboard/components-next/sidebar/MobileSidebarLauncher.vue';
 import { useCallsStore } from 'dashboard/stores/calls';
+import { useWhatsappCallsStore } from 'dashboard/stores/whatsappCalls';
 
 export default {
   components: {
@@ -36,6 +41,7 @@ export default {
     CopilotLauncher,
     CopilotContainer,
     FloatingCallWidget,
+    WhatsappCallWidget,
     MobileSidebarLauncher,
   },
   setup() {
@@ -44,6 +50,7 @@ export default {
     const { accountId } = useAccount();
     const { width: windowWidth } = useWindowSize();
     const callsStore = useCallsStore();
+    const whatsappCallsStore = useWhatsappCallsStore();
 
     return {
       uiSettings,
@@ -53,6 +60,10 @@ export default {
       windowWidth,
       hasActiveCall: computed(() => callsStore.hasActiveCall),
       hasIncomingCall: computed(() => callsStore.hasIncomingCall),
+      hasWhatsappCall: computed(
+        () =>
+          whatsappCallsStore.hasActiveCall || whatsappCallsStore.hasIncomingCall
+      ),
     };
   },
   data() {
@@ -163,6 +174,7 @@ export default {
         />
         <CopilotContainer />
         <FloatingCallWidget v-if="hasActiveCall || hasIncomingCall" />
+        <WhatsappCallWidget v-if="hasWhatsappCall" />
       </template>
       <AddAccountModal
         :show="showCreateAccountModal"

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue

@@ -38,6 +38,7 @@ export default {
       isSyncingTemplates: false,
       allowedDomains: '',
       isUpdatingAllowedDomains: false,
+      callingEnabled: false,
     };
   },
   validations: {
@@ -66,6 +67,8 @@ export default {
     setDefaults() {
       this.hmacMandatory = this.inbox.hmac_mandatory || false;
       this.allowedDomains = this.inbox.allowed_domains || '';
+      this.callingEnabled =
+        this.inbox.provider_config?.calling_enabled || false;
     },
     handleHmacFlag() {
       this.updateInbox();
@@ -131,6 +134,23 @@ export default {
         await this.$refs.whatsappReauth.requestAuthorization();
       }
     },
+    async updateCallingEnabled() {
+      try {
+        await this.$store.dispatch('inboxes/updateInbox', {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            provider_config: {
+              ...this.inbox.provider_config,
+              calling_enabled: this.callingEnabled,
+            },
+          },
+        });
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
     async syncTemplates() {
       this.isSyncingTemplates = true;
       try {
@@ -401,6 +421,22 @@ export default {
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_BUTTON') }}
         </NextButton>
       </SettingsFieldSection>
+      <SettingsFieldSection
+        :label="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_CALLING_TITLE')"
+        :help-text="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_CALLING_SUBHEADER')"
+      >
+        <div class="flex gap-2 items-center">
+          <input
+            id="callingEnabled"
+            v-model="callingEnabled"
+            type="checkbox"
+            @change="updateCallingEnabled"
+          />
+          <label for="callingEnabled" class="text-body-main text-n-slate-12">
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_CALLING_LABEL') }}
+          </label>
+        </div>
+      </SettingsFieldSection>
     </div>
     <WhatsappReauthorize
       v-if="isEmbeddedSignupWhatsApp"