Merge branch 'develop' into feat/read-only-token

app/javascript/dashboard/api/inboxes.js

@@ -60,6 +60,12 @@ class Inboxes extends CacheEnabledApiClient {
   disableWhatsappCalling(inboxId) {
     return axios.post(`${this.url}/${inboxId}/disable_whatsapp_calling`);
   }
+
+  setInboundCalls(inboxId, enabled) {
+    return axios.post(`${this.url}/${inboxId}/set_inbound_calls`, {
+      inbound_calls_enabled: enabled,
+    });
+  }
 }
 
 export default new Inboxes();

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

@@ -653,6 +653,10 @@
       },
       "CREDENTIALS": {
         "DESCRIPTION": "Voice calling requires Twilio API Key credentials. These are used to generate tokens for agent voice connections."
+      },
+      "INBOUND": {
+        "LABEL": "Allow incoming calls",
+        "DESCRIPTION": "Let customers call this number. When turned off, incoming calls are declined automatically — agents aren't notified and no conversation is created. Agents can still place outgoing calls."
       }
     },
     "WHATSAPP_CALLING": {

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

@@ -1,9 +1,11 @@
 <script>
 import { useAlert } from 'dashboard/composables';
+import InboxesAPI from 'dashboard/api/inboxes';
 import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFieldSection.vue';
 import SettingsToggleSection from 'dashboard/components-next/Settings/SettingsToggleSection.vue';
 import NextInput from 'dashboard/components-next/input/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 export default {
   components: {
@@ -11,6 +13,7 @@ export default {
     SettingsToggleSection,
     NextInput,
     NextButton,
+    Spinner,
   },
   props: {
     inbox: {
@@ -21,9 +24,11 @@ export default {
   data() {
     return {
       voiceEnabled: this.inbox.voice_enabled || false,
+      inboundCallsEnabled: this.inbox.inbound_calls_enabled !== false,
       apiKeySid: this.inbox.api_key_sid || '',
       apiKeySecret: '',
       isUpdating: false,
+      isTogglingInbound: false,
     };
   },
   computed: {
@@ -62,8 +67,27 @@ export default {
     'inbox.api_key_sid'(val) {
       this.apiKeySid = val || '';
     },
+    'inbox.inbound_calls_enabled'(val) {
+      this.inboundCallsEnabled = val !== false;
+    },
   },
   methods: {
+    async handleInboundToggle(newValue) {
+      if (this.isTogglingInbound) return;
+      const previousValue = this.inboundCallsEnabled;
+      this.inboundCallsEnabled = newValue;
+      this.isTogglingInbound = true;
+      try {
+        await InboxesAPI.setInboundCalls(this.inbox.id, newValue);
+        await this.$store.dispatch('inboxes/get', this.inbox.id);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (_) {
+        this.inboundCallsEnabled = previousValue;
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      } finally {
+        this.isTogglingInbound = false;
+      }
+    },
     async updateVoiceSettings() {
       this.isUpdating = true;
       try {
@@ -123,6 +147,24 @@ export default {
       />
     </div>
 
+    <div
+      v-if="inbox.voice_enabled"
+      class="relative"
+      :class="{ 'pointer-events-none opacity-60': isTogglingInbound }"
+    >
+      <SettingsToggleSection
+        :model-value="inboundCallsEnabled"
+        :header="$t('INBOX_MGMT.VOICE_CONFIGURATION.INBOUND.LABEL')"
+        :description="$t('INBOX_MGMT.VOICE_CONFIGURATION.INBOUND.DESCRIPTION')"
+        :hide-toggle="isTogglingInbound"
+        @update:model-value="handleInboundToggle"
+      >
+        <template v-if="isTogglingInbound" #hiddenToggle>
+          <Spinner class="size-4 text-n-slate-11" />
+        </template>
+      </SettingsToggleSection>
+    </div>
+
     <div v-if="inbox.voice_enabled && inbox.voice_call_webhook_url">
       <SettingsFieldSection
         :label="$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_VOICE_URL_TITLE')"

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

@@ -24,10 +24,13 @@ export default {
   data() {
     return {
       callingEnabled: this.inbox.provider_config?.calling_enabled || false,
+      inboundCallsEnabled:
+        this.inbox.provider_config?.inbound_calls_enabled !== false,
       permissionRequestBody:
         this.inbox.provider_config?.call_permission_request_body || '',
       isUpdating: false,
       isTogglingCalling: false,
+      isTogglingInbound: false,
     };
   },
   computed: {
@@ -44,8 +47,27 @@ export default {
     'inbox.provider_config.call_permission_request_body'(val) {
       this.permissionRequestBody = val || '';
     },
+    'inbox.provider_config.inbound_calls_enabled'(val) {
+      this.inboundCallsEnabled = val !== false;
+    },
   },
   methods: {
+    async handleInboundToggle(newValue) {
+      if (this.isTogglingInbound) return;
+      const previousValue = this.inboundCallsEnabled;
+      this.inboundCallsEnabled = newValue;
+      this.isTogglingInbound = true;
+      try {
+        await InboxesAPI.setInboundCalls(this.inbox.id, newValue);
+        await this.$store.dispatch('inboxes/get', this.inbox.id);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (_) {
+        this.inboundCallsEnabled = previousValue;
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      } finally {
+        this.isTogglingInbound = false;
+      }
+    },
     async handleCallingToggle(newValue) {
       if (this.isTogglingCalling) return;
       const previousValue = this.callingEnabled;
@@ -117,6 +139,25 @@ export default {
     </div>
 
     <template v-if="callingEnabled">
+      <div
+        class="relative"
+        :class="{ 'pointer-events-none opacity-60': isTogglingInbound }"
+      >
+        <SettingsToggleSection
+          :model-value="inboundCallsEnabled"
+          :header="$t('INBOX_MGMT.VOICE_CONFIGURATION.INBOUND.LABEL')"
+          :description="
+            $t('INBOX_MGMT.VOICE_CONFIGURATION.INBOUND.DESCRIPTION')
+          "
+          :hide-toggle="isTogglingInbound"
+          @update:model-value="handleInboundToggle"
+        >
+          <template v-if="isTogglingInbound" #hiddenToggle>
+            <Spinner class="size-4 text-n-slate-11" />
+          </template>
+        </SettingsToggleSection>
+      </div>
+
       <SettingsFieldSection
         v-if="phoneNumber"
         :label="$t('INBOX_MGMT.WHATSAPP_CALLING.PHONE_NUMBER.LABEL')"