create-brainerce-store 1.30.0 → 1.31.2

package/templates/nextjs/base/src/app/contact/page.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useState } from 'react';
+import { getClient } from '@/lib/brainerce';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { useTranslations } from '@/lib/translations';
+
+export default function ContactPage() {
+  const t = useTranslations('contact');
+  const [form, setForm] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    subject: '',
+    message: '',
+    honeypot: '',
+  });
+  const [loading, setLoading] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading) return;
+
+    // Honeypot — silently drop anything that auto-filled this hidden field.
+    if (form.honeypot.trim().length > 0) {
+      setSent(true);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      const client = getClient();
+      await client.createInquiry({
+        name: form.name.trim(),
+        email: form.email.trim(),
+        subject: form.subject.trim(),
+        message: form.message.trim(),
+        phone: form.phone.trim() || undefined,
+      });
+      setSent(true);
+      setForm({ name: '', email: '', phone: '', subject: '', message: '', honeypot: '' });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : t('genericError');
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const inputClass =
+    'border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2';
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-12 sm:px-6 lg:px-8">
+      <div className="mb-8 text-center">
+        <h1 className="text-foreground text-3xl font-bold">{t('title')}</h1>
+        <p className="text-muted-foreground mt-2 text-sm">{t('subtitle')}</p>
+      </div>
+
+      {error && (
+        <div className="bg-destructive/10 border-destructive/20 text-destructive mb-6 rounded-lg border px-4 py-3 text-sm">
+          {error}
+        </div>
+      )}
+
+      {sent ? (
+        <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-6 text-center text-sm text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-300">
+          <p className="font-medium">{t('thanksTitle')}</p>
+          <p className="mt-1">{t('thanksBody')}</p>
+          <button
+            type="button"
+            onClick={() => setSent(false)}
+            className="text-primary mt-4 text-sm font-medium hover:underline"
+          >
+            {t('sendAnother')}
+          </button>
+        </div>
+      ) : (
+        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+          {/* Honeypot — kept off-screen + aria-hidden; real users never touch it. */}
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute -start-[10000px] h-0 w-0 overflow-hidden"
+          >
+            <label htmlFor="contact-honeypot">Leave this field empty</label>
+            <input
+              id="contact-honeypot"
+              type="text"
+              tabIndex={-1}
+              autoComplete="off"
+              value={form.honeypot}
+              onChange={(e) => setForm({ ...form, honeypot: e.target.value })}
+            />
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label
+                htmlFor="contact-name"
+                className="text-foreground mb-1.5 block text-sm font-medium"
+              >
+                {t('name')}
+              </label>
+              <input
+                id="contact-name"
+                type="text"
+                required
+                maxLength={120}
+                autoComplete="name"
+                value={form.name}
+                onChange={(e) => setForm({ ...form, name: e.target.value })}
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label
+                htmlFor="contact-email"
+                className="text-foreground mb-1.5 block text-sm font-medium"
+              >
+                {t('email')}
+              </label>
+              <input
+                id="contact-email"
+                type="email"
+                required
+                autoComplete="email"
+                value={form.email}
+                onChange={(e) => setForm({ ...form, email: e.target.value })}
+                className={inputClass}
+              />
+            </div>
+          </div>
+
+          <div>
+            <label
+              htmlFor="contact-phone"
+              className="text-foreground mb-1.5 block text-sm font-medium"
+            >
+              {t('phone')} <span className="text-muted-foreground">({t('optional')})</span>
+            </label>
+            <input
+              id="contact-phone"
+              type="tel"
+              autoComplete="tel"
+              value={form.phone}
+              onChange={(e) => setForm({ ...form, phone: e.target.value })}
+              className={inputClass}
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="contact-subject"
+              className="text-foreground mb-1.5 block text-sm font-medium"
+            >
+              {t('subject')}
+            </label>
+            <input
+              id="contact-subject"
+              type="text"
+              required
+              maxLength={200}
+              value={form.subject}
+              onChange={(e) => setForm({ ...form, subject: e.target.value })}
+              className={inputClass}
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="contact-message"
+              className="text-foreground mb-1.5 block text-sm font-medium"
+            >
+              {t('message')}
+            </label>
+            <textarea
+              id="contact-message"
+              required
+              maxLength={10000}
+              rows={6}
+              value={form.message}
+              onChange={(e) => setForm({ ...form, message: e.target.value })}
+              className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary w-full rounded border px-3 py-2 text-sm focus:outline-none focus:ring-2"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {loading ? (
+              <>
+                <LoadingSpinner
+                  size="sm"
+                  className="border-primary-foreground/30 border-t-primary-foreground"
+                />
+                {t('sending')}
+              </>
+            ) : (
+              t('send')
+            )}
+          </button>
+        </form>
+      )}
+    </div>
+  );
+}