create-brainerce-store 1.30.0 → 1.31.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.30.0",
+      version: "1.31.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/messages/en.json

@@ -43,6 +43,7 @@
     "account": "Account",
     "login": "Login",
     "logout": "Logout",
+    "contact": "Contact",
     "searchPlaceholder": "Search products...",
     "categories": "Categories",
     "search": "Search",
@@ -413,5 +414,21 @@
   "coupon": {
     "placeholder": "Coupon code",
     "invalidCode": "Invalid coupon code"
+  },
+  "contact": {
+    "title": "Contact Us",
+    "subtitle": "Have a question or feedback? Send us a message and we'll get back to you.",
+    "name": "Your name",
+    "email": "Email",
+    "phone": "Phone",
+    "subject": "Subject",
+    "message": "Message",
+    "optional": "optional",
+    "send": "Send message",
+    "sending": "Sending...",
+    "sendAnother": "Send another message",
+    "thanksTitle": "Thank you!",
+    "thanksBody": "Your message has been received. We'll reply by email as soon as possible.",
+    "genericError": "Something went wrong. Please try again."
   }
 }

package/messages/he.json

@@ -43,6 +43,7 @@
     "account": "חשבון",
     "login": "התחברות",
     "logout": "התנתקות",
+    "contact": "צור קשר",
     "searchPlaceholder": "חיפוש מוצרים...",
     "categories": "קטגוריות",
     "search": "חיפוש",
@@ -413,5 +414,21 @@
   "coupon": {
     "placeholder": "קוד קופון",
     "invalidCode": "קוד קופון לא תקין"
+  },
+  "contact": {
+    "title": "צור קשר",
+    "subtitle": "יש לך שאלה או משוב? שלח לנו הודעה ונחזור אליך בהקדם.",
+    "name": "שם מלא",
+    "email": "אימייל",
+    "phone": "טלפון",
+    "subject": "נושא",
+    "message": "הודעה",
+    "optional": "לא חובה",
+    "send": "שליחה",
+    "sending": "שולח...",
+    "sendAnother": "שליחת הודעה נוספת",
+    "thanksTitle": "תודה!",
+    "thanksBody": "ההודעה התקבלה. נחזור אליך באימייל בהקדם האפשרי.",
+    "genericError": "משהו השתבש. אנא נסה שוב."
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

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>
+  );
+}

package/templates/nextjs/base/src/components/layout/footer.tsx

@@ -1,41 +1,47 @@
-'use client';
-
-import { Link } from '@/lib/navigation';
-import { useTranslations } from '@/lib/translations';
-import { useStoreInfo, useAuth } from '@/providers/store-provider';
-
-export function Footer() {
-  const t = useTranslations('common');
-  const tn = useTranslations('nav');
-  const { storeInfo } = useStoreInfo();
-  const { isLoggedIn } = useAuth();
-  const year = new Date().getFullYear();
-
-  return (
-    <footer className="border-border bg-background border-t">
-      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
-          <p className="text-muted-foreground text-sm">
-            {year} {storeInfo?.name || t('store')}. {t('allRightsReserved')}
-          </p>
-          <nav className="flex items-center gap-4">
-            <Link
-              href="/products"
-              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-            >
-              {tn('products')}
-            </Link>
-            {isLoggedIn && (
-              <Link
-                href="/account"
-                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-              >
-                {tn('account')}
-              </Link>
-            )}
-          </nav>
-        </div>
-      </div>
-    </footer>
-  );
-}
+'use client';
+
+import { Link } from '@/lib/navigation';
+import { useTranslations } from '@/lib/translations';
+import { useStoreInfo, useAuth } from '@/providers/store-provider';
+
+export function Footer() {
+  const t = useTranslations('common');
+  const tn = useTranslations('nav');
+  const { storeInfo } = useStoreInfo();
+  const { isLoggedIn } = useAuth();
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="border-border bg-background border-t">
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
+          <p className="text-muted-foreground text-sm">
+            {year} {storeInfo?.name || t('store')}. {t('allRightsReserved')}
+          </p>
+          <nav className="flex items-center gap-4">
+            <Link
+              href="/products"
+              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+            >
+              {tn('products')}
+            </Link>
+            <Link
+              href="/contact"
+              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+            >
+              {tn('contact')}
+            </Link>
+            {isLoggedIn && (
+              <Link
+                href="/account"
+                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+              >
+                {tn('account')}
+              </Link>
+            )}
+          </nav>
+        </div>
+      </div>
+    </footer>
+  );
+}