feat: complete website implementation
This commit is contained in:
Radosław Smoliński
@@ -0,0 +1,196 @@
|
||||
"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 } from 'lucide-react';
|
||||
import { submitContactForm } from '@/app/kontakt/actions';
|
||||
|
||||
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.string().email("Niepoprawny adres e-mail"),
|
||||
subject: z.string().min(1, "Wybierz temat"),
|
||||
message: z.string().min(10, "Wiadomość musi mieć min. 10 znaków"),
|
||||
consent: z.boolean().refine((val) => val === true, "Zgoda RODO jest wymagana"),
|
||||
});
|
||||
|
||||
type ContactFormValues = z.infer<typeof contactFormSchema>;
|
||||
|
||||
export function ContactForm() {
|
||||
const [serverState, setServerState] = useState<{ success?: boolean; message?: string } | null>(null);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitting },
|
||||
reset
|
||||
} = useForm<ContactFormValues>({
|
||||
resolver: zodResolver(contactFormSchema),
|
||||
defaultValues: {
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
consent: false,
|
||||
}
|
||||
});
|
||||
|
||||
const onSubmit = async (data: ContactFormValues) => {
|
||||
setServerState(null);
|
||||
|
||||
// Przekształcamy dane do formatu FormData dla Server Action
|
||||
const formData = new FormData();
|
||||
Object.entries(data).forEach(([key, value]) => {
|
||||
formData.append(key, value.toString());
|
||||
});
|
||||
|
||||
const response = await submitContactForm(null, formData);
|
||||
|
||||
setServerState({
|
||||
success: response.success,
|
||||
message: response.message
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
reset();
|
||||
}
|
||||
};
|
||||
|
||||
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(onSubmit)} 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</label>
|
||||
<input
|
||||
{...register("name")}
|
||||
id="name"
|
||||
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</label>
|
||||
<input
|
||||
{...register("phone")}
|
||||
id="phone"
|
||||
type="tel"
|
||||
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>
|
||||
|
||||
{/* 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="pompy-ciepla">Pompy ciepła</option>
|
||||
<option value="remonty">Remonty i wykończenia</option>
|
||||
<option value="hydraulika">Hydraulika</option>
|
||||
<option value="serwis-agd">Serwis AGD</option>
|
||||
<option value="inne">Inne zapytanie</option>
|
||||
</select>
|
||||
{errors.subject && <p className="text-red-500 text-xs font-medium">{errors.subject.message}</p>}
|
||||
</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>
|
||||
|
||||
{/* RODO */}
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-start gap-3 cursor-pointer group">
|
||||
<div className="relative flex items-start pt-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
{...register("consent")}
|
||||
className="w-5 h-5 rounded border-border text-primary focus:ring-primary focus:ring-offset-0 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs 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ę AeroService. Zapoznałem/am się z Polityką Prywatności.
|
||||
</span>
|
||||
</label>
|
||||
{errors.consent && <p className="text-red-500 text-xs font-medium">{errors.consent.message}</p>}
|
||||
</div>
|
||||
|
||||
{/* Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full bg-cta hover:bg-cta-hover text-white font-bold py-4 rounded-xl transition-colors flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed shadow-md"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<span>Wysyłanie...</span>
|
||||
</>
|
||||
) : (
|
||||
<span>Wyślij zapytanie</span>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user