Add VoIP webhook connector for call logging, notifications, and optional click-to-call; align brand to Montact.
This commit is contained in:
@@ -447,9 +447,22 @@ function closeMenus() {
|
||||
filterOpen.value = false;
|
||||
}
|
||||
|
||||
function goCall() {
|
||||
async function goCall() {
|
||||
closeMenus();
|
||||
if (telHref.value) window.location.href = telHref.value;
|
||||
const number = phoneNumber.value;
|
||||
if (!number) return;
|
||||
try {
|
||||
const { data } = await api.post<{ ok: boolean; mode: string; dialUrl: string }>(
|
||||
'/integrations/voip/click-to-call',
|
||||
{ number, personId: id.value },
|
||||
);
|
||||
if (data.mode === 'tel' && data.dialUrl) {
|
||||
window.location.href = data.dialUrl;
|
||||
}
|
||||
// mode url: سانترال تماس را شروع کرده؛ نیازی به tel نیست
|
||||
} catch {
|
||||
if (telHref.value) window.location.href = telHref.value;
|
||||
}
|
||||
}
|
||||
|
||||
function goMail() {
|
||||
|
||||
@@ -0,0 +1,323 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import type {
|
||||
CreateVoipConnectionRequest,
|
||||
VoipCallLogDto,
|
||||
VoipConnectionDto,
|
||||
} from '@mento/shared';
|
||||
import {
|
||||
UiButton,
|
||||
UiCard,
|
||||
UiEmptyState,
|
||||
UiField,
|
||||
UiInput,
|
||||
UiPageHeader,
|
||||
} from '@/components/ui';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const error = ref('');
|
||||
const ok = ref('');
|
||||
const items = ref<VoipConnectionDto[]>([]);
|
||||
const calls = ref<VoipCallLogDto[]>([]);
|
||||
|
||||
const form = reactive({
|
||||
label: 'سانترال اصلی',
|
||||
webhookSecret: '',
|
||||
clickToCallUrl: '',
|
||||
enabled: true,
|
||||
});
|
||||
|
||||
const webhookUrl = computed(() => {
|
||||
if (!items.value[0]) return '';
|
||||
const origin = typeof window !== 'undefined' ? window.location.origin : '';
|
||||
return `${origin}/api/public/integrations/voip/${items.value[0].id}/webhook`;
|
||||
});
|
||||
|
||||
const statusLabel: Record<string, string> = {
|
||||
ringing: 'زنگ',
|
||||
answered: 'پاسخ',
|
||||
missed: 'از دست‌رفته',
|
||||
completed: 'تمام‌شده',
|
||||
failed: 'ناموفق',
|
||||
};
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const [connRes, callRes] = await Promise.all([
|
||||
api.get<VoipConnectionDto[]>('/integrations/voip/connections'),
|
||||
api.get<VoipCallLogDto[]>('/integrations/voip/calls'),
|
||||
]);
|
||||
items.value = connRes.data;
|
||||
calls.value = callRes.data;
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e) && e.response?.status === 403) {
|
||||
error.value = 'ماژول تلفن سازمانی برای این محیط فعال نیست.';
|
||||
} else {
|
||||
error.value = 'بارگذاری ناموفق بود.';
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function create() {
|
||||
if (!form.label.trim()) {
|
||||
error.value = 'نام اتصال را وارد کنید.';
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const payload: CreateVoipConnectionRequest = {
|
||||
label: form.label.trim(),
|
||||
webhookSecret: form.webhookSecret.trim() || undefined,
|
||||
clickToCallUrl: form.clickToCallUrl.trim() || null,
|
||||
enabled: form.enabled,
|
||||
};
|
||||
await api.post('/integrations/voip/connections', payload);
|
||||
form.webhookSecret = '';
|
||||
ok.value = 'اتصال ذخیره شد.';
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = axios.isAxiosError(e)
|
||||
? String((e.response?.data as { message?: string })?.message ?? 'ذخیره ناموفق بود.')
|
||||
: 'ذخیره ناموفق بود.';
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(id: string) {
|
||||
if (!confirm('این اتصال حذف شود؟')) return;
|
||||
try {
|
||||
await api.delete(`/integrations/voip/connections/${id}`);
|
||||
await load();
|
||||
} catch {
|
||||
error.value = 'حذف ناموفق بود.';
|
||||
}
|
||||
}
|
||||
|
||||
async function copyWebhook() {
|
||||
if (!webhookUrl.value) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(webhookUrl.value);
|
||||
ok.value = 'آدرس وب‌هوک کپی شد.';
|
||||
} catch {
|
||||
error.value = 'کپی ممکن نشد.';
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<UiPageHeader
|
||||
title="تلفن سازمانی"
|
||||
description="ثبت خودکار تماس‌های سانترال روی پرونده مشتری و اعلان تماس ورودی"
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton variant="secondary" :disabled="loading" @click="load">
|
||||
<UiIcon name="refresh" />
|
||||
بروزرسانی
|
||||
</UiButton>
|
||||
</template>
|
||||
</UiPageHeader>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-if="ok" class="ok">{{ ok }}</p>
|
||||
|
||||
<UiCard title="اتصال جدید">
|
||||
<p class="hint">
|
||||
سانترال یا سرویس VoIP شما باید رویداد تماس را با JSON به آدرس وب‌هوک بفرستد.
|
||||
فیلدهای اصلی:
|
||||
<code>callId</code>،
|
||||
<code>direction</code> (inbound/outbound)،
|
||||
<code>status</code>،
|
||||
<code>from</code>،
|
||||
<code>to</code>.
|
||||
امضا اختیاری با هدر
|
||||
<code>X-Voip-Signature</code>
|
||||
(HMAC-SHA256 هگز).
|
||||
</p>
|
||||
<div class="form-grid">
|
||||
<UiField label="نام">
|
||||
<UiInput v-model="form.label" placeholder="سانترال اصلی" />
|
||||
</UiField>
|
||||
<UiField label="رمز وب‌هوک (اختیاری)">
|
||||
<UiInput v-model="form.webhookSecret" placeholder="برای تأیید امضا" />
|
||||
</UiField>
|
||||
<UiField label="آدرس Click-to-Call (اختیاری)">
|
||||
<UiInput
|
||||
v-model="form.clickToCallUrl"
|
||||
placeholder="https://pbx.example/originate?num={number}"
|
||||
/>
|
||||
</UiField>
|
||||
</div>
|
||||
<UiButton :loading="saving" @click="create">ذخیره اتصال</UiButton>
|
||||
</UiCard>
|
||||
|
||||
<UiCard title="اتصال‌ها">
|
||||
<UiEmptyState
|
||||
v-if="!loading && !items.length"
|
||||
title="اتصالی نیست"
|
||||
description="یک اتصال برای دریافت رویداد تماس بسازید."
|
||||
/>
|
||||
<div v-else class="list">
|
||||
<article v-for="c in items" :key="c.id" class="item">
|
||||
<div>
|
||||
<strong>{{ c.label }}</strong>
|
||||
<p class="muted">
|
||||
تماس‌های ثبت‌شده {{ toFaDigits(c.callCount) }}
|
||||
·
|
||||
{{
|
||||
c.lastEventAt
|
||||
? `آخرین رویداد ${formatJalaliNumeric(new Date(c.lastEventAt))}`
|
||||
: 'هنوز رویدادی نیامده'
|
||||
}}
|
||||
</p>
|
||||
<p v-if="c.clickToCallUrl" class="muted">Click-to-Call فعال</p>
|
||||
<p v-if="c.lastError" class="warn">{{ c.lastError }}</p>
|
||||
</div>
|
||||
<UiButton variant="secondary" @click="remove(c.id)">حذف</UiButton>
|
||||
</article>
|
||||
</div>
|
||||
<div v-if="webhookUrl" class="webhook">
|
||||
<p class="hint">آدرس وب‌هوک:</p>
|
||||
<code>{{ webhookUrl }}</code>
|
||||
<UiButton variant="secondary" @click="copyWebhook">کپی</UiButton>
|
||||
</div>
|
||||
</UiCard>
|
||||
|
||||
<UiCard title="آخرین تماس‌ها">
|
||||
<UiEmptyState
|
||||
v-if="!calls.length"
|
||||
title="تماسی نیست"
|
||||
description="پس از ارسال رویداد از سانترال اینجا دیده می‌شوند."
|
||||
/>
|
||||
<div v-else class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>جهت</th>
|
||||
<th>وضعیت</th>
|
||||
<th>از / به</th>
|
||||
<th>مشتری</th>
|
||||
<th>مدت</th>
|
||||
<th>زمان</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="c in calls" :key="c.id">
|
||||
<td>{{ c.direction === 'outbound' ? 'خروجی' : 'ورودی' }}</td>
|
||||
<td>{{ statusLabel[c.status] ?? c.status }}</td>
|
||||
<td>{{ c.fromNumber || '—' }} → {{ c.toNumber || '—' }}</td>
|
||||
<td>{{ c.personName || '—' }}</td>
|
||||
<td>
|
||||
{{
|
||||
c.durationSec != null
|
||||
? `${toFaDigits(c.durationSec)} ثانیه`
|
||||
: '—'
|
||||
}}
|
||||
</td>
|
||||
<td>{{ formatJalaliNumeric(new Date(c.startedAt)) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</UiCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
.hint,
|
||||
.muted {
|
||||
color: #64748b;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.hint code {
|
||||
background: #f1f5f9;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
margin: 0.75rem 0 1rem;
|
||||
}
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.85rem;
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.webhook {
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: #f8fafc;
|
||||
border-radius: var(--radius);
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.webhook code {
|
||||
word-break: break-all;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.warn {
|
||||
color: #b45309;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.error {
|
||||
color: #b91c1c;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ok {
|
||||
color: #0f766e;
|
||||
font-weight: 600;
|
||||
}
|
||||
.table-wrap {
|
||||
overflow: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
text-align: right;
|
||||
padding: 0.55rem;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
}
|
||||
th {
|
||||
color: #64748b;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user