create-brainerce-store 1.73.0 → 1.74.0

package/templates/nextjs/ui-canvas/product/product-client-section.tsx

@@ -98,6 +98,7 @@ export function ProductClientSection({
     selectedVariant,
     setSelectedVariant,
     priceInfo,
+    displayPrice,
     inventory,
     canPurchase,
     description,
@@ -203,8 +204,9 @@ export function ProductClientSection({
 
           {/* Price */}
           <PriceDisplay
-            price={priceInfo.originalPrice}
-            salePrice={priceInfo.isOnSale ? priceInfo.price : undefined}
+            price={displayPrice.price}
+            salePrice={displayPrice.salePrice ?? undefined}
+            currency={displayPrice.currency}
             size="lg"
           />
 
@@ -212,7 +214,7 @@ export function ProductClientSection({
           {product.isDownloadable ? (
             <p>{t('instantDownload')}</p>
           ) : (
-            <StockBadge inventory={inventory} lowStockThreshold={5} />
+            <StockBadge inventory={inventory} />
           )}
 
           {/* Downloadable files info */}

package/templates/nextjs/ui-canvas/product/recommendation-section.tsx

@@ -1,99 +1,105 @@
-'use client';
-
-import { Link } from '@/core/lib/navigation';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { ProductRecommendation } from 'brainerce';
-import { PriceDisplay } from '@/ui/product/price-display';
-import { cn } from '@/core/lib/utils';
-
-interface RecommendationCardProps {
-  item: ProductRecommendation;
-  className?: string;
-}
-
-function RecommendationCard({ item, className }: RecommendationCardProps) {
-  const firstImage = item.images?.[0];
-  const imageUrl = typeof firstImage === 'string' ? firstImage : firstImage?.url || null;
-  const slug = item.slug || item.id;
-  const basePrice = parseFloat(item.basePrice);
-  const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;
-  const isOnSale = salePrice != null && salePrice < basePrice;
-
-  return (
-    <Link href={`/products/${slug}`} className={cn(className)}>
-      {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
-      <span className="relative block aspect-square">
-        {imageUrl ? (
-          <Image
-            src={imageUrl}
-            alt={item.name}
-            fill
-            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
-          />
-        ) : null}
-      </span>
-      <span className="block">
-        <span className="block">{item.name}</span>
-        <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
-      </span>
-    </Link>
-  );
-}
-
-interface RecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-/**
- * DESIGN ME — recommendation strip on the product page (upsells / related);
- * items come from useProductPage().recommendations, title is passed in.
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <section className={cn(className)}>
-      <h2>{title}</h2>
-      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-        {items.map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </section>
-  );
-}
-
-interface CartRecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-/**
- * DESIGN ME — cross-sell strip on the cart page ("you might also need");
- * items come from useCartPage().cartRecs.
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-export function CartRecommendationSection({
-  title,
-  items,
-  className,
-}: CartRecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <section className={cn(className)}>
-      <h2>{title}</h2>
-      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-        {items.map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </section>
-  );
-}
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { ProductRecommendation } from 'brainerce';
+import { PriceDisplay } from '@/ui/product/price-display';
+import { cn } from '@/core/lib/utils';
+
+interface RecommendationCardProps {
+  item: ProductRecommendation;
+  className?: string;
+}
+
+function RecommendationCard({ item, className }: RecommendationCardProps) {
+  const firstImage = item.images?.[0];
+  const imageUrl = typeof firstImage === 'string' ? firstImage : firstImage?.url || null;
+  const slug = item.slug || item.id;
+  // ⛔ NOT region-converted, and it cannot be. `ProductRecommendation` is a
+  // trimmed shape that carries `basePrice` / `salePrice` only: the backend
+  // attaches no displayPrice/displayCurrency to it, so there is no converted
+  // amount to render and converting here would mean inventing an FX rate.
+  // These tiles stay in the store currency on a multi-region store. Do not
+  // "fix" it with a client-side conversion.
+  const basePrice = parseFloat(item.basePrice);
+  const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;
+  const isOnSale = salePrice != null && salePrice < basePrice;
+
+  return (
+    <Link href={`/products/${slug}`} className={cn(className)}>
+      {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
+      <span className="relative block aspect-square">
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={item.name}
+            fill
+            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
+          />
+        ) : null}
+      </span>
+      <span className="block">
+        <span className="block">{item.name}</span>
+        <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
+      </span>
+    </Link>
+  );
+}
+
+interface RecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+/**
+ * DESIGN ME — recommendation strip on the product page (upsells / related);
+ * items come from useProductPage().recommendations, title is passed in.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className={cn(className)}>
+      <h2>{title}</h2>
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+        {items.map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+interface CartRecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+/**
+ * DESIGN ME — cross-sell strip on the cart page ("you might also need");
+ * items come from useCartPage().cartRecs.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function CartRecommendationSection({
+  title,
+  items,
+  className,
+}: CartRecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className={cn(className)}>
+      <h2>{title}</h2>
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+        {items.map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/ui-canvas/product/stock-badge.tsx

@@ -3,9 +3,16 @@
 import type { InventoryInfo } from 'brainerce';
 import { cn } from '@/core/lib/utils';
 import { useTranslations } from '@/core/lib/translations';
+import { useStoreCapabilities } from '@/core/providers/store-provider';
+import { resolveLowStockThreshold } from '@/core/lib/capabilities';
 
 interface StockBadgeProps {
   inventory: InventoryInfo | null | undefined;
+  /**
+   * Override the threshold. Leave it unset — the merchant's configured value
+   * comes from the store's capabilities, and a hardcoded number here shows the
+   * wrong badge on every store that chose a different one.
+   */
   lowStockThreshold?: number;
   className?: string;
 }
@@ -17,9 +24,17 @@ interface StockBadgeProps {
  *
  * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
-export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
+export function StockBadge({ inventory, lowStockThreshold, className }: StockBadgeProps) {
   const t = useTranslations('productDetail');
-  const label = getStockLabel(inventory, lowStockThreshold, t);
+  // Merchant-configured, from the channel's capabilities. Falls back to the
+  // platform default while the fetch is in flight or if it failed, and resolves
+  // to 0 (nothing is ever low) when the merchant turned low-stock warnings off.
+  const { capabilities } = useStoreCapabilities();
+  const label = getStockLabel(
+    inventory,
+    lowStockThreshold ?? resolveLowStockThreshold(capabilities),
+    t
+  );
 
   return <span className={cn(className)}>{label}</span>;
 }