1<template>
2 <TwilioCallUI ref="twilio" />
3 <ExotelCallUI ref="exotel" />
4 <Dialog
5 v-model:open="show"
6 title="Make call"
7 :actions="[
8 {
9 label: `Call using ${callMedium}`,
10 variant: 'solid',
11 onClick: makeCallUsing,
12 },
13 ]"
14 >
15 <template #default>
16 <div class="flex flex-col gap-4">
17 <FormControl type="text" v-model="mobileNumber" label="Mobile Number" />
18 <FormControl
19 type="select"
20 v-model="callMedium"
21 :label="'Calling Medium'"
22 :options="['Twilio', 'Exotel']"
23 />
24 <div class="flex flex-col gap-1">
25 <FormControl
26 type="checkbox"
27 v-model="isDefaultMedium"
28 :label="`Make ${callMedium} as default calling medium`"
29 />
30
31 <div v-if="isDefaultMedium" class="text-sm text-ink-gray-4">
32 {{
33 __("You can change the default calling medium from the settings")
34 }}
35 </div>
36 </div>
37 </div>
38 </template>
39 </Dialog>
40</template>
41<script setup lang="ts">
42import { FormControl, call, toast } from "frappe-ui";
43import { nextTick, ref, watch } from "vue";
44import TwilioCallUI from "./TwilioCallUI.vue";
45import ExotelCallUI from "./ExotelCallUI.vue";
46import { useTelephonyStore } from "@/stores/telephony";
47import { storeToRefs } from "pinia";
48
49const telephonyStore = useTelephonyStore();
50const { defaultCallingMedium, isExotelEnabled, isTwilioEnabled } =
51 storeToRefs(telephonyStore);
52
53const twilio = ref(null);
54const exotel = ref(null);
55
56const callMedium = ref("Twilio");
57const isDefaultMedium = ref(false);
58
59const show = ref(false);
60const mobileNumber = ref("");
61
62const props = defineProps({
63 userEmail: {
64 type: String,
65 default: "",
66 },
67});
68
69function makeCall({ number, doctype, docname }) {
70 telephonyStore.setLinkDoc({
71 docname,
72 doctype,
73 });
74 if (
75 (isTwilioEnabled.value &&
76 isExotelEnabled.value &&
77 !defaultCallingMedium.value) ||
78 !number
79 ) {
80 mobileNumber.value = number;
81 show.value = true;
82 return;
83 }
84
85 callMedium.value = isTwilioEnabled.value ? "Twilio" : "Exotel";
86 if (defaultCallingMedium.value) {
87 callMedium.value = defaultCallingMedium.value;
88 }
89
90 mobileNumber.value = number;
91 makeCallUsing();
92}
93
94function makeCallUsing() {
95 if (isDefaultMedium.value && callMedium.value) {
96 setCallingMedium();
97 isDefaultMedium.value = false;
98 }
99
100 if (callMedium.value === "Twilio") {
101 twilio.value.makeOutgoingCall(mobileNumber.value);
102 }
103
104 if (callMedium.value === "Exotel") {
105 exotel.value.makeOutgoingCall(mobileNumber.value);
106 }
107 show.value = false;
108}
109
110async function setCallingMedium() {
111 await call("telephony.api.set_default_calling_medium", {
112 medium: callMedium.value,
113 });
114
115 telephonyStore.setDefaultCallingMedium(callMedium.value);
116 telephonyStore.fetchCallIntegrationStatus();
117 toast.success(
118 `Default calling medium set successfully to ${callMedium.value}`
119 );
120}
121
122watch(
123 [isTwilioEnabled, isExotelEnabled],
124 ([twilioValue, exotelValue]) =>
125 nextTick(() => {
126 if (twilioValue) {
127 twilio.value.setup();
128 callMedium.value = "Twilio";
129 }
130
131 if (exotelValue) {
132 exotel.value.setup(props.userEmail);
133 callMedium.value = "Exotel";
134 }
135
136 if (twilioValue || exotelValue) {
137 callMedium.value = "Twilio";
138 telephonyStore.setMakeCall(makeCall);
139 }
140 }),
141 { immediate: true }
142);
143</script>
144