create-brainerce-store 1.41.1 → 1.42.0

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

@@ -1,62 +1,65 @@
-'use client';
-
-import { formatPrice } from 'brainerce';
-import { useStoreInfo } from '@/providers/store-provider';
-import { cn } from '@/lib/utils';
-
-interface PriceDisplayProps {
-  price: string | number;
-  salePrice?: string | number | null;
-  currency?: string;
-  className?: string;
-  size?: 'sm' | 'md' | 'lg';
-}
-
-const sizeClasses = {
-  sm: 'text-sm',
-  md: 'text-base',
-  lg: 'text-xl font-semibold',
-};
-
-export function PriceDisplay({
-  price,
-  salePrice,
-  currency,
-  className,
-  size = 'md',
-}: PriceDisplayProps) {
-  const { storeInfo } = useStoreInfo();
-  const currencyCode = currency || storeInfo?.currency || 'USD';
-
-  const basePrice = typeof price === 'string' ? parseFloat(price) : price;
-  const sale =
-    salePrice != null ? (typeof salePrice === 'string' ? parseFloat(salePrice) : salePrice) : null;
-  const isOnSale = sale !== null && sale < basePrice;
-
-  const discountPercent =
-    isOnSale && basePrice > 0 ? Math.round(((basePrice - sale!) / basePrice) * 100) : 0;
-
-  return (
-    <span className={cn('inline-flex items-center gap-2', sizeClasses[size], className)}>
-      {isOnSale ? (
-        <>
-          <span className="text-destructive font-medium">
-            {formatPrice(sale!, { currency: currencyCode }) as string}
-          </span>
-          <span className="text-muted-foreground text-[0.85em] line-through">
-            {formatPrice(basePrice, { currency: currencyCode }) as string}
-          </span>
-          {discountPercent > 0 && (
-            <span className="bg-destructive text-destructive-foreground rounded px-1.5 py-0.5 text-xs font-medium">
-              -{discountPercent}%
-            </span>
-          )}
-        </>
-      ) : (
-        <span className="text-foreground font-medium">
-          {formatPrice(basePrice, { currency: currencyCode }) as string}
-        </span>
-      )}
-    </span>
-  );
-}
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useStoreInfo } from '@/providers/store-provider';
+import { cn } from '@/lib/utils';
+
+interface PriceDisplayProps {
+  price: string | number;
+  salePrice?: string | number | null;
+  currency?: string;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const sizeClasses = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-xl font-semibold',
+};
+
+export function PriceDisplay({
+  price,
+  salePrice,
+  currency,
+  className,
+  size = 'md',
+}: PriceDisplayProps) {
+  const { storeInfo } = useStoreInfo();
+  // SSR-safe fallback: storeInfo is hydrated client-side, so without the build-time env var
+  // the server renders 'USD' and search engines index a wrong currency symbol (e.g. $ for an ILS store).
+  const currencyCode =
+    currency || storeInfo?.currency || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
+
+  const basePrice = typeof price === 'string' ? parseFloat(price) : price;
+  const sale =
+    salePrice != null ? (typeof salePrice === 'string' ? parseFloat(salePrice) : salePrice) : null;
+  const isOnSale = sale !== null && sale < basePrice;
+
+  const discountPercent =
+    isOnSale && basePrice > 0 ? Math.round(((basePrice - sale!) / basePrice) * 100) : 0;
+
+  return (
+    <span className={cn('inline-flex items-center gap-2', sizeClasses[size], className)}>
+      {isOnSale ? (
+        <>
+          <span className="text-destructive font-medium">
+            {formatPrice(sale!, { currency: currencyCode }) as string}
+          </span>
+          <span className="text-muted-foreground text-[0.85em] line-through">
+            {formatPrice(basePrice, { currency: currencyCode }) as string}
+          </span>
+          {discountPercent > 0 && (
+            <span className="bg-destructive text-destructive-foreground rounded px-1.5 py-0.5 text-xs font-medium">
+              -{discountPercent}%
+            </span>
+          )}
+        </>
+      ) : (
+        <span className="text-foreground font-medium">
+          {formatPrice(basePrice, { currency: currencyCode }) as string}
+        </span>
+      )}
+    </span>
+  );
+}

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/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/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