chore: add Voice configuration UI and API fields

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

@@ -628,7 +628,17 @@
       "WIDGET_BUILDER": "Widget Builder",
       "BOT_CONFIGURATION": "Bot Configuration",
       "ACCOUNT_HEALTH": "Account Health",
-      "CSAT": "CSAT"
+      "CSAT": "CSAT",
+      "VOICE": "Voice"
+    },
+    "VOICE_CONFIGURATION": {
+      "ENABLE_VOICE": {
+        "LABEL": "Enable Voice Calling",
+        "DESCRIPTION": "Enable voice calling on this inbox. Agents will be able to make and receive phone calls."
+      },
+      "CREDENTIALS": {
+        "DESCRIPTION": "Voice calling requires Twilio API Key credentials. These are used to generate tokens for agent WebRTC connections."
+      }
     },
     "CHANNEL_PREFERENCES": "Channel Preferences",
     "WIDGET_FEATURES": "Widget features",

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -21,6 +21,7 @@ import PreChatFormSettings from './PreChatForm/Settings.vue';
 import WeeklyAvailability from './components/WeeklyAvailability.vue';
 import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
 import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
+import VoiceConfigurationPage from './settingsPage/VoiceConfigurationPage.vue';
 import CustomerSatisfactionPage from './settingsPage/CustomerSatisfactionPage.vue';
 import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
 import BotConfiguration from './components/BotConfiguration.vue';
@@ -44,6 +45,7 @@ export default {
     BotConfiguration,
     CollaboratorsPage,
     ConfigurationPage,
+    VoiceConfigurationPage,
     CustomerSatisfactionPage,
     FacebookReauthorize,
     GreetingsEditor,
@@ -205,6 +207,20 @@ export default {
         ];
       }
 
+      if (
+        this.isATwilioChannel &&
+        this.inbox.phone_number &&
+        this.inbox.medium === 'sms'
+      ) {
+        visibleToAllChannelTabs = [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'voice-configuration',
+            name: this.$t('INBOX_MGMT.TABS.VOICE'),
+          },
+        ];
+      }
+
       return visibleToAllChannelTabs;
     },
     currentInboxId() {
@@ -1170,6 +1186,12 @@ export default {
         >
           <ConfigurationPage :inbox="inbox" />
         </div>
+        <div
+          v-if="selectedTabKey === 'voice-configuration'"
+          class="mx-6 max-w-4xl"
+        >
+          <VoiceConfigurationPage :inbox="inbox" />
+        </div>
         <div v-if="selectedTabKey === 'csat'">
           <CustomerSatisfactionPage :inbox="inbox" />
         </div>

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

@@ -189,26 +189,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="voiceCallEnabled">
-    <SettingsFieldSection
-      :label="$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_VOICE_URL_TITLE')"
-      :help-text="
-        $t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_VOICE_URL_SUBTITLE')
-      "
-    >
-      <woot-code :script="inbox.voice_call_webhook_url" lang="html" />
-    </SettingsFieldSection>
-    <SettingsFieldSection
-      :label="$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_STATUS_URL_TITLE')"
-      :help-text="
-        $t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_STATUS_URL_SUBTITLE')
-      "
-    >
-      <woot-code :script="inbox.voice_status_webhook_url" lang="html" />
-    </SettingsFieldSection>
-  </div>
-
-  <div v-else-if="isATwilioChannel">
+  <div v-if="isATwilioChannel">
     <SettingsFieldSection
       :label="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
       :help-text="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"

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

@@ -0,0 +1,125 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+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';
+
+export default {
+  components: {
+    SettingsFieldSection,
+    SettingsToggleSection,
+    NextInput,
+    NextButton,
+  },
+  props: {
+    inbox: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      voiceEnabled: this.inbox.voice_enabled || false,
+      apiKeySid: this.inbox.api_key_sid || '',
+      apiKeySecret: '',
+    };
+  },
+  computed: {
+    isVoiceConfigured() {
+      return !!this.inbox.voice_configured;
+    },
+    needsCredentials() {
+      return this.voiceEnabled && !this.isVoiceConfigured;
+    },
+    isSubmitDisabled() {
+      if (!this.voiceEnabled) return false;
+      if (this.needsCredentials) {
+        return !this.apiKeySid || !this.apiKeySecret;
+      }
+      return false;
+    },
+  },
+  methods: {
+    async updateVoiceSettings() {
+      try {
+        const channelPayload = { voice_enabled: this.voiceEnabled };
+
+        if (this.needsCredentials) {
+          channelPayload.api_key_sid = this.apiKeySid;
+          channelPayload.api_key_secret = this.apiKeySecret;
+        }
+
+        await this.$store.dispatch('inboxes/updateInbox', {
+          id: this.inbox.id,
+          formData: false,
+          channel: channelPayload,
+        });
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <SettingsToggleSection
+      v-model="voiceEnabled"
+      :header="$t('INBOX_MGMT.VOICE_CONFIGURATION.ENABLE_VOICE.LABEL')"
+      :description="
+        $t('INBOX_MGMT.VOICE_CONFIGURATION.ENABLE_VOICE.DESCRIPTION')
+      "
+    />
+
+    <div v-if="voiceEnabled && needsCredentials" class="flex flex-col gap-4">
+      <p class="text-sm text-n-slate-11">
+        {{ $t('INBOX_MGMT.VOICE_CONFIGURATION.CREDENTIALS.DESCRIPTION') }}
+      </p>
+      <NextInput
+        v-model="apiKeySid"
+        :label="$t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.LABEL')"
+        :placeholder="$t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.PLACEHOLDER')"
+      />
+      <NextInput
+        v-model="apiKeySecret"
+        type="password"
+        :label="$t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.LABEL')"
+        :placeholder="
+          $t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.PLACEHOLDER')
+        "
+      />
+    </div>
+
+    <div v-if="voiceEnabled && !needsCredentials">
+      <SettingsFieldSection
+        :label="$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_VOICE_URL_TITLE')"
+        :help-text="
+          $t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_VOICE_URL_SUBTITLE')
+        "
+      >
+        <woot-code :script="inbox.voice_call_webhook_url" lang="html" />
+      </SettingsFieldSection>
+      <SettingsFieldSection
+        :label="
+          $t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_STATUS_URL_TITLE')
+        "
+        :help-text="
+          $t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_STATUS_URL_SUBTITLE')
+        "
+      >
+        <woot-code :script="inbox.voice_status_webhook_url" lang="html" />
+      </SettingsFieldSection>
+    </div>
+
+    <div>
+      <NextButton
+        :disabled="isSubmitDisabled"
+        :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+        @click="updateVoiceSettings"
+      />
+    </div>
+  </div>
+</template>