6 lines
2.7 KiB
JavaScript
6 lines
2.7 KiB
JavaScript
'use client';
|
|
import { useState } from 'react';
|
|
import { ArrowUpLeft, CheckCircle2, X } from 'lucide-react';
|
|
import { apiUrl, SITE_DOMAIN } from '../lib/meshkee-api';
|
|
export default function ContactForm(){const [state,setState]=useState({type:'',message:''});const [pending,setPending]=useState(false);async function submit(event){event.preventDefault();const form=event.currentTarget;setPending(true);setState({type:'',message:''});const values=new FormData(form);try{const response=await fetch(apiUrl(`/tenants/${SITE_DOMAIN}/contact-submissions`),{method:'POST',headers:{'Content-Type':'application/json',Accept:'application/json'},body:JSON.stringify({title:values.get('subject'),name:values.get('name'),email:values.get('email')||undefined,cellNumber:values.get('phone')||undefined,text:values.get('message')})});const data=await response.json().catch(()=>({}));if(!response.ok)throw new Error(data.message||'ارسال پیام انجام نشد. لطفاً دوباره تلاش کنید.');form.reset();setState({type:'success',message:data.message||'پیام شما با موفقیت ثبت شد. به‌زودی با شما تماس می‌گیریم.'});}catch(error){setState({type:'error',message:error.message||'ارتباط با سرور برقرار نشد. لطفاً دوباره تلاش کنید.'});}finally{setPending(false)}}return <><form className="contact-form" onSubmit={submit}><div className="form-grid"><label>نام و نام خانوادگی<input name="name" required autoComplete="name" placeholder="نام شما"/></label><label>شمارهٔ همراه<input name="phone" type="tel" autoComplete="tel" inputMode="tel" placeholder="۰۹۱۲ ..."/></label><label>ایمیل<input name="email" type="email" autoComplete="email" placeholder="name@example.com" dir="ltr"/></label><label>موضوع<input name="subject" required placeholder="موضوع پروژه یا درخواست شما"/></label></div><label>پیام شما<textarea name="message" required rows={5} placeholder="از ایده‌ها و نیازهای پروژهٔ خود برایمان بنویسید."/></label><div className="form-bottom"><p className="form-note">پیام شما مستقیماً برای گروه معماری ساناز گودرزی ثبت می‌شود.</p><button disabled={pending} type="submit" className="button button-dark">{pending?'در حال ارسال…':'ارسال پیام'} <ArrowUpLeft size={18}/></button></div><p role="status" className={`form-status ${state.type}`}>{state.message}</p></form>{state.type==='success'&&<div className="toast" role="status"><CheckCircle2/><span>{state.message}</span><button onClick={()=>setState({type:'',message:''})} aria-label="بستن پیام"><X/></button></div>}</>}
|