feat: Voice channel creation Flow (#11775)
This PR introduces a new channel type for voice conversations. ref: #11481 ## Changes - Add database migration for channel_voice table with phone_number and provider_config - Create Channel::Voice model with E.164 phone number validation and Twilio config validation - Add voice channel association to Account model - Extend inbox helpers and types to support voice channels - Add voice channel setup UI with Twilio configuration form - Include voice channel in channel factory and list components - Add API routes and store actions for voice channel creation - Add comprehensive translations for voice channel management --------- Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: iamsivin <iamsivin@gmail.com>
This commit is contained in:
Sojan Jose
@@ -10,6 +10,7 @@ import Whatsapp from './channels/Whatsapp.vue';
|
||||
import Line from './channels/Line.vue';
|
||||
import Telegram from './channels/Telegram.vue';
|
||||
import Instagram from './channels/Instagram.vue';
|
||||
import Voice from './channels/Voice.vue';
|
||||
|
||||
const channelViewList = {
|
||||
facebook: Facebook,
|
||||
@@ -22,6 +23,7 @@ const channelViewList = {
|
||||
line: Line,
|
||||
telegram: Telegram,
|
||||
instagram: Instagram,
|
||||
voice: Voice,
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
|
||||
@@ -36,6 +36,7 @@ export default {
|
||||
{ key: 'telegram', name: 'Telegram' },
|
||||
{ key: 'line', name: 'Line' },
|
||||
{ key: 'instagram', name: 'Instagram' },
|
||||
{ key: 'voice', name: 'Voice' },
|
||||
];
|
||||
},
|
||||
...mapGetters({
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required } from '@vuelidate/validators';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { isPhoneE164 } from 'shared/helpers/Validators';
|
||||
import { useStore, useMapGetter } from 'dashboard/composables/store';
|
||||
|
||||
import PageHeader from '../../SettingsSubPageHeader.vue';
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
phoneNumber: '',
|
||||
accountSid: '',
|
||||
authToken: '',
|
||||
apiKeySid: '',
|
||||
apiKeySecret: '',
|
||||
twimlAppSid: '',
|
||||
});
|
||||
|
||||
const uiFlags = useMapGetter('inboxes/getUIFlags');
|
||||
|
||||
const validationRules = {
|
||||
phoneNumber: { required, isPhoneE164 },
|
||||
accountSid: { required },
|
||||
authToken: { required },
|
||||
apiKeySid: { required },
|
||||
apiKeySecret: { required },
|
||||
twimlAppSid: { required },
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(validationRules, state);
|
||||
const isSubmitDisabled = computed(() => v$.value.$invalid);
|
||||
|
||||
const formErrors = computed(() => ({
|
||||
phoneNumber: v$.value.phoneNumber?.$error
|
||||
? t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.ERROR')
|
||||
: '',
|
||||
accountSid: v$.value.accountSid?.$error
|
||||
? t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.REQUIRED')
|
||||
: '',
|
||||
authToken: v$.value.authToken?.$error
|
||||
? t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.REQUIRED')
|
||||
: '',
|
||||
apiKeySid: v$.value.apiKeySid?.$error
|
||||
? t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.REQUIRED')
|
||||
: '',
|
||||
apiKeySecret: v$.value.apiKeySecret?.$error
|
||||
? t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.REQUIRED')
|
||||
: '',
|
||||
twimlAppSid: v$.value.twimlAppSid?.$error
|
||||
? t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.REQUIRED')
|
||||
: '',
|
||||
}));
|
||||
|
||||
function getProviderConfig() {
|
||||
const config = {
|
||||
account_sid: state.accountSid,
|
||||
auth_token: state.authToken,
|
||||
api_key_sid: state.apiKeySid,
|
||||
api_key_secret: state.apiKeySecret,
|
||||
};
|
||||
if (state.twimlAppSid) config.outgoing_application_sid = state.twimlAppSid;
|
||||
return config;
|
||||
}
|
||||
|
||||
async function createChannel() {
|
||||
const isFormValid = await v$.value.$validate();
|
||||
if (!isFormValid) return;
|
||||
|
||||
try {
|
||||
const channel = await store.dispatch('inboxes/createVoiceChannel', {
|
||||
name: `Voice (${state.phoneNumber})`,
|
||||
voice: {
|
||||
phone_number: state.phoneNumber,
|
||||
provider: 'twilio',
|
||||
provider_config: getProviderConfig(),
|
||||
},
|
||||
});
|
||||
|
||||
router.replace({
|
||||
name: 'settings_inboxes_add_agents',
|
||||
params: { page: 'new', inbox_id: channel.id },
|
||||
});
|
||||
} catch (error) {
|
||||
useAlert(
|
||||
error.response?.data?.message ||
|
||||
t('INBOX_MGMT.ADD.VOICE.API.ERROR_MESSAGE')
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="overflow-auto col-span-6 p-6 w-full h-full rounded-t-lg border border-b-0 border-n-weak bg-n-solid-1"
|
||||
>
|
||||
<PageHeader
|
||||
:header-title="t('INBOX_MGMT.ADD.VOICE.TITLE')"
|
||||
:header-content="t('INBOX_MGMT.ADD.VOICE.DESC')"
|
||||
/>
|
||||
|
||||
<form
|
||||
class="flex flex-col gap-4 flex-wrap mx-0"
|
||||
@submit.prevent="createChannel"
|
||||
>
|
||||
<Input
|
||||
v-model="state.phoneNumber"
|
||||
:label="t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.LABEL')"
|
||||
:placeholder="t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.PLACEHOLDER')"
|
||||
:message="formErrors.phoneNumber"
|
||||
:message-type="formErrors.phoneNumber ? 'error' : 'info'"
|
||||
@blur="v$.phoneNumber?.$touch"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="state.accountSid"
|
||||
:label="t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.LABEL')"
|
||||
:placeholder="t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.PLACEHOLDER')"
|
||||
:message="formErrors.accountSid"
|
||||
:message-type="formErrors.accountSid ? 'error' : 'info'"
|
||||
@blur="v$.accountSid?.$touch"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="state.authToken"
|
||||
type="password"
|
||||
:label="t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.LABEL')"
|
||||
:placeholder="t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.PLACEHOLDER')"
|
||||
:message="formErrors.authToken"
|
||||
:message-type="formErrors.authToken ? 'error' : 'info'"
|
||||
@blur="v$.authToken?.$touch"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="state.apiKeySid"
|
||||
:label="t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.LABEL')"
|
||||
:placeholder="t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.PLACEHOLDER')"
|
||||
:message="formErrors.apiKeySid"
|
||||
:message-type="formErrors.apiKeySid ? 'error' : 'info'"
|
||||
@blur="v$.apiKeySid?.$touch"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="state.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')
|
||||
"
|
||||
:message="formErrors.apiKeySecret"
|
||||
:message-type="formErrors.apiKeySecret ? 'error' : 'info'"
|
||||
@blur="v$.apiKeySecret?.$touch"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="state.twimlAppSid"
|
||||
:label="t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.LABEL')"
|
||||
:placeholder="
|
||||
t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.PLACEHOLDER')
|
||||
"
|
||||
:message="formErrors.twimlAppSid"
|
||||
:message-type="formErrors.twimlAppSid ? 'error' : 'info'"
|
||||
@blur="v$.twimlAppSid?.$touch"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<NextButton
|
||||
:is-loading="uiFlags.isCreating"
|
||||
:disabled="isSubmitDisabled"
|
||||
:label="t('INBOX_MGMT.ADD.VOICE.SUBMIT_BUTTON')"
|
||||
type="submit"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -29,6 +29,7 @@ const i18nMap = {
|
||||
'Channel::Line': 'LINE',
|
||||
'Channel::Api': 'API',
|
||||
'Channel::Instagram': 'INSTAGRAM',
|
||||
'Channel::Voice': 'VOICE',
|
||||
};
|
||||
|
||||
const twilioChannelName = () => {
|
||||
|
||||
Reference in New Issue
Block a user