create-brainerce-store 1.41.1 → 1.43.0

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

@@ -1,121 +1,129 @@
-import type { Product } from 'brainerce';
-import { getProductPriceInfo } from 'brainerce';
-import { getNonce } from '@/lib/nonce';
-import { stripHtmlForSeo } from '@/lib/seo';
-
-interface ProductJsonLdProps {
-  product: Product;
-  url: string;
-  currency?: string;
-}
-
-export async function ProductJsonLd({ product, url, currency = 'USD' }: ProductJsonLdProps) {
-  const nonce = await getNonce();
-  const priceInfo = getProductPriceInfo(product);
-  const imageUrl = product.images?.[0]?.url;
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-
-  const availability =
-    product.inventory?.canPurchase !== false
-      ? 'https://schema.org/InStock'
-      : 'https://schema.org/OutOfStock';
-
-  const isVariable = product.type === 'VARIABLE';
-  const offers =
-    isVariable && product.priceMin
-      ? {
-          '@type': 'AggregateOffer',
-          lowPrice: product.priceMin,
-          highPrice: product.priceMax ?? product.priceMin,
-          offerCount: product.variants?.length ?? 1,
-          priceCurrency: currency,
-          availability,
-          url,
-        }
-      : {
-          '@type': 'Offer',
-          price: priceInfo.price,
-          priceCurrency: currency,
-          availability,
-          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: cleanDescription,
-    image: imageUrl,
-    url,
-    sku: product.sku || product.id,
-    offers,
-  };
-
-  // Emit aggregateRating only when there is real review data — Google rejects
-  // self-serving / faked ratings and stores with 0 reviews shouldn't claim any.
-  if (product.reviewCount && product.reviewCount > 0) {
-    productJsonLd.aggregateRating = {
-      '@type': 'AggregateRating',
-      ratingValue: product.avgRating,
-      reviewCount: product.reviewCount,
-      bestRating: 5,
-      worstRating: 1,
-    };
-  }
-
-  const breadcrumbJsonLd = {
-    '@context': 'https://schema.org',
-    '@type': 'BreadcrumbList',
-    itemListElement: [
-      {
-        '@type': 'ListItem',
-        position: 1,
-        name: 'Home',
-        item: baseUrl || '/',
-      },
-      {
-        '@type': 'ListItem',
-        position: 2,
-        name: 'Products',
-        item: `${baseUrl}/products`,
-      },
-      {
-        '@type': 'ListItem',
-        position: 3,
-        name: product.name,
-        item: url,
-      },
-    ],
-  };
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(productJsonLd) }}
-      />
-      <script
-        type="application/ld+json"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
-      />
-    </>
-  );
-}
-
-// Serialize a JSON-LD object for embedding in a <script> tag. Escapes
-// `<`, `>`, and `&` to \uXXXX so seller-controlled product fields cannot
-// break out of the script element with `</script>` or inject HTML.
-function serializeJsonLd(value: unknown): string {
-  return JSON.stringify(value)
-    .replace(/</g, '\\u003c')
-    .replace(/>/g, '\\u003e')
-    .replace(/&/g, '\\u0026');
-}
+import type { Product } from 'brainerce';
+import { getProductPriceInfo } from 'brainerce';
+import { getNonce } from '@/lib/nonce';
+import { resolveCurrency } from '@/lib/resolve-currency';
+import { stripHtmlForSeo } from '@/lib/seo';
+
+interface ProductJsonLdProps {
+  product: Product;
+  url: string;
+  currency?: string;
+}
+
+export async function ProductJsonLd({
+  product,
+  url,
+  currency,
+}: ProductJsonLdProps) {
+  // Defer to the shared server helper so the env-var + USD fallback chain
+  // lives in exactly one place across all server-side currency reads.
+  const resolvedCurrency = resolveCurrency(null, currency);
+  const nonce = await getNonce();
+  const priceInfo = getProductPriceInfo(product);
+  const imageUrl = product.images?.[0]?.url;
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+
+  const availability =
+    product.inventory?.canPurchase !== false
+      ? 'https://schema.org/InStock'
+      : 'https://schema.org/OutOfStock';
+
+  const isVariable = product.type === 'VARIABLE';
+  const offers =
+    isVariable && product.priceMin
+      ? {
+          '@type': 'AggregateOffer',
+          lowPrice: product.priceMin,
+          highPrice: product.priceMax ?? product.priceMin,
+          offerCount: product.variants?.length ?? 1,
+          priceCurrency: resolvedCurrency,
+          availability,
+          url,
+        }
+      : {
+          '@type': 'Offer',
+          price: priceInfo.price,
+          priceCurrency: resolvedCurrency,
+          availability,
+          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: cleanDescription,
+    image: imageUrl,
+    url,
+    sku: product.sku || product.id,
+    offers,
+  };
+
+  // Emit aggregateRating only when there is real review data — Google rejects
+  // self-serving / faked ratings and stores with 0 reviews shouldn't claim any.
+  if (product.reviewCount && product.reviewCount > 0) {
+    productJsonLd.aggregateRating = {
+      '@type': 'AggregateRating',
+      ratingValue: product.avgRating,
+      reviewCount: product.reviewCount,
+      bestRating: 5,
+      worstRating: 1,
+    };
+  }
+
+  const breadcrumbJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: [
+      {
+        '@type': 'ListItem',
+        position: 1,
+        name: 'Home',
+        item: baseUrl || '/',
+      },
+      {
+        '@type': 'ListItem',
+        position: 2,
+        name: 'Products',
+        item: `${baseUrl}/products`,
+      },
+      {
+        '@type': 'ListItem',
+        position: 3,
+        name: product.name,
+        item: url,
+      },
+    ],
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(productJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
+      />
+    </>
+  );
+}
+
+// Serialize a JSON-LD object for embedding in a <script> tag. Escapes
+// `<`, `>`, and `&` to \uXXXX so seller-controlled product fields cannot
+// break out of the script element with `</script>` or inject HTML.
+function serializeJsonLd(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026');
+}

package/templates/nextjs/base/src/components/shared/price-display.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { formatPrice } from 'brainerce';
-import { useStoreInfo } from '@/providers/store-provider';
+import { useCurrency } from '@/lib/use-currency';
 import { cn } from '@/lib/utils';
 
 interface PriceDisplayProps {
@@ -25,8 +25,7 @@ export function PriceDisplay({
   className,
   size = 'md',
 }: PriceDisplayProps) {
-  const { storeInfo } = useStoreInfo();
-  const currencyCode = currency || storeInfo?.currency || 'USD';
+  const currencyCode = useCurrency(currency);
 
   const basePrice = typeof price === 'string' ? parseFloat(price) : price;
   const sale =

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

@@ -1,4 +1,6 @@
 import { BrainerceClient } from 'brainerce';
+import { cache } from 'react';
+import { pickPublicStoreInfo, type PublicStoreInfo } from '@/lib/store-info';
 
 // Read either env var name. The new one is preferred; the old one is a soft
 // alias kept for backwards compatibility — both are accepted by the SDK.
@@ -66,3 +68,43 @@ export function getServerClient(locale?: string): BrainerceClient {
   }
   return client;
 }
+
+/**
+ * Server-side cached fetch of store info, used to seed `<StoreProvider>` at
+ * SSR so client components don't render with `null` storeInfo and bake the
+ * wrong currency symbol into the HTML Googlebot indexes.
+ *
+ * Two cache layers:
+ *   - React `cache()` dedupes calls within a single request render so the
+ *     layout + `generateMetadata` share one fetch.
+ *   - Next.js `fetch({ next: { revalidate, tags } })` caches the response
+ *     across requests for ~60s and lets the dashboard bust the cache via
+ *     `revalidateTag('store-info')` on store-config save.
+ *
+ * Returns `null` on hard failure so the provider's client-side `useEffect`
+ * fallback can take over — behaviour identical to pre-SSR-hydration.
+ *
+ * Bypasses {@link getServerClient} on purpose: the SDK's internal `fetch`
+ * does not forward `next:` options, so it cannot participate in the Next.js
+ * Data Cache today. Switch back to the SDK once it accepts `fetchOptions`.
+ */
+export const fetchStoreInfo = cache(
+  async (locale?: string): Promise<PublicStoreInfo | null> => {
+    const apiUrl = process.env.BRAINERCE_API_URL || 'https://api.brainerce.com';
+    const siteOrigin = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';
+    const url = `${apiUrl}/api/vc/${encodeURIComponent(SALES_CHANNEL_ID)}/info`;
+    try {
+      const res = await fetch(url, {
+        headers: {
+          Origin: siteOrigin,
+          ...(locale ? { 'Accept-Language': locale } : {}),
+        },
+        next: { revalidate: 60, tags: ['store-info'] },
+      });
+      if (!res.ok) return null;
+      return pickPublicStoreInfo(await res.json());
+    } catch {
+      return null;
+    }
+  },
+);

package/templates/nextjs/base/src/lib/resolve-currency.ts

@@ -0,0 +1,25 @@
+import type { PublicStoreInfo } from '@/lib/store-info';
+
+/**
+ * Server-side twin of `useCurrency()` — call from Server Components,
+ * `generateMetadata`, route handlers, and anywhere outside React render
+ * (where the client `useStoreInfo()` hook isn't available).
+ *
+ * Keeps the fallback chain in one place across both client and server.
+ *
+ * @param storeInfo result of `fetchStoreInfo()` — may be null if the SSR
+ *                  fetch failed transiently
+ * @param override  pass when the caller already has a specific currency
+ *                  (e.g. order-level currency that should win over store)
+ */
+export function resolveCurrency(
+  storeInfo: PublicStoreInfo | null | undefined,
+  override?: string | null
+): string {
+  return (
+    override ||
+    storeInfo?.currency ||
+    process.env.NEXT_PUBLIC_STORE_CURRENCY ||
+    'USD'
+  );
+}

package/templates/nextjs/base/src/lib/store-info.ts

@@ -0,0 +1,48 @@
+import type { StoreInfo } from 'brainerce';
+
+/**
+ * The subset of {@link StoreInfo} that is safe to serialize into the
+ * server-rendered HTML / RSC payload. Sales-channel-only operational fields
+ * (channel name, connection status, allowed API scopes, sandbox flags,
+ * internal cuids) are intentionally omitted — they leak operational state to
+ * crawlers and have no role in storefront rendering.
+ *
+ * Uses indexed access on `StoreInfo` for nested types (`upsell`, `i18n`) so
+ * this stays automatically in sync with the SDK without depending on those
+ * sub-types being exported individually.
+ */
+export interface PublicStoreInfo {
+  name: string;
+  currency: string;
+  language: string;
+  metaDescription?: string | null;
+  logo?: string | null;
+  contactEmail?: string | null;
+  contactPhone?: string | null;
+  socialLinks?: Record<string, string> | null;
+  requireEmailVerification?: boolean;
+  upsell?: StoreInfo['upsell'];
+  i18n?: StoreInfo['i18n'];
+}
+
+/**
+ * Project a raw {@link StoreInfo} response from the backend onto the
+ * {@link PublicStoreInfo} shape. Anything not listed here never reaches the
+ * browser. Add a field here only after confirming it is non-sensitive and
+ * required by a storefront-side consumer.
+ */
+export function pickPublicStoreInfo(raw: StoreInfo): PublicStoreInfo {
+  return {
+    name: raw.name,
+    currency: raw.currency,
+    language: raw.language,
+    metaDescription: raw.metaDescription ?? null,
+    logo: raw.logo ?? null,
+    contactEmail: raw.contactEmail ?? null,
+    contactPhone: raw.contactPhone ?? null,
+    socialLinks: raw.socialLinks ?? null,
+    requireEmailVerification: raw.requireEmailVerification,
+    upsell: raw.upsell,
+    i18n: raw.i18n,
+  };
+}

package/templates/nextjs/base/src/lib/use-currency.ts

@@ -0,0 +1,24 @@
+'use client';
+
+import { useStoreInfo } from '@/providers/store-provider';
+
+/**
+ * Single source of truth for "which currency code do I format prices with?"
+ * in client components. Collapses the historical three-line fallback chain
+ * (`storeInfo?.currency || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD'`)
+ * into one call so the chain lives in exactly one place — and so the day
+ * we drop the env var or the USD last-resort, we only touch this file.
+ *
+ * @param override pass when the caller already has a specific currency
+ *                 (e.g. an `Order` is denominated in its own currency,
+ *                 not the live store currency). Wins over `storeInfo`.
+ */
+export function useCurrency(override?: string | null): string {
+  const { storeInfo } = useStoreInfo();
+  return (
+    override ||
+    storeInfo?.currency ||
+    process.env.NEXT_PUBLIC_STORE_CURRENCY ||
+    'USD'
+  );
+}

package/templates/nextjs/base/src/providers/store-provider.tsx.ejs

@@ -1,9 +1,10 @@
 'use client';
 
 import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
-import type { StoreInfo, Cart, CustomerProfile } from 'brainerce';
+import type { Cart, CustomerProfile } from 'brainerce';
 import { getCartTotals } from 'brainerce';
 import { getClient, initClient, setStoredCartId } from '@/lib/brainerce';
+import { pickPublicStoreInfo, type PublicStoreInfo } from '@/lib/store-info';
 import { checkAuthStatus, proxyLogout } from '@/lib/auth';
 <% if (i18nEnabled) { %>
 import { MessagesContext } from '@/lib/translations';
@@ -12,7 +13,7 @@ import { getMessages, defaultLocale } from '@/i18n';
 
 // ---- Store Info Context ----
 interface StoreInfoContextValue {
-  storeInfo: StoreInfo | null;
+  storeInfo: PublicStoreInfo | null;
   loading: boolean;
 }
 
@@ -69,12 +70,29 @@ export function useCart() {
 
 // ---- Provider Component ----
 <% if (i18nEnabled) { %>
-export function StoreProvider({ children, locale }: { children: React.ReactNode; locale?: string }) {
+export function StoreProvider({
+  children,
+  locale,
+  initialStoreInfo = null,
+}: {
+  children: React.ReactNode;
+  locale?: string;
+  initialStoreInfo?: PublicStoreInfo | null;
+}) {
 <% } else { %>
-export function StoreProvider({ children }: { children: React.ReactNode }) {
+export function StoreProvider({
+  children,
+  initialStoreInfo = null,
+}: {
+  children: React.ReactNode;
+  initialStoreInfo?: PublicStoreInfo | null;
+}) {
 <% } %>
-  const [storeInfo, setStoreInfo] = useState<StoreInfo | null>(null);
-  const [storeLoading, setStoreLoading] = useState(true);
+  // Seed from server-rendered data when available so SSR consumers (PriceDisplay,
+  // FreeShippingBar, locale-aware UI, etc.) render with real values from frame 0
+  // instead of falling back to USD/defaults until hydration completes.
+  const [storeInfo, setStoreInfo] = useState<PublicStoreInfo | null>(initialStoreInfo);
+  const [storeLoading, setStoreLoading] = useState(!initialStoreInfo);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [customer, setCustomer] = useState<CustomerProfile | null>(null);
   const [authLoading, setAuthLoading] = useState(true);
@@ -121,16 +139,21 @@ export function StoreProvider({ children }: { children: React.ReactNode }) {
     // Validate auth token server-side
     refreshAuth();
 
-    // Fetch store info (public, no auth needed)
-    client
-      .getStoreInfo()
-      .then(setStoreInfo)
-      .catch(console.error)
-      .finally(() => setStoreLoading(false));
+    // Fetch store info only when the server didn't already provide it. The
+    // happy path is that <RootLayout> SSR'd fetchStoreInfo() and seeded us via
+    // initialStoreInfo; this branch is the failure fallback (server fetch
+    // returned null) so user-facing components don't render forever as 'USD'.
+    if (!initialStoreInfo) {
+      client
+        .getStoreInfo()
+        .then((raw) => setStoreInfo(pickPublicStoreInfo(raw)))
+        .catch(console.error)
+        .finally(() => setStoreLoading(false));
+    }
 <% if (i18nEnabled) { %>
-  }, [refreshAuth, locale]);
+  }, [refreshAuth, locale, initialStoreInfo]);
 <% } else { %>
-  }, [refreshAuth]);
+  }, [refreshAuth, initialStoreInfo]);
 <% } %>
 
   // Cart management