create-brainerce-store 1.50.5 → 1.52.0

package/templates/nextjs/ui-canvas/cart/free-shipping-bar.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useStoreInfo, useCart } from '@/core/providers/store-provider';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface FreeShippingBarProps {
+  className?: string;
+}
+
+/**
+ * DESIGN ME — free-shipping progress on the cart page ("add X more for free
+ * shipping"); threshold from useStoreInfo().upsell, subtotal from
+ * useCart().totals. The semantic <progress> is a placeholder — build your own
+ * meter.
+ *
+ * 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 FreeShippingBar({ className }: FreeShippingBarProps) {
+  // Hooks must be called unconditionally and in the same order on every
+  // render — keep all of them above any early `return null` branch.
+  const t = useTranslations('cart');
+  const { storeInfo } = useStoreInfo();
+  const { totals } = useCart();
+  const currency = useCurrency();
+
+  const upsell = storeInfo?.upsell;
+  const threshold = upsell?.freeShippingThreshold;
+  const enabled = upsell?.freeShippingBarEnabled !== false;
+
+  // Don't render if disabled or no threshold configured
+  if (!enabled || !threshold || threshold <= 0) return null;
+
+  const subtotal = totals.subtotal;
+  const remaining = Math.max(0, threshold - subtotal);
+  const qualified = remaining <= 0;
+
+  if (qualified) {
+    return <p className={cn(className)}>{t('freeShippingQualified')}</p>;
+  }
+
+  return (
+    <div className={cn(className)}>
+      <p>
+        {t('freeShippingRemaining', {
+          amount: formatPrice(remaining, { currency }) as string,
+        })}
+      </p>
+      <progress value={Math.min(subtotal, threshold)} max={threshold} />
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/cart/reservation-countdown.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import type { ReservationInfo } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface ReservationCountdownProps {
+  reservation: ReservationInfo;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — stock-reservation countdown on the cart/checkout pages; the
+ * `reservation` prop comes from useCartPage().cart.reservation. Keep the
+ * ticking logic and the expired/urgent states (exposed via data-state).
+ *
+ * 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 ReservationCountdown({ reservation, className }: ReservationCountdownProps) {
+  const t = useTranslations('reservation');
+  const [remainingSeconds, setRemainingSeconds] = useState<number>(0);
+
+  const calculateRemaining = useCallback(() => {
+    if (!reservation.expiresAt) return 0;
+    const expiresAtMs = new Date(reservation.expiresAt).getTime();
+    const nowMs = Date.now();
+    return Math.max(0, Math.floor((expiresAtMs - nowMs) / 1000));
+  }, [reservation.expiresAt]);
+
+  useEffect(() => {
+    setRemainingSeconds(calculateRemaining());
+
+    const interval = setInterval(() => {
+      const remaining = calculateRemaining();
+      setRemainingSeconds(remaining);
+
+      if (remaining <= 0) {
+        clearInterval(interval);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [calculateRemaining]);
+
+  if (!reservation.hasReservation) return null;
+
+  const minutes = Math.floor(remainingSeconds / 60);
+  const seconds = remainingSeconds % 60;
+  const isExpired = remainingSeconds <= 0;
+  const isUrgent = remainingSeconds > 0 && remainingSeconds < 120;
+
+  const displayMessage = reservation.countdownMessage
+    ? reservation.countdownMessage.replace(
+        '{time}',
+        `${minutes}:${seconds.toString().padStart(2, '0')}`
+      )
+    : null;
+
+  return (
+    <div
+      role="timer"
+      data-state={isExpired ? 'expired' : isUrgent ? 'urgent' : 'active'}
+      className={cn(className)}
+    >
+      {isExpired ? (
+        <p>{t('expired')}</p>
+      ) : displayMessage ? (
+        <p>{displayMessage}</p>
+      ) : (
+        <p>
+          {isUrgent ? `${t('hurry')} ` : ''}
+          {t('reservedFor')}{' '}
+          <span>
+            {minutes}:{seconds.toString().padStart(2, '0')}
+          </span>
+        </p>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/home/discount-banner-strip.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import type { DiscountBanner } from 'brainerce';
+
+/** Store-wide discount banner strip (bare skeleton) shown at the very top of the homepage. */
+export function DiscountBannerStrip({ banners }: { banners: DiscountBanner[] }) {
+  if (banners.length === 0) return null;
+
+  return (
+    <div role="region" aria-label="Promotions">
+      {/* DESIGN ME — discount banner strip: active discount-rule texts; banners come from useHomeData() in the parent. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <ul className="flex items-center gap-4">
+        {banners.map((banner) => (
+          <li key={banner.ruleId}>{banner.text}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/home/featured-products-section.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { ProductGrid } from '@/ui/product/product-grid';
+
+/** Homepage featured-products grid (bare skeleton) with a "view all" link. */
+export function FeaturedProductsSection({ products }: { products: Product[] }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  return (
+    <section>
+      {/* DESIGN ME — homepage featured products: heading + view-all link + product grid; products come from useHomeData() in the parent. 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">
+        <h2>{t('featuredProducts')}</h2>
+        <Link href="/products">{tc('viewAll')}</Link>
+      </div>
+      <ProductGrid products={products} />
+    </section>
+  );
+}

package/templates/nextjs/ui-canvas/home/hero-section.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+
+/** Homepage hero (bare skeleton): welcome headline, subtitle, and shop-now CTA. */
+export function HeroSection({ storeName }: { storeName?: string | null }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  return (
+    <section>
+      {/* DESIGN ME — homepage hero: headline + subtitle + shop-now CTA; store name via useStoreInfo() in the parent, copy via the `home`/`common` translation namespaces. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <h1>
+        {t('welcomeTo')} {storeName || tc('store')}
+      </h1>
+      <p>{t('heroSubtitle')}</p>
+      <Link href="/products">{tc('shopNow')}</Link>
+    </section>
+  );
+}

package/templates/nextjs/ui-canvas/home/home-client.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { useHomeData } from '@/core/hooks/use-home-data';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { DiscountBannerStrip } from './discount-banner-strip';
+import { HeroSection } from './hero-section';
+import { FeaturedProductsSection } from './featured-products-section';
+
+export function HomeClient() {
+  const { storeInfo, loading: storeLoading } = useStoreInfo();
+  const { products, banners, loading } = useHomeData();
+
+  if (storeLoading || loading) {
+    return <LoadingSpinner size="lg" />;
+  }
+
+  return (
+    <div>
+      {/* DESIGN ME — homepage composition: discount banners + hero + featured products; data via useHomeData() and useStoreInfo(). Add/remove/reorder sections freely. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <DiscountBannerStrip banners={banners} />
+      <HeroSection storeName={storeInfo?.name} />
+      <FeaturedProductsSection products={products} />
+    </div>
+  );
+}

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. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      {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. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+        <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. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <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. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      {label}
+    </Link>
+  );
+}

package/templates/nextjs/{base/src/components → ui-canvas}/layout/language-switcher.tsx.ejs

@@ -1,70 +1,76 @@
-<% 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 %>';
-
-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)}
-      className="text-sm border rounded px-2 py-1 bg-transparent"
-      aria-label="Select language"
-    >
-      {supportedLocales.map((locale) => (
-        <option key={locale} value={locale}>
-          {LOCALE_NAMES[locale] || locale}
-        </option>
-      ))}
-    </select>
-  );
-}
-<% } %>
+<% 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.
+ *
+ * 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 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,36 @@
+/**
+ * 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`.
+ *
+ * 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.
+ */
+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) }} />
+  );
+}