318 lines
14 KiB
TypeScript
318 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { z } from 'zod';
|
|
import { Loader2, CheckCircle2, AlertCircle, Check } from 'lucide-react';
|
|
import { submitContactForm } from '@/app/kontakt/actions';
|
|
import { getRecaptchaToken } from '@/lib/getRecaptchaToken';
|
|
|
|
const contactFormSchema = z.object({
|
|
name: z.string().min(2, "Imię musi mieć min. 2 znaki"),
|
|
phone: z.string().min(9, "Wprowadź poprawny numer telefonu"),
|
|
email: z.union([z.literal(''), z.string().email("Niepoprawny adres e-mail")]).optional(),
|
|
city: z.string().min(1, "Wybierz miasto"),
|
|
subject: z.string().optional(),
|
|
message: z.string().optional(),
|
|
brand: z.string().optional(),
|
|
age: z.string().optional(),
|
|
});
|
|
|
|
type ContactFormValues = z.infer<typeof contactFormSchema>;
|
|
|
|
export function ContactForm() {
|
|
const [serverState, setServerState] = useState<{ success?: boolean; message?: string } | null>(null);
|
|
const [consent, setConsent] = useState(false);
|
|
const [files, setFiles] = useState<File[]>([]);
|
|
|
|
const {
|
|
register,
|
|
handleSubmit: hookFormSubmit,
|
|
formState: { errors, isSubmitting },
|
|
reset,
|
|
watch
|
|
} = useForm<ContactFormValues>({
|
|
resolver: zodResolver(contactFormSchema),
|
|
defaultValues: {
|
|
name: '',
|
|
phone: '',
|
|
email: '',
|
|
city: '',
|
|
subject: '',
|
|
message: '',
|
|
brand: '',
|
|
age: '',
|
|
}
|
|
});
|
|
|
|
const onSubmit = async (data: ContactFormValues) => {
|
|
setServerState(null);
|
|
|
|
const formData = new FormData();
|
|
Object.entries(data).forEach(([key, value]) => {
|
|
if (value !== undefined) formData.append(key, value.toString());
|
|
});
|
|
formData.append("consent", consent ? 'true' : 'false');
|
|
|
|
const token = await getRecaptchaToken('submit');
|
|
if (token) {
|
|
formData.append('recaptchaToken', token);
|
|
}
|
|
|
|
const response = await submitContactForm(null, formData);
|
|
|
|
setServerState({
|
|
success: response.success,
|
|
message: response.message
|
|
});
|
|
|
|
if (response.success) {
|
|
reset();
|
|
setConsent(false);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
|
if (!consent) {
|
|
e.preventDefault();
|
|
alert('Proszę zaznaczyć zgodę na przetwarzanie danych.');
|
|
return;
|
|
}
|
|
hookFormSubmit(onSubmit)(e);
|
|
};
|
|
|
|
if (serverState?.success) {
|
|
return (
|
|
<div className="bg-green-50 text-green-800 p-8 rounded-2xl border border-green-200 flex flex-col items-center text-center">
|
|
<CheckCircle2 className="w-16 h-16 text-green-500 mb-4" />
|
|
<h3 className="text-2xl font-bold font-heading mb-2">Wiadomość wysłana!</h3>
|
|
<p className="text-green-700">{serverState.message}</p>
|
|
<button
|
|
onClick={() => setServerState(null)}
|
|
className="mt-6 px-6 py-2 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 transition-colors"
|
|
>
|
|
Wyślij kolejną wiadomość
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 md:p-8 rounded-2xl border border-border shadow-sm">
|
|
{serverState && !serverState.success && (
|
|
<div className="bg-red-50 text-red-800 p-4 rounded-xl border border-red-200 flex items-start gap-3">
|
|
<AlertCircle className="w-5 h-5 shrink-0 mt-0.5" />
|
|
<p className="text-sm font-medium">{serverState.message}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
{/* Imię */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="name" className="text-sm font-semibold text-primary">Imię i nazwisko <span className="text-red-500">*</span></label>
|
|
<input
|
|
{...register("name")}
|
|
id="name"
|
|
required
|
|
className={`w-full px-4 py-3 rounded-xl border ${errors.name ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50`}
|
|
placeholder="Jan Kowalski"
|
|
aria-invalid={errors.name ? "true" : "false"}
|
|
/>
|
|
{errors.name && <p className="text-red-500 text-xs font-medium">{errors.name.message}</p>}
|
|
</div>
|
|
|
|
{/* Telefon */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="phone" className="text-sm font-semibold text-primary">Telefon <span className="text-red-500">*</span></label>
|
|
<input
|
|
{...register("phone")}
|
|
id="phone"
|
|
type="tel"
|
|
required
|
|
className={`w-full px-4 py-3 rounded-xl border ${errors.phone ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50`}
|
|
placeholder="+48 123 456 789"
|
|
/>
|
|
{errors.phone && <p className="text-red-500 text-xs font-medium">{errors.phone.message}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
{/* Email */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="email" className="text-sm font-semibold text-primary">Adres e-mail</label>
|
|
<input
|
|
{...register("email")}
|
|
id="email"
|
|
type="email"
|
|
className={`w-full px-4 py-3 rounded-xl border ${errors.email ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50`}
|
|
placeholder="[email protected]"
|
|
/>
|
|
{errors.email && <p className="text-red-500 text-xs font-medium">{errors.email.message}</p>}
|
|
</div>
|
|
|
|
{/* Miasto */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="city" className="text-sm font-semibold text-primary">Miasto <span className="text-red-500">*</span></label>
|
|
<select
|
|
{...register("city")}
|
|
id="city"
|
|
required
|
|
className={`w-full px-4 py-3 rounded-xl border ${errors.city ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50 appearance-none`}
|
|
>
|
|
<option value="">Wybierz miasto...</option>
|
|
<option value="Wrocław">Wrocław</option>
|
|
<option value="Legnica">Legnica</option>
|
|
<option value="Wałbrzych">Wałbrzych</option>
|
|
<option value="Jelenia Góra">Jelenia Góra</option>
|
|
<option value="Lubin">Lubin</option>
|
|
<option value="Głogów">Głogów</option>
|
|
<option value="Świdnica">Świdnica</option>
|
|
<option value="Dzierżoniów">Dzierżoniów</option>
|
|
<option value="Oleśnica">Oleśnica</option>
|
|
<option value="Oława">Oława</option>
|
|
<option value="Trzebnica">Trzebnica</option>
|
|
<option value="Środa Śląska">Środa Śląska</option>
|
|
<option value="Inne">Inne miasto</option>
|
|
</select>
|
|
{errors.city && <p className="text-red-500 text-xs font-medium">{errors.city.message}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Temat */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="subject" className="text-sm font-semibold text-primary">Temat rozmowy</label>
|
|
<select
|
|
{...register("subject")}
|
|
id="subject"
|
|
className={`w-full px-4 py-3 rounded-xl border ${errors.subject ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50 appearance-none`}
|
|
>
|
|
<option value="">Wybierz temat...</option>
|
|
<option value="klimatyzacja">Klimatyzacja</option>
|
|
|
|
<option value="serwis">Serwis</option>
|
|
<option value="inne">Inne zapytanie</option>
|
|
</select>
|
|
{errors.subject && <p className="text-red-500 text-xs font-medium">{errors.subject.message}</p>}
|
|
</div>
|
|
|
|
{/* Warunkowe pola dla serwisu */}
|
|
{watch('subject') === 'serwis' && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<label htmlFor="brand" className="text-sm font-semibold text-primary">Marka klimatyzatora</label>
|
|
<select
|
|
{...register("brand")}
|
|
id="brand"
|
|
className={`w-full px-4 py-3 rounded-xl border ${errors.brand ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50 appearance-none`}
|
|
>
|
|
<option value="">Wybierz markę...</option>
|
|
<option value="Daikin">Daikin</option>
|
|
<option value="Mitsubishi">Mitsubishi</option>
|
|
<option value="LG">LG</option>
|
|
<option value="Samsung">Samsung</option>
|
|
<option value="Gree">Gree</option>
|
|
<option value="Rotenso">Rotenso</option>
|
|
<option value="Haier">Haier</option>
|
|
<option value="Aux">Aux</option>
|
|
<option value="Fuji Electric">Fuji Electric</option>
|
|
<option value="Toshiba">Toshiba</option>
|
|
<option value="Inna">Inna / Nie wiem</option>
|
|
</select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label htmlFor="age" className="text-sm font-semibold text-primary">Wiek urządzenia</label>
|
|
<select
|
|
{...register("age")}
|
|
id="age"
|
|
className={`w-full px-4 py-3 rounded-xl border ${errors.age ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50 appearance-none`}
|
|
>
|
|
<option value="">Jak długo masz klimatyzator?</option>
|
|
<option value="Mniej niż rok">Mniej niż rok (na gwarancji)</option>
|
|
<option value="1-3 lata">1 - 3 lata</option>
|
|
<option value="Ponad 3 lata">Ponad 3 lata</option>
|
|
<option value="Nie wiem">Nie wiem</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Wiadomość */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="message" className="text-sm font-semibold text-primary">Wiadomość</label>
|
|
<textarea
|
|
{...register("message")}
|
|
id="message"
|
|
rows={5}
|
|
className={`w-full px-4 py-3 rounded-xl border ${errors.message ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50 resize-y`}
|
|
placeholder="Opisz krótko, w czym możemy Ci pomóc..."
|
|
/>
|
|
{errors.message && <p className="text-red-500 text-xs font-medium">{errors.message.message}</p>}
|
|
</div>
|
|
|
|
{/* Załączniki */}
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-sm font-medium text-primary">
|
|
Załącz zdjęcia <span className="text-text-muted font-normal">(opcjonalnie)</span>
|
|
</label>
|
|
<label className="flex flex-col items-center justify-center gap-2 border-2 border-dashed border-border rounded-xl p-6 cursor-pointer hover:border-accent hover:bg-accent/5 transition-colors">
|
|
<input
|
|
type="file"
|
|
multiple
|
|
accept="image/*,.pdf"
|
|
className="sr-only"
|
|
onChange={(e) => setFiles(Array.from(e.target.files || []))}
|
|
/>
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="size-8 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 00-2 2z" />
|
|
</svg>
|
|
<span className="text-sm text-text-muted text-center">
|
|
Kliknij aby wybrać zdjęcia lub przeciągnij tutaj<br />
|
|
<span className="text-xs">JPG, PNG, WEBP, PDF — maks. 10 MB każdy</span>
|
|
</span>
|
|
{files.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|
{files.map((f, i) => (
|
|
<span key={i} className="text-xs bg-accent/10 text-accent px-2 py-1 rounded-md font-medium">
|
|
{f.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</label>
|
|
<p className="text-xs text-text-muted">Zdjęcia miejsca montażu znacznie przyspieszają wycenę.</p>
|
|
</div>
|
|
|
|
{/* RODO */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-start gap-3 cursor-pointer" onClick={() => setConsent(!consent)}>
|
|
<div className={`size-5 rounded border-2 shrink-0 mt-0.5 flex items-center justify-center transition-colors ${
|
|
consent ? 'bg-accent border-accent' : 'bg-white border-slate-300'
|
|
}`}>
|
|
{consent && <Check className="size-3 text-white" />}
|
|
</div>
|
|
<input type="hidden" name="consent" value={consent ? 'true' : ''} />
|
|
<span className="text-sm text-text-muted leading-relaxed select-none">
|
|
Wyrażam zgodę na przetwarzanie moich danych osobowych podanych w formularzu w celu obsługi zapytania przez firmę ThermCool. Zapoznałem/am się z Polityką Prywatności. *
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="btn btn-primary w-full text-white font-bold py-4 h-auto rounded-xl flex items-center justify-center gap-2 shadow-md"
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<Loader2 className="w-5 h-5 animate-spin" />
|
|
<span>Wysyłanie...</span>
|
|
</>
|
|
) : (
|
|
<span>Wyślij zapytanie</span>
|
|
)}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|