create-brainerce-store 1.51.0 → 1.52.0

package/templates/nextjs/designs/atelier/ui/layout/announcement-bar.tsx

@@ -0,0 +1,118 @@
+/**
+ * Storefront announcement bar — fully driven by the merchant's dashboard.
+ *
+ * The merchant configures announcements in the Brainerce dashboard under
+ *   Sell → Content → Announcement
+ *
+ * Rendering adapts automatically to any announcement shape returned by the
+ * API — never hardcode the message or severity here.
+ *
+ * API contract:
+ *   GET → client.content.announcement.list(locale) → Content<'ANNOUNCEMENT'>[]
+ *   Empty array → renders nothing (page layout stays intact).
+ *
+ * Time-bounded: each announcement may have `startsAt` / `endsAt` ISO
+ * timestamps. We filter client-side so the cached server response can be
+ * shared across visitors regardless of the current time.
+ *
+ * Tone by `data.severity`: info/success ride the forest brand band;
+ * warning switches to the destructive tone so it reads as urgent.
+ */
+'use client';
+
+import * as React from 'react';
+import type { Content } from 'brainerce';
+import { IconX } from '@/ui/shared/icons';
+
+interface AnnouncementBarProps {
+  /** Pre-fetched list from the server. Pass `[]` to render nothing. */
+  announcements: Content<'ANNOUNCEMENT'>[];
+}
+
+const STORAGE_KEY = 'brainerce_dismissed_announcements';
+
+export function AnnouncementBar({ announcements }: AnnouncementBarProps) {
+  const [dismissed, setDismissed] = React.useState<Set<string>>(() => new Set());
+
+  // Hydrate dismissals from localStorage on mount (avoids SSR/CSR mismatch).
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      const raw = window.localStorage.getItem(STORAGE_KEY);
+      if (raw) setDismissed(new Set(JSON.parse(raw) as string[]));
+    } catch {
+      // ignore malformed storage
+    }
+  }, []);
+
+  const dismiss = (id: string) => {
+    setDismissed((prev) => {
+      const next = new Set(prev);
+      next.add(id);
+      if (typeof window !== 'undefined') {
+        try {
+          window.localStorage.setItem(STORAGE_KEY, JSON.stringify([...next]));
+        } catch {
+          // ignore quota errors
+        }
+      }
+      return next;
+    });
+  };
+
+  const now = Date.now();
+  const visible = announcements.filter((a) => {
+    if (dismissed.has(a.id)) return false;
+    const startOk = !a.data.startsAt || new Date(a.data.startsAt).getTime() <= now;
+    const endOk = !a.data.endsAt || new Date(a.data.endsAt).getTime() >= now;
+    return startOk && endOk;
+  });
+
+  if (visible.length === 0) return null;
+
+  return (
+    <div role="region" aria-label="Site announcements">
+      {visible.map((announcement) => {
+        const isWarning = announcement.data.severity === 'warning';
+        return (
+          <div
+            key={announcement.id}
+            data-severity={announcement.data.severity}
+            className={
+              isWarning
+                ? 'bg-destructive text-destructive-foreground'
+                : 'bg-primary text-primary-foreground'
+            }
+          >
+            <div className="container-page flex min-h-9 items-center justify-center gap-3 py-1.5 text-center text-[13px] font-medium">
+              <span>
+                {announcement.data.message}
+                {announcement.data.ctaHref && announcement.data.ctaLabel ? (
+                  <>
+                    {' '}
+                    <a
+                      href={announcement.data.ctaHref}
+                      className="underline underline-offset-2 hover:opacity-80"
+                    >
+                      {announcement.data.ctaLabel}
+                    </a>
+                  </>
+                ) : null}
+              </span>
+              {announcement.data.dismissible ? (
+                <button
+                  type="button"
+                  onClick={() => dismiss(announcement.id)}
+                  aria-label="Dismiss announcement"
+                  className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-primary-foreground/15"
+                >
+                  <IconX size={16} />
+                </button>
+              ) : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/layout/faq-section.tsx

@@ -0,0 +1,96 @@
+/**
+ * FAQ accordion (bare skeleton) — fully driven by the merchant's dashboard
+ * configuration.
+ *
+ * The merchant configures FAQs in the Brainerce dashboard under
+ *   Sell → Content → FAQ
+ *
+ * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
+ * pre-fetched payload as `faq`; this component knows nothing about which
+ * key it came from.
+ *
+ * Two render branches:
+ *   1. `faq` has items → accordion of question/answer pairs
+ *   2. `faq` is null OR has no items → friendly empty state with a contact
+ *      CTA, so the /faq page never looks broken before the merchant seeds.
+ *
+ * Security: FAQ answers may contain merchant-authored HTML — we sanitize
+ * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
+ */
+'use client';
+
+import * as React from 'react';
+import type { Content } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { sanitizeHtml } from '@/core/lib/sanitize';
+
+interface FaqSectionProps {
+  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
+  faq: Content<'FAQ'> | null;
+}
+
+export function FaqSection({ faq }: FaqSectionProps) {
+  const t = useTranslations('content');
+
+  const items = faq?.data?.items ?? [];
+  const heading = faq?.name || t('faqTitle');
+
+  // Empty state — runs when the merchant hasn't created a FAQ row yet,
+  // or the row exists but contains no items.
+  if (!faq || items.length === 0) {
+    return (
+      <section className="container-page py-16 lg:py-24">
+        <div className="card mx-auto flex max-w-lg flex-col items-center gap-3 px-8 py-14 text-center">
+          <h1 className="text-3xl">{heading}</h1>
+          <p className="text-muted-foreground">
+            <strong className="mb-1 block font-semibold text-foreground">
+              {t('faqEmptyTitle')}
+            </strong>
+            {t('faqEmptyBody')}
+          </p>
+          <a href="/contact" className="btn-primary btn-md mt-3">
+            {t('faqContactCta')}
+          </a>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="container-page max-w-3xl py-14 lg:py-20">
+      <h1 className="mb-8 text-center text-3xl sm:text-4xl">{heading}</h1>
+      <ul className="space-y-3">
+        {items.map((item, idx) => (
+          <li key={idx}>
+            <details open={idx === 0} className="group card overflow-hidden">
+              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-sans text-[15px] font-semibold text-foreground transition-colors hover:bg-secondary/60 [&::-webkit-details-marker]:hidden">
+                {item.question}
+                <span
+                  aria-hidden="true"
+                  className="shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-180"
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.75"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m6 9 6 6 6-6" />
+                  </svg>
+                </span>
+              </summary>
+              <div
+                className="prose-store border-t px-5 py-4"
+                dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }}
+              />
+            </details>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/layout/header-account.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+/**
+ * Auth-aware account control for the site header.
+ *
+ * The header itself is a server component fed by merchant-configured Content,
+ * so it can't read client auth state. This small client island bridges that:
+ * it links to `/account` when the visitor is signed in (the account page shows
+ * profile + orders + sign-out) and to `/login` otherwise.
+ */
+import * as React from 'react';
+import { Link } from '@/core/lib/navigation';
+import { useAuth } from '@/core/providers/store-provider';
+import { useTranslations } from '@/core/lib/translations';
+import { IconUser } from '@/ui/shared/icons';
+
+export function HeaderAccount() {
+  const { isLoggedIn } = useAuth();
+  const t = useTranslations('nav');
+
+  // Guests land on /login; signed-in visitors go to /account (which itself
+  // bounces guests back to /login, so the link is safe even mid auth-resolve).
+  const href = isLoggedIn ? '/account' : '/login';
+  const label = isLoggedIn ? t('account') : t('login');
+
+  return (
+    <Link
+      href={href}
+      aria-label={label}
+      className="inline-flex h-10 w-10 items-center justify-center rounded-full text-foreground transition-colors hover:bg-secondary"
+    >
+      <IconUser size={20} />
+      <span className="sr-only">{label}</span>
+    </Link>
+  );
+}

package/templates/nextjs/designs/atelier/ui/layout/header-cart.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+/**
+ * Cart link for the site header — client island so it can read the live
+ * item count from useCart(). Icon + count bubble; count hides at zero.
+ */
+import * as React from 'react';
+import { Link } from '@/core/lib/navigation';
+import { useCart } from '@/core/providers/store-provider';
+import { useTranslations } from '@/core/lib/translations';
+import { IconBag } from '@/ui/shared/icons';
+
+export function HeaderCart() {
+  const { itemCount } = useCart();
+  const t = useTranslations('nav');
+
+  return (
+    <Link
+      id="cart-anchor"
+      href="/cart"
+      aria-label={t('cart')}
+      className="relative inline-flex h-10 w-10 items-center justify-center rounded-full text-foreground transition-colors hover:bg-secondary"
+    >
+      <IconBag size={20} />
+      {itemCount > 0 && (
+        <span
+          aria-hidden="true"
+          className="absolute -top-0.5 -end-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[11px] font-bold leading-none text-primary-foreground"
+        >
+          {itemCount > 99 ? '99+' : itemCount}
+        </span>
+      )}
+      <span className="sr-only">{t('cart')}</span>
+    </Link>
+  );
+}

package/templates/nextjs/designs/atelier/ui/layout/language-switcher.tsx.ejs

@@ -0,0 +1,137 @@
+<% if (i18nEnabled) { %>
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { supportedLocales } from '@/i18n';
+
+const LOCALE_NAMES: Record<string, string> = {
+  en: 'English',
+  he: 'עברית',
+  ar: 'العربية',
+  es: 'Español',
+  fr: 'Français',
+  de: 'Deutsch',
+  it: 'Italiano',
+  pt: 'Português',
+  nl: 'Nederlands',
+  ja: '日本語',
+  ko: '한국어',
+  zh: '中文',
+  ru: 'Русский',
+  tr: 'Türkçe',
+  pl: 'Polski',
+  sv: 'Svenska',
+  da: 'Dansk',
+  no: 'Norsk',
+  fi: 'Suomi',
+  cs: 'Čeština',
+  th: 'ไทย',
+  vi: 'Tiếng Việt',
+};
+
+const defaultLocale = '<%= defaultLocale %>';
+
+/**
+ * DESIGN ME — locale switcher in the header; reads supported locales from
+ * `@/i18n` and swaps the URL prefix. Keep the aria-label and the redirect
+ * logic exactly as-is.
+ */
+export function LanguageSwitcher() {
+  const pathname = usePathname();
+  const firstSeg = pathname.split('/')[1];
+  const currentLocale = supportedLocales.includes(firstSeg as (typeof supportedLocales)[number])
+    ? firstSeg
+    : defaultLocale;
+
+  function switchLocale(newLocale: string) {
+    // Strip any existing locale segment, then re-add only if the new one
+    // isn't the default — matches the as-needed prefix scheme in middleware.
+    const segments = pathname.split('/');
+    if (supportedLocales.includes(segments[1] as (typeof supportedLocales)[number])) {
+      segments.splice(1, 1);
+    }
+    const bare = segments.join('/') || '/';
+    window.location.href =
+      newLocale === defaultLocale ? bare : `/${newLocale}${bare === '/' ? '' : bare}`;
+  }
+
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click / Escape — a native <select> looks cheap next to
+  // the rest of the header, so this is a small styled popover instead.
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  if (supportedLocales.length <= 1) return null;
+
+  return (
+    <div ref={rootRef} className="relative">
+      <button
+        type="button"
+        aria-label="Select language"
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        onClick={() => setOpen((v) => !v)}
+        className="text-foreground/70 hover:text-foreground hover:bg-secondary/60 inline-flex h-9 items-center gap-1.5 rounded-full px-3 text-sm font-medium transition-colors"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6} className="h-4 w-4" aria-hidden="true">
+          <circle cx="12" cy="12" r="9" />
+          <path d="M3 12h18M12 3c2.5 2.6 3.8 5.7 3.8 9S14.5 18.4 12 21c-2.5-2.6-3.8-5.7-3.8-9S9.5 5.6 12 3z" />
+        </svg>
+        {LOCALE_NAMES[currentLocale] || currentLocale}
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className={`h-3.5 w-3.5 transition-transform ${open ? 'rotate-180' : ''}`} aria-hidden="true">
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </button>
+
+      {open && (
+        <ul
+          role="listbox"
+          aria-label="Select language"
+          className="border-border/60 bg-background absolute end-0 top-full z-50 mt-2 min-w-36 overflow-hidden rounded-xl border py-1 shadow-lg"
+        >
+          {supportedLocales.map((locale) => (
+            <li key={locale}>
+              <button
+                type="button"
+                role="option"
+                aria-selected={locale === currentLocale}
+                onClick={() => {
+                  setOpen(false);
+                  if (locale !== currentLocale) switchLocale(locale);
+                }}
+                className={`hover:bg-secondary/70 flex w-full items-center justify-between px-4 py-2 text-sm transition-colors ${
+                  locale === currentLocale ? 'text-primary font-semibold' : 'text-foreground/80'
+                }`}
+              >
+                {LOCALE_NAMES[locale] || locale}
+                {locale === currentLocale && (
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2} className="h-4 w-4" aria-hidden="true">
+                    <path d="M5 13l4 4L19 7" />
+                  </svg>
+                )}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+<% } %>

package/templates/nextjs/designs/atelier/ui/layout/nav-url.ts

@@ -0,0 +1,14 @@
+/**
+ * Dashboard nav items default to CMS-page URLs (`/pages/<slug>`), but this
+ * storefront ships dedicated routes for some of those destinations. Remap the
+ * known slugs so merchant nav always lands on the richer page instead of a
+ * thin (or missing) CMS page. Unknown URLs pass through untouched.
+ */
+const ROUTE_ALIASES: Record<string, string> = {
+  '/pages/contact': '/contact',
+  '/pages/faq': '/faq',
+};
+
+export function resolveNavUrl(url: string): string {
+  return ROUTE_ALIASES[url] ?? url;
+}

package/templates/nextjs/designs/atelier/ui/layout/rich-text-block.tsx

@@ -0,0 +1,34 @@
+/**
+ * Inline rich-text block (bare skeleton) — fully driven by the merchant's
+ * dashboard.
+ *
+ * The merchant configures rich-text blocks in the Brainerce dashboard
+ * under Sell → Content → Rich Text. Use this component anywhere on a page
+ * to drop a merchant-editable HTML block (intro copy, banner descriptions,
+ * inline announcements that aren't tied to the top-of-page Announcement
+ * bar, etc.).
+ *
+ * Security: HTML is sanitized via `sanitizeHtml` (isomorphic-dompurify)
+ * before injecting via dangerouslySetInnerHTML.
+ *
+ * DESIGN ME — merchant-editable HTML block; fed by
+ * `client.content.richText.get(key, locale)` pre-fetched in the route.
+ * Style the injected HTML via the wrapper `className`.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+import { sanitizeHtml } from '@/core/lib/sanitize';
+
+interface RichTextBlockProps {
+  /** Pre-fetched RICH_TEXT row, e.g. via `client.content.richText.get(key, locale)`. */
+  block: Content<'RICH_TEXT'> | null;
+  /** Optional wrapper className for layout positioning. */
+  className?: string;
+}
+
+export function RichTextBlock({ block, className }: RichTextBlockProps) {
+  if (!block?.data?.html) return null;
+  return (
+    <div className={className} dangerouslySetInnerHTML={{ __html: sanitizeHtml(block.data.html) }} />
+  );
+}

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

@@ -0,0 +1,141 @@
+/**
+ * Storefront footer — driven by the merchant's dashboard configuration
+ * (Sell → Content → Footer), rendered as a deep-forest "signature" band:
+ * brand block + tagline + social, merchant link columns, copyright bar.
+ *
+ * API contract:
+ *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
+ *   Returns null on 404 — the fallback branch renders the same designed
+ *   chrome with essential storefront links so the page never looks broken.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+<% if (i18nEnabled) { %>
+import { getMessages, defaultLocale } from '@/i18n';
+<% } else { %>
+import { messages as staticMessages, defaultLocale } from '@/i18n';
+<% } %>
+import { IconSocial, IconShield } from '@/ui/shared/icons';
+import { resolveNavUrl } from '@/ui/layout/nav-url';
+
+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;
+  /** Store locale for the translation-key copy (server component). */
+  locale?: string;
+}
+
+export async function SiteFooter({ footer, storeName, locale = defaultLocale }: SiteFooterProps) {
+<% if (i18nEnabled) { %>
+  const messages = await getMessages(locale);
+<% } else { %>
+  const messages = staticMessages;
+<% } %>
+  const t = (messages.footer ?? {}) as Record<string, string>;
+
+  const data = footer?.data;
+  const columns = data?.columns ?? [];
+  const social = data?.social ?? [];
+  const year = new Date().getFullYear();
+  const brandLabel = storeName ?? 'Store';
+
+  const fallbackLinks = [
+    { url: '/products', label: t.linkProducts },
+    { url: '/faq', label: t.linkFaq },
+    { url: '/contact', label: t.linkContact },
+    { url: '/cart', label: t.linkCart },
+  ];
+
+  return (
+    <footer className="mt-auto bg-primary text-primary-foreground">
+      <div className="container-page grid gap-10 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:py-16">
+        {/* Brand block */}
+        <div className="sm:col-span-2 lg:col-span-2 lg:pe-16">
+          <a href="/" className="font-display text-2xl font-semibold">
+            {brandLabel}
+          </a>
+          <p className="mt-3 max-w-sm text-sm leading-6 text-primary-foreground/70">
+            {t.tagline}
+          </p>
+
+          {social.length > 0 && (
+            <div className="mt-6">
+              <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-primary-foreground/60">
+                {t.followUs}
+              </p>
+              <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}
+                      className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-primary-foreground/25 text-primary-foreground/85 transition-colors hover:bg-primary-foreground hover:text-primary"
+                    >
+                      <IconSocial platform={entry.platform} size={20} />
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+
+        {/* Merchant link columns (or essential fallback links) */}
+        {columns.length > 0 ? (
+          columns.map((col, idx) => (
+            <nav key={`${col.title}-${idx}`} aria-label={col.title}>
+              <h3 className="mb-4 font-sans text-sm font-semibold text-primary-foreground">
+                {col.title}
+              </h3>
+              <ul className="space-y-2.5">
+                {col.links.map((link, linkIdx) => (
+                  <li key={`${link.url}-${linkIdx}`}>
+                    <a
+                      href={resolveNavUrl(link.url)}
+                      className="text-sm text-primary-foreground/70 transition-colors hover:text-primary-foreground"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ))
+        ) : (
+          <nav aria-label={t.quickLinksTitle}>
+            <h3 className="mb-4 font-sans text-sm font-semibold text-primary-foreground">
+              {t.quickLinksTitle}
+            </h3>
+            <ul className="space-y-2.5">
+              {fallbackLinks.map((link) => (
+                <li key={link.url}>
+                  <a
+                    href={link.url}
+                    className="text-sm text-primary-foreground/70 transition-colors hover:text-primary-foreground"
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+      </div>
+
+      {/* Bottom bar */}
+      <div className="border-t border-primary-foreground/15">
+        <div className="container-page flex flex-col items-center justify-between gap-3 py-5 text-xs text-primary-foreground/60 sm:flex-row">
+          <p>{data?.copyright ?? `© ${year} ${brandLabel}. ${messages.common?.allRightsReserved ?? ''}`}</p>
+          <p className="inline-flex items-center gap-1.5">
+            <IconShield size={16} />
+            {t.securePayments}
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}