Connect public lead forms to CRM Leads on submit.
This commit is contained in:
@@ -6,14 +6,17 @@ import { api } from '@/lib/api';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import type {
|
||||
LeadFormDto,
|
||||
LeadFormDuplicateMode,
|
||||
LeadFormFieldDto,
|
||||
LeadFormFieldInput,
|
||||
LeadFormFieldType,
|
||||
LeadFormMapTo,
|
||||
LeadFormSubmissionDto,
|
||||
LeadStageDto,
|
||||
OrgUserDto,
|
||||
PipelineDto,
|
||||
} from '@mento/shared';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
|
||||
type Tab = 'edit' | 'settings' | 'share' | 'responses';
|
||||
type IconName =
|
||||
@@ -30,8 +33,9 @@ const error = ref('');
|
||||
const ok = ref('');
|
||||
const tab = ref<Tab>('edit');
|
||||
const desktopPreviewOpen = ref(false);
|
||||
const publishOpen = ref(false);
|
||||
const advancedOpen = ref(false);
|
||||
const readyOpen = ref<string | null>('personal');
|
||||
const readyOpen = ref<string | null>('lead');
|
||||
const editFieldKey = ref<string | null>(null);
|
||||
const dragKey = ref<string | null>(null);
|
||||
|
||||
@@ -42,15 +46,19 @@ const fields = ref<LeadFormFieldDto[]>([]);
|
||||
const submitLabel = ref('ارسال درخواست');
|
||||
const submitColor = ref('#14b8a6');
|
||||
const isActive = ref(true);
|
||||
const createPerson = ref(true);
|
||||
const createDeal = ref(true);
|
||||
const createLead = ref(true);
|
||||
const createPerson = ref(false);
|
||||
const createDeal = ref(false);
|
||||
const pipelineId = ref('');
|
||||
const leadStageId = ref('');
|
||||
const duplicateMode = ref<LeadFormDuplicateMode>('update');
|
||||
const source = ref('وب‌سایت');
|
||||
const thankYouMessage = ref('');
|
||||
const redirectUrl = ref('');
|
||||
const assigneeIds = ref<string[]>([]);
|
||||
const users = ref<OrgUserDto[]>([]);
|
||||
const pipelines = ref<PipelineDto[]>([]);
|
||||
const leadStages = ref<LeadStageDto[]>([]);
|
||||
const submissions = ref<LeadFormSubmissionDto[]>([]);
|
||||
const coverInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
@@ -75,7 +83,20 @@ const typeLabel: Record<string, string> = Object.fromEntries(
|
||||
|
||||
const readyGroups = [
|
||||
{
|
||||
key: 'personal', title: 'اطلاعات فردی',
|
||||
key: 'lead', title: 'فیلدهای لید',
|
||||
items: [
|
||||
{ label: 'نام فروشگاه / عنوان', fieldType: 'text' as const, mapTo: 'lead.title' as const },
|
||||
{ label: 'نام مخاطب', fieldType: 'text' as const, mapTo: 'lead.contactName' as const },
|
||||
{ label: 'موبایل', fieldType: 'phone' as const, mapTo: 'lead.mobile' as const },
|
||||
{ label: 'تلفن', fieldType: 'phone' as const, mapTo: 'lead.phone' as const },
|
||||
{ label: 'شهر', fieldType: 'text' as const, mapTo: 'lead.city' as const },
|
||||
{ label: 'منطقه', fieldType: 'text' as const, mapTo: 'lead.region' as const },
|
||||
{ label: 'صنف', fieldType: 'text' as const, mapTo: 'lead.trade' as const },
|
||||
{ label: 'توضیحات', fieldType: 'textarea' as const, mapTo: 'lead.notes' as const },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'personal', title: 'اطلاعات فردی (شخص)',
|
||||
items: [
|
||||
{ label: 'نام و نام خانوادگی', fieldType: 'text' as const, mapTo: 'person.fullName' as const },
|
||||
{ label: 'ایمیل', fieldType: 'email' as const, mapTo: 'person.email' as const },
|
||||
@@ -85,27 +106,27 @@ const readyGroups = [
|
||||
{
|
||||
key: 'org', title: 'اطلاعات سازمانی',
|
||||
items: [
|
||||
{ label: 'نام شرکت', fieldType: 'text' as const, mapTo: 'custom' as const },
|
||||
{ label: 'نام شرکت', fieldType: 'text' as const, mapTo: 'lead.title' as const },
|
||||
{ label: 'سمت', fieldType: 'text' as const, mapTo: 'person.position' as const },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'job', title: 'اطلاعات شغلی',
|
||||
items: [{ label: 'عنوان شغلی', fieldType: 'text' as const, mapTo: 'person.position' as const }],
|
||||
},
|
||||
{
|
||||
key: 'market', title: 'سؤالات بازاریابی',
|
||||
items: [{
|
||||
label: 'از کجا آشنا شدید؟', fieldType: 'select' as const, mapTo: 'custom' as const,
|
||||
label: 'از کجا آشنا شدید؟', fieldType: 'select' as const, mapTo: 'lead.source' as const,
|
||||
options: ['سایت', 'اینستاگرام', 'معرفی'],
|
||||
}],
|
||||
},
|
||||
];
|
||||
|
||||
const origin = computed(() => window.location.origin);
|
||||
const publicUrl = computed(() => (form.value ? `${origin.value}${form.value.publicPath}` : ''));
|
||||
const publicBase = computed(() => {
|
||||
const env = String(import.meta.env.VITE_LEAD_FORM_PUBLIC_BASE || '').replace(/\/$/, '');
|
||||
return env || window.location.origin;
|
||||
});
|
||||
const publicUrl = computed(() => (form.value ? `${publicBase.value}${form.value.publicPath}` : ''));
|
||||
const iframeSnippet = computed(
|
||||
() => `<iframe src="${publicUrl.value}" width="100%" height="720" style="border:0;border-radius:16px" title="${name.value}"></iframe>`,
|
||||
() =>
|
||||
`<iframe src="${publicUrl.value}" style="width:100%;min-height:600px;border:0" title="${name.value || 'فرم'}" loading="lazy"></iframe>`,
|
||||
);
|
||||
const qrUrl = computed(() =>
|
||||
`https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encodeURIComponent(publicUrl.value)}`,
|
||||
@@ -114,6 +135,22 @@ const coverSrc = computed(() =>
|
||||
form.value?.hasCover ? `/api/public/forms/${form.value.publicToken}/cover` : '',
|
||||
);
|
||||
const editingField = computed(() => fields.value.find((f) => f.key === editFieldKey.value) ?? null);
|
||||
const conversionRate = computed(() => {
|
||||
const submits = form.value?.submitCount ?? 0;
|
||||
const leads = form.value?.leadCreateCount ?? 0;
|
||||
if (!submits) return '۰٪';
|
||||
return `${toFaDigits(Math.round((leads / submits) * 100))}٪`;
|
||||
});
|
||||
const crmSummary = computed(() => {
|
||||
const parts: string[] = [];
|
||||
if (createLead.value) parts.push('ثبت لید');
|
||||
if (createPerson.value) parts.push('شخص');
|
||||
if (createDeal.value) parts.push('معامله');
|
||||
const stage = leadStages.value.find((s) => s.id === leadStageId.value);
|
||||
if (stage) parts.push(`مرحله: ${stage.name}`);
|
||||
if (source.value) parts.push(`منبع: ${source.value}`);
|
||||
return parts.join(' · ') || 'اتصال CRM تنظیم نشده';
|
||||
});
|
||||
|
||||
function newKey(label: string) {
|
||||
const base = label.replace(/\s+/g, '_').slice(0, 24) || 'field';
|
||||
@@ -123,10 +160,10 @@ function newKey(label: string) {
|
||||
}
|
||||
|
||||
function defaultMap(type: LeadFormFieldType): LeadFormMapTo {
|
||||
if (type === 'email') return 'person.email';
|
||||
if (type === 'phone') return 'person.mobile';
|
||||
if (type === 'text') return 'person.fullName';
|
||||
if (type === 'textarea') return 'deal.notes';
|
||||
if (type === 'email') return 'custom';
|
||||
if (type === 'phone') return 'lead.mobile';
|
||||
if (type === 'text') return 'lead.contactName';
|
||||
if (type === 'textarea') return 'lead.notes';
|
||||
return 'custom';
|
||||
}
|
||||
|
||||
@@ -182,9 +219,12 @@ function applyForm(row: LeadFormDto) {
|
||||
submitLabel.value = row.submitLabel;
|
||||
submitColor.value = row.submitColor;
|
||||
isActive.value = row.isActive;
|
||||
createLead.value = row.createLead;
|
||||
createPerson.value = row.createPerson;
|
||||
createDeal.value = row.createDeal;
|
||||
pipelineId.value = row.pipelineId ?? '';
|
||||
leadStageId.value = row.leadStageId ?? '';
|
||||
duplicateMode.value = (row.duplicateMode as LeadFormDuplicateMode) || 'update';
|
||||
source.value = row.source ?? 'وب‌سایت';
|
||||
thankYouMessage.value = row.thankYouMessage ?? '';
|
||||
redirectUrl.value = row.redirectUrl ?? '';
|
||||
@@ -195,14 +235,16 @@ async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const [fRes, uRes, pRes] = await Promise.all([
|
||||
const [fRes, uRes, pRes, sRes] = await Promise.all([
|
||||
api.get<LeadFormDto>(`/lead-forms/${id.value}`),
|
||||
api.get<OrgUserDto[]>('/users'),
|
||||
api.get<PipelineDto[]>('/pipelines'),
|
||||
api.get<LeadStageDto[]>('/leads/stages'),
|
||||
]);
|
||||
applyForm(fRes.data);
|
||||
users.value = uRes.data;
|
||||
pipelines.value = pRes.data;
|
||||
leadStages.value = sRes.data;
|
||||
} catch {
|
||||
error.value = 'بارگذاری فرم ناموفق بود.';
|
||||
} finally {
|
||||
@@ -219,9 +261,12 @@ async function save() {
|
||||
name: name.value.trim(),
|
||||
description: description.value.trim() || null,
|
||||
isActive: isActive.value,
|
||||
createLead: createLead.value,
|
||||
createPerson: createPerson.value,
|
||||
createDeal: createDeal.value,
|
||||
pipelineId: pipelineId.value || null,
|
||||
leadStageId: leadStageId.value || null,
|
||||
duplicateMode: duplicateMode.value,
|
||||
source: source.value.trim() || null,
|
||||
thankYouMessage: thankYouMessage.value.trim() || null,
|
||||
redirectUrl: redirectUrl.value.trim() || null,
|
||||
@@ -295,6 +340,9 @@ onMounted(load);
|
||||
<a class="btn ghost" :href="form?.publicPath" target="_blank" rel="noopener">
|
||||
<UiIcon name="eye" :size="15" /> پیش‌نمایش
|
||||
</a>
|
||||
<button class="btn ghost" type="button" @click="publishOpen = true">
|
||||
<UiIcon name="megaphone" :size="15" /> انتشار فرم
|
||||
</button>
|
||||
<button class="btn primary" type="button" :disabled="saving" @click="save">
|
||||
<UiIcon name="check" :size="15" /> ذخیره تغییرات
|
||||
</button>
|
||||
@@ -397,8 +445,9 @@ onMounted(load);
|
||||
|
||||
<button class="adv" type="button" @click="advancedOpen = !advancedOpen">تنظیمات پیشرفته</button>
|
||||
<div v-if="advancedOpen" class="adv-box">
|
||||
<label class="chk"><input v-model="createPerson" type="checkbox" /> ساخت شخص</label>
|
||||
<label class="chk"><input v-model="createDeal" type="checkbox" /> ساخت معامله</label>
|
||||
<label class="chk"><input v-model="createLead" type="checkbox" /> ثبت به‌عنوان لید</label>
|
||||
<label class="chk"><input v-model="createPerson" type="checkbox" /> ساخت شخص (اختیاری)</label>
|
||||
<label class="chk"><input v-model="createDeal" type="checkbox" /> ساخت معامله (اختیاری)</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -428,12 +477,21 @@ onMounted(load);
|
||||
</div>
|
||||
|
||||
<section v-else-if="tab === 'settings'" class="panel">
|
||||
<h3 class="panel-title">اتصال به CRM</h3>
|
||||
<label class="chk"><input v-model="isActive" type="checkbox" /> فرم فعال باشد</label>
|
||||
<label class="chk"><input v-model="createLead" type="checkbox" /> ثبت پاسخ به‌عنوان لید</label>
|
||||
<label>مرحله اولیه لید
|
||||
<select v-model="leadStageId">
|
||||
<option value="">اولین مرحله فعال</option>
|
||||
<option v-for="s in leadStages" :key="s.id" :value="s.id">{{ s.name }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>منبع بازاریابی <input v-model="source" /></label>
|
||||
<label>کاریز مقصد
|
||||
<select v-model="pipelineId">
|
||||
<option value="">پیش‌فرض سازمان</option>
|
||||
<option v-for="p in pipelines" :key="p.id" :value="p.id">{{ p.name }}</option>
|
||||
<label>سیاست شماره تکراری
|
||||
<select v-model="duplicateMode">
|
||||
<option value="update">به‌روزرسانی لید موجود</option>
|
||||
<option value="skip">رد کردن (ثبت نشود)</option>
|
||||
<option value="activity">فقط ثبت رویداد روی لید موجود</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>پیام تشکر <input v-model="thankYouMessage" /></label>
|
||||
@@ -451,10 +509,25 @@ onMounted(load);
|
||||
{{ u.fullName }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h3 class="panel-title">مسیر اختیاری شخص / معامله</h3>
|
||||
<label class="chk"><input v-model="createPerson" type="checkbox" /> ساخت شخص</label>
|
||||
<label class="chk"><input v-model="createDeal" type="checkbox" /> ساخت معامله</label>
|
||||
<label>کاریز مقصد (برای معامله)
|
||||
<select v-model="pipelineId">
|
||||
<option value="">پیش‌فرض سازمان</option>
|
||||
<option v-for="p in pipelines" :key="p.id" :value="p.id">{{ p.name }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<button class="btn primary" type="button" @click="save">ذخیره تنظیمات</button>
|
||||
</section>
|
||||
|
||||
<section v-else-if="tab === 'share'" class="panel">
|
||||
<div class="share-actions">
|
||||
<button class="btn primary" type="button" @click="publishOpen = true">
|
||||
<UiIcon name="megaphone" :size="15" /> باز کردن مودال انتشار
|
||||
</button>
|
||||
</div>
|
||||
<label>لینک عمومی
|
||||
<div class="row">
|
||||
<input :value="publicUrl" readonly />
|
||||
@@ -463,17 +536,31 @@ onMounted(load);
|
||||
</label>
|
||||
<label>کد iframe
|
||||
<div class="row">
|
||||
<input :value="iframeSnippet" readonly />
|
||||
<textarea class="iframe-code" :value="iframeSnippet" readonly rows="3" />
|
||||
<button class="btn ghost" type="button" @click="copyText(iframeSnippet)">کپی</button>
|
||||
</div>
|
||||
</label>
|
||||
<img v-if="publicUrl" :src="qrUrl" alt="QR" width="140" height="140" />
|
||||
<p class="crm-hint">{{ crmSummary }}</p>
|
||||
<button class="link" type="button" @click="tab = 'settings'">ویرایش اتصال CRM</button>
|
||||
</section>
|
||||
|
||||
<section v-else class="panel">
|
||||
<div v-if="form" class="stats-grid">
|
||||
<div class="stat"><b>{{ toFaDigits(form.viewCount) }}</b><span>بازدید</span></div>
|
||||
<div class="stat"><b>{{ toFaDigits(form.startCount) }}</b><span>شروع پر کردن</span></div>
|
||||
<div class="stat"><b>{{ toFaDigits(form.submitCount) }}</b><span>ارسال</span></div>
|
||||
<div class="stat"><b>{{ toFaDigits(form.leadCreateCount) }}</b><span>لید جدید</span></div>
|
||||
<div class="stat"><b>{{ toFaDigits(form.duplicateCount) }}</b><span>تکراری</span></div>
|
||||
<div class="stat"><b>{{ conversionRate }}</b><span>نرخ submit→lead</span></div>
|
||||
</div>
|
||||
<p v-if="!submissions.length">هنوز پاسخی ثبت نشده.</p>
|
||||
<article v-for="s in submissions" :key="s.id" class="sub">
|
||||
<small>{{ new Date(s.createdAt).toLocaleString('fa-IR') }}</small>
|
||||
<small>
|
||||
{{ new Date(s.createdAt).toLocaleString('fa-IR') }}
|
||||
<span v-if="s.status"> · {{ s.status }}</span>
|
||||
<span v-if="s.leadId"> · لید</span>
|
||||
</small>
|
||||
<p v-for="(val, key) in s.values" :key="key"><b>{{ key }}:</b> {{ val }}</p>
|
||||
</article>
|
||||
</section>
|
||||
@@ -527,16 +614,31 @@ onMounted(load);
|
||||
<label class="chk"><input v-model="editingField.required" type="checkbox" /> الزامی</label>
|
||||
<label>اتصال به
|
||||
<select v-model="editingField.mapTo">
|
||||
<option value="person.fullName">نام کامل</option>
|
||||
<option value="person.firstName">نام</option>
|
||||
<option value="person.lastName">نام خانوادگی</option>
|
||||
<option value="person.mobile">موبایل</option>
|
||||
<option value="person.email">ایمیل</option>
|
||||
<option value="person.phone">تلفن</option>
|
||||
<option value="person.position">سمت</option>
|
||||
<option value="deal.title">عنوان معامله</option>
|
||||
<option value="deal.notes">یادداشت معامله</option>
|
||||
<option value="notes">یادداشت شخص</option>
|
||||
<optgroup label="لید">
|
||||
<option value="lead.title">عنوان / نام فروشگاه</option>
|
||||
<option value="lead.contactName">نام مخاطب</option>
|
||||
<option value="lead.mobile">موبایل لید</option>
|
||||
<option value="lead.phone">تلفن لید</option>
|
||||
<option value="lead.city">شهر</option>
|
||||
<option value="lead.region">منطقه</option>
|
||||
<option value="lead.trade">صنف</option>
|
||||
<option value="lead.notes">یادداشت لید</option>
|
||||
<option value="lead.source">منبع لید</option>
|
||||
</optgroup>
|
||||
<optgroup label="شخص">
|
||||
<option value="person.fullName">نام کامل</option>
|
||||
<option value="person.firstName">نام</option>
|
||||
<option value="person.lastName">نام خانوادگی</option>
|
||||
<option value="person.mobile">موبایل</option>
|
||||
<option value="person.email">ایمیل</option>
|
||||
<option value="person.phone">تلفن</option>
|
||||
<option value="person.position">سمت</option>
|
||||
</optgroup>
|
||||
<optgroup label="معامله">
|
||||
<option value="deal.title">عنوان معامله</option>
|
||||
<option value="deal.notes">یادداشت معامله</option>
|
||||
</optgroup>
|
||||
<option value="notes">یادداشت</option>
|
||||
<option value="custom">فقط در پاسخ فرم</option>
|
||||
</select>
|
||||
</label>
|
||||
@@ -551,6 +653,41 @@ onMounted(load);
|
||||
<button class="btn primary" type="button" @click="editFieldKey = null">تمام</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="publishOpen" class="overlay" @click.self="publishOpen = false">
|
||||
<div class="sheet publish-sheet" role="dialog" aria-label="انتشار فرم">
|
||||
<header class="publish-head">
|
||||
<strong>انتشار فرم</strong>
|
||||
<button class="btn ghost" type="button" @click="publishOpen = false">بستن</button>
|
||||
</header>
|
||||
<div class="publish-preview">
|
||||
<div class="mini-cover" :style="{ background: submitColor }">
|
||||
<img v-if="coverSrc" :src="coverSrc" alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<h4>{{ name || 'فرم' }}</h4>
|
||||
<p>{{ crmSummary }}</p>
|
||||
<a :href="form?.publicPath" target="_blank" rel="noopener">باز کردن پیش‌نمایش</a>
|
||||
</div>
|
||||
</div>
|
||||
<label>لینک مستقیم
|
||||
<div class="row">
|
||||
<input :value="publicUrl" readonly />
|
||||
<button class="btn ghost" type="button" @click="copyText(publicUrl)">کپی</button>
|
||||
</div>
|
||||
</label>
|
||||
<label>کد iframe ریسپانسیو
|
||||
<div class="row col">
|
||||
<textarea class="iframe-code" :value="iframeSnippet" readonly rows="3" />
|
||||
<button class="btn ghost" type="button" @click="copyText(iframeSnippet)">کپی iframe</button>
|
||||
</div>
|
||||
</label>
|
||||
<img v-if="publicUrl" class="publish-qr" :src="qrUrl" alt="QR" width="120" height="120" />
|
||||
<button class="link" type="button" @click="publishOpen = false; tab = 'settings'">
|
||||
تنظیم اتصال CRM
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -637,6 +774,48 @@ h1 :deep(.ico) { color: var(--teal); }
|
||||
.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); display: grid; place-items: center; z-index: 40; padding: 1rem; }
|
||||
.sheet { width: min(420px,100%); background: #fff; border-radius: var(--radius); padding: 1rem; display: grid; gap: 0.65rem; }
|
||||
.link { background: none; border: 0; color: #0f766e; font: inherit; font-weight: 700; cursor: pointer; }
|
||||
.panel-title { margin: 0.4rem 0 0; font-size: 0.95rem; color: #0f766e; }
|
||||
.share-actions { display: flex; gap: 0.4rem; }
|
||||
.iframe-code { flex: 1; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 0.55rem 0.7rem; font: inherit; width: 100%; resize: vertical; }
|
||||
.row.col { flex-direction: column; align-items: stretch; }
|
||||
.crm-hint { margin: 0; color: #64748b; font-size: 0.85rem; }
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
|
||||
gap: 0.55rem;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
.stat {
|
||||
background: #f0fdfa;
|
||||
border: 1px solid #ccfbf1;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.65rem 0.7rem;
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
.stat b { font-size: 1.15rem; color: #0f766e; }
|
||||
.stat span { font-size: 0.75rem; color: #64748b; }
|
||||
.publish-sheet { width: min(520px, 100%); gap: 0.75rem; }
|
||||
.publish-head { display: flex; justify-content: space-between; align-items: center; }
|
||||
.publish-preview {
|
||||
display: grid;
|
||||
grid-template-columns: 72px 1fr;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding: 0.65rem;
|
||||
background: #f8fafc;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.publish-preview h4 { margin: 0 0 0.25rem; }
|
||||
.publish-preview p { margin: 0 0 0.35rem; color: #64748b; font-size: 0.82rem; }
|
||||
.mini-cover {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.mini-cover img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.publish-qr { justify-self: start; border-radius: 8px; }
|
||||
@media (max-width: 1100px) {
|
||||
.workspace { grid-template-columns: 1fr; }
|
||||
.preview-col { order: 3; }
|
||||
|
||||
@@ -10,14 +10,47 @@ const saving = ref(false);
|
||||
const error = ref('');
|
||||
const done = ref(false);
|
||||
const thankYou = ref('');
|
||||
const started = ref(false);
|
||||
const form = ref<PublicLeadFormDto | null>(null);
|
||||
const values = reactive<Record<string, string>>({});
|
||||
const honeypot = ref('');
|
||||
const token = String(route.params.token || '');
|
||||
|
||||
const coverUrl = computed(() =>
|
||||
form.value?.coverPath || (form.value?.hasCover ? `/api/public/forms/${token}/cover` : ''),
|
||||
);
|
||||
|
||||
function readUtm() {
|
||||
const q = route.query;
|
||||
const pick = (key: string) => {
|
||||
const v = q[key];
|
||||
return typeof v === 'string' ? v : Array.isArray(v) ? String(v[0] || '') : '';
|
||||
};
|
||||
return {
|
||||
source: pick('utm_source'),
|
||||
medium: pick('utm_medium'),
|
||||
campaign: pick('utm_campaign'),
|
||||
term: pick('utm_term'),
|
||||
content: pick('utm_content'),
|
||||
landingPage: typeof window !== 'undefined' ? window.location.href : '',
|
||||
referrer: typeof document !== 'undefined' ? document.referrer : '',
|
||||
};
|
||||
}
|
||||
|
||||
async function postEvent(type: 'view' | 'start') {
|
||||
try {
|
||||
await axios.post(`/api/public/forms/${token}/event`, { type });
|
||||
} catch {
|
||||
/* ignore analytics errors */
|
||||
}
|
||||
}
|
||||
|
||||
function onFieldFocus() {
|
||||
if (started.value) return;
|
||||
started.value = true;
|
||||
void postEvent('start');
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
@@ -28,6 +61,7 @@ async function load() {
|
||||
if (field.fieldType === 'heading') continue;
|
||||
values[field.key] = values[field.key] ?? '';
|
||||
}
|
||||
void postEvent('view');
|
||||
} catch {
|
||||
error.value = 'این فرم پیدا نشد یا غیرفعال است.';
|
||||
form.value = null;
|
||||
@@ -52,11 +86,21 @@ async function submit() {
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const utm = readUtm();
|
||||
const { data } = await axios.post<SubmitLeadFormResponse>(
|
||||
`/api/public/forms/${token}/submit`,
|
||||
{ values: { ...values } },
|
||||
{
|
||||
values: { ...values },
|
||||
utm,
|
||||
pageUrl: window.location.href,
|
||||
referrer: document.referrer || undefined,
|
||||
website: honeypot.value,
|
||||
},
|
||||
);
|
||||
thankYou.value = data.thankYouMessage || 'ثبت شد. متشکریم.';
|
||||
thankYou.value =
|
||||
data.message ||
|
||||
data.thankYouMessage ||
|
||||
'ثبت شد. متشکریم.';
|
||||
done.value = true;
|
||||
if (data.redirectUrl) window.location.assign(data.redirectUrl);
|
||||
} catch (e) {
|
||||
@@ -95,9 +139,14 @@ onMounted(load);
|
||||
</div>
|
||||
|
||||
<form v-else-if="form" class="fields" @submit.prevent="submit">
|
||||
<!-- honeypot -->
|
||||
<label class="hp" aria-hidden="true">
|
||||
وب‌سایت
|
||||
<input v-model="honeypot" type="text" tabindex="-1" autocomplete="off" />
|
||||
</label>
|
||||
<template v-for="field in form.fields" :key="field.key">
|
||||
<p v-if="field.fieldType === 'heading'" class="heading">{{ field.label }}</p>
|
||||
<label v-else>
|
||||
<label v-else @focusin="onFieldFocus">
|
||||
{{ field.label }}
|
||||
<span v-if="field.required" class="req">*</span>
|
||||
<textarea
|
||||
@@ -200,4 +249,11 @@ input, textarea, select {
|
||||
.stars button { border: 0; background: none; font-size: 1.3rem; color: #cbd5e1; cursor: pointer; }
|
||||
.stars button.on { color: #eab308; }
|
||||
.heading { margin: 0; font-weight: 700; color: #0f172a; }
|
||||
.hp {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -43,8 +43,10 @@ async function createForm() {
|
||||
name: 'درخواست مشاوره',
|
||||
description: 'فرم دریافت درخواست مشاوره مشتریان',
|
||||
source: 'وب‌سایت',
|
||||
createPerson: true,
|
||||
createDeal: true,
|
||||
createLead: true,
|
||||
createPerson: false,
|
||||
createDeal: false,
|
||||
duplicateMode: 'update',
|
||||
});
|
||||
await router.push({ name: 'lead-form-builder', params: { id: data.id } });
|
||||
} catch {
|
||||
@@ -60,6 +62,16 @@ async function removeForm(form: LeadFormDto) {
|
||||
await load();
|
||||
}
|
||||
|
||||
function publicUrl(form: LeadFormDto) {
|
||||
const base = String(import.meta.env.VITE_LEAD_FORM_PUBLIC_BASE || '').replace(/\/$/, '')
|
||||
|| window.location.origin;
|
||||
return `${base}${form.publicPath}`;
|
||||
}
|
||||
|
||||
async function copyPublishLink(form: LeadFormDto) {
|
||||
await navigator.clipboard.writeText(publicUrl(form));
|
||||
}
|
||||
|
||||
const countLabel = computed(() => toFaDigits(forms.value.length));
|
||||
|
||||
onMounted(load);
|
||||
@@ -69,7 +81,7 @@ onMounted(load);
|
||||
<section class="crm-page lead-forms-page" dir="rtl">
|
||||
<UiPageHeader
|
||||
title="فرم‌ساز وب"
|
||||
description="فرم‌های آنلاین بسازید، فیلدها را بچینید و لیدها را به صورت خودکار در کاریز و باشگاه مشتریان دریافت کنید."
|
||||
description="فرم‌های آنلاین بسازید، در وب‌سایت منتشر کنید و لیدها را مستقیم در CRM دریافت کنید."
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton :loading="saving" @click="createForm">
|
||||
@@ -115,7 +127,9 @@ onMounted(load);
|
||||
<p class="form-meta">
|
||||
<span>{{ toFaDigits(form.fields.length) }} فیلد سفارشی</span>
|
||||
<span class="meta-dot">·</span>
|
||||
<span>{{ toFaDigits(form.submissionCount ?? 0) }} ارسال شده</span>
|
||||
<span>{{ toFaDigits(form.submitCount ?? form.submissionCount ?? 0) }} ارسال</span>
|
||||
<span class="meta-dot">·</span>
|
||||
<span>{{ toFaDigits(form.leadCreateCount ?? 0) }} لید</span>
|
||||
<span v-if="form.source" class="meta-dot">·</span>
|
||||
<span v-if="form.source">منبع: {{ form.source }}</span>
|
||||
</p>
|
||||
@@ -131,6 +145,13 @@ onMounted(load);
|
||||
</UiButton>
|
||||
</RouterLink>
|
||||
|
||||
<UiButton variant="secondary" size="sm" @click="copyPublishLink(form)">
|
||||
<template #icon>
|
||||
<UiIcon name="megaphone" />
|
||||
</template>
|
||||
کپی لینک انتشار
|
||||
</UiButton>
|
||||
|
||||
<a :href="form.publicPath" target="_blank" rel="noopener" class="preview-link">
|
||||
<UiButton variant="ghost" size="sm">
|
||||
<template #icon>
|
||||
|
||||
Reference in New Issue
Block a user