UI improvements for multisplit inquiry workflow

2026-07-05 23:08:06 +02:00
parent 00533ffb1f
commit ebe048c13c
3 changed files with 360 additions and 32 deletions
@@ -0,0 +1,165 @@
+'use client';
+
+import { useState } from 'react';
+import { Check, Loader2 } from 'lucide-react';
+
+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 res = await fetch('/api/contact', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: form.name,
+          phone: form.phone,
+          email: form.email,
+          city: form.city,
+          subject: `Zapytanie o multisplit: ${productName} (${productSku})`,
+          message: `Liczba pomieszczeń: ${form.rooms}\n\n${form.message}`,
+        }),
+      });
+      if (res.ok) setSent(true);
+      else setError('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="flex flex-col items-center justify-center gap-3 py-12 text-center">
+        <div className="size-12 bg-green-100 rounded-full flex items-center justify-center">
+          <Check className="size-6 text-green-600" />
+        </div>
+        <p className="font-bold text-primary">Zapytanie wysłane!</p>
+        <p className="text-sm text-text-muted">Oddzwonimy w ciągu 24 godzin z bezpłatną wyceną.</p>
+      </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>
+  );
+}
@@ -146,43 +146,61 @@ export function ProductCard({ product }: ProductCardProps) {

        {/* Cena + CTA */}
        <div className="mt-auto pt-2 flex items-end justify-between gap-2">
-          {product.price !== null ? (
-            <div>
-              <p className="text-lg font-bold text-primary font-heading leading-none">
-                {product.price.toLocaleString('pl-PL')} zł
-              </p>
-              <p className="text-xs text-text-muted mt-0.5">brutto</p>
-            </div>
-          ) : (
-            <div className="flex items-center gap-1 text-accent">
-              <Phone className="size-3.5" />
-              <span className="text-sm font-semibold">Zapytaj o cenę</span>
-            </div>
-          )}
-
-          {product.price !== null ? (
-            added ? (
+          {product.category === 'multisplit' ? (
+            // Multisplit — zawsze formularz zapytania
+            <>
+              <div className="flex items-center gap-1 text-accent">
+                <Phone className="size-4" />
+                <span className="text-sm font-semibold">Wycena indywidualna</span>
+              </div>
              <Link
-                href="/koszyk"
-                className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-green-500 text-white hover:bg-green-600 transition-colors shrink-0"
+                href={`/zapytanie-multisplit/${product.slug}`}
                onClick={e => e.stopPropagation()}
              >
-                <ShoppingCart className="size-3.5" /> Zobacz koszyk
+                <button className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-accent text-white hover:bg-accent/90 transition-colors shrink-0">
+                  Zapytaj o wycenę
+                </button>
              </Link>
-            ) : (
-              <button
-                onClick={handleAddToCart}
-                className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-accent text-white hover:bg-accent/90 transition-colors shrink-0"
-              >
-                <ShoppingCart className="size-3.5" /> Do koszyka
-              </button>
-            )
+            </>
+          ) : product.price !== null ? (
+            // Split z ceną — koszyk
+            <>
+              <div>
+                <p className="text-lg font-bold text-primary font-heading leading-none">
+                  {product.price.toLocaleString('pl-PL')} zł
+                </p>
+                <p className="text-xs text-text-muted mt-0.5">brutto</p>
+              </div>
+              {added ? (
+                <Link
+                  href="/koszyk"
+                  className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-green-500 text-white hover:bg-green-600 transition-colors shrink-0"
+                  onClick={e => e.stopPropagation()}
+                >
+                  <ShoppingCart className="size-3.5" /> Zobacz koszyk
+                </Link>
+              ) : (
+                <button
+                  onClick={handleAddToCart}
+                  className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-accent text-white hover:bg-accent/90 transition-colors shrink-0"
+                >
+                  <ShoppingCart className="size-3.5" /> Do koszyka
+                </button>
+              )}
+            </>
          ) : (
-            <Link href="/kontakt">
-              <button className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-primary text-white hover:bg-primary/90 transition-colors shrink-0">
-                Zapytaj
-              </button>
-            </Link>
+            // Split bez ceny — zapytaj
+            <>
+              <div className="flex items-center gap-1 text-accent">
+                <Phone className="size-3.5" />
+                <span className="text-sm font-semibold">Zapytaj o cenę</span>
+              </div>
+              <Link href="/kontakt" onClick={e => e.stopPropagation()}>
+                <button className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-primary text-white hover:bg-primary/90 transition-colors shrink-0">
+                  Zapytaj
+                </button>
+              </Link>
+            </>
          )}
        </div>
      </div>