create-brainerce-store 1.50.1 → 1.51.0

package/templates/nextjs/ui-canvas/layout/announcement-bar.tsx.ejs

@@ -0,0 +1,101 @@
+/**
+ * Storefront announcement bar (bare skeleton) — fully driven by the
+ * merchant's dashboard.
+ *
+ * The merchant configures announcements in the Brainerce dashboard under
+ *   Sell → Content → Announcement
+ *
+ * Everything below is generic rendering logic — it adapts automatically to
+ * any announcement shape returned by the API, so **you should not 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.
+ *
+ * Each announcement carries `data.severity` ('info' | 'warning' | 'success')
+ * — the skeleton ignores it visually; use it to tone your design.
+ */
+'use client';
+
+import * as React from 'react';
+import type { Content } from 'brainerce';
+
+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">
+      {/* DESIGN ME — announcement bar(s) at the very top of every page; data.severity + message + optional CTA come from Content<'ANNOUNCEMENT'>[] pre-fetched in the layout */}
+      {visible.map((announcement) => (
+        <div key={announcement.id} data-severity={announcement.data.severity} className="flex items-center gap-3">
+          <span>
+            {announcement.data.message}
+            {announcement.data.ctaHref && announcement.data.ctaLabel ? (
+              <>
+                {' '}
+                <a href={announcement.data.ctaHref}>{announcement.data.ctaLabel}</a>
+              </>
+            ) : null}
+          </span>
+          {announcement.data.dismissible ? (
+            <button
+              type="button"
+              onClick={() => dismiss(announcement.id)}
+              aria-label="Dismiss announcement"
+            >
+              ×
+            </button>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/layout/faq-section.tsx.ejs

@@ -0,0 +1,71 @@
+/**
+ * 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>
+        {/* DESIGN ME — FAQ empty state: heading + contact CTA; fed by Content<'FAQ'> pre-fetched in the /faq route */}
+        <h1>{heading}</h1>
+        <p>
+          <strong>{t('faqEmptyTitle')}</strong>
+          <br />
+          {t('faqEmptyBody')}
+        </p>
+        <a href="/contact">{t('faqContactCta')}</a>
+      </section>
+    );
+  }
+
+  return (
+    <section>
+      {/* DESIGN ME — FAQ accordion: question/answer pairs from Content<'FAQ'> pre-fetched in the /faq route; answers are sanitized merchant HTML */}
+      <h1>{heading}</h1>
+      <ul>
+        {items.map((item, idx) => (
+          <li key={idx}>
+            <details open={idx === 0}>
+              <summary>{item.question}</summary>
+              <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }} />
+            </details>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/templates/nextjs/ui-canvas/layout/header-account.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+/**
+ * Auth-aware account control for the site header (bare skeleton).
+ *
+ * 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';
+
+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}>
+      {/* DESIGN ME — header account link; auth state via useAuth(), label via the `nav` translation namespace */}
+      {label}
+    </Link>
+  );
+}

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

@@ -0,0 +1,74 @@
+<% if (i18nEnabled) { %>
+'use client';
+
+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}`;
+  }
+
+  if (supportedLocales.length <= 1) return null;
+
+  return (
+    <select
+      value={currentLocale}
+      onChange={(e) => switchLocale(e.target.value)}
+      aria-label="Select language"
+    >
+      {supportedLocales.map((locale) => (
+        <option key={locale} value={locale}>
+          {LOCALE_NAMES[locale] || locale}
+        </option>
+      ))}
+    </select>
+  );
+}
+<% } %>

package/templates/nextjs/ui-canvas/layout/rich-text-block.tsx.ejs

@@ -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/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 */}
+        <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 */}
+      <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 */}
+        <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. */}
+      <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>
+  );
+}