create-brainerce-store 1.50.5 → 1.52.0

package/templates/nextjs/ui-canvas/layout/site-footer.tsx.ejs

@@ -0,0 +1,82 @@
+/**
+ * Storefront footer (bare skeleton) — fully driven by the merchant's
+ * dashboard configuration.
+ *
+ * The merchant configures the footer in the Brainerce dashboard under
+ *   Sell → Content → Footer
+ *
+ * Renders a brand block (store-name + social links), the merchant's link
+ * columns, and a copyright bar.
+ *
+ * API contract:
+ *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
+ *   Returns null on 404 — we render a minimal fallback so the layout never
+ *   crashes when the merchant hasn't seeded the footer yet.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+
+interface SiteFooterProps {
+  /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
+  footer: Content<'FOOTER'> | null;
+  /** Store name shown in the brand block + fallback copyright. */
+  storeName?: string;
+}
+
+export function SiteFooter({ footer, storeName }: SiteFooterProps) {
+  const data = footer?.data;
+  const columns = data?.columns ?? [];
+  const social = data?.social ?? [];
+  const year = new Date().getFullYear();
+  const brandLabel = storeName ?? 'Store';
+
+  if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
+    return (
+      <footer>
+        {/* DESIGN ME — footer (fallback branch): copyright only; Content<'FOOTER'> pre-fetched in the layout. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+        <p>
+          © {year} {brandLabel}. All rights reserved.
+        </p>
+      </footer>
+    );
+  }
+
+  return (
+    <footer>
+      {/* DESIGN ME — footer: brand block, merchant link columns and social links (Content<'FOOTER'> pre-fetched in the layout), copyright bar. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <div>
+        <a href="/">{brandLabel}</a>
+        {social.length > 0 ? (
+          <ul className="flex flex-wrap items-center gap-2">
+            {social.map((entry, idx) => (
+              <li key={`${entry.platform}-${idx}`}>
+                <a href={entry.url} target="_blank" rel="noopener noreferrer" aria-label={entry.platform}>
+                  {entry.platform}
+                </a>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+
+      {columns.length > 0 ? (
+        <div className="flex flex-wrap gap-8">
+          {columns.map((col, idx) => (
+            <nav key={`${col.title}-${idx}`} aria-label={col.title}>
+              <h3>{col.title}</h3>
+              <ul>
+                {col.links.map((link, linkIdx) => (
+                  <li key={`${link.url}-${linkIdx}`}>
+                    <a href={link.url}>{link.label}</a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ))}
+        </div>
+      ) : null}
+
+      <p>{data.copyright ?? `© ${year} ${brandLabel}. All rights reserved.`}</p>
+    </footer>
+  );
+}

package/templates/nextjs/ui-canvas/layout/site-header.tsx.ejs

@@ -0,0 +1,119 @@
+/**
+ * Merchant-controlled site header (bare skeleton).
+ *
+ * The merchant configures the header in the Brainerce dashboard under
+ *   Sell → Content → Header
+ *
+ * Renders brand (logo or store-name fallback) + nav items + CTA + cart link,
+ * with a `<details>` mobile-friendly menu that works without client-side JS.
+ * Everything is generic — do NOT hardcode nav labels or logo paths here; the
+ * merchant edits them in the dashboard and the change propagates within ~5
+ * minutes.
+ *
+ * If `header` is null (404 from the API, or the merchant deleted the row),
+ * we render a minimal static fallback with just the brand label and cart link
+ * so the layout never collapses.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+import { HeaderAccount } from './header-account';
+<% if (i18nEnabled) { %>
+import { LanguageSwitcher } from '@/ui/layout/language-switcher';
+<% } %>
+
+interface SiteHeaderProps {
+  /** Pre-fetched header payload (server-side). `null` triggers static fallback. */
+  header: Content<'HEADER'> | null;
+  /** Fallback brand label when the merchant hasn't uploaded a logo yet. */
+  storeName?: string;
+}
+
+export function SiteHeader({ header, storeName }: SiteHeaderProps) {
+  const data = header?.data;
+  const logo = data?.logo;
+  const navItems = data?.navItems ?? [];
+  const cta = data?.cta;
+  const brandLabel = logo?.alt || storeName || 'Store';
+
+  // Static fallback — runs when the Content API returned null (no HEADER row
+  // for this store yet, or fetch failed). Keep the brand + cart so the page
+  // always has a clickable home link and entry to checkout.
+  if (!header) {
+    return (
+      <header>
+        {/* DESIGN ME — site header (fallback branch, no merchant nav yet): brand link + account + cart; data comes pre-fetched from the layout via the Content API. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+        <div className="flex items-center justify-between gap-4">
+          <a href="/" aria-label={brandLabel}>
+            {brandLabel}
+          </a>
+          <div className="flex items-center gap-2">
+            <% if (i18nEnabled) { %>
+            <LanguageSwitcher />
+            <% } %>
+            <HeaderAccount />
+            <a href="/cart" aria-label="Cart">
+              Cart
+            </a>
+          </div>
+        </div>
+      </header>
+    );
+  }
+
+  return (
+    <header>
+      {/* DESIGN ME — site header: merchant-configured logo/nav/CTA (Content<'HEADER'> pre-fetched in the layout) + account + cart links. Keep every link working. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <div className="flex items-center justify-between gap-4">
+        <a href="/" className="flex items-center gap-2" aria-label={brandLabel}>
+          {logo ? (
+            // eslint-disable-next-line @next/next/no-img-element -- merchant-supplied URL, dynamic optimization handled by CDN
+            <img src={logo.src} alt={logo.alt} />
+          ) : (
+            <span>{brandLabel}</span>
+          )}
+        </a>
+
+        {navItems.length > 0 ? (
+          <nav aria-label="Main">
+            <ul className="flex items-center gap-4">
+              {navItems.map((item, idx) => (
+                <li key={`${item.url}-${idx}`}>
+                  <a href={item.url}>{item.label}</a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ) : null}
+
+        <div className="flex items-center gap-2">
+          {cta ? <a href={cta.url}>{cta.label}</a> : null}
+
+          <% if (i18nEnabled) { %>
+          <LanguageSwitcher />
+          <% } %>
+
+          <HeaderAccount />
+
+          <a href="/cart" aria-label="Cart">
+            Cart
+          </a>
+
+          {navItems.length > 0 ? (
+            <details>
+              <summary>Menu</summary>
+              <nav aria-label="Mobile">
+                <ul>
+                  {navItems.map((item, idx) => (
+                    <li key={`m-${item.url}-${idx}`}>
+                      <a href={item.url}>{item.label}</a>
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            </details>
+          ) : null}
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/nextjs/ui-canvas/product/customization-fields.tsx

@@ -0,0 +1,445 @@
+'use client';
+
+import { useState } from 'react';
+import type { ProductCustomizationField } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import type { CustomizationValues } from '@/core/lib/product-options';
+
+// The pure validation logic lives in core (zero markup) so that
+// `core/hooks/use-product-page` never imports from `ui/`. Re-exported here
+// for backward compatibility with existing imports.
+export { validateCustomization } from '@/core/lib/product-options';
+export type { CustomizationValues } from '@/core/lib/product-options';
+
+interface CustomizationFieldsProps {
+  fields: ProductCustomizationField[];
+  values: CustomizationValues;
+  onChange: (values: CustomizationValues) => void;
+  errors?: Record<string, string>;
+}
+
+/**
+ * DESIGN ME — buyer-input customization fields on the product page
+ * (engraving text, gift date, uploaded artwork, …). Field definitions,
+ * values and validation errors come from useProductPage(); every input type
+ * below must stay functional (including the image/gallery uploads).
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function CustomizationFields({
+  fields,
+  values,
+  onChange,
+  errors = {},
+}: CustomizationFieldsProps) {
+  const t = useTranslations('customization');
+
+  if (fields.length === 0) return null;
+
+  const sorted = [...fields].sort((a, b) => a.position - b.position);
+
+  const setValue = (key: string, value: unknown) => {
+    onChange({ ...values, [key]: value });
+  };
+
+  return (
+    <fieldset>
+      <legend>{t('title')}</legend>
+      <div>
+        {sorted.map((field) => (
+          <CustomizationFieldRow
+            key={field.definitionId}
+            field={field}
+            value={values[field.key]}
+            error={errors[field.key]}
+            onChange={(v) => setValue(field.key, v)}
+          />
+        ))}
+      </div>
+    </fieldset>
+  );
+}
+
+interface RowProps {
+  field: ProductCustomizationField;
+  value: unknown;
+  error?: string;
+  onChange: (value: unknown) => void;
+}
+
+function CustomizationFieldRow({ field, value, error, onChange }: RowProps) {
+  const t = useTranslations('customization');
+  const labelText = (
+    <span>
+      {field.name}
+      {field.required && <span aria-hidden="true"> *</span>}
+    </span>
+  );
+
+  const help = field.description ? <p>{field.description}</p> : null;
+
+  const errorHint = error ? <p role="alert">{error}</p> : null;
+
+  switch (field.type) {
+    case 'TEXTAREA':
+      return (
+        <div>
+          <label>
+            {labelText}
+            <textarea
+              value={typeof value === 'string' ? value : ''}
+              onChange={(e) => onChange(e.target.value)}
+              minLength={field.minLength ?? undefined}
+              maxLength={field.maxLength ?? undefined}
+              required={field.required}
+              rows={3}
+            />
+          </label>
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    case 'NUMBER':
+      return (
+        <div>
+          <label>
+            {labelText}
+            <input
+              type="number"
+              value={typeof value === 'number' ? value : ''}
+              onChange={(e) =>
+                onChange(e.target.value === '' ? undefined : Number(e.target.value))
+              }
+              min={field.minValue ?? undefined}
+              max={field.maxValue ?? undefined}
+              required={field.required}
+            />
+          </label>
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    case 'BOOLEAN':
+      return (
+        <div>
+          <label className="inline-flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={value === true}
+              onChange={(e) => onChange(e.target.checked)}
+            />
+            {labelText}
+          </label>
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    case 'DATE':
+      return (
+        <div>
+          <label>
+            {labelText}
+            <input
+              type="date"
+              value={typeof value === 'string' ? value : ''}
+              onChange={(e) => onChange(e.target.value)}
+              required={field.required}
+            />
+          </label>
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    case 'DATETIME':
+      return (
+        <div>
+          <label>
+            {labelText}
+            <input
+              type="datetime-local"
+              value={typeof value === 'string' ? value : ''}
+              onChange={(e) => onChange(e.target.value)}
+              required={field.required}
+            />
+          </label>
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    case 'COLOR':
+      return (
+        <div>
+          <label>
+            {labelText}
+            <input
+              type="color"
+              value={typeof value === 'string' && value ? value : '#000000'}
+              onChange={(e) => onChange(e.target.value)}
+              required={field.required}
+            />
+          </label>
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    case 'SELECT': {
+      const options = field.enumValues ?? [];
+      return (
+        <div>
+          <label>
+            {labelText}
+            <select
+              value={typeof value === 'string' ? value : ''}
+              onChange={(e) => onChange(e.target.value || undefined)}
+              required={field.required}
+            >
+              <option value="">{t('selectPlaceholder')}</option>
+              {options.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label || opt.value}
+                </option>
+              ))}
+            </select>
+          </label>
+          {help}
+          {errorHint}
+        </div>
+      );
+    }
+
+    case 'MULTI_SELECT': {
+      const options = field.enumValues ?? [];
+      const current = Array.isArray(value) ? (value as string[]) : [];
+      const toggle = (opt: string) => {
+        onChange(current.includes(opt) ? current.filter((v) => v !== opt) : [...current, opt]);
+      };
+      return (
+        <fieldset>
+          <legend>{labelText}</legend>
+          <div>
+            {options.map((opt) => (
+              <label key={opt.value} className="inline-flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={current.includes(opt.value)}
+                  onChange={() => toggle(opt.value)}
+                />
+                {opt.label || opt.value}
+              </label>
+            ))}
+          </div>
+          {help}
+          {errorHint}
+        </fieldset>
+      );
+    }
+
+    case 'IMAGE':
+      return (
+        <SingleImageField
+          field={field}
+          value={typeof value === 'string' ? value : undefined}
+          onChange={onChange}
+          labelText={labelText}
+          help={help}
+          errorHint={errorHint}
+        />
+      );
+
+    case 'GALLERY':
+      return (
+        <GalleryField
+          field={field}
+          value={Array.isArray(value) ? (value as string[]) : []}
+          onChange={onChange}
+          labelText={labelText}
+          help={help}
+          errorHint={errorHint}
+        />
+      );
+
+    case 'URL':
+      return (
+        <div>
+          <label>
+            {labelText}
+            <input
+              type="url"
+              value={typeof value === 'string' ? value : ''}
+              onChange={(e) => onChange(e.target.value)}
+              required={field.required}
+            />
+          </label>
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    default:
+      return (
+        <div>
+          <label>
+            {labelText}
+            <input
+              type="text"
+              value={typeof value === 'string' ? value : ''}
+              onChange={(e) => onChange(e.target.value)}
+              minLength={field.minLength ?? undefined}
+              maxLength={field.maxLength ?? undefined}
+              required={field.required}
+            />
+          </label>
+          {help}
+          {errorHint}
+        </div>
+      );
+  }
+}
+
+interface FileFieldProps {
+  field: ProductCustomizationField;
+  labelText: React.ReactNode;
+  help: React.ReactNode;
+  errorHint: React.ReactNode;
+  onChange: (value: unknown) => void;
+}
+
+function SingleImageField({
+  field,
+  value,
+  onChange,
+  labelText,
+  help,
+  errorHint,
+}: FileFieldProps & { value?: string }) {
+  const t = useTranslations('customization');
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+
+  async function handleFile(file: File | null) {
+    if (!file) return;
+    setUploading(true);
+    setUploadError(null);
+    try {
+      const { getClient } = await import('@/core/lib/brainerce');
+      const client = getClient();
+      const result = await client.uploadCustomizationFile(file);
+      onChange(result.url);
+    } catch (err) {
+      console.error('Upload failed', err);
+      setUploadError(t('uploadFailed'));
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  return (
+    <div>
+      <label>
+        {labelText}
+        <input
+          type="file"
+          accept="image/*"
+          onChange={(e) => handleFile(e.target.files?.[0] ?? null)}
+          disabled={uploading}
+          required={field.required && !value}
+        />
+      </label>
+      {uploading && (
+        <span>
+          <LoadingSpinner size="sm" />
+          {t('uploading')}
+        </span>
+      )}
+      {value && !uploading && (
+        <div>
+          <img src={value} alt="" className="h-20 w-20" />
+        </div>
+      )}
+      {uploadError && <p role="alert">{uploadError}</p>}
+      {help}
+      {errorHint}
+    </div>
+  );
+}
+
+function GalleryField({
+  field,
+  value,
+  onChange,
+  labelText,
+  help,
+  errorHint,
+}: FileFieldProps & { value: string[] }) {
+  const t = useTranslations('customization');
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+
+  async function handleFiles(fileList: FileList | null) {
+    if (!fileList || fileList.length === 0) return;
+    setUploading(true);
+    setUploadError(null);
+    try {
+      const { getClient } = await import('@/core/lib/brainerce');
+      const client = getClient();
+      const newUrls: string[] = [];
+      for (const file of Array.from(fileList)) {
+        const result = await client.uploadCustomizationFile(file);
+        newUrls.push(result.url);
+      }
+      onChange([...value, ...newUrls]);
+    } catch (err) {
+      console.error('Upload failed', err);
+      setUploadError(t('uploadFailed'));
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  function removeAt(idx: number) {
+    onChange(value.filter((_, i) => i !== idx));
+  }
+
+  return (
+    <div>
+      <label>
+        {labelText}
+        <input
+          type="file"
+          accept="image/*"
+          multiple
+          onChange={(e) => handleFiles(e.target.files)}
+          disabled={uploading}
+        />
+      </label>
+      {uploading && (
+        <span>
+          <LoadingSpinner size="sm" />
+          {t('uploading')}
+        </span>
+      )}
+      {value.length > 0 && (
+        <ul className="flex flex-wrap gap-2">
+          {value.map((url, idx) => (
+            <li key={`${url}-${idx}`}>
+              <img src={url} alt="" className="h-16 w-16" />
+              <button type="button" onClick={() => removeAt(idx)} aria-label={t('removeImage')}>
+                ×
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+      {uploadError && <p role="alert">{uploadError}</p>}
+      {help}
+      {errorHint}
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/product/discount-badge.tsx

@@ -0,0 +1,19 @@
+import type { ProductDiscount } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+
+interface DiscountBadgeProps {
+  discount?: ProductDiscount | null;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — discount-rule badge shown on product cards; text comes from
+ * the product's `discount.badgeText` (merchant-configured rule).
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function DiscountBadge({ discount, className }: DiscountBadgeProps) {
+  if (!discount) return null;
+
+  return <span className={cn(className)}>{discount.badgeText}</span>;
+}