Zastosowanie wszystkich poprawek UI i logiki kalkulatora
This commit is contained in:
AI Assistant
@@ -0,0 +1,174 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Loader2, CheckCircle2 } from 'lucide-react';
|
||||
import { submitMultisplitForm } from '@/app/zapytanie-multisplit/actions';
|
||||
import { getRecaptchaToken } from '@/lib/getRecaptchaToken';
|
||||
|
||||
interface Props {
|
||||
productName: string;
|
||||
productSku: string;
|
||||
}
|
||||
|
||||
export default function MultisplitContactForm({ productName, productSku }: Props) {
|
||||
const [form, setForm] = useState({
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
city: '',
|
||||
rooms: '2',
|
||||
message: '',
|
||||
consent: false,
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [sent, setSent] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handle = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
const { name, value, type } = e.target;
|
||||
setForm(prev => ({
|
||||
...prev,
|
||||
[name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value,
|
||||
}));
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (!form.name || !form.phone || !form.consent) {
|
||||
setError('Wypełnij wymagane pola i zaznacz zgodę.');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const token = await getRecaptchaToken('submit');
|
||||
const recaptchaToken = token || '';
|
||||
|
||||
const res = await submitMultisplitForm({
|
||||
name: form.name,
|
||||
phone: form.phone,
|
||||
email: form.email,
|
||||
city: form.city,
|
||||
rooms: form.rooms,
|
||||
message: form.message,
|
||||
consent: form.consent,
|
||||
productName,
|
||||
productSku,
|
||||
recaptchaToken,
|
||||
});
|
||||
if (res.success) setSent(true);
|
||||
else setError(res.message || 'Błąd wysyłki. Zadzwoń do nas bezpośrednio.');
|
||||
} catch {
|
||||
setError('Błąd połączenia. Spróbuj ponownie.');
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
if (sent) {
|
||||
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">Zapytanie wysłane!</h3>
|
||||
<p className="text-green-700">Oddzwonimy w ciągu 24 godzin z bezpłatną wyceną.</p>
|
||||
<button
|
||||
onClick={() => setSent(false)}
|
||||
className="mt-6 px-6 py-2 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 transition-colors"
|
||||
>
|
||||
Wyślij kolejne zapytanie
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Produkt info */}
|
||||
<div className="bg-slate-50 rounded-xl px-4 py-3 text-xs text-text-muted">
|
||||
Zapytanie dotyczy: <span className="font-bold text-primary">{productName}</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-primary">Imię i nazwisko *</label>
|
||||
<input name="name" value={form.name} onChange={handle}
|
||||
placeholder="Jan Kowalski"
|
||||
className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-primary">Telefon *</label>
|
||||
<input name="phone" value={form.phone} onChange={handle}
|
||||
placeholder="+48 600 000 000"
|
||||
className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-primary">Email</label>
|
||||
<input name="email" value={form.email} onChange={handle}
|
||||
placeholder="[email protected]"
|
||||
className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-primary">Miasto *</label>
|
||||
<input name="city" value={form.city} onChange={handle}
|
||||
placeholder="Wrocław"
|
||||
className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-primary">Ile pomieszczeń do klimatyzacji?</label>
|
||||
<select name="rooms" value={form.rooms} onChange={handle}
|
||||
className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none bg-white">
|
||||
<option value="2">2 pomieszczenia</option>
|
||||
<option value="3">3 pomieszczenia</option>
|
||||
<option value="4">4 pomieszczenia</option>
|
||||
<option value="5">5 pomieszczeń</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-primary">Dodatkowe informacje (opcjonalnie)</label>
|
||||
<textarea name="message" value={form.message} onChange={handle}
|
||||
rows={3}
|
||||
placeholder="Np. metraż pomieszczeń, typ budynku, piętro..."
|
||||
className="px-3 py-2.5 text-sm border border-border rounded-xl focus:border-accent outline-none resize-none" />
|
||||
</div>
|
||||
|
||||
<label className="flex items-start gap-2.5 cursor-pointer">
|
||||
<div className="relative mt-0.5">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="consent"
|
||||
checked={form.consent}
|
||||
onChange={handle}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className={`size-4 rounded border-2 flex items-center justify-center transition-colors ${
|
||||
form.consent ? 'bg-accent border-accent' : 'bg-white border-slate-300'
|
||||
}`}>
|
||||
{form.consent && (
|
||||
<svg viewBox="0 0 10 8" className="size-2.5" fill="none">
|
||||
<path d="M1 4L3.5 6.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xs text-text-muted leading-relaxed">
|
||||
Wyrażam zgodę na przetwarzanie moich danych osobowych w celu obsługi zapytania przez ThermCool. *
|
||||
</span>
|
||||
</label>
|
||||
|
||||
{error && <p className="text-xs text-red-500">{error}</p>}
|
||||
|
||||
<button
|
||||
onClick={submit}
|
||||
disabled={loading}
|
||||
className="flex items-center justify-center gap-2 h-11 bg-accent text-white font-bold rounded-xl text-sm hover:bg-accent/90 transition-colors disabled:opacity-60"
|
||||
>
|
||||
{loading ? <Loader2 className="size-4 animate-spin" /> : null}
|
||||
{loading ? 'Wysyłanie...' : 'Wyślij zapytanie o wycenę'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user