311 lines
12 KiB
TypeScript
311 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import React, { useEffect, useState } from "react"
|
|
import { useLanguage } from "@/lib/language-context"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Card } from "@/components/ui/card"
|
|
import { Send, CheckCircle2, AlertCircle } from "lucide-react"
|
|
|
|
declare global {
|
|
interface Window {
|
|
grecaptcha?: {
|
|
ready: (cb: () => void) => void
|
|
execute: (siteKey: string, options: { action: string }) => Promise<string>
|
|
}
|
|
}
|
|
}
|
|
|
|
export default function ContactForm() {
|
|
const { t, language } = useLanguage()
|
|
const siteKey =
|
|
process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY ||
|
|
"6LfqD1osAAAAANd6P-3qin0cRdFQSGX92F02A3dE"
|
|
const recaptchaAction = "contact_form"
|
|
const defaultService = t.contactPage.form.serviceOptions.airport
|
|
const [recaptchaReady, setRecaptchaReady] = useState(false)
|
|
|
|
const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
email: "",
|
|
phone: "",
|
|
service: defaultService,
|
|
message: "",
|
|
consent: false
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (!siteKey) return
|
|
const scriptId = "recaptcha-v3"
|
|
const onReady = () => {
|
|
window.grecaptcha?.ready(() => setRecaptchaReady(true))
|
|
}
|
|
|
|
if (document.getElementById(scriptId)) {
|
|
onReady()
|
|
return
|
|
}
|
|
|
|
const script = document.createElement("script")
|
|
script.id = scriptId
|
|
script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`
|
|
script.async = true
|
|
script.defer = true
|
|
script.onload = onReady
|
|
script.onerror = () => setRecaptchaReady(false)
|
|
document.head.appendChild(script)
|
|
}, [siteKey])
|
|
|
|
useEffect(() => {
|
|
setFormData(prev => (
|
|
prev.service === defaultService
|
|
? prev
|
|
: { ...prev, service: defaultService }
|
|
))
|
|
}, [defaultService])
|
|
|
|
const waitForRecaptcha = (timeoutMs = 4000) =>
|
|
new Promise<void>((resolve, reject) => {
|
|
const started = Date.now()
|
|
const tick = () => {
|
|
if (window.grecaptcha) {
|
|
window.grecaptcha.ready(() => resolve())
|
|
return
|
|
}
|
|
if (Date.now() - started >= timeoutMs) {
|
|
reject(new Error("reCAPTCHA not ready"))
|
|
return
|
|
}
|
|
setTimeout(tick, 150)
|
|
}
|
|
tick()
|
|
})
|
|
|
|
const getRecaptchaToken = async () => {
|
|
if (!window.grecaptcha) {
|
|
throw new Error("reCAPTCHA not ready")
|
|
}
|
|
return new Promise<string>((resolve, reject) => {
|
|
window.grecaptcha?.ready(() => {
|
|
window.grecaptcha
|
|
?.execute(siteKey, { action: recaptchaAction })
|
|
.then(resolve)
|
|
.catch(reject)
|
|
})
|
|
})
|
|
}
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
|
const { name, value, type } = e.target as any
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: type === "checkbox" ? (e.target as HTMLInputElement).checked : value
|
|
}))
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
if (!recaptchaReady) {
|
|
try {
|
|
await waitForRecaptcha()
|
|
setRecaptchaReady(true)
|
|
} catch {
|
|
alert(t.contactPage.form.recaptchaNotReady)
|
|
return
|
|
}
|
|
}
|
|
|
|
if (!formData.consent) {
|
|
alert(t.contactPage.form.consentRequired)
|
|
return
|
|
}
|
|
|
|
setStatus("loading")
|
|
|
|
try {
|
|
// In a static export environment, this would hit a PHP script on the server
|
|
// or an external API. Here we assume an API route for local testing.
|
|
const recaptchaToken = await getRecaptchaToken()
|
|
const response = await fetch("/contact.php", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
...formData,
|
|
recaptchaToken,
|
|
recaptchaAction,
|
|
language,
|
|
})
|
|
})
|
|
|
|
if (response.ok) {
|
|
setStatus("success")
|
|
setFormData({ name: "", email: "", phone: "", service: defaultService, message: "", consent: false })
|
|
} else {
|
|
setStatus("error")
|
|
}
|
|
} catch (err) {
|
|
setStatus("error")
|
|
}
|
|
}
|
|
|
|
if (status === "success") {
|
|
return (
|
|
<Card className="p-12 text-center rounded-[3rem] border-none shadow-2xl bg-white">
|
|
<div className="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-8">
|
|
<CheckCircle2 className="w-10 h-10 text-green-500" />
|
|
</div>
|
|
<h3 className="text-3xl font-black text-slate-900 uppercase tracking-tighter mb-4">{t.contactPage.form.successTitle}</h3>
|
|
<p className="text-slate-600 font-medium max-w-md mx-auto">
|
|
{t.contactPage.form.success}
|
|
</p>
|
|
<Button
|
|
onClick={() => setStatus("idle")}
|
|
variant="outline"
|
|
className="mt-8 rounded-full px-8"
|
|
>
|
|
{t.contactPage.form.successAction}
|
|
</Button>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Card className="rounded-[3rem] overflow-hidden border-none shadow-2xl bg-white">
|
|
<form onSubmit={handleSubmit} className="p-8 md:p-12 space-y-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{/* Name */}
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
|
|
{t.contactPage.form.name}
|
|
</label>
|
|
<Input
|
|
required
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
placeholder={t.contactPage.form.placeholders.name}
|
|
className="rounded-2xl h-14 bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all"
|
|
/>
|
|
</div>
|
|
|
|
{/* Email */}
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
|
|
{t.contactPage.form.email}
|
|
</label>
|
|
<Input
|
|
required
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
placeholder={t.contactPage.form.placeholders.email}
|
|
className="rounded-2xl h-14 bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{/* Phone */}
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
|
|
{t.contactPage.form.phone}
|
|
</label>
|
|
<Input
|
|
name="phone"
|
|
value={formData.phone}
|
|
onChange={handleChange}
|
|
placeholder={t.contactPage.form.placeholders.phone}
|
|
className="rounded-2xl h-14 bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all"
|
|
/>
|
|
</div>
|
|
|
|
{/* Service Type */}
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
|
|
{t.contactPage.form.service}
|
|
</label>
|
|
<select
|
|
name="service"
|
|
value={formData.service}
|
|
onChange={handleChange}
|
|
className="w-full rounded-2xl h-14 bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all px-4 text-sm font-medium"
|
|
>
|
|
<option value={t.contactPage.form.serviceOptions.airport}>{t.contactPage.form.serviceOptions.airport}</option>
|
|
<option value={t.contactPage.form.serviceOptions.private}>{t.contactPage.form.serviceOptions.private}</option>
|
|
<option value={t.contactPage.form.serviceOptions.other}>{t.contactPage.form.serviceOptions.other}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Message */}
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
|
|
{t.contactPage.form.message}
|
|
</label>
|
|
<Textarea
|
|
required
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
placeholder={t.contactPage.form.placeholders.message}
|
|
rows={5}
|
|
className="rounded-[2rem] bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all p-6 min-h-[150px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Consent */}
|
|
<div className="flex items-start gap-3">
|
|
<input
|
|
required
|
|
type="checkbox"
|
|
name="consent"
|
|
checked={formData.consent}
|
|
onChange={handleChange}
|
|
className="mt-1 w-5 h-5 rounded-lg border-slate-200 text-primary focus:ring-primary cursor-pointer"
|
|
/>
|
|
<p className="text-sm text-slate-500 leading-relaxed font-medium">
|
|
{t.contactPage.form.consent}
|
|
</p>
|
|
</div>
|
|
|
|
{/* reCaptcha */}
|
|
<div className="pt-4 flex justify-center md:justify-start">
|
|
<span className="text-xs text-slate-400">
|
|
{t.contactPage.form.recaptchaNotice}
|
|
</span>
|
|
</div>
|
|
|
|
{status === "error" && (
|
|
<div className="bg-red-50 text-red-600 p-4 rounded-2xl flex items-center gap-3 text-sm font-bold">
|
|
<AlertCircle className="w-5 h-5" />
|
|
{t.contactPage.form.error}
|
|
</div>
|
|
)}
|
|
|
|
<Button
|
|
disabled={status === "loading"}
|
|
type="submit"
|
|
size="lg"
|
|
className="w-full md:w-fit rounded-full px-12 h-16 bg-primary hover:bg-primary/90 text-sm font-bold uppercase tracking-widest transition-all shadow-xl disabled:opacity-50"
|
|
>
|
|
{status === "loading" ? (
|
|
<span className="flex items-center gap-2">
|
|
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
|
{t.contactPage.form.submitting}
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center gap-2">
|
|
<Send className="w-4 h-4" />
|
|
{t.contactPage.form.button}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
</form>
|
|
</Card>
|
|
)
|
|
}
|