create-brainerce-store 1.37.0 → 1.39.0

package/templates/nextjs/base/src/components/content/faq-section.tsx.ejs

@@ -0,0 +1,75 @@
+/**
+ * FAQ accordion — 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.
+ *
+ * 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 { sanitizeHtml } from '@/lib/sanitize';
+
+interface FaqSectionProps {
+  /** Pre-fetched FAQ row. `null` triggers a minimal empty-state message. */
+  faq: Content<'FAQ'> | null;
+}
+
+export function FaqSection({ faq }: FaqSectionProps) {
+  const [openIdx, setOpenIdx] = React.useState<number | null>(0);
+
+  if (!faq || !faq.data.items?.length) {
+    return null;
+  }
+
+  return (
+    <section className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">{faq.name}</h1>
+      <ul className="border-border divide-border divide-y rounded-lg border">
+        {faq.data.items.map((item, idx) => {
+          const open = openIdx === idx;
+          return (
+            <li key={idx}>
+              <button
+                type="button"
+                onClick={() => setOpenIdx(open ? null : idx)}
+                aria-expanded={open}
+                className="hover:bg-muted/40 flex w-full items-center justify-between gap-4 p-4 text-start transition-colors"
+              >
+                <span className="text-foreground text-sm font-medium sm:text-base">
+                  {item.question}
+                </span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  className={`text-muted-foreground h-4 w-4 transition-transform ${
+                    open ? 'rotate-180' : ''
+                  }`}
+                  aria-hidden="true"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              {open ? (
+                <div
+                  className="text-muted-foreground prose prose-sm dark:prose-invert max-w-none px-4 pb-4 text-sm leading-relaxed"
+                  dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }}
+                />
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}

package/templates/nextjs/base/src/components/content/rich-text-block.tsx.ejs

@@ -0,0 +1,32 @@
+/**
+ * Inline rich-text block — 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.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+import { sanitizeHtml } from '@/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 ?? 'prose prose-sm dark:prose-invert max-w-none'}
+      dangerouslySetInnerHTML={{ __html: sanitizeHtml(block.data.html) }}
+    />
+  );
+}

package/templates/nextjs/base/src/components/content/site-footer.tsx.ejs

@@ -0,0 +1,96 @@
+/**
+ * Storefront footer — fully driven by the merchant's dashboard configuration.
+ *
+ * The merchant configures the footer in the Brainerce dashboard under
+ *   Sell → Content → Footer
+ *
+ * Everything below is generic rendering logic — it adapts automatically to
+ * any footer shape returned by the API, so **you should not hardcode column
+ * titles or link labels here**.
+ *
+ * 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.
+ *
+ * Security: this component renders text only. For RichText/Page HTML, use
+ *   <RichTextBlock> which sanitizes via isomorphic-dompurify.
+ */
+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 fallback copyright when no footer is configured. */
+  storeName?: string;
+}
+
+export function SiteFooter({ footer, storeName }: SiteFooterProps) {
+  const data = footer?.data;
+  const columns = data?.columns ?? [];
+  const social = data?.social ?? [];
+
+  // Fallback when the merchant hasn't seeded a footer yet — keeps the layout
+  // visually complete without exposing "missing content" to shoppers.
+  if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
+    const year = new Date().getFullYear();
+    return (
+      <footer className="border-border bg-muted/30 text-muted-foreground mt-12 border-t py-8 text-sm">
+        <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
+          © {year} {storeName ?? 'Store'}
+        </div>
+      </footer>
+    );
+  }
+
+  return (
+    <footer className="border-border bg-muted/30 text-foreground mt-12 border-t">
+      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+        {columns.length > 0 ? (
+          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {columns.map((col, idx) => (
+              <div key={`${col.title}-${idx}`}>
+                <h3 className="text-foreground mb-3 text-sm font-semibold">{col.title}</h3>
+                <ul className="space-y-2">
+                  {col.links.map((link, linkIdx) => (
+                    <li key={`${link.url}-${linkIdx}`}>
+                      <a
+                        href={link.url}
+                        className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                      >
+                        {link.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        ) : null}
+
+        {social.length > 0 ? (
+          <div className="border-border mt-8 flex flex-wrap items-center gap-4 border-t pt-6">
+            {social.map((entry, idx) => (
+              <a
+                key={`${entry.platform}-${idx}`}
+                href={entry.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-muted-foreground hover:text-foreground text-sm capitalize transition-colors"
+              >
+                {entry.platform}
+              </a>
+            ))}
+          </div>
+        ) : null}
+
+        {data.copyright ? (
+          <div className="border-border text-muted-foreground mt-6 border-t pt-4 text-center text-xs">
+            {data.copyright}
+          </div>
+        ) : null}
+      </div>
+    </footer>
+  );
+}

package/templates/nextjs/base/src/components/content/site-header.tsx.ejs

@@ -0,0 +1,65 @@
+/**
+ * Merchant-controlled site header.
+ *
+ * The merchant configures the header in the Brainerce dashboard under
+ *   Sell → Content → Header
+ *
+ * Renders logo (when set) + nav items + CTA. Everything is generic — you
+ * should NOT hardcode nav labels or logo paths here; the merchant edits
+ * them in the dashboard and the change propagates within ~5 minutes.
+ *
+ * Returns null on 404 — new stores are seeded with a default HEADER row
+ * by the backend (StoresService.seedDefaultContent) so this should be
+ * populated out of the box.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+
+interface SiteHeaderProps {
+  /** Pre-fetched header payload (server-side). `null` renders nothing. */
+  header: Content<'HEADER'> | null;
+}
+
+export function SiteHeader({ header }: SiteHeaderProps) {
+  if (!header) return null;
+  const data = header.data;
+  const logo = data.logo;
+  const navItems = data.navItems ?? [];
+  const cta = data.cta;
+
+  return (
+    <div className="border-border bg-background border-b">
+      <div className="mx-auto flex h-14 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
+        <a href="/" className="flex items-center gap-2">
+          {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} className="h-8 w-auto" />
+          ) : null}
+        </a>
+
+        {navItems.length > 0 ? (
+          <nav className="hidden items-center gap-6 md:flex">
+            {navItems.map((item, idx) => (
+              <a
+                key={`${item.url}-${idx}`}
+                href={item.url}
+                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+              >
+                {item.label}
+              </a>
+            ))}
+          </nav>
+        ) : null}
+
+        {cta ? (
+          <a
+            href={cta.url}
+            className="bg-primary text-primary-foreground inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:opacity-90"
+          >
+            {cta.label}
+          </a>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/seo/organization-json-ld.tsx

@@ -0,0 +1,94 @@
+import type { StoreInfo } from 'brainerce';
+import { getNonce } from '@/lib/nonce';
+import { stripHtmlForSeo } from '@/lib/seo';
+
+interface OrganizationJsonLdProps {
+  storeInfo: StoreInfo;
+  baseUrl: string;
+}
+
+// Emits Organization + WebSite JSON-LD on the storefront homepage.
+//
+// Why these two specifically:
+//   - Organization → feeds the Google Knowledge Panel (store name, logo,
+//     description) and is the primary signal AI Overviews / ChatGPT /
+//     Perplexity ingest when citing the store.
+//   - WebSite → enables Sitelinks Searchbox (Google) and tells crawlers
+//     the canonical site URL. The `potentialAction` block is what makes
+//     the search box appear in branded SERP results.
+export async function OrganizationJsonLd({ storeInfo, baseUrl }: OrganizationJsonLdProps) {
+  const nonce = await getNonce();
+
+  const cleanDescription = stripHtmlForSeo(storeInfo.metaDescription ?? undefined);
+  const logo =
+    typeof storeInfo.logo === 'string' && storeInfo.logo.trim() ? storeInfo.logo : undefined;
+  const contactEmail =
+    typeof storeInfo.contactEmail === 'string' && storeInfo.contactEmail.trim()
+      ? storeInfo.contactEmail.trim()
+      : undefined;
+  const contactPhone =
+    typeof storeInfo.contactPhone === 'string' && storeInfo.contactPhone.trim()
+      ? storeInfo.contactPhone.trim()
+      : undefined;
+  // sameAs is the JSON-LD property Google uses to associate a brand with its
+  // social profiles. Order doesn't matter; we just filter out empties.
+  const sameAs = storeInfo.socialLinks
+    ? Object.values(storeInfo.socialLinks).filter(
+        (url): url is string => typeof url === 'string' && url.trim().length > 0,
+      )
+    : [];
+
+  const organizationJsonLd: Record<string, unknown> = {
+    '@context': 'https://schema.org',
+    '@type': 'Organization',
+    name: storeInfo.name,
+    url: baseUrl,
+    ...(logo ? { logo } : {}),
+    ...(cleanDescription ? { description: cleanDescription } : {}),
+    ...(contactEmail ? { email: contactEmail } : {}),
+    ...(contactPhone ? { telephone: contactPhone } : {}),
+    ...(sameAs.length > 0 ? { sameAs } : {}),
+  };
+
+  const websiteJsonLd: Record<string, unknown> = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: storeInfo.name,
+    url: baseUrl,
+    potentialAction: {
+      '@type': 'SearchAction',
+      target: {
+        '@type': 'EntryPoint',
+        urlTemplate: `${baseUrl}/products?q={search_term_string}`,
+      },
+      'query-input': 'required name=search_term_string',
+    },
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(organizationJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(websiteJsonLd) }}
+      />
+    </>
+  );
+}
+
+// Escape `<`, `>`, `&` to \uXXXX so seller-controlled fields can't break out
+// of the <script> with `</script>` or inject HTML. Same approach as
+// product-json-ld.tsx — keep the two in sync.
+function serializeJsonLd(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026');
+}

package/templates/nextjs/base/src/components/seo/product-json-ld.tsx

@@ -1,6 +1,7 @@
 import type { Product } from 'brainerce';
 import { getProductPriceInfo } from 'brainerce';
 import { getNonce } from '@/lib/nonce';
+import { stripHtmlForSeo } from '@/lib/seo';
 
 interface ProductJsonLdProps {
   product: Product;
@@ -39,11 +40,15 @@ export async function ProductJsonLd({ product, url, currency = 'USD' }: ProductJ
           url,
         };
 
+  // schema.org/Product.description must be plain text — Google's Rich Results
+  // and AI Overviews ingest this field directly and reject markup. Strip HTML
+  // first; if the description is empty after stripping, fall back to the name.
+  const cleanDescription = stripHtmlForSeo(product.description) || product.name;
   const productJsonLd: Record<string, unknown> = {
     '@context': 'https://schema.org',
     '@type': 'Product',
     name: product.name,
-    description: product.description || product.name,
+    description: cleanDescription,
     image: imageUrl,
     url,
     sku: product.sku || product.id,

package/templates/nextjs/base/src/i18n.ts.ejs

@@ -1,13 +1,18 @@
 <% if (i18nEnabled) { %>
 // Multi-language store — locales loaded dynamically
+import { getDirectionForLocale } from 'brainerce';
+
 export const defaultLocale = '<%= defaultLocale %>';
 export const supportedLocales = <%- supportedLocales %> as const;
 export type Locale = (typeof supportedLocales)[number];
 
-const RTL_LOCALES = new Set(['he', 'ar']);
-
+/**
+ * Resolve script direction. Delegates to the SDK so the storefront stays in
+ * sync as Brainerce adds support for new RTL locales — never maintain a
+ * local RTL locale set here.
+ */
 export function getDirection(locale: string): 'ltr' | 'rtl' {
-  return RTL_LOCALES.has(locale) ? 'rtl' : 'ltr';
+  return getDirectionForLocale(locale);
 }
 
 export async function getMessages(locale: string): Promise<Record<string, Record<string, string>>> {

package/templates/nextjs/base/src/lib/sanitize.ts.ejs

@@ -0,0 +1,26 @@
+/**
+ * Single-source HTML sanitizer for merchant-authored content.
+ *
+ * Brainerce returns RICH_TEXT.html, PAGE.html, and FAQ answer values as raw
+ * HTML — the server does NOT pre-sanitize because some merchants embed
+ * iframes (e.g. YouTube). Run every merchant-authored HTML string through
+ * this wrapper before injecting via `dangerouslySetInnerHTML`.
+ *
+ *   const safe = sanitizeHtml(rawHtml);
+ *   <div dangerouslySetInnerHTML={{ __html: safe }} />
+ *
+ * Uses isomorphic-dompurify so the same call works in Server Components and
+ * Client Components.
+ */
+import DOMPurify from 'isomorphic-dompurify';
+
+const DEFAULT_CONFIG: DOMPurify.Config = {
+  // Allow iframes for embedded videos/maps the merchant may include.
+  ADD_TAGS: ['iframe'],
+  ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling', 'target', 'rel'],
+};
+
+export function sanitizeHtml(html: string | null | undefined): string {
+  if (!html) return '';
+  return DOMPurify.sanitize(html, DEFAULT_CONFIG) as unknown as string;
+}

package/templates/nextjs/base/src/lib/seo.ts

@@ -0,0 +1,49 @@
+// SEO helpers for meta tags and JSON-LD. Strips HTML and decodes common
+// entities so seller-authored rich-text descriptions don't leak markup into
+// <meta name="description">, og:description, twitter:description, or
+// schema.org Product.description.
+
+const NAMED_ENTITIES: Record<string, string> = {
+  nbsp: ' ',
+  amp: '&',
+  lt: '<',
+  gt: '>',
+  quot: '"',
+  apos: "'",
+};
+
+function decodeEntities(text: string): string {
+  return text
+    .replace(/&(nbsp|amp|lt|gt|quot|apos);/g, (_, name: string) => NAMED_ENTITIES[name] ?? '')
+    .replace(/&#(\d+);/g, (_, code: string) => String.fromCodePoint(Number(code)))
+    .replace(/&#x([0-9a-f]+);/gi, (_, code: string) => String.fromCodePoint(parseInt(code, 16)));
+}
+
+// Strip HTML tags, decode entities, collapse whitespace. Idempotent on plain text.
+export function stripHtmlForSeo(input: string | null | undefined): string {
+  if (!input) return '';
+  return decodeEntities(input.replace(/<[^>]*>/g, ' '))
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+// Build a meta description from raw HTML/text.
+// Truncates at the nearest word boundary so we never cut mid-word, and
+// appends a Unicode ellipsis. Returns '' for null/empty input so callers
+// can fall back cleanly.
+export function buildMetaDescription(
+  input: string | null | undefined,
+  maxLength = 160
+): string {
+  const stripped = stripHtmlForSeo(input);
+  if (!stripped) return '';
+  if (stripped.length <= maxLength) return stripped;
+
+  const room = maxLength - 1; // leave room for ellipsis
+  const cut = stripped.slice(0, room);
+  const lastSpace = cut.lastIndexOf(' ');
+  // Only break on word boundary when it's reasonably close to the cap — otherwise
+  // a single very long word would shrink the description to almost nothing.
+  const safeCut = lastSpace > room * 0.7 ? cut.slice(0, lastSpace) : cut;
+  return `${safeCut.trim()}…`;
+}

package/templates/nextjs/base/src/components/layout/footer.tsx

@@ -1,47 +0,0 @@
-'use client';
-
-import { Link } from '@/lib/navigation';
-import { useTranslations } from '@/lib/translations';
-import { useStoreInfo, useAuth } from '@/providers/store-provider';
-
-export function Footer() {
-  const t = useTranslations('common');
-  const tn = useTranslations('nav');
-  const { storeInfo } = useStoreInfo();
-  const { isLoggedIn } = useAuth();
-  const year = new Date().getFullYear();
-
-  return (
-    <footer className="border-border bg-background border-t">
-      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
-          <p className="text-muted-foreground text-sm">
-            {year} {storeInfo?.name || t('store')}. {t('allRightsReserved')}
-          </p>
-          <nav className="flex items-center gap-4">
-            <Link
-              href="/products"
-              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-            >
-              {tn('products')}
-            </Link>
-            <Link
-              href="/contact"
-              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-            >
-              {tn('contact')}
-            </Link>
-            {isLoggedIn && (
-              <Link
-                href="/account"
-                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-              >
-                {tn('account')}
-              </Link>
-            )}
-          </nav>
-        </div>
-      </div>
-    </footer>
-  );
-}