create-brainerce-store 1.42.0 → 1.43.1

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

@@ -2,6 +2,7 @@ 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';
@@ -40,7 +41,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     // here (the previous bug) causes price-zero link cards. Use the real
     // effective price from the SDK helper.
     const priceInfo = getProductPriceInfo(product);
-    const currency = storeInfo?.currency || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
+    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;
@@ -102,10 +103,10 @@ export default async function ProductDetailPage({ params }: Props) {
   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. Falls back to env
-  // var then USD if the server fetch returned null.
+  // 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 = storeInfo?.currency || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
+  const currency = resolveCurrency(storeInfo);
 
   return (
     <>

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

@@ -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 || process.env.NEXT_PUBLIC_STORE_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

@@ -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 || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
+  const currency = useCurrency();
   const [adding, setAdding] = useState(false);
 
   const offered = offer.offeredProducts;

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

@@ -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 || process.env.NEXT_PUBLIC_STORE_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

@@ -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 || process.env.NEXT_PUBLIC_STORE_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

@@ -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 || process.env.NEXT_PUBLIC_STORE_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

@@ -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 || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
 
   // Don't show if already qualified
   if (qualified) {

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

@@ -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 || process.env.NEXT_PUBLIC_STORE_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

@@ -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 || process.env.NEXT_PUBLIC_STORE_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

@@ -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 || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
+  const currency = useCurrency();
 
   if (rates.length === 0) {
     return (

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

@@ -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 || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
+  const currency = useCurrency();
 
   // Before address is set
   if (!addressSet) {
@@ -32,34 +31,44 @@ export function TaxDisplay({ addressSet, taxAmount, taxBreakdown, className }: T
     );
   }
 
-  // After address, show tax amount
-  const tax = taxAmount ? parseFloat(taxAmount) : 0;
+  // Inclusive-pricing stores back the tax out of the displayed price, so
+  // `checkout.taxAmount` is stored as 0 and the real VAT lives on the
+  // aggregated breakdown. Surface whichever is present.
+  const explicitTax = taxAmount ? parseFloat(taxAmount) : 0;
+  const tax =
+    explicitTax > 0
+      ? explicitTax
+      : typeof taxBreakdown?.totalTax === 'number'
+        ? taxBreakdown.totalTax
+        : 0;
 
-  return (
-    <div className={cn('space-y-1', className)}>
-      <div className="flex items-center justify-between text-sm">
-        <span className="text-muted-foreground">{tc('tax')}</span>
-        <span className="text-foreground font-medium">
-          {tax > 0 ? (formatPrice(tax, { currency }) as string) : t('noTax')}
-        </span>
+  // When there's a per-rate breakdown, prefer per-row display ("VAT 18% ₪3.05").
+  // Otherwise show a single aggregated tax line.
+  const hasBreakdown = !!taxBreakdown?.breakdown && taxBreakdown.breakdown.length > 0;
+
+  if (hasBreakdown) {
+    return (
+      <div className={cn('space-y-1', className)}>
+        {taxBreakdown!.breakdown.map((item, index) => (
+          <div key={index} className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">
+              {item.name} ({(item.rate * 100).toFixed(1)}%)
+            </span>
+            <span className="text-foreground font-medium">
+              {formatPrice(item.amount, { currency }) as string}
+            </span>
+          </div>
+        ))}
       </div>
+    );
+  }
 
-      {/* Tax breakdown details */}
-      {taxBreakdown && taxBreakdown.breakdown?.length > 0 && tax > 0 && (
-        <div className="space-y-0.5 ps-4">
-          {taxBreakdown.breakdown.map((item, index) => (
-            <div
-              key={index}
-              className="text-muted-foreground flex items-center justify-between text-xs"
-            >
-              <span>
-                {item.name} ({(item.rate * 100).toFixed(1)}%)
-              </span>
-              <span>{formatPrice(item.amount, { currency }) as string}</span>
-            </div>
-          ))}
-        </div>
-      )}
+  return (
+    <div className={cn('flex items-center justify-between text-sm', className)}>
+      <span className="text-muted-foreground">{tc('tax')}</span>
+      <span className="text-foreground font-medium">
+        {tax > 0 ? (formatPrice(tax, { currency }) as string) : t('noTax')}
+      </span>
     </div>
   );
 }

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

@@ -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 || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
-
   const currentPrice = getEffectivePrice(currentProduct);
   const currentImage = currentProduct.images?.[0];
   const currentImageUrl = currentImage