create-brainerce-store 1.42.0 → 1.43.0

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

@@ -1,125 +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 = process.env.NEXT_PUBLIC_STORE_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,65 +1,61 @@
-'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>
-  );
-}
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useCurrency } from '@/lib/use-currency';
+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 currencyCode = useCurrency(currency);
+
+  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/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/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'
+  );
+}