create-brainerce-store 1.50.5 → 1.52.0

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

@@ -0,0 +1,260 @@
+'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, getVariantPrice, formatPrice } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { PriceDisplay } from '@/ui/product/price-display';
+import { StockBadge } from '@/ui/product/stock-badge';
+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 { cn } from '@/core/lib/utils';
+import { IconBag, IconCheck, IconDownload } from '@/ui/shared/icons';
+
+interface ProductCardProps {
+  product: Product;
+  className?: string;
+}
+
+/**
+ * Pick the price + currency to render for a given product (PRD §23 FX overlay).
+ *
+ * When the storefront passed `regionId` to `getProducts({ regionId })` AND the
+ * region currency differs from the store currency, the backend attaches
+ * additive `displayPrice` / `displayCurrency` fields. Otherwise we fall back
+ * to the canonical store-currency `basePrice` / `salePrice`. Either way the
+ * cart still charges in the store currency — this only affects display.
+ */
+function pickDisplayPrice(
+  product: Product,
+  fallbackCurrency: string
+): { price: number | undefined; salePrice: number | null; currency: string } {
+  if (product.displayPrice != null && product.displayCurrency) {
+    const sale =
+      product.displaySalePrice != null ? parseFloat(product.displaySalePrice) : null;
+    return {
+      // `displayPrice` is the base price converted to the region currency —
+      // it goes into the PriceDisplay `price` (base) slot, NOT the sale slot.
+      price: parseFloat(product.displayPrice),
+      salePrice: sale != null && !Number.isNaN(sale) ? sale : null,
+      currency: product.displayCurrency,
+    };
+  }
+  // Same-currency fallback. `getProductPriceInfo.price` is the EFFECTIVE
+  // charged amount (= salePrice when on sale, base otherwise); `originalPrice`
+  // is the base. Map them to PriceDisplay's (price = base, salePrice = sale).
+  const { price: effective, originalPrice, isOnSale } = getProductPriceInfo(product);
+  return {
+    price: originalPrice,
+    salePrice: isOnSale ? effective : null,
+    currency: fallbackCurrency,
+  };
+}
+
+function VariantPriceRange({ product }: { product: Product }) {
+  const currency = useCurrency();
+
+  let min: number;
+  let max: number;
+  if (product.priceMin && product.priceMax) {
+    min = parseFloat(product.priceMin);
+    max = parseFloat(product.priceMax);
+  } else {
+    const variants = product.variants ?? [];
+    if (variants.length === 0) return null;
+    const prices = variants.map((v) => getVariantPrice(v, product.basePrice));
+    min = Math.min(...prices);
+    max = Math.max(...prices);
+  }
+
+  if (isNaN(min) || isNaN(max)) return null;
+
+  return (
+    <span className="text-base font-semibold text-foreground">
+      {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 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 canPurchase = product.inventory?.canPurchase !== false;
+
+  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;
+
+    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();
+      setAdded(true);
+      setTimeout(() => setAdded(false), 2000);
+    } catch (err) {
+      console.error('Failed to add to cart:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <article
+      className={cn(
+        'group card card-hover 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="relative aspect-square overflow-hidden bg-secondary">
+            {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="flex flex-wrap gap-1 text-xs text-muted-foreground">
+            {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="font-sans text-[15px] font-semibold leading-snug text-foreground">
+          <Link
+            href={`/products/${slug}`}
+            className="after:absolute after:inset-0 after:content-[''] hover:text-primary"
+          >
+            {product.name}
+          </Link>
+        </h3>
+
+        {/* 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} />
+
+        {/* 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>
+        )}
+      </div>
+    </article>
+  );
+}