npm - create-brainerce-store - Versions diffs - 1.41.1 → 1.43.0 - Mend

create-brainerce-store 1.41.1 → 1.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/templates/nextjs/base/src/app/layout.tsx.ejs CHANGED Viewed

@@ -5,7 +5,7 @@ import { StoreProvider } from '@/providers/store-provider';
 import { AnnouncementBar } from '@/components/content/announcement-bar';
 import { SiteHeader } from '@/components/content/site-header';
 import { SiteFooter } from '@/components/content/site-footer';
-import { getServerClient } from '@/lib/brainerce';
+import { getServerClient, fetchStoreInfo } from '@/lib/brainerce';
 import { getDirection, supportedLocales } from '@/i18n';
 import { getNonce } from '@/lib/nonce';
 import '../globals.css';
@@ -61,10 +61,14 @@ export default async function RootLayout({
   // seeded a particular content type yet. New stores ship with default rows
   // seeded by the backend (StoresService.seedDefaultContent).
   const client = getServerClient(locale);
-  const [announcements, siteHeader, siteFooter] = await Promise.all([
+  const [announcements, siteHeader, siteFooter, storeInfo] = await Promise.all([
     client.content.announcement.list(locale).catch(() => []),
     client.content.header.get('main', locale).catch(() => null),
     client.content.footer.get('main', locale).catch(() => null),
+    // SSR-fetch store config so PriceDisplay / FreeShippingBar / upsell UI
+    // render with the real currency, feature flags, and i18n config at frame 0
+    // — without this, Googlebot sees USD/defaults baked into the HTML.
+    fetchStoreInfo(locale),
   ]);
   return (
@@ -83,7 +87,7 @@ export default async function RootLayout({
         />
       </head>
       <body className={font.className}>
-        <StoreProvider locale={locale}>
+        <StoreProvider locale={locale} initialStoreInfo={storeInfo}>
           <div className="min-h-screen flex flex-col">
             <AnnouncementBar announcements={announcements} />
             <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />
@@ -102,7 +106,7 @@ import { StoreProvider } from '@/providers/store-provider';
 import { AnnouncementBar } from '@/components/content/announcement-bar';
 import { SiteHeader } from '@/components/content/site-header';
 import { SiteFooter } from '@/components/content/site-footer';
-import { getServerClient } from '@/lib/brainerce';
+import { getServerClient, fetchStoreInfo } from '@/lib/brainerce';
 import { getNonce } from '@/lib/nonce';
 import './globals.css';
@@ -150,10 +154,14 @@ export default async function RootLayout({
   // seeded a particular content type yet. New stores ship with default rows
   // seeded by the backend (StoresService.seedDefaultContent).
   const client = getServerClient();
-  const [announcements, siteHeader, siteFooter] = await Promise.all([
+  const [announcements, siteHeader, siteFooter, storeInfo] = await Promise.all([
     client.content.announcement.list().catch(() => []),
     client.content.header.get('main').catch(() => null),
     client.content.footer.get('main').catch(() => null),
+    // SSR-fetch store config so PriceDisplay / FreeShippingBar / upsell UI
+    // render with the real currency, feature flags, and i18n config at frame 0
+    // — without this, Googlebot sees USD/defaults baked into the HTML.
+    fetchStoreInfo(),
   ]);
   return (
@@ -172,7 +180,7 @@ export default async function RootLayout({
         />
       </head>
       <body className={font.className}>
-        <StoreProvider>
+        <StoreProvider initialStoreInfo={storeInfo}>
           <div className="min-h-screen flex flex-col">
             <AnnouncementBar announcements={announcements} />
             <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />

package/templates/nextjs/base/src/app/products/[slug]/page.tsx CHANGED Viewed

@@ -1,80 +1,118 @@
-import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-import { getServerClient } from '@/lib/brainerce';
-import { buildMetaDescription } from '@/lib/seo';
-import { decodeSlug } from '@/lib/utils';
-import { ProductJsonLd } from '@/components/seo/product-json-ld';
-import { ReviewsSection } from '@/components/reviews/reviews-section';
-import { ProductClientSection } from './product-client-section';
-type Props = {
-  params: Promise<{ slug: string; locale?: string }>;
-};
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { slug: rawSlug, locale } = await params;
-  const slug = decodeSlug(rawSlug);
-  try {
-    const client = getServerClient(locale);
-    const product = await client.getProductBySlug(slug);
-    const imageUrl = product.images?.[0]?.url;
-    // Prefer merchant-authored SEO copy; fall back to a stripped+truncated
-    // version of the visible description, then product name. We must NEVER
-    // emit raw HTML or a mid-word cut into <meta name="description">.
-    const seoTitle = (product as { seoTitle?: string | null }).seoTitle || product.name;
-    const seoDescription =
-      (product as { seoDescription?: string | null }).seoDescription ||
-      buildMetaDescription(product.description) ||
-      product.name;
-    return {
-      title: seoTitle,
-      description: seoDescription,
-      alternates: {
-        canonical: `/products/${slug}`,
-      },
-      openGraph: {
-        title: seoTitle,
-        description: seoDescription,
-        images: imageUrl ? [{ url: imageUrl, alt: product.name }] : [],
-        type: 'website',
-      },
-      twitter: {
-        card: 'summary_large_image',
-        title: seoTitle,
-        description: seoDescription,
-        images: imageUrl ? [imageUrl] : [],
-      },
-    };
-  } catch {
-    return {
-      title: 'Product not found',
-    };
-  }
-}
-export default async function ProductDetailPage({ params }: Props) {
-  const { slug: rawSlug, locale } = await params;
-  const slug = decodeSlug(rawSlug);
-  let product;
-  try {
-    const client = getServerClient(locale);
-    product = await client.getProductBySlug(slug);
-  } catch {
-    notFound();
-  }
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-  const productUrl = `${baseUrl}/products/${slug}`;
-  const currency = process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
-  return (
-    <>
-      <ProductJsonLd product={product} url={productUrl} currency={currency} />
-      <ProductClientSection product={product} />
-      <ReviewsSection productId={product.id} />
-    </>
-  );
-}
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { getProductPriceInfo } from 'brainerce';
+import { getServerClient, fetchStoreInfo } from '@/lib/brainerce';
+import { resolveCurrency } from '@/lib/resolve-currency';
+import { buildMetaDescription } from '@/lib/seo';
+import { decodeSlug } from '@/lib/utils';
+import { ProductJsonLd } from '@/components/seo/product-json-ld';
+import { ReviewsSection } from '@/components/reviews/reviews-section';
+import { ProductClientSection } from './product-client-section';
+type Props = {
+  params: Promise<{ slug: string; locale?: string }>;
+};
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug: rawSlug, locale } = await params;
+  const slug = decodeSlug(rawSlug);
+  try {
+    const client = getServerClient(locale);
+    // Fetch product + store info in parallel; storeInfo gives us the live
+    // currency for OG price tags (with env-var + USD fallbacks so we never
+    // silently emit a wrong currency when the API is briefly unreachable).
+    const [product, storeInfo] = await Promise.all([
+      client.getProductBySlug(slug),
+      fetchStoreInfo(locale),
+    ]);
+    const imageUrl = product.images?.[0]?.url;
+    // Prefer merchant-authored SEO copy; fall back to a stripped+truncated
+    // version of the visible description, then product name. We must NEVER
+    // emit raw HTML or a mid-word cut into <meta name="description">.
+    const seoTitle = (product as { seoTitle?: string | null }).seoTitle || product.name;
+    const seoDescription =
+      (product as { seoDescription?: string | null }).seoDescription ||
+      buildMetaDescription(product.description) ||
+      product.name;
+    // OG product meta tags drive WhatsApp / Facebook / X link previews and
+    // Google Merchant Center product enrichment. Emitting the literal "0"
+    // here (the previous bug) causes price-zero link cards. Use the real
+    // effective price from the SDK helper.
+    const priceInfo = getProductPriceInfo(product);
+    const currency = resolveCurrency(storeInfo);
+    const priceAmount = priceInfo.price > 0 ? priceInfo.price.toFixed(2) : null;
+    const inStock = product.inventory?.canPurchase !== false;
+    const brandName = (product as { brand?: { name?: string } | null }).brand?.name;
+    return {
+      title: seoTitle,
+      description: seoDescription,
+      alternates: {
+        canonical: `/products/${slug}`,
+      },
+      openGraph: {
+        title: seoTitle,
+        description: seoDescription,
+        images: imageUrl ? [{ url: imageUrl, alt: product.name }] : [],
+        type: 'website',
+      },
+      twitter: {
+        card: 'summary_large_image',
+        title: seoTitle,
+        description: seoDescription,
+        images: imageUrl ? [imageUrl] : [],
+      },
+      // Emit the OG product extension (Facebook / WhatsApp / X link previews,
+      // Google Merchant Center). Skips the price pair entirely when the SDK
+      // can't determine a positive amount, rather than shipping "0".
+      other: {
+        ...(priceAmount
+          ? {
+              'og:price:amount': priceAmount,
+              'og:price:currency': currency,
+              'product:price:amount': priceAmount,
+              'product:price:currency': currency,
+            }
+          : {}),
+        'product:availability': inStock ? 'in stock' : 'out of stock',
+        'product:condition': 'new',
+        ...(brandName ? { 'product:brand': brandName } : {}),
+      },
+    };
+  } catch {
+    return {
+      title: 'Product not found',
+    };
+  }
+}
+export default async function ProductDetailPage({ params }: Props) {
+  const { slug: rawSlug, locale } = await params;
+  const slug = decodeSlug(rawSlug);
+  let product;
+  try {
+    const client = getServerClient(locale);
+    product = await client.getProductBySlug(slug);
+  } catch {
+    notFound();
+  }
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+  const productUrl = `${baseUrl}/products/${slug}`;
+  // Reuse the cached storeInfo from generateMetadata's call — React cache()
+  // collapses both into one backend request per render. resolveCurrency owns
+  // the env-var + USD fallback chain so this stays a single source of truth.
+  const storeInfo = await fetchStoreInfo(locale);
+  const currency = resolveCurrency(storeInfo);
+  return (
+    <>
+      <ProductJsonLd product={product} url={productUrl} currency={currency} />
+      <ProductClientSection product={product} />
+      <ReviewsSection productId={product.id} />
+    </>
+  );
+}

package/templates/nextjs/base/src/components/account/order-history.tsx CHANGED Viewed

@@ -5,6 +5,7 @@ import Image from 'next/image';
 import type { Order, OrderStatus, OrderDownloadLink } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
+import { useCurrency } from '@/lib/use-currency';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 import { OrderCustomizations } from './order-customizations';
@@ -83,7 +84,7 @@ function OrderCard({ order }: { order: Order }) {
   const [expanded, setExpanded] = useState(false);
   const statusConfig =
     STATUS_CONFIG[order.status?.toLowerCase() as OrderStatus] || STATUS_CONFIG.pending;
-  const currency = order.currency || 'USD';
+  const currency = useCurrency(order.currency);
   const totalAmount = order.totalAmount || order.total || '0';
   return (

package/templates/nextjs/base/src/components/cart/cart-bundle-offer.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import Image from 'next/image';
 import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { useStoreInfo } from '@/providers/store-provider';
+import { useCurrency } from '@/lib/use-currency';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
@@ -16,9 +16,8 @@ interface CartBundleOfferCardProps {
 }
 export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
-  const { storeInfo } = useStoreInfo();
   const t = useTranslations('cart');
-  const currency = storeInfo?.currency || 'USD';
+  const currency = useCurrency();
   const [adding, setAdding] = useState(false);
   const offered = offer.offeredProducts;

package/templates/nextjs/base/src/components/cart/cart-item.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import type { CartItem as CartItemType } from 'brainerce';
 import { getCartItemImage, formatPrice } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
 import { useTranslations } from '@/lib/translations';
-import { useStoreInfo } from '@/providers/store-provider';
+import { useCurrency } from '@/lib/use-currency';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
 import { cn } from '@/lib/utils';
@@ -19,8 +19,7 @@ interface CartItemProps {
 export function CartItem({ item, onUpdate, className }: CartItemProps) {
   const t = useTranslations('common');
   const td = useTranslations('productDetail');
-  const { storeInfo } = useStoreInfo();
-  const currency = storeInfo?.currency || 'USD';
+  const currency = useCurrency();
   const [updating, setUpdating] = useState(false);
   const [removing, setRemoving] = useState(false);

package/templates/nextjs/base/src/components/cart/cart-summary.tsx CHANGED Viewed

@@ -2,7 +2,8 @@
 import { formatPrice } from 'brainerce';
 import { useTranslations } from '@/lib/translations';
-import { useStoreInfo, useCart } from '@/providers/store-provider';
+import { useCart } from '@/providers/store-provider';
+import { useCurrency } from '@/lib/use-currency';
 import { cn } from '@/lib/utils';
 interface CartSummaryProps {
@@ -12,9 +13,8 @@ interface CartSummaryProps {
 export function CartSummary({ className }: CartSummaryProps) {
   const t = useTranslations('cart');
   const tc = useTranslations('common');
-  const { storeInfo } = useStoreInfo();
   const { totals, cart } = useCart();
-  const currency = storeInfo?.currency || 'USD';
+  const currency = useCurrency();
   const rules = cart?.appliedDiscounts;
   const ruleAmt = cart?.ruleDiscountAmount ? parseFloat(cart.ruleDiscountAmount) : 0;

package/templates/nextjs/base/src/components/cart/cart-upgrade-banner.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ import Image from 'next/image';
 import type { CartUpgradeSuggestion, CartItem as CartItemType } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
-import { useStoreInfo } from '@/providers/store-provider';
+import { useCurrency } from '@/lib/use-currency';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
@@ -22,9 +22,8 @@ export function CartUpgradeBanner({
   onUpgrade,
   className,
 }: CartUpgradeBannerProps) {
-  const { storeInfo } = useStoreInfo();
   const t = useTranslations('cart');
-  const currency = storeInfo?.currency || 'USD';
+  const currency = useCurrency();
   const [upgrading, setUpgrading] = useState(false);
   const [dismissed, setDismissed] = useState(false);

package/templates/nextjs/base/src/components/cart/free-shipping-bar.tsx CHANGED Viewed

@@ -2,6 +2,7 @@
 import { formatPrice } from 'brainerce';
 import { useStoreInfo, useCart } from '@/providers/store-provider';
+import { useCurrency } from '@/lib/use-currency';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
@@ -10,9 +11,12 @@ interface FreeShippingBarProps {
 }
 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;
@@ -25,7 +29,6 @@ export function FreeShippingBar({ className }: FreeShippingBarProps) {
   const remaining = Math.max(0, threshold - subtotal);
   const progress = Math.min(100, (subtotal / threshold) * 100);
   const qualified = remaining <= 0;
-  const currency = storeInfo?.currency || 'USD';
   // Don't show if already qualified
   if (qualified) {

package/templates/nextjs/base/src/components/checkout/order-bump-card.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import { useState, useMemo } from 'react';
 import Image from 'next/image';
 import type { OrderBump, RecommendationVariant } from 'brainerce';
 import { formatPrice, getVariantOptions } from 'brainerce';
-import { useStoreInfo } from '@/providers/store-provider';
+import { useCurrency } from '@/lib/use-currency';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
@@ -17,9 +17,8 @@ interface OrderBumpCardProps {
 }
 export function OrderBumpCard({ bump, isAdded, onToggle, loading, className }: OrderBumpCardProps) {
-  const { storeInfo } = useStoreInfo();
   const t = useTranslations('checkout');
-  const currency = storeInfo?.currency || 'USD';
+  const currency = useCurrency();
   const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
   const product = bump.bumpProduct;

package/templates/nextjs/base/src/components/checkout/pickup-step.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import type { PickupLocation } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { useTranslations } from '@/lib/translations';
-import { useStoreInfo } from '@/providers/store-provider';
+import { useCurrency } from '@/lib/use-currency';
 import { cn } from '@/lib/utils';
 interface PickupStepProps {
@@ -28,8 +28,7 @@ export function PickupStep({
   const t = useTranslations('checkout');
   const tf = useTranslations('checkoutForm');
   const tc = useTranslations('common');
-  const { storeInfo } = useStoreInfo();
-  const currency = storeInfo?.currency || 'USD';
+  const currency = useCurrency();
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [email, setEmail] = useState(initialEmail);

package/templates/nextjs/base/src/components/checkout/shipping-step.tsx CHANGED Viewed

@@ -3,7 +3,7 @@
 import type { ShippingRate } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { useTranslations } from '@/lib/translations';
-import { useStoreInfo } from '@/providers/store-provider';
+import { useCurrency } from '@/lib/use-currency';
 import { cn } from '@/lib/utils';
 interface ShippingStepProps {
@@ -23,8 +23,7 @@ export function ShippingStep({
 }: ShippingStepProps) {
   const t = useTranslations('checkout');
   const tc = useTranslations('common');
-  const { storeInfo } = useStoreInfo();
-  const currency = storeInfo?.currency || 'USD';
+  const currency = useCurrency();
   if (rates.length === 0) {
     return (

package/templates/nextjs/base/src/components/checkout/tax-display.tsx CHANGED Viewed

@@ -3,7 +3,7 @@
 import type { TaxBreakdown } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { useTranslations } from '@/lib/translations';
-import { useStoreInfo } from '@/providers/store-provider';
+import { useCurrency } from '@/lib/use-currency';
 import { cn } from '@/lib/utils';
 interface TaxDisplayProps {
@@ -19,8 +19,7 @@ interface TaxDisplayProps {
 export function TaxDisplay({ addressSet, taxAmount, taxBreakdown, className }: TaxDisplayProps) {
   const t = useTranslations('checkout');
   const tc = useTranslations('common');
-  const { storeInfo } = useStoreInfo();
-  const currency = storeInfo?.currency || 'USD';
+  const currency = useCurrency();
   // Before address is set
   if (!addressSet) {

package/templates/nextjs/base/src/components/products/frequently-bought-together.tsx CHANGED Viewed

@@ -4,8 +4,8 @@ import { useState } from 'react';
 import Image from 'next/image';
 import type { Product, ProductRecommendation } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { useCart } from '@/providers/store-provider';
-import { useStoreInfo } from '@/providers/store-provider';
+import { useCart, useStoreInfo } from '@/providers/store-provider';
+import { useCurrency } from '@/lib/use-currency';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
@@ -88,9 +88,12 @@ export function FrequentlyBoughtTogether({
   currentProduct,
   className,
 }: FrequentlyBoughtTogetherProps) {
+  // Hooks must be called unconditionally and in the same order on every
+  // render — keep all of them above any early `return null` branch.
   const { storeInfo } = useStoreInfo();
   const { refreshCart } = useCart();
   const t = useTranslations('productDetail');
+  const currency = useCurrency();
   // Only show up to 3 cross-sells
   const crossSells = items.slice(0, 3);
@@ -101,8 +104,6 @@ export function FrequentlyBoughtTogether({
   if (!storeInfo?.upsell?.frequentlyBoughtTogetherEnabled) return null;
   if (crossSells.length === 0) return null;
-  const currency = storeInfo.currency || 'USD';
   const currentPrice = getEffectivePrice(currentProduct);
   const currentImage = currentProduct.images?.[0];
   const currentImageUrl = currentImage

package/templates/nextjs/base/src/components/products/product-card.tsx CHANGED Viewed

@@ -9,7 +9,8 @@ import { useTranslations } from '@/lib/translations';
 import { PriceDisplay } from '@/components/shared/price-display';
 import { StockBadge } from '@/components/products/stock-badge';
 import { DiscountBadge } from '@/components/products/discount-badge';
-import { useCart, useStoreInfo } from '@/providers/store-provider';
+import { useCart } from '@/providers/store-provider';
+import { useCurrency } from '@/lib/use-currency';
 import { cn } from '@/lib/utils';
 interface ProductCardProps {
@@ -18,8 +19,7 @@ interface ProductCardProps {
 }
 function VariantPriceRange({ product }: { product: Product }) {
-  const { storeInfo } = useStoreInfo();
-  const currency = storeInfo?.currency || 'USD';
+  const currency = useCurrency();
   let min: number;
   let max: number;

package/templates/nextjs/base/src/components/products/variant-selector.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import type { Product, ProductVariant } from 'brainerce';
 import { getVariantOptions, getProductSwatches, formatPrice } from 'brainerce';
 import type { InventoryInfo } from 'brainerce';
-import { useStoreInfo } from '@/providers/store-provider';
+import { useCurrency } from '@/lib/use-currency';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
@@ -33,9 +33,8 @@ export function VariantSelector({
   onVariantChange,
   className,
 }: VariantSelectorProps) {
-  const { storeInfo } = useStoreInfo();
   const t = useTranslations('productDetail');
-  const currency = storeInfo?.currency || 'USD';
+  const currency = useCurrency();
   const variants = useMemo(() => product.variants || [], [product.variants]);
   // Get swatch metadata from product attribute options