create-brainerce-store 1.84.0 → 1.86.0

package/templates/nextjs/designs/atelier/ui/product/product-card.tsx

@@ -1,268 +1,271 @@
-'use client';
-
-import { useState, useRef } from 'react';
-import { Link, useRouter } from '@/core/lib/navigation';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { Product } from 'brainerce';
-import { getProductPriceInfo, formatPrice } from 'brainerce';
-import { pickDisplayPrice, pickDisplayPriceRange } from '@/core/lib/display-price';
-import { useTranslations } from '@/core/lib/translations';
-import { PriceDisplay } from '@/ui/product/price-display';
-import { StockBadge } from '@/ui/product/stock-badge';
-import { canPurchaseProduct } from '@/core/lib/kit';
-import { DiscountBadge } from '@/ui/product/discount-badge';
-import { useCart } from '@/core/providers/store-provider';
-import { flyToCart } from '@/ui/shared/fly-to-cart';
-import { openCartDrawer } from '@/ui/cart/cart-drawer';
-import { useCurrency } from '@/core/lib/use-currency';
-import { trackAddToCart } from '@/core/lib/tracking';
-import { toAddToCartError, type AddToCartError } from '@/core/lib/add-to-cart-error';
-import { cn } from '@/core/lib/utils';
-import { IconBag, IconCheck, IconDownload, IconStar } from '@/ui/shared/icons';
-
-interface ProductCardProps {
-  product: Product;
-  className?: string;
-}
-
-function VariantPriceRange({ product }: { product: Product }) {
-  const fallbackCurrency = useCurrency();
-  // ⛔ Region-aware. A range built from priceMin/priceMax alone stays in the
-  // store currency while the single-price card beside it converts, so a
-  // variable product would quote a different currency from its neighbours.
-  const range = pickDisplayPriceRange(product, fallbackCurrency);
-  if (!range) return null;
-  const { min, max, currency } = range;
-
-  return (
-    <span className="text-foreground text-base font-semibold">
-      {min === max
-        ? (formatPrice(min, { currency }) as string)
-        : `${formatPrice(min, { currency })} – ${formatPrice(max, { currency })}`}
-    </span>
-  );
-}
-
-export function ProductCard({ product, className }: ProductCardProps) {
-  const t = useTranslations('common');
-  const tp = useTranslations('productDetail');
-  const tProd = useTranslations('products');
-  const tr = useTranslations('reviews');
-  const router = useRouter();
-  const { refreshCart } = useCart();
-  const fallbackCurrency = useCurrency();
-  // FX overlay (PRD §23): prefer the region-converted display values when the
-  // storefront passed regionId to getProducts. Otherwise fall back to the
-  // canonical store-currency basePrice / salePrice.
-  const display = pickDisplayPrice(product, fallbackCurrency);
-  const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
-  const mainImage = product.images?.[0];
-  const hoverImage = product.images?.[1];
-  const imageUrl = mainImage?.url || null;
-  const slug = product.slug || product.id;
-  const isVariable = product.type === 'VARIABLE';
-
-  const [adding, setAdding] = useState(false);
-  const [added, setAdded] = useState(false);
-  const [addError, setAddError] = useState<AddToCartError | null>(null);
-
-  // ⛔ A KIT carries NO `inventory` object — its stock is on `kitAvailable`
-  // (`null` = unlimited, `0` = not sellable). Reading `inventory` here left a
-  // SOLD-OUT kit with an enabled add-to-cart button, because
-  // `undefined?.canPurchase !== false` is `true`. `canPurchaseProduct` reads
-  // the right field per product type, and keeps the `!== false` rule so a store
-  // that tracks no inventory at all can still sell.
-  // A kit also falls through `isVariable` above and adds by `productId` alone,
-  // which is correct — kits take no variantId and no selections.
-  const canPurchase = canPurchaseProduct(product);
-
-  const imageWellRef = useRef<HTMLDivElement>(null);
-
-  async function handleAddToCart(e: React.MouseEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (isVariable) {
-      router.push(`/products/${slug}`);
-      return;
-    }
-
-    if (adding || !canPurchase) return;
-    setAddError(null);
-
-    try {
-      flyToCart(imageWellRef.current);
-      setAdding(true);
-      const { getClient } = await import('@/core/lib/brainerce');
-      const client = getClient();
-      await client.smartAddToCart({ productId: product.id, quantity: 1 });
-      await refreshCart();
-      openCartDrawer();
-      // Quick-add from a grid card is a real add_to_cart — without this the
-      // ad platforms only ever see adds made from a product page. Reported in
-      // the DISPLAYED currency (region-converted when the storefront passed a
-      // regionId), because that is what the shopper is actually being charged.
-      trackAddToCart(product, null, 1, display.salePrice ?? display.price, display.currency);
-      setAdded(true);
-      setTimeout(() => setAdded(false), 2000);
-    } catch (err) {
-      // Quick-add used to fail in silence: the button spun, reset, and the
-      // item never appeared. A cart at the 50-line cap is the commonest
-      // cause and the shopper can fix it, so say so on the card.
-      setAddError(toAddToCartError(err));
-      console.error('Failed to add to cart:', err);
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <article
-      className={cn('card card-hover group relative flex flex-col overflow-hidden', className)}
-    >
-      <figure className="relative">
-        <Link href={`/products/${slug}`} className="block" tabIndex={-1} aria-hidden="true">
-          {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
-          <div ref={imageWellRef} className="bg-secondary relative aspect-square overflow-hidden">
-            {imageUrl ? (
-              <>
-                <Image
-                  src={imageUrl}
-                  alt={mainImage?.alt || product.name}
-                  fill
-                  sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
-                  className={cn(
-                    'img-zoom object-cover',
-                    hoverImage && 'transition-opacity duration-500 group-hover:opacity-0'
-                  )}
-                />
-                {hoverImage && (
-                  <Image
-                    src={hoverImage.url}
-                    alt={hoverImage.alt || product.name}
-                    fill
-                    sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
-                    className="object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100"
-                  />
-                )}
-              </>
-            ) : (
-              <span className="sr-only">{product.name}</span>
-            )}
-          </div>
-        </Link>
-        <figcaption className="sr-only">{product.name}</figcaption>
-
-        {/* Badges overlay */}
-        <div className="absolute start-3 top-3 flex flex-wrap gap-1.5">
-          {isOnSale && <span className="badge-primary">{t('sale')}</span>}
-          <DiscountBadge discount={product.discount} />
-          {product.isDownloadable && (
-            <span className="badge-soft">
-              <IconDownload size={16} />
-              {tp('digitalProduct')}
-            </span>
-          )}
-        </div>
-      </figure>
-
-      <div className="flex flex-1 flex-col gap-1.5 p-4">
-        {/* Categories */}
-        {product.categories && product.categories.length > 0 && (
-          <ul className="text-muted-foreground flex flex-wrap gap-1 text-xs">
-            {product.categories.slice(0, 2).map((cat, idx) => (
-              <li key={cat.id}>
-                {idx > 0 && <span aria-hidden="true">· </span>}
-                {cat.name}
-              </li>
-            ))}
-          </ul>
-        )}
-
-        {/* Name — the card-covering link */}
-        <h3 className="text-foreground font-sans text-[15px] font-semibold leading-snug">
-          <Link
-            href={`/products/${slug}`}
-            className="hover:text-primary after:absolute after:inset-0 after:content-['']"
-          >
-            {product.name}
-          </Link>
-        </h3>
-
-        {/* Star rating. `avgRating` / `reviewCount` are denormalized rollups
-            the API returns on every product fetch. Auto-hides on a store with
-            no reviews yet: `reviewCount` is 0 (or absent) and the whole block
-            is skipped, so nothing renders and the card keeps its layout. */}
-        {product.reviewCount ? (
-          <div className="flex items-center gap-1" aria-label={tr('starRating')}>
-            <span aria-hidden="true" className="text-primary">
-              <IconStar size={16} />
-            </span>
-            <span className="text-foreground text-xs font-semibold">
-              {(product.avgRating ?? 0).toFixed(1)}
-            </span>
-            <span className="text-muted-foreground text-xs">({product.reviewCount})</span>
-          </div>
-        ) : null}
-
-        {/* Price */}
-        <div>
-          {isVariable ? (
-            <VariantPriceRange product={product} />
-          ) : (
-            <PriceDisplay
-              price={display.price ?? originalPrice}
-              salePrice={display.salePrice ?? (isOnSale ? price : undefined)}
-              currency={display.currency}
-              size="md"
-            />
-          )}
-        </div>
-
-        <StockBadge
-          inventory={product.inventory}
-          // Only a KIT has kit stock. Gating on `type` here keeps the badge and
-          // `resolveStockInfo()` using ONE definition of 'this is a kit'.
-          kitAvailable={product.type === 'KIT' ? product.kitAvailable : undefined}
-        />
-
-        {/* Add to cart (variable products route to the product page for option selection) */}
-        {(isVariable || canPurchase) && (
-          <button
-            type="button"
-            onClick={handleAddToCart}
-            disabled={adding}
-            className={cn(
-              'btn-outline btn-sm relative z-10 mt-2 w-full',
-              added && 'border-primary bg-primary text-primary-foreground hover:bg-primary'
-            )}
-          >
-            {added ? (
-              <>
-                <IconCheck size={16} />
-                {tp('addedToCart')}
-              </>
-            ) : isVariable ? (
-              tProd('selectOptions')
-            ) : (
-              <>
-                <IconBag size={16} />
-                {adding ? tp('addingToCart') : tp('addToCart')}
-              </>
-            )}
-          </button>
-        )}
-
-        {/*
-          Quick-add refusal. The card has no other error surface, and without
-          this the shopper taps, the button resets, and nothing appears.
-        */}
-        {addError && (
-          <p role="alert" className="text-destructive mt-2 text-xs">
-            {addError === 'CART_FULL' ? tp('cartFull') : tp('addToCartFailed')}
-          </p>
-        )}
-      </div>
-    </article>
-  );
-}
+'use client';
+
+import { useState, useRef } from 'react';
+import { Link, useRouter } from '@/core/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { Product } from 'brainerce';
+import { getProductPriceInfo, formatPrice } from 'brainerce';
+import { pickDisplayPrice, pickDisplayPriceRange } from '@/core/lib/display-price';
+import { useTranslations } from '@/core/lib/translations';
+import { PriceDisplay } from '@/ui/product/price-display';
+import { StockBadge } from '@/ui/product/stock-badge';
+import { canPurchaseProduct } from '@/core/lib/kit';
+import { DiscountBadge } from '@/ui/product/discount-badge';
+import { useCart } from '@/core/providers/store-provider';
+import { flyToCart } from '@/ui/shared/fly-to-cart';
+import { openCartDrawer } from '@/ui/cart/cart-drawer';
+import { useCurrency } from '@/core/lib/use-currency';
+import { trackAddToCart } from '@/core/lib/tracking';
+import { toAddToCartError, type AddToCartError } from '@/core/lib/add-to-cart-error';
+import { cn } from '@/core/lib/utils';
+import { NoPhotoTile } from '@/ui/shared/no-photo-tile';
+import { IconBag, IconCheck, IconDownload, IconStar } from '@/ui/shared/icons';
+
+interface ProductCardProps {
+  product: Product;
+  className?: string;
+}
+
+function VariantPriceRange({ product }: { product: Product }) {
+  const fallbackCurrency = useCurrency();
+  // ⛔ Region-aware. A range built from priceMin/priceMax alone stays in the
+  // store currency while the single-price card beside it converts, so a
+  // variable product would quote a different currency from its neighbours.
+  const range = pickDisplayPriceRange(product, fallbackCurrency);
+  if (!range) return null;
+  const { min, max, currency } = range;
+
+  return (
+    <span className="text-foreground text-base font-semibold">
+      {min === max
+        ? (formatPrice(min, { currency }) as string)
+        : `${formatPrice(min, { currency })} – ${formatPrice(max, { currency })}`}
+    </span>
+  );
+}
+
+export function ProductCard({ product, className }: ProductCardProps) {
+  const t = useTranslations('common');
+  const tp = useTranslations('productDetail');
+  const tProd = useTranslations('products');
+  const tr = useTranslations('reviews');
+  const router = useRouter();
+  const { refreshCart } = useCart();
+  const fallbackCurrency = useCurrency();
+  // FX overlay (PRD §23): prefer the region-converted display values when the
+  // storefront passed regionId to getProducts. Otherwise fall back to the
+  // canonical store-currency basePrice / salePrice.
+  const display = pickDisplayPrice(product, fallbackCurrency);
+  const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
+  const mainImage = product.images?.[0];
+  const hoverImage = product.images?.[1];
+  const imageUrl = mainImage?.url || null;
+  const slug = product.slug || product.id;
+  const isVariable = product.type === 'VARIABLE';
+
+  const [adding, setAdding] = useState(false);
+  const [added, setAdded] = useState(false);
+  const [addError, setAddError] = useState<AddToCartError | null>(null);
+
+  // ⛔ A KIT carries NO `inventory` object — its stock is on `kitAvailable`
+  // (`null` = unlimited, `0` = not sellable). Reading `inventory` here left a
+  // SOLD-OUT kit with an enabled add-to-cart button, because
+  // `undefined?.canPurchase !== false` is `true`. `canPurchaseProduct` reads
+  // the right field per product type, and keeps the `!== false` rule so a store
+  // that tracks no inventory at all can still sell.
+  // A kit also falls through `isVariable` above and adds by `productId` alone,
+  // which is correct — kits take no variantId and no selections.
+  const canPurchase = canPurchaseProduct(product);
+
+  const imageWellRef = useRef<HTMLDivElement>(null);
+
+  async function handleAddToCart(e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (isVariable) {
+      router.push(`/products/${slug}`);
+      return;
+    }
+
+    if (adding || !canPurchase) return;
+    setAddError(null);
+
+    try {
+      flyToCart(imageWellRef.current);
+      setAdding(true);
+      const { getClient } = await import('@/core/lib/brainerce');
+      const client = getClient();
+      await client.smartAddToCart({ productId: product.id, quantity: 1 });
+      await refreshCart();
+      openCartDrawer();
+      // Quick-add from a grid card is a real add_to_cart — without this the
+      // ad platforms only ever see adds made from a product page. Reported in
+      // the DISPLAYED currency (region-converted when the storefront passed a
+      // regionId), because that is what the shopper is actually being charged.
+      trackAddToCart(product, null, 1, display.salePrice ?? display.price, display.currency);
+      setAdded(true);
+      setTimeout(() => setAdded(false), 2000);
+    } catch (err) {
+      // Quick-add used to fail in silence: the button spun, reset, and the
+      // item never appeared. A cart at the 50-line cap is the commonest
+      // cause and the shopper can fix it, so say so on the card.
+      setAddError(toAddToCartError(err));
+      console.error('Failed to add to cart:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <article
+      className={cn('card card-hover group relative flex flex-col overflow-hidden', className)}
+    >
+      <figure className="relative">
+        <Link href={`/products/${slug}`} className="block" tabIndex={-1} aria-hidden="true">
+          {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
+          <div ref={imageWellRef} className="bg-secondary relative aspect-square overflow-hidden">
+            {imageUrl ? (
+              <>
+                <Image
+                  src={imageUrl}
+                  alt={mainImage?.alt || product.name}
+                  fill
+                  sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
+                  className={cn(
+                    'img-zoom object-cover',
+                    hoverImage && 'transition-opacity duration-500 group-hover:opacity-0'
+                  )}
+                />
+                {hoverImage && (
+                  <Image
+                    src={hoverImage.url}
+                    alt={hoverImage.alt || product.name}
+                    fill
+                    sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
+                    className="object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+                  />
+                )}
+              </>
+            ) : (
+              // No photo yet: a designed typographic tile, not a blank square.
+              // Decorative — the h3 link below carries the accessible name.
+              <NoPhotoTile name={product.name} />
+            )}
+          </div>
+        </Link>
+        <figcaption className="sr-only">{product.name}</figcaption>
+
+        {/* Badges overlay */}
+        <div className="absolute start-3 top-3 flex flex-wrap gap-1.5">
+          {isOnSale && <span className="badge-primary">{t('sale')}</span>}
+          <DiscountBadge discount={product.discount} />
+          {product.isDownloadable && (
+            <span className="badge-soft">
+              <IconDownload size={16} />
+              {tp('digitalProduct')}
+            </span>
+          )}
+        </div>
+      </figure>
+
+      <div className="flex flex-1 flex-col gap-1.5 p-4">
+        {/* Categories */}
+        {product.categories && product.categories.length > 0 && (
+          <ul className="text-muted-foreground flex flex-wrap gap-1 text-xs">
+            {product.categories.slice(0, 2).map((cat, idx) => (
+              <li key={cat.id}>
+                {idx > 0 && <span aria-hidden="true">· </span>}
+                {cat.name}
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {/* Name — the card-covering link */}
+        <h3 className="text-foreground font-sans text-[15px] font-semibold leading-snug">
+          <Link
+            href={`/products/${slug}`}
+            className="hover:text-primary after:absolute after:inset-0 after:content-['']"
+          >
+            {product.name}
+          </Link>
+        </h3>
+
+        {/* Star rating. `avgRating` / `reviewCount` are denormalized rollups
+            the API returns on every product fetch. Auto-hides on a store with
+            no reviews yet: `reviewCount` is 0 (or absent) and the whole block
+            is skipped, so nothing renders and the card keeps its layout. */}
+        {product.reviewCount ? (
+          <div className="flex items-center gap-1" aria-label={tr('starRating')}>
+            <span aria-hidden="true" className="text-primary">
+              <IconStar size={16} />
+            </span>
+            <span className="text-foreground text-xs font-semibold">
+              {(product.avgRating ?? 0).toFixed(1)}
+            </span>
+            <span className="text-muted-foreground text-xs">({product.reviewCount})</span>
+          </div>
+        ) : null}
+
+        {/* Price */}
+        <div>
+          {isVariable ? (
+            <VariantPriceRange product={product} />
+          ) : (
+            <PriceDisplay
+              price={display.price ?? originalPrice}
+              salePrice={display.salePrice ?? (isOnSale ? price : undefined)}
+              currency={display.currency}
+              size="md"
+            />
+          )}
+        </div>
+
+        <StockBadge
+          inventory={product.inventory}
+          // Only a KIT has kit stock. Gating on `type` here keeps the badge and
+          // `resolveStockInfo()` using ONE definition of 'this is a kit'.
+          kitAvailable={product.type === 'KIT' ? product.kitAvailable : undefined}
+        />
+
+        {/* Add to cart (variable products route to the product page for option selection) */}
+        {(isVariable || canPurchase) && (
+          <button
+            type="button"
+            onClick={handleAddToCart}
+            disabled={adding}
+            className={cn(
+              'btn-outline btn-sm relative z-10 mt-2 w-full',
+              added && 'border-primary bg-primary text-primary-foreground hover:bg-primary'
+            )}
+          >
+            {added ? (
+              <>
+                <IconCheck size={16} />
+                {tp('addedToCart')}
+              </>
+            ) : isVariable ? (
+              tProd('selectOptions')
+            ) : (
+              <>
+                <IconBag size={16} />
+                {adding ? tp('addingToCart') : tp('addToCart')}
+              </>
+            )}
+          </button>
+        )}
+
+        {/*
+          Quick-add refusal. The card has no other error surface, and without
+          this the shopper taps, the button resets, and nothing appears.
+        */}
+        {addError && (
+          <p role="alert" className="text-destructive mt-2 text-xs">
+            {addError === 'CART_FULL' ? tp('cartFull') : tp('addToCartFailed')}
+          </p>
+        )}
+      </div>
+    </article>
+  );
+}