create-brainerce-store 1.31.2 → 1.33.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.31.2",
+      version: "1.33.0",
       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.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

@@ -1,75 +1,179 @@
 'use client';
 
-import { useState } from 'react';
+/**
+ * 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 [form, setForm] = useState({
-    name: '',
-    email: '',
-    phone: '',
-    subject: '',
-    message: '',
-    honeypot: '',
-  });
+  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 [error, setError] = useState<string | null>(null);
+  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) return;
+    if (loading || !schema) return;
 
-    // Honeypot — silently drop anything that auto-filled this hidden field.
-    if (form.honeypot.trim().length > 0) {
+    if (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,
+      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);
-      setForm({ name: '', email: '', phone: '', subject: '', message: '', honeypot: '' });
+      const reset: Record<string, FieldValue> = {};
+      for (const field of schema.fields) reset[field.key] = defaultValueFor(field);
+      setValues(reset);
+      setHoneypot('');
     } catch (err) {
-      const message = err instanceof Error ? err.message : t('genericError');
-      setError(message);
+      setSubmitError(err instanceof Error ? err.message : t('genericError'));
     } 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';
+  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">{t('title')}</h1>
-        <p className="text-muted-foreground mt-2 text-sm">{t('subtitle')}</p>
+        <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>
 
-      {error && (
+      {submitError && (
         <div className="bg-destructive/10 border-destructive/20 text-destructive mb-6 rounded-lg border px-4 py-3 text-sm">
-          {error}
+          {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">{t('thanksBody')}</p>
+          <p className="mt-1">{schema.successMessage || t('thanksBody')}</p>
           <button
             type="button"
             onClick={() => setSent(false)}
@@ -80,7 +184,6 @@ export default function ContactPage() {
         </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"
@@ -91,101 +194,20 @@ export default function ContactPage() {
               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}
+              value={honeypot}
+              onChange={(e) => setHoneypot(e.target.value)}
             />
           </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}
+          {schema.fields.map((field) => (
+            <DynamicField
+              key={field.key}
+              field={field}
+              value={values[field.key] ?? defaultValueFor(field)}
+              onChange={(v) => updateValue(field.key, v)}
+              t={t}
             />
-          </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"
@@ -201,7 +223,7 @@ export default function ContactPage() {
                 {t('sending')}
               </>
             ) : (
-              t('send')
+              schema.submitButton || t('send')
             )}
           </button>
         </form>
@@ -209,3 +231,231 @@ export default function ContactPage() {
     </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>
+      );
+  }
+}