create-brainerce-store 1.31.2 → 1.33.1

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.31.2",
+      version: "1.33.1",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"
@@ -153,7 +153,7 @@ var ALLOWED_PACKAGE_MANAGERS = [
   "bun"
 ];
 var BRAINERCE_RUNTIME_DEPS = Object.freeze({
-  brainerce: "^1.20.1",
+  brainerce: "^1.22.0",
   "isomorphic-dompurify": "^3.8.0"
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.31.2",
+  "version": "1.33.1",
   "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

@@ -1,211 +1,461 @@
-'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>
-  );
-}
+'use client';
+
+/**
+ * Contact form — fully driven by the merchant's dashboard configuration.
+ *
+ * The merchant configures the form in the Brainerce dashboard under
+ *   Customers → Contact Forms → <form>
+ *
+ * From there they can:
+ *   • edit the title, description, submit button label, success message
+ *   • add/remove/reorder/hide any field (TEXT/TEXTAREA/EMAIL/PHONE/NUMBER/SELECT/
+ *     MULTI_SELECT/CHECKBOX/URL/DATE)
+ *   • toggle required, set placeholder/helpText/enumValues/validation
+ *   • provide per-locale translations for every label/placeholder/helpText/successMessage
+ *
+ * Everything below is generic rendering logic — it adapts automatically to any
+ * form shape returned by the API, so **you should not hardcode field keys or
+ * labels here**. If you want a different visual layout, change the markup
+ * inside `DynamicField` (keep the behavior) and keep using `schema.fields` as
+ * the source of truth.
+ *
+ * API contract the page relies on:
+ *   1. `GET /stores/{storeId}/contact-forms/main?locale={locale}` → `ContactFormPublic`
+ *      (see `brainerce` SDK type). Server pre-resolves translations for the
+ *      requested locale and strips any field with `isVisible=false`.
+ *   2. `POST /stores/{storeId}/inquiries` with `{ formKey, fields, locale }` →
+ *      `CreateInquiryResponse`. Unknown keys are stripped server-side.
+ *
+ * Rate limit: 3 submissions / 60s per IP. Honeypot field below blocks naive bots.
+ * If the merchant has more than one form (e.g. 'main' + 'newsletter'), you can
+ * list them via `client.contactForms.list()` and pick by `key`.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import type { ContactFormPublic, ContactFormPublicField } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { useTranslations } from '@/lib/translations';
+
+type FieldValue = string | string[] | boolean;
+
+function defaultValueFor(field: ContactFormPublicField): FieldValue {
+  if (field.type === 'CHECKBOX') return false;
+  if (field.type === 'MULTI_SELECT') return [];
+  return field.defaultValue ?? '';
+}
+
+function isEmpty(v: FieldValue): boolean {
+  if (typeof v === 'string') return v.trim().length === 0;
+  if (Array.isArray(v)) return v.length === 0;
+  return v === 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';
+
+const textareaClass =
+  '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';
+
+export default function ContactPage() {
+  const t = useTranslations('contact');
+  const [schema, setSchema] = useState<ContactFormPublic | null>(null);
+  const [schemaError, setSchemaError] = useState<string | null>(null);
+  const [values, setValues] = useState<Record<string, FieldValue>>({});
+  const [honeypot, setHoneypot] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const locale = useMemo(() => {
+    if (typeof document !== 'undefined') return document.documentElement.lang || undefined;
+    return undefined;
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const client = getClient();
+        const form = await client.contactForms.get('main', locale);
+        if (cancelled) return;
+        setSchema(form);
+        const initial: Record<string, FieldValue> = {};
+        for (const field of form.fields) initial[field.key] = defaultValueFor(field);
+        setValues(initial);
+      } catch (err) {
+        if (cancelled) return;
+        setSchemaError(err instanceof Error ? err.message : t('genericError'));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [t, locale]);
+
+  function updateValue(key: string, value: FieldValue) {
+    setValues((prev) => ({ ...prev, [key]: value }));
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading || !schema) return;
+
+    if (honeypot.trim().length > 0) {
+      setSent(true);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setSubmitError(null);
+
+      const payload: Record<string, unknown> = {};
+      for (const field of schema.fields) {
+        const raw = values[field.key];
+        if (isEmpty(raw)) continue;
+        payload[field.key] = typeof raw === 'string' ? raw.trim() : raw;
+      }
+
+      await getClient().createInquiry({
+        formKey: schema.key,
+        fields: payload,
+        locale,
+      });
+
+      setSent(true);
+      const reset: Record<string, FieldValue> = {};
+      for (const field of schema.fields) reset[field.key] = defaultValueFor(field);
+      setValues(reset);
+      setHoneypot('');
+    } catch (err) {
+      setSubmitError(err instanceof Error ? err.message : t('genericError'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (schemaError) {
+    return (
+      <div className="mx-auto max-w-2xl px-4 py-12 sm:px-6 lg:px-8">
+        <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
+          {schemaError}
+        </div>
+      </div>
+    );
+  }
+
+  if (!schema) {
+    return (
+      <div className="mx-auto flex max-w-2xl items-center justify-center px-4 py-24 sm:px-6 lg:px-8">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  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">{schema.name || t('title')}</h1>
+        {schema.description ? (
+          <p className="text-muted-foreground mt-2 text-sm">{schema.description}</p>
+        ) : (
+          <p className="text-muted-foreground mt-2 text-sm">{t('subtitle')}</p>
+        )}
+      </div>
+
+      {submitError && (
+        <div className="bg-destructive/10 border-destructive/20 text-destructive mb-6 rounded-lg border px-4 py-3 text-sm">
+          {submitError}
+        </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">{schema.successMessage || 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>
+          <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={honeypot}
+              onChange={(e) => setHoneypot(e.target.value)}
+            />
+          </div>
+
+          {schema.fields.map((field) => (
+            <DynamicField
+              key={field.key}
+              field={field}
+              value={values[field.key] ?? defaultValueFor(field)}
+              onChange={(v) => updateValue(field.key, v)}
+              t={t}
+            />
+          ))}
+
+          <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')}
+              </>
+            ) : (
+              schema.submitButton || t('send')
+            )}
+          </button>
+        </form>
+      )}
+    </div>
+  );
+}
+
+function DynamicField({
+  field,
+  value,
+  onChange,
+  t,
+}: {
+  field: ContactFormPublicField;
+  value: FieldValue;
+  onChange: (v: FieldValue) => void;
+  t: (key: string, values?: Record<string, string>) => string;
+}) {
+  const id = `contact-${field.key}`;
+  const label = (
+    <label htmlFor={id} className="text-foreground mb-1.5 block text-sm font-medium">
+      {field.label}
+      {!field.isRequired && <span className="text-muted-foreground ms-1">({t('optional')})</span>}
+    </label>
+  );
+  const help = field.helpText ? (
+    <p className="text-muted-foreground mt-1 text-xs">{field.helpText}</p>
+  ) : null;
+
+  const maxLength = field.validation?.maxLength;
+  const minLength = field.validation?.minLength;
+  const min = field.validation?.min;
+  const max = field.validation?.max;
+  const pattern = field.validation?.pattern;
+  const strVal = typeof value === 'string' ? value : '';
+
+  switch (field.type) {
+    case 'TEXTAREA':
+      return (
+        <div>
+          {label}
+          <textarea
+            id={id}
+            required={field.isRequired}
+            maxLength={maxLength}
+            minLength={minLength}
+            rows={6}
+            placeholder={field.placeholder}
+            value={strVal}
+            onChange={(e) => onChange(e.target.value)}
+            className={textareaClass}
+          />
+          {help}
+        </div>
+      );
+
+    case 'SELECT':
+      return (
+        <div>
+          {label}
+          <select
+            id={id}
+            required={field.isRequired}
+            value={strVal}
+            onChange={(e) => onChange(e.target.value)}
+            className={inputClass}
+          >
+            <option value="">—</option>
+            {field.enumValues?.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+          {help}
+        </div>
+      );
+
+    case 'MULTI_SELECT': {
+      const arr = Array.isArray(value) ? value : [];
+      return (
+        <div>
+          {label}
+          <div className="space-y-2">
+            {field.enumValues?.map((opt) => {
+              const checked = arr.includes(opt.value);
+              return (
+                <label key={opt.value} className="flex items-center gap-2 text-sm">
+                  <input
+                    type="checkbox"
+                    checked={checked}
+                    onChange={(e) => {
+                      if (e.target.checked) onChange([...arr, opt.value]);
+                      else onChange(arr.filter((v) => v !== opt.value));
+                    }}
+                  />
+                  <span>{opt.label}</span>
+                </label>
+              );
+            })}
+          </div>
+          {help}
+        </div>
+      );
+    }
+
+    case 'CHECKBOX':
+      return (
+        <div>
+          <label htmlFor={id} className="flex items-start gap-2 text-sm">
+            <input
+              id={id}
+              type="checkbox"
+              required={field.isRequired}
+              checked={value === true}
+              onChange={(e) => onChange(e.target.checked)}
+              className="mt-0.5"
+            />
+            <span className="text-foreground">{field.label}</span>
+          </label>
+          {help}
+        </div>
+      );
+
+    case 'NUMBER':
+      return (
+        <div>
+          {label}
+          <input
+            id={id}
+            type="number"
+            required={field.isRequired}
+            min={min}
+            max={max}
+            placeholder={field.placeholder}
+            value={strVal}
+            onChange={(e) => onChange(e.target.value)}
+            className={inputClass}
+          />
+          {help}
+        </div>
+      );
+
+    case 'EMAIL':
+      return (
+        <div>
+          {label}
+          <input
+            id={id}
+            type="email"
+            required={field.isRequired}
+            autoComplete="email"
+            placeholder={field.placeholder}
+            value={strVal}
+            onChange={(e) => onChange(e.target.value)}
+            className={inputClass}
+          />
+          {help}
+        </div>
+      );
+
+    case 'PHONE':
+      return (
+        <div>
+          {label}
+          <input
+            id={id}
+            type="tel"
+            required={field.isRequired}
+            autoComplete="tel"
+            placeholder={field.placeholder}
+            value={strVal}
+            onChange={(e) => onChange(e.target.value)}
+            className={inputClass}
+          />
+          {help}
+        </div>
+      );
+
+    case 'URL':
+      return (
+        <div>
+          {label}
+          <input
+            id={id}
+            type="url"
+            required={field.isRequired}
+            placeholder={field.placeholder}
+            value={strVal}
+            onChange={(e) => onChange(e.target.value)}
+            className={inputClass}
+          />
+          {help}
+        </div>
+      );
+
+    case 'DATE':
+      return (
+        <div>
+          {label}
+          <input
+            id={id}
+            type="date"
+            required={field.isRequired}
+            value={strVal}
+            onChange={(e) => onChange(e.target.value)}
+            className={inputClass}
+          />
+          {help}
+        </div>
+      );
+
+    case 'TEXT':
+    default:
+      return (
+        <div>
+          {label}
+          <input
+            id={id}
+            type="text"
+            required={field.isRequired}
+            maxLength={maxLength}
+            minLength={minLength}
+            pattern={pattern}
+            placeholder={field.placeholder}
+            value={strVal}
+            onChange={(e) => onChange(e.target.value)}
+            className={inputClass}
+          />
+          {help}
+        </div>
+      );
+  }
+}

package/templates/nextjs/base/src/lib/translations.ts.ejs

@@ -1,7 +1,7 @@
 <% if (i18nEnabled) { %>
 'use client';
 
-import { createContext, useContext } from 'react';
+import { createContext, useCallback, useContext } from 'react';
 
 type Messages = Record<string, Record<string, string>>;
 
@@ -11,33 +11,40 @@ export { MessagesContext };
 
 export function useTranslations(namespace: string) {
   const messages = useContext(MessagesContext);
-  const ns = (messages[namespace] || {}) as Record<string, string>;
-  return function t(key: string, values?: Record<string, string>): string {
-    let result = ns[key] || `${namespace}.${key}`;
-    if (values) {
-      for (const [k, v] of Object.entries(values)) {
-        result = result.replace(`{${k}}`, v);
+  return useCallback(
+    (key: string, values?: Record<string, string>): string => {
+      const ns = (messages[namespace] || {}) as Record<string, string>;
+      let result = ns[key] || `${namespace}.${key}`;
+      if (values) {
+        for (const [k, v] of Object.entries(values)) {
+          result = result.replace(`{${k}}`, v);
+        }
       }
-    }
-    return result;
-  };
+      return result;
+    },
+    [messages, namespace]
+  );
 }
 <% } else { %>
+import { useCallback } from 'react';
 import { messages } from '@/i18n';
 
 type Messages = typeof messages;
 type Namespace = keyof Messages;
 
 export function useTranslations<N extends Namespace>(namespace: N) {
-  const ns = messages[namespace] as Record<string, string>;
-  return function t(key: string, values?: Record<string, string>): string {
-    let result = ns[key] || `${String(namespace)}.${key}`;
-    if (values) {
-      for (const [k, v] of Object.entries(values)) {
-        result = result.replace(`{${k}}`, v);
+  return useCallback(
+    (key: string, values?: Record<string, string>): string => {
+      const ns = messages[namespace] as Record<string, string>;
+      let result = ns[key] || `${String(namespace)}.${key}`;
+      if (values) {
+        for (const [k, v] of Object.entries(values)) {
+          result = result.replace(`{${k}}`, v);
+        }
       }
-    }
-    return result;
-  };
+      return result;
+    },
+    [namespace]
+  );
 }
 <% } %>