create-brainerce-store 1.33.0 → 1.33.2

package/dist/index.js

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

package/messages/en.json

@@ -429,6 +429,7 @@
     "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."
+    "genericError": "Something went wrong. Please try again.",
+    "fieldRequired": "{label} is required"
   }
 }

package/messages/he.json

@@ -429,6 +429,7 @@
     "sendAnother": "שליחת הודעה נוספת",
     "thanksTitle": "תודה!",
     "thanksBody": "ההודעה התקבלה. נחזור אליך באימייל בהקדם האפשרי.",
-    "genericError": "משהו השתבש. אנא נסה שוב."
+    "genericError": "משהו השתבש. אנא נסה שוב.",
+    "fieldRequired": "השדה {label} הוא חובה"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.33.0",
+  "version": "1.33.2",
   "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,461 +1,528 @@
-'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>
-      );
-  }
-}
+'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
+ *   • set field width (FULL/HALF/THIRD) for multi-column layouts
+ *
+ * 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;
+}
+
+/** Map field.width → Tailwind col-span utilities (6-column grid). */
+function widthColSpan(width?: string): string {
+  switch (width) {
+    case 'HALF':
+      return 'col-span-6 sm:col-span-3';
+    case 'THIRD':
+      return 'col-span-6 sm:col-span-2';
+    default:
+      return 'col-span-6';
+  }
+}
+
+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 inputErrorClass =
+  'border-red-400 bg-background text-foreground placeholder:text-muted-foreground focus:ring-red-200 focus:border-red-500 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';
+
+const textareaErrorClass =
+  'border-red-400 bg-background text-foreground placeholder:text-muted-foreground focus:ring-red-200 focus:border-red-500 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 [errors, setErrors] = useState<Record<string, string>>({});
+  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 }));
+    // Clear field error on input change
+    if (errors[key]) {
+      setErrors((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+    }
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading || !schema) return;
+
+    if (honeypot.trim().length > 0) {
+      setSent(true);
+      return;
+    }
+
+    // ── Client-side required-field validation ──
+    const newErrors: Record<string, string> = {};
+    for (const field of schema.fields) {
+      if (field.isRequired && isEmpty(values[field.key] ?? defaultValueFor(field))) {
+        newErrors[field.key] = t('fieldRequired', { label: field.label });
+      }
+    }
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return; // block submission — do NOT send to server
+    }
+    setErrors({});
+
+    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-2" 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>
+
+          {/* 6-column grid — FULL=span 6, HALF=span 3, THIRD=span 2; stacks on mobile */}
+          <div className="grid grid-cols-6 gap-4">
+            {schema.fields.map((field) => (
+              <DynamicField
+                key={field.key}
+                field={field}
+                value={values[field.key] ?? defaultValueFor(field)}
+                error={errors[field.key]}
+                onChange={(v) => updateValue(field.key, v)}
+                t={t}
+              />
+            ))}
+          </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')}
+              </>
+            ) : (
+              schema.submitButton || t('send')
+            )}
+          </button>
+        </form>
+      )}
+    </div>
+  );
+}
+
+function DynamicField({
+  field,
+  value,
+  error,
+  onChange,
+  t,
+}: {
+  field: ContactFormPublicField;
+  value: FieldValue;
+  error?: string;
+  onChange: (v: FieldValue) => void;
+  t: (key: string, values?: Record<string, string>) => string;
+}) {
+  const id = `contact-${field.key}`;
+  const hasError = !!error;
+  const label = (
+    <label htmlFor={id} className="text-foreground mb-1.5 block text-sm font-medium">
+      {field.label}
+      {field.isRequired ? (
+        <span className="text-red-500 ms-0.5" aria-hidden>*</span>
+      ) : (
+        <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 errorEl = error ? (
+    <p className="text-red-500 mt-1 text-xs">{error}</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 : '';
+  const iClass = hasError ? inputErrorClass : inputClass;
+  const tClass = hasError ? textareaErrorClass : textareaClass;
+
+  switch (field.type) {
+    case 'TEXTAREA':
+      return (
+        <div className={widthColSpan(field.width)}>
+          {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={tClass}
+          />
+          {help}
+          {errorEl}
+        </div>
+      );
+
+    case 'SELECT':
+      return (
+        <div className={widthColSpan(field.width)}>
+          {label}
+          <select
+            id={id}
+            required={field.isRequired}
+            value={strVal}
+            onChange={(e) => onChange(e.target.value)}
+            className={iClass}
+          >
+            <option value="">—</option>
+            {field.enumValues?.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+          {help}
+          {errorEl}
+        </div>
+      );
+
+    case 'MULTI_SELECT': {
+      const arr = Array.isArray(value) ? value : [];
+      return (
+        <div className={widthColSpan(field.width)}>
+          {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}
+          {errorEl}
+        </div>
+      );
+    }
+
+    case 'CHECKBOX':
+      return (
+        <div className={widthColSpan(field.width)}>
+          <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}
+          {errorEl}
+        </div>
+      );
+
+    case 'NUMBER':
+      return (
+        <div className={widthColSpan(field.width)}>
+          {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={iClass}
+          />
+          {help}
+          {errorEl}
+        </div>
+      );
+
+    case 'EMAIL':
+      return (
+        <div className={widthColSpan(field.width)}>
+          {label}
+          <input
+            id={id}
+            type="email"
+            required={field.isRequired}
+            autoComplete="email"
+            placeholder={field.placeholder}
+            value={strVal}
+            onChange={(e) => onChange(e.target.value)}
+            className={iClass}
+          />
+          {help}
+          {errorEl}
+        </div>
+      );
+
+    case 'PHONE':
+      return (
+        <div className={widthColSpan(field.width)}>
+          {label}
+          <input
+            id={id}
+            type="tel"
+            required={field.isRequired}
+            autoComplete="tel"
+            placeholder={field.placeholder}
+            value={strVal}
+            onChange={(e) => onChange(e.target.value)}
+            className={iClass}
+          />
+          {help}
+          {errorEl}
+        </div>
+      );
+
+    case 'URL':
+      return (
+        <div className={widthColSpan(field.width)}>
+          {label}
+          <input
+            id={id}
+            type="url"
+            required={field.isRequired}
+            placeholder={field.placeholder}
+            value={strVal}
+            onChange={(e) => onChange(e.target.value)}
+            className={iClass}
+          />
+          {help}
+          {errorEl}
+        </div>
+      );
+
+    case 'DATE':
+      return (
+        <div className={widthColSpan(field.width)}>
+          {label}
+          <input
+            id={id}
+            type="date"
+            required={field.isRequired}
+            value={strVal}
+            onChange={(e) => onChange(e.target.value)}
+            className={iClass}
+          />
+          {help}
+          {errorEl}
+        </div>
+      );
+
+    case 'TEXT':
+    default:
+      return (
+        <div className={widthColSpan(field.width)}>
+          {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={iClass}
+          />
+          {help}
+          {errorEl}
+        </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]
+  );
 }
 <% } %>