File: //home/arjun/projects/buyercall/buyercall/assets/vue/widgets/Channels/components/SCphoneWidget.vue
<template>
<div>
<div class="spinner-main">
<Loader :loading="loading"> </Loader>
</div>
<template v-if="!loading">
<template
v-if="
existingNumbers.length > 0 &&
listMode &&
this.phoneWidgetState.details === null
"
>
<div class="row d-flex justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Added Numbers</h4>
<p class="card-title-desc">
Please edit any of the following number or add a new number.
</p>
<a
class="text-reset notification-item d-block"
v-for="(number, index) in existingNumbers"
:key="index"
>
<div class="d-flex mb-3 justify-content-between">
<div class="font-size-12 text-muted me-3">
<p class="mb-1">{{ number.value }}</p>
</div>
<div class="avatar-xs">
<span
class="
avatar-title
rounded-circle
font-size-16
notification-avatar-2
bg-primary bg-soft
text-primary
"
@click="onEditNumberClick(number.id)"
><i class="bx bx bx-edit-alt"></i
></span>
</div>
</div>
</a>
<div class="d-flex justify-content-center">
<b-button variant="primary" @click="onAddNewNumberButtonClick"
>Add New Number
</b-button>
</div>
</div>
</div>
</div>
</div>
</template>
<template v-else>
<div class="row d-flex justify-content-between">
<div class="col-md-3">
<div class="row justify-content-center">
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<section-tab
v-for="(
tabSection, index
) in phoneWidgetState.tabSections"
:key="index"
:index="index"
:detail="tabSection"
@selectTabIndex="setSelectedTabIndex"
:selectedTabIndex="selectedTabIndex"
:isAddMode="isAddMode"
></section-tab>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<b-form @submit.prevent="formSubmit">
<number-settings
:tabIndex="1"
:handleSubmit="nextTab"
:numerTypeOptions="numerTypeOptions"
v-if="showSection('NUMBER_SETTINGS')"
:formmeta="form"
:initialData="form"
:submitted="submitted"
@inputChange="onFormInputChange"
:phoneWidgetState="phoneWidgetState"
:searchPhoneNumbers="searchNumberByOptions"
@savenumber="savePhonenUmber"
:isAddMode="isAddMode"
:childFormReload="childFormReload"
@formresetted="childFormReload = false"
:tollFreeOptions="tollFreeOptions"
></number-settings>
<record-greet-settings
:handleSubmit="nextTab"
:prevTab="prevTab"
v-if="showSection('RECORD_GREETING_SETTINGS')"
:phoneWidgetState="phoneWidgetState"
:formmeta="form"
:initialData="form"
:submitted="submitted"
@inputChange="onFormInputChange"
:accentVoiceOptions="accentVoiceOptions"
@resetPlayCustomGreetMessageSection="
resetPlayCustomGreetMessageSection
"
@resetCustomGreetMessageType="resetCustomGreetMessageType"
@showToastError="showToastError($event)"
@savenumber="savePhonenUmber"
:childFormReload="childFormReload"
@formresetted="childFormReload = false"
></record-greet-settings>
<voice-mail-settings
:handleSubmit="nextTab"
:prevTab="prevTab"
v-if="showSection('VOICE_MAIL_SETTINGS')"
:phoneWidgetState="phoneWidgetState"
:formmeta="form"
:initialData="form"
:submitted="submitted"
@inputChange="onFormInputChange"
:accentVoiceOptions="accentVoiceOptions"
@showToastError="showToastError($event)"
@savenumber="savePhonenUmber"
:childFormReload="childFormReload"
@formresetted="childFormReload = false"
>
</voice-mail-settings>
</b-form>
</div>
</div>
</template>
</template>
</div>
</template>
<script>
import { required, requiredIf } from 'vuelidate/lib/validators';
import SectionTab from './phonechannel/SectionTab.vue';
import NumberSettings from './phonechannel/NumberSettings.vue';
import RecordGreetSettings from './phonechannel/RecordGreetSettings.vue';
import VoiceMailSettings from './phonechannel/VoiceMailSettings.vue';
import { mapActions, mapGetters } from 'vuex';
import Loader from '../../../components/Loader/loader.vue';
import { formvalidation } from '../../../utils/util';
import { BButton,BForm} from 'bootstrap-vue-next'
import * as _ from 'lodash';
import {
PHONEWIDGET_GETTER,
PHONEWIDGET_ACTION_SEARCH_NUMBERS,
ROOT_ACTION_SET_ERROR_MESSAGE,
PHONEWIDGET_ACTION_CREATE_NUMBER,
PHONEWIDGET_ACTION_UPDATE_NUMBER,
PHONEWIDGET_ACTION_GET_DETAILS,
PHONEWIDGET_ACTION_GET_STATES,
PHONEWIDGET_ACTION_RESET,
} from '../constants';
const { regexValidator } = formvalidation;
export default {
props: {
existingNumbers: {
type: Array,
required: true,
},
channelEditOnListMode: {
type: Boolean,
required: true,
},
sourceState: {
type: Object,
required: true,
},
},
mounted() {
this.getStates();
},
data() {
// debugger;
return {
listMode: this.existingNumbers.length > 0,
selectedTabIndex: 0,
childFormReload: false,
form: {
//Number settings
name: '',
numberType: null,
areaCode: null,
areaCodeTollFree: null,
provisionedPhoneNumber: null,
enableSMS: false,
leadNumAsCallerIDForIncomingCalls: false,
requestCallAcceptance: false,
state: null,
city: null,
phrase: null,
numberTypeGlobalError: null,
// Record Greetings
enableCallRecording: false,
enablePlayingCustGreeMsg: false,
customGreetMessageType: null,
textToSpeechToSpeakCustGreetMsg: null,
textToSpeechaccentVoice: null,
enablePlayCustBeforeConnect: false,
enablePlayCustBeforeConnectMessage: null,
uploadedCustomAudio: null,
uploadedSelfRecordAudio: null,
// Voice mail settings
enableVoiceMail: false,
usecustomvoicemail: null,
usetexttospeech: null,
texttospeechmessage: null,
voicemailaccentVoice: null,
uploadedCustomVoiceMail: null,
},
triggerFormResetOnDetailLoad: false,
submitted: false,
numerTypeOptions: [
{
label: 'Local',
value: 'Local',
},
{
label: 'Toll Free',
value: 'toll-free',
},
],
tollFreeOptions: _.map([833, 844, 855, 866, 877, 888], (o) => ({
label: o,
value: o,
})),
accentVoiceOptions: [
{
label: 'English',
value: 'English',
},
{
label: 'Spanish',
value: 'Spanish',
},
],
};
},
validations: {
form: {
name: { required },
numberType: { required },
areaCode: {
regex: regexValidator(/^[0-9]{3}$/),
},
phrase: {
regex: regexValidator(/^[0-9a-zA-z]{3,7}$/),
},
numberTypeGlobalError: {
required: requiredIf(function () {
if (!this.isAddMode) {
return false;
}
if (this.form.numberType === null) {
return false;
}
if (this.form.numberType.label === 'Local') {
if (
this.form.areaCode ||
this.form.state ||
this.form.city ||
this.form.phrase
) {
return false;
} else {
return true;
}
} else {
if (this.form.areaCodeTollFree || this.form.phrase) {
return false;
} else {
return true;
}
}
return false;
}),
},
provisionedPhoneNumber: {
required: requiredIf(function () {
if (this.isAddMode) {
return false;
}
return true;
}),
},
customGreetMessageType: {
required: requiredIf(function () {
if (this.isAddMode) {
return false;
}
return this.form.enablePlayingCustGreeMsg;
}),
},
textToSpeechToSpeakCustGreetMsg: {
required: requiredIf(function () {
if (this.isAddMode) {
return false;
}
return (
this.form.enablePlayingCustGreeMsg &&
this.form.customGreetMessageType === 1
);
}),
},
textToSpeechaccentVoice: {
required: requiredIf(function () {
if (this.isAddMode) {
return false;
}
return (
this.form.enablePlayingCustGreeMsg &&
this.form.customGreetMessageType === 1
);
}),
},
enablePlayCustBeforeConnectMessage: {
required: requiredIf(function () {
if (this.isAddMode) {
return false;
}
return this.form.enablePlayCustBeforeConnect;
}),
},
uploadedCustomAudio: {
required: requiredIf(function () {
if (this.isAddMode) {
return false;
}
return (
this.form.enablePlayingCustGreeMsg &&
this.form.customGreetMessageType === 2
);
}),
},
uploadedSelfRecordAudio: {
required: requiredIf(function () {
if (this.isAddMode) {
return false;
}
return (
this.form.enablePlayingCustGreeMsg &&
this.form.customGreetMessageType === 3
);
}),
},
usecustomvoicemail: {
required: requiredIf(function () {
if (this.isAddMode) {
return false;
}
return this.form.enableVoiceMail === true;
}),
},
usetexttospeech: {
required: requiredIf(function () {
if (this.isAddMode) {
return false;
}
if (
this.form.enableVoiceMail === true &&
this.form.usecustomvoicemail === 1
) {
return true;
}
return false;
}),
},
texttospeechmessage: {
required: requiredIf(function () {
if (this.isAddMode) {
return false;
}
return (
this.form.enableVoiceMail === true &&
this.form.usecustomvoicemail === 1 &&
this.form.usetexttospeech === 1
);
}),
},
voicemailaccentVoice: {
required: requiredIf(function () {
if (this.isAddMode) {
return false;
}
if (
this.form.enableVoiceMail === true &&
this.form.usecustomvoicemail === 1 &&
this.form.usetexttospeech === 1
) {
return true;
}
return false;
}),
},
uploadedCustomVoiceMail: {
required: requiredIf(function () {
if (this.isAddMode) {
return false;
}
if (
this.form.enableVoiceMail === true &&
this.form.usecustomvoicemail === 1 &&
this.form.usetexttospeech === 2
) {
return true;
}
}),
},
},
},
computed: {
...mapGetters('phonewidget', {
phoneWidgetState: PHONEWIDGET_GETTER,
}),
isAddMode() {
return (
this.phoneWidgetState.selectedId === null &&
this.phoneWidgetState.details === null
);
},
loading() {
return this.phoneWidgetState.detailsLoading;
},
currentPhoneChannelDetails() {
return this.phoneWidgetState.details;
},
},
components: {
SectionTab,
NumberSettings,
RecordGreetSettings,
VoiceMailSettings,
Loader,
BButton,BForm
},
methods: {
onEditNumberClick(id) {
this.listMode = false;
this.$emit('listmode', false);
this.resetPhoneWidget();
this.resetForm();
this.getNumberDetails(id);
},
resetForm() {
this.form = {
//Number settings
name: '',
numberType: null,
areaCode: null,
areaCodeTollFree: null,
provisionedPhoneNumber: null,
enableSMS: false,
leadNumAsCallerIDForIncomingCalls: false,
requestCallAcceptance: false,
state: null,
city: null,
phrase: null,
numberTypeGlobalError: null,
// Record Greetings
enableCallRecording: false,
enablePlayingCustGreeMsg: false,
customGreetMessageType: null,
textToSpeechToSpeakCustGreetMsg: null,
textToSpeechaccentVoice: null,
enablePlayCustBeforeConnect: false,
enablePlayCustBeforeConnectMessage: null,
uploadedCustomAudio: null,
uploadedSelfRecordAudio: null,
// Voice mail settings
enableVoiceMail: false,
usecustomvoicemail: null,
usetexttospeech: null,
texttospeechmessage: null,
voicemailaccentVoice: null,
uploadedCustomVoiceMail: null,
};
this.submitted = false;
},
onAddNewNumberButtonClick() {
this.listMode = false;
this.$emit('listmode', false);
this.resetPhoneWidget();
this.resetForm();
},
resetCustomGreetMessageType(v) {
if (v === 2) {
this.form.textToSpeechaccentVoice = null;
this.form.textToSpeechToSpeakCustGreetMsg = null;
this.form.uploadedSelfRecordAudio = null;
}
if (v === 1) {
this.form.uploadedCustomAudio == null;
this.form.uploadedSelfRecordAudio = null;
} else {
this.form.textToSpeechaccentVoice = null;
this.form.textToSpeechToSpeakCustGreetMsg = null;
this.form.uploadedCustomAudio == null;
}
},
...mapActions('phonewidget', {
searchPhoneNumbers: PHONEWIDGET_ACTION_SEARCH_NUMBERS,
createPhonenumber: PHONEWIDGET_ACTION_CREATE_NUMBER,
updatePhoneNumber: PHONEWIDGET_ACTION_UPDATE_NUMBER,
getNumberDetails: PHONEWIDGET_ACTION_GET_DETAILS,
getStates: PHONEWIDGET_ACTION_GET_STATES,
resetPhoneWidget: PHONEWIDGET_ACTION_RESET,
}),
...mapActions('root', {
showToastError: ROOT_ACTION_SET_ERROR_MESSAGE,
}),
searchNumberByOptions() {
this.form.provisionedPhoneNumber = null;
this.searchPhoneNumbers({
areaCode:
this.form.numberType.label === 'Local'
? this.form.areaCode
: this.form.areaCodeTollFree.value,
numberType: this.form.numberType.value,
city: this.form.city,
state: this.form.state ? this.form.state.value : '',
phrase: this.form.phrase,
});
},
resetPlayCustomGreetMessageSection() {
this.form.customGreetMessageType = null;
this.form.textToSpeechToSpeakCustGreetMsg = null;
this.form.textToSpeechaccentVoice = null;
this.form.uploadedCustomAudio = null;
this.uploadedSelfRecordAudio = null;
},
setSelectedTabIndex(index) {
this.selectedTabIndex = index;
},
onFormInputChange(name, value) {
this.form[name] = value;
},
showSection(label) {
const tabsToShow =
this.phoneWidgetState.tabSections[this.selectedTabIndex].tabsToShow;
if (_.includes(tabsToShow, label)) {
return true;
}
return false;
},
formSubmit() {
this.submitted = true;
this.$v.$touch();
if (this.$v.$invalid) {
return;
}
if (this.selectedTabIndex === 2) {
this.savePhonenUmber();
} else {
this.nextTab();
}
return;
},
savePhonenUmber() {
this.submitted = true;
// this.$v.$touch();
// if (this.$v.$invalid) {
// return;
// }
const formData = new FormData();
let response = {
// 1st Form
name: this.form.name,
provisionedPhoneNumber: this.form.provisionedPhoneNumber,
numberType: this.form.numberType.value,
enableSMS: this.form.enableSMS,
leadNumAsCallerIDForIncomingCalls:
this.form.leadNumAsCallerIDForIncomingCalls,
requestCallAcceptance: this.form.requestCallAcceptance,
// 2nd Form
enableCallRecording: this.form.enableCallRecording,
// 3rd Form
// texttospeechmessage: null,
// voicemailaccentVoice: null,
// uploadedCustomVoiceMail: null,
// usecustomvoicemail: null,
};
if (this.form.enablePlayingCustGreeMsg) {
if (this.form.customGreetMessageType) {
if (this.form.customGreetMessageType === 1) {
response = {
...response,
textToSpeechToSpeakCustGreetMsg:
this.form.textToSpeechToSpeakCustGreetMsg,
textToSpeechaccentVoice: this.form.textToSpeechaccentVoice.value,
};
} else if (this.form.customGreetMessageType === 2) {
if (typeof this.form.uploadedCustomAudio === 'object') {
formData.append(
'uploadedCustomAudio',
this.form.uploadedCustomAudio,
);
} else {
response = {
...response,
uploadedCustomAudio: this.form.uploadedCustomAudio,
};
}
} else {
if (typeof this.form.uploadedSelfRecordAudio === 'object') {
formData.append(
'uploadedSelfRecordAudio',
this.form.uploadedSelfRecordAudio,
);
} else {
response = {
...response,
uploadedSelfRecordAudio: this.form.uploadedSelfRecordAudio,
};
}
}
}
}
if (this.form.enablePlayCustBeforeConnect) {
response = {
...response,
enablePlayCustBeforeConnectMessage:
this.form.enablePlayCustBeforeConnectMessage,
};
}
response = {
...response,
usecustomvoicemail: this.form.usecustomvoicemail,
};
if (this.form.enableVoiceMail) {
if (this.form.usecustomvoicemail === 1) {
if (this.form.usetexttospeech === 1) {
response = {
...response,
texttospeechmessage: this.form.texttospeechmessage,
voicemailaccentVoice: this.form.voicemailaccentVoice.value,
};
} else {
if (typeof this.form.uploadedCustomVoiceMail === 'object') {
formData.append(
'uploadedCustomVoiceMail',
this.form.uploadedCustomVoiceMail,
);
} else {
response = {
...response,
uploadedCustomVoiceMail: this.form.uploadedCustomVoiceMail,
};
}
}
}
}
// debugger;
// if (this.isAddMode) {
response = {
...response,
sourceid: this.sourceState.sourceDetails.id,
};
// }
console.log('request', response);
formData.append('data', JSON.stringify(response));
if (this.phoneWidgetState.selectedId) {
this.updatePhoneNumber(formData);
} else {
this.createPhonenumber(formData);
}
this.submitted = false;
},
nextTab() {
if (this.isAddMode) {
this.selectedTabIndex('Please create phone number first.');
return;
}
this.selectedTabIndex += 1;
},
prevTab() {
this.selectedTabIndex -= 1;
},
},
watch: {
currentPhoneChannelDetails(v, prevV) {
if (!_.isEqual(v, prevV)) {
this.triggerFormResetOnDetailLoad = true;
}
},
triggerFormResetOnDetailLoad(v) {
if (v === true) {
if (this.phoneWidgetState.details) {
const {
name,
numberType,
enableSMS = false,
leadNumAsCallerIDForIncomingCalls = false,
requestCallAcceptance = false,
enableCallRecording = false,
textToSpeechToSpeakCustGreetMsg,
textToSpeechaccentVoice,
uploadedCustomAudio,
uploadedSelfRecordAudio,
enablePlayCustBeforeConnectMessage,
usecustomvoicemail = null,
texttospeechmessage,
voicemailaccentVoice,
uploadedCustomVoiceMail,
provisionedPhoneNumber = null,
} = this.phoneWidgetState.details;
//3rd Form
this.form.usecustomvoicemail = usecustomvoicemail;
this.form.usetexttospeech = null;
this.form.texttospeechmessage = null;
this.form.voicemailaccentVoice = null;
this.form.uploadedCustomVoiceMail = null;
this.form.enableVoiceMail = false;
if (usecustomvoicemail) {
this.form.enableVoiceMail = true;
if (texttospeechmessage && texttospeechmessage.length) {
this.form.usetexttospeech = 1;
this.form.texttospeechmessage = texttospeechmessage;
this.form.voicemailaccentVoice = _.find(
this.accentVoiceOptions,
({ value }) => value === voicemailaccentVoice,
);
} else {
this.form.usetexttospeech = 2;
this.form.uploadedCustomVoiceMail = uploadedCustomVoiceMail;
}
}
//2nd Form
this.form.enableCallRecording = enableCallRecording;
this.form.enablePlayingCustGreeMsg = false;
this.form.customGreetMessageType = null;
this.form.enablePlayCustBeforeConnect = false;
this.form.enablePlayCustBeforeConnectMessage = null;
if (
textToSpeechToSpeakCustGreetMsg ||
uploadedCustomAudio ||
uploadedSelfRecordAudio
) {
this.form.enablePlayingCustGreeMsg = true;
if (
textToSpeechToSpeakCustGreetMsg &&
textToSpeechToSpeakCustGreetMsg.length
) {
this.form.customGreetMessageType = 1;
this.form.textToSpeechToSpeakCustGreetMsg =
textToSpeechToSpeakCustGreetMsg;
this.form.textToSpeechaccentVoice = _.find(
this.accentVoiceOptions,
({ value }) => value === textToSpeechaccentVoice,
);
} else if (uploadedCustomAudio && uploadedCustomAudio.length) {
this.form.customGreetMessageType = 2;
this.form.uploadedCustomAudio = uploadedCustomAudio;
} else {
this.form.customGreetMessageType = 3;
this.form.uploadedSelfRecordAudio = uploadedSelfRecordAudio;
}
}
if (
enablePlayCustBeforeConnectMessage &&
enablePlayCustBeforeConnectMessage.length
) {
this.form.enablePlayCustBeforeConnect = true;
this.form.enablePlayCustBeforeConnectMessage =
enablePlayCustBeforeConnectMessage;
}
//1st Form
this.form.provisionedPhoneNumber = provisionedPhoneNumber;
this.form.name = name;
this.form.numberType = _.find(
this.numerTypeOptions,
({ value }) => value === numberType,
);
this.form.enableSMS = enableSMS;
this.form.leadNumAsCallerIDForIncomingCalls =
leadNumAsCallerIDForIncomingCalls;
this.form.requestCallAcceptance = requestCallAcceptance;
} else {
this.resetForm();
}
this.submitted = false;
this.childFormReload = true;
this.triggerFormResetOnDetailLoad = false;
}
},
channelEditOnListMode(v) {
if (v) {
this.listMode = true;
}
},
},
};
</script>