287 lines
14 KiB
TypeScript
287 lines
14 KiB
TypeScript
import React, { useState } from 'react'
|
||
import { CheckCircle2Icon, MailIcon, MapPinIcon, PhoneIcon } from 'lucide-react'
|
||
import Swal from 'sweetalert2'
|
||
import { Reveal } from './Reveal'
|
||
import { PremiumButton } from './PremiumButton'
|
||
import { useSite } from '../api'
|
||
import { useLang } from '../i18n/lang'
|
||
import { useFieldSaver } from '../admin/AdminContext'
|
||
import { InlineEdit } from './admin/InlineEdit'
|
||
import { SingletonPill } from '../admin/Editable'
|
||
import { API_URL } from '../config'
|
||
import { track } from '../analytics'
|
||
|
||
export function ContactSection() {
|
||
const { brand, contact_section: content } = useSite()
|
||
const { t } = useLang()
|
||
const save = useFieldSaver()
|
||
const [form, setForm] = useState({ name: '', phone: '', note: '', website: '' })
|
||
const [sent, setSent] = useState(false)
|
||
const [sending, setSending] = useState(false)
|
||
|
||
const saveContent = (field: string, value: string) =>
|
||
save('contact-section', content.id, { [field]: value }, (d) => {
|
||
;(d.contact_section as unknown as Record<string, unknown>)[field] = value
|
||
})
|
||
|
||
const saveBrand = (field: string, value: string) =>
|
||
save('brand', brand.id, { [field]: value }, (d) => {
|
||
;(d.brand as unknown as Record<string, unknown>)[field] = value
|
||
})
|
||
|
||
const showErrorAlert = (title: string, text: string) => {
|
||
Swal.fire({
|
||
icon: 'warning',
|
||
title: title,
|
||
text: text,
|
||
background: '#1e1a16',
|
||
color: '#F5F3EF',
|
||
iconColor: '#d5874c',
|
||
confirmButtonText: t('understood'),
|
||
buttonsStyling: false,
|
||
customClass: {
|
||
container: 'backdrop-blur-md bg-ink/70',
|
||
popup: 'font-pinar border border-white/10 rounded-2xl shadow-2xl backdrop-blur-xl bg-char/95',
|
||
title: 'font-pinar font-bold text-lg text-ivory pt-2',
|
||
htmlContainer: 'font-pinar font-light text-sm leading-8 text-ivory/70',
|
||
confirmButton: 'mt-6 rounded-full bg-copper text-char font-bold px-10 py-3 transition-all duration-300 ease-lux hover:scale-105 hover:shadow-[0_0_20px_rgba(197,143,92,0.5)]',
|
||
},
|
||
showClass: {
|
||
popup: 'swal2-show',
|
||
backdrop: 'swal2-backdrop-show',
|
||
},
|
||
hideClass: {
|
||
popup: 'swal2-hide',
|
||
backdrop: 'swal2-backdrop-hide',
|
||
},
|
||
})
|
||
}
|
||
|
||
const submit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
if (sending) return
|
||
|
||
const nameValue = form.name.trim()
|
||
const phoneValue = form.phone.trim()
|
||
|
||
if (nameValue.length < 3) {
|
||
showErrorAlert(t('incompleteInfo'), t('nameRequired'))
|
||
return
|
||
}
|
||
|
||
const phoneRegex = /^[\d۰-۹\+\-\s]{8,15}$/
|
||
if (!phoneValue || !phoneRegex.test(phoneValue)) {
|
||
showErrorAlert(t('phoneInvalidTitle'), t('phoneInvalidText'))
|
||
return
|
||
}
|
||
|
||
setSending(true)
|
||
try {
|
||
const res = await fetch(`${API_URL}/api/contact`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ name: nameValue, phone: phoneValue, note: form.note.trim(), website: form.website }),
|
||
})
|
||
|
||
if (!res.ok) {
|
||
const data = await res.json().catch(() => null)
|
||
const detail =
|
||
typeof data?.detail === 'string' ? data.detail : t('formCheck')
|
||
showErrorAlert(t('submitErrorTitle'), detail)
|
||
return
|
||
}
|
||
|
||
track('contact-submit')
|
||
setSent(true)
|
||
} catch {
|
||
showErrorAlert(t('connectionErrorTitle'), t('connectionErrorText'))
|
||
} finally {
|
||
setSending(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<section id="contact" className="relative overflow-hidden py-24 lg:py-32" aria-labelledby="contact-title">
|
||
<img
|
||
src={brand.contact_bg}
|
||
alt=""
|
||
aria-hidden="true"
|
||
className="absolute inset-0 h-full w-full object-cover"
|
||
/>
|
||
<div className="absolute inset-0 bg-ink/75 backdrop-blur-[2px]" />
|
||
|
||
<div className="relative mx-auto max-w-site px-6 lg:px-10">
|
||
<div className="mx-auto grid max-w-6xl items-stretch gap-8 lg:grid-cols-12">
|
||
|
||
{/* باکس اطلاعات تماس */}
|
||
<div className="rounded-3xl border border-white/10 bg-char/60 p-8 backdrop-blur-2xl shadow-[0_20px_50px_rgba(0,0,0,0.4),inset_0_1px_1px_rgba(255,255,255,0.15)] md:p-10 lg:col-span-5">
|
||
<Reveal>
|
||
<p className="text-sm font-light tracking-wide text-copper">
|
||
<InlineEdit value={content.label} onSave={(v) => saveContent('label', v)} />
|
||
</p>
|
||
<h2 id="contact-title" className="mt-4 text-section font-bold text-ivory">
|
||
<InlineEdit value={content.title} onSave={(v) => saveContent('title', v)} />
|
||
</h2>
|
||
<p className="mt-5 text-base font-light leading-9 text-ivory/75">
|
||
<InlineEdit multiline value={content.lead} onSave={(v) => saveContent('lead', v)} />
|
||
</p>
|
||
</Reveal>
|
||
|
||
<Reveal delay={0.1}>
|
||
<ul className="mt-10 space-y-6">
|
||
<li className="flex items-start gap-4">
|
||
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-copper/30 bg-copper/10 text-copper shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]">
|
||
<MapPinIcon className="h-5 w-5" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-bold text-ivory">
|
||
<InlineEdit value={content.address_label} onSave={(v) => saveContent('address_label', v)} />
|
||
</p>
|
||
<p className="mt-1 text-sm font-light leading-7 text-ivory/70">
|
||
<InlineEdit value={brand.address} onSave={(v) => saveBrand('address', v)} />
|
||
</p>
|
||
</div>
|
||
</li>
|
||
|
||
<li className="flex items-start gap-4">
|
||
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-copper/30 bg-copper/10 text-copper shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]">
|
||
<PhoneIcon className="h-5 w-5" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-bold text-ivory">
|
||
<InlineEdit value={content.phone_label} onSave={(v) => saveContent('phone_label', v)} />
|
||
</p>
|
||
<a
|
||
href={brand.phone_href}
|
||
dir="ltr"
|
||
onClick={() => track('phone-click', { from: 'contact-section' })}
|
||
className="mt-1 block text-sm font-light text-ivory/70 transition-colors hover:text-copper"
|
||
>
|
||
<InlineEdit value={brand.phone} onSave={(v) => saveBrand('phone', v)} />
|
||
</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li className="flex items-start gap-4">
|
||
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-copper/30 bg-copper/10 text-copper shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]">
|
||
<MailIcon className="h-5 w-5" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-bold text-ivory">
|
||
<InlineEdit value={content.email_label} onSave={(v) => saveContent('email_label', v)} />
|
||
</p>
|
||
<a
|
||
href={`mailto:${brand.email}`}
|
||
dir="ltr"
|
||
className="mt-1 block text-sm font-light text-ivory/70 transition-colors hover:text-copper"
|
||
>
|
||
<InlineEdit value={brand.email} onSave={(v) => saveBrand('email', v)} />
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</Reveal>
|
||
</div>
|
||
|
||
{/* باکس فرم ارسال درخواست */}
|
||
<div className="relative rounded-3xl border border-white/10 bg-char/60 p-8 backdrop-blur-2xl shadow-[0_20px_50px_rgba(0,0,0,0.4),inset_0_1px_1px_rgba(255,255,255,0.15)] md:p-10 lg:col-span-7">
|
||
<SingletonPill resource="contact_section" label="ویرایش برچسبها و متنهای فرم" className="absolute left-4 top-4" />
|
||
{sent ? (
|
||
<div className="flex h-full flex-col items-center justify-center py-14 text-center">
|
||
<div className="flex h-16 w-16 items-center justify-center rounded-full border border-copper/40 bg-copper/15 text-copper shadow-[0_0_30px_rgba(197,143,92,0.4)]">
|
||
<CheckCircle2Icon className="h-8 w-8" />
|
||
</div>
|
||
<h3 className="mt-6 text-xl font-bold text-ivory">
|
||
<InlineEdit value={content.success_title} onSave={(v) => saveContent('success_title', v)} />
|
||
</h3>
|
||
<p className="mt-3 max-w-sm text-sm font-light leading-8 text-ivory/70">
|
||
<InlineEdit multiline value={content.success_text} onSave={(v) => saveContent('success_text', v)} />
|
||
</p>
|
||
<PremiumButton
|
||
onClick={() => {
|
||
setSent(false)
|
||
setForm({ name: '', phone: '', note: '', website: '' })
|
||
}}
|
||
className="mt-8 font-light"
|
||
>
|
||
<InlineEdit value={content.success_button_label} onSave={(v) => saveContent('success_button_label', v)} />
|
||
</PremiumButton>
|
||
</div>
|
||
) : (
|
||
<form onSubmit={submit} noValidate className="grid gap-6 md:grid-cols-2">
|
||
{/* honeypot — خارج از دید؛ فقط رباتها آن را پر میکنند */}
|
||
<input
|
||
type="text"
|
||
name="website"
|
||
value={form.website}
|
||
onChange={(e) => setForm({ ...form, website: e.target.value })}
|
||
tabIndex={-1}
|
||
autoComplete="off"
|
||
aria-hidden="true"
|
||
className="pointer-events-none absolute -left-[9999px] h-0 w-0 opacity-0"
|
||
/>
|
||
<div>
|
||
<label htmlFor="contact-name" className="block text-sm font-medium text-ivory/90">
|
||
<InlineEdit value={content.name_label} onSave={(v) => saveContent('name_label', v)} />
|
||
</label>
|
||
<input
|
||
id="contact-name"
|
||
type="text"
|
||
value={form.name}
|
||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||
placeholder={content.name_placeholder}
|
||
className="mt-3 w-full rounded-2xl border border-white/10 bg-ink/60 px-5 py-3.5 text-sm font-light text-ivory placeholder:text-ivory/35 backdrop-blur-md transition-all duration-300 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] focus:border-copper/70 focus:bg-ink/80 focus:shadow-[0_0_15px_rgba(197,143,92,0.25)] focus:outline-none"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label htmlFor="contact-phone" className="block text-sm font-medium text-ivory/90">
|
||
<InlineEdit value={content.phone_field_label} onSave={(v) => saveContent('phone_field_label', v)} /> <span className="text-copper">*</span>
|
||
</label>
|
||
<input
|
||
id="contact-phone"
|
||
type="tel"
|
||
dir="ltr"
|
||
required
|
||
value={form.phone}
|
||
onChange={(e) => setForm({ ...form, phone: e.target.value })}
|
||
placeholder={content.phone_placeholder}
|
||
className="mt-3 w-full rounded-2xl border border-white/10 bg-ink/60 px-5 py-3.5 text-sm font-light ltr:text-left rtl:text-right text-ivory placeholder:text-ivory/35 backdrop-blur-md transition-all duration-300 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] focus:border-copper/70 focus:bg-ink/80 focus:shadow-[0_0_15px_rgba(197,143,92,0.25)] focus:outline-none"
|
||
/>
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label htmlFor="contact-note" className="block text-sm font-medium text-ivory/90">
|
||
<InlineEdit value={content.note_label} onSave={(v) => saveContent('note_label', v)} /> <span className="font-light text-ivory/50">{content.note_optional_label}</span>
|
||
</label>
|
||
<textarea
|
||
id="contact-note"
|
||
rows={5}
|
||
value={form.note}
|
||
onChange={(e) => setForm({ ...form, note: e.target.value })}
|
||
placeholder={content.note_placeholder}
|
||
className="mt-3 w-full resize-none rounded-2xl border border-white/10 bg-ink/60 px-5 py-3.5 text-sm font-light leading-8 text-ivory placeholder:text-ivory/35 backdrop-blur-md transition-all duration-300 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] focus:border-copper/70 focus:bg-ink/80 focus:shadow-[0_0_15px_rgba(197,143,92,0.25)] focus:outline-none"
|
||
/>
|
||
</div>
|
||
|
||
<div className="md:col-span-2 flex justify-start">
|
||
<PremiumButton
|
||
type="submit"
|
||
className="w-full md:w-auto md:px-12 flex items-center justify-center gap-3"
|
||
disabled={sending}
|
||
>
|
||
{sending ? (
|
||
content.sending_label
|
||
) : (
|
||
<InlineEdit value={content.submit_label} onSave={(v) => saveContent('submit_label', v)} />
|
||
)}
|
||
</PremiumButton>
|
||
</div>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
} |