create-brainerce-store 1.29.13 → 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.29.13",
+      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",
@@ -369,7 +370,18 @@
     "region": "State / Region",
     "postalCode": "Postal Code",
     "country": "Country",
-    "isDefault": "Set as my default address"
+    "isDefault": "Set as my default address",
+    "customizations": "Customizations",
+    "shippingAddress": "Shipping address",
+    "tracking": "Tracking",
+    "trackOrder": "Track order",
+    "shippedOn": "Shipped on {date}",
+    "deliveredOn": "Delivered on {date}",
+    "paymentMethod": "Payment",
+    "paid": "Paid",
+    "refundedStatus": "Refunded",
+    "partiallyRefundedStatus": "Partially refunded",
+    "statusTimeline": "Timeline"
   },
   "checkoutAddress": {
     "saveToProfile": "Save this address to my profile?",
@@ -402,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": "חיפוש",
@@ -369,7 +370,18 @@
     "region": "מדינה / אזור",
     "postalCode": "מיקוד",
     "country": "מדינה",
-    "isDefault": "הגדר ככתובת ברירת המחדל שלי"
+    "isDefault": "הגדר ככתובת ברירת המחדל שלי",
+    "customizations": "התאמות אישיות",
+    "shippingAddress": "כתובת משלוח",
+    "tracking": "מעקב",
+    "trackOrder": "מעקב הזמנה",
+    "shippedOn": "נשלח בתאריך {date}",
+    "deliveredOn": "נמסר בתאריך {date}",
+    "paymentMethod": "תשלום",
+    "paid": "שולם",
+    "refundedStatus": "הוחזר",
+    "partiallyRefundedStatus": "הוחזר חלקית",
+    "statusTimeline": "ציר זמן"
   },
   "checkoutAddress": {
     "saveToProfile": "לשמור כתובת זו בפרופיל שלי?",
@@ -402,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.29.13",
+  "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/account/order-customizations.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import Image from 'next/image';
+import type { OrderItem } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+type Customizations = NonNullable<OrderItem['customizations']>;
+type CustomizationEntry = Customizations[string];
+
+interface OrderCustomizationsProps {
+  customizations: OrderItem['customizations'];
+  className?: string;
+}
+
+export function OrderCustomizations({ customizations, className }: OrderCustomizationsProps) {
+  const t = useTranslations('account');
+  if (!customizations) return null;
+  const entries = Object.entries(customizations) as Array<[string, CustomizationEntry]>;
+  if (entries.length === 0) return null;
+
+  return (
+    <dl className={cn('bg-background/60 mt-2 space-y-1 rounded border-s-2 p-2 text-xs', className)}>
+      {entries.map(([key, entry]) => (
+        <div key={key} className="flex items-start gap-2">
+          <dt className="text-muted-foreground min-w-24 font-medium">{entry.label}:</dt>
+          <dd className="text-foreground flex-1 break-words">
+            <CustomizationValue entry={entry} fallback={t('productFallback')} />
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+function CustomizationValue({ entry, fallback }: { entry: CustomizationEntry; fallback: string }) {
+  const { type, value } = entry;
+
+  switch (type) {
+    case 'BOOLEAN':
+      return <span>{value === 'yes' || value === 'true' ? '✓' : '✗'}</span>;
+
+    case 'MULTI_SELECT':
+      return <span>{Array.isArray(value) ? value.join(', ') : String(value)}</span>;
+
+    case 'IMAGE': {
+      const url = typeof value === 'string' ? value : Array.isArray(value) ? value[0] : '';
+      if (!url) return <span className="text-muted-foreground">—</span>;
+      return (
+        <a href={url} target="_blank" rel="noopener noreferrer" className="inline-block">
+          <span className="relative inline-block h-12 w-12 overflow-hidden rounded border">
+            <Image src={url} alt={fallback} fill sizes="48px" className="object-cover" />
+          </span>
+        </a>
+      );
+    }
+
+    case 'GALLERY': {
+      const urls = Array.isArray(value) ? value : value ? [value] : [];
+      if (urls.length === 0) return <span className="text-muted-foreground">—</span>;
+      return (
+        <div className="flex flex-wrap gap-1.5">
+          {urls.map((url, i) => (
+            <a
+              key={`${url}-${i}`}
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-block"
+            >
+              <span className="relative inline-block h-10 w-10 overflow-hidden rounded border">
+                <Image src={url} alt={fallback} fill sizes="40px" className="object-cover" />
+              </span>
+            </a>
+          ))}
+        </div>
+      );
+    }
+
+    case 'COLOR': {
+      const hex = typeof value === 'string' ? value : '';
+      return (
+        <span className="inline-flex items-center gap-1.5">
+          <span
+            className="inline-block h-4 w-4 rounded border"
+            style={{ backgroundColor: hex || 'transparent' }}
+          />
+          <span className="font-mono">{hex || '—'}</span>
+        </span>
+      );
+    }
+
+    case 'DATE': {
+      const s = typeof value === 'string' ? value : '';
+      if (!s) return <span>—</span>;
+      const d = new Date(s);
+      return <span>{isNaN(d.getTime()) ? s : d.toLocaleDateString()}</span>;
+    }
+
+    case 'DATETIME': {
+      const s = typeof value === 'string' ? value : '';
+      if (!s) return <span>—</span>;
+      const d = new Date(s);
+      return <span>{isNaN(d.getTime()) ? s : d.toLocaleString()}</span>;
+    }
+
+    case 'URL': {
+      const href = typeof value === 'string' ? value : '';
+      if (!href) return <span>—</span>;
+      return (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-primary break-all underline"
+        >
+          {href}
+        </a>
+      );
+    }
+
+    default:
+      return <span>{Array.isArray(value) ? value.join(', ') : String(value ?? '')}</span>;
+  }
+}