create-brainerce-store 1.51.0 → 1.52.1

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

@@ -1,265 +0,0 @@
-'use client';
-
-import { useRef, useState } 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 { useCurrency } from '@/core/lib/use-currency';
-import { cn } from '@/core/lib/utils';
-import { flyToCart } from '@/ui/shared/fly-to-cart';
-
-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-foreground tabular text-sm">
-      {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 imageUrl = mainImage?.url || null;
-  const slug = product.slug || product.id;
-  const isVariable = product.type === 'VARIABLE';
-
-  const [adding, setAdding] = useState(false);
-  const frameRef = useRef<HTMLDivElement>(null);
-  const [added, setAdded] = useState(false);
-
-  const canPurchase = product.inventory?.canPurchase !== false;
-
-  async function handleAddToCart(e: React.MouseEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (isVariable) {
-      router.push(`/products/${slug}`);
-      return;
-    }
-
-    if (adding || !canPurchase) return;
-
-    flyToCart(frameRef.current);
-
-    try {
-      setAdding(true);
-      const { getClient } = await import('@/core/lib/brainerce');
-      const client = getClient();
-      await client.smartAddToCart({ productId: product.id, quantity: 1 });
-      await refreshCart();
-      setAdded(true);
-      setTimeout(() => setAdded(false), 2000);
-    } catch (err) {
-      console.error('Failed to add to cart:', err);
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <div className={cn('group block', className)}>
-      {/* The framed work — pure paper mat behind the photo, 1px hairline frame */}
-      <Link href={`/products/${slug}`} className="block">
-        <div ref={frameRef} className="bg-surface border-border hung relative aspect-square overflow-hidden border">
-          {imageUrl ? (
-            <>
-              <Image
-                src={imageUrl}
-                alt={mainImage?.alt || product.name}
-                fill
-                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
-                className="object-cover transition-transform duration-700 group-hover:scale-[1.03]"
-              />
-              {/* Second angle cross-fades in on hover — scale and fit at a glance */}
-              {product.images?.[1]?.url && (
-                <Image
-                  src={product.images[1].url}
-                  alt=""
-                  fill
-                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
-                  className="object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100"
-                />
-              )}
-            </>
-          ) : (
-            <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-              <svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1.5}
-                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                />
-              </svg>
-            </div>
-          )}
-
-          {/* Placard notes inside the frame — plain text on the mat, never boxes */}
-          <div className="absolute start-3 top-3 flex flex-col gap-1">
-            {isOnSale && (
-              <span className="text-destructive text-[0.6875rem] font-semibold tracking-[0.08em]">
-                {t('sale')}
-              </span>
-            )}
-            <DiscountBadge discount={product.discount} />
-            {product.isDownloadable && (
-              <span className="text-muted-foreground text-[0.6875rem] tracking-[0.08em]">
-                {tp('digitalProduct')}
-              </span>
-            )}
-          </div>
-
-          {/* Add-to-cart strip — slides up inside the frame; always visible on touch */}
-          {(isVariable || canPurchase) && (
-            <button
-              onClick={handleAddToCart}
-              disabled={adding}
-              aria-label={isVariable ? tProd('selectOptions') : tp('addToCart')}
-              className={cn(
-                'bg-surface/95 border-border absolute inset-x-0 bottom-0 border-t py-2.5 text-center text-xs font-semibold transition-all duration-200',
-                'translate-y-full opacity-0 group-hover:translate-y-0 group-hover:opacity-100',
-                'focus-visible:translate-y-0 focus-visible:opacity-100',
-                '[@media(hover:none)]:translate-y-0 [@media(hover:none)]:opacity-100',
-                'text-foreground'
-              )}
-            >
-              {added ? (
-                <span className="inline-flex items-center justify-center gap-1.5">
-                  <svg
-                    className="text-accent h-3.5 w-3.5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    strokeWidth={1.5}
-                    aria-hidden="true"
-                  >
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-                  </svg>
-                  {tp('addedToCart')}
-                </span>
-              ) : isVariable ? (
-                tProd('selectOptions')
-              ) : (
-                tp('addToCart')
-              )}
-            </button>
-          )}
-        </div>
-      </Link>
-
-      {/* The placard below the frame */}
-      <div className="space-y-1.5 pt-3 text-start">
-        {/* Category — first one only, quiet caption */}
-        {product.categories && product.categories.length > 0 && (
-          <p className="text-muted-foreground text-[0.6875rem] tracking-[0.08em]">
-            {product.categories[0].name}
-          </p>
-        )}
-
-        {/* Name — clickable, underline draws from the right */}
-        <Link href={`/products/${slug}`} className="group/name block">
-          <h3 className="text-foreground line-clamp-2 font-serif text-[0.9375rem] font-normal">
-            <span className="relative">
-              {product.name}
-              <span
-                aria-hidden="true"
-                className="bg-foreground absolute -bottom-0.5 start-0 end-0 h-px origin-right scale-x-0 transition-transform duration-200 group-hover/name:scale-x-100"
-              />
-            </span>
-          </h3>
-        </Link>
-
-        {/* Price */}
-        {isVariable ? (
-          <VariantPriceRange product={product} />
-        ) : (
-          <PriceDisplay
-            price={display.price ?? originalPrice}
-            salePrice={display.salePrice ?? (isOnSale ? price : undefined)}
-            currency={display.currency}
-            size="sm"
-          />
-        )}
-
-        {/* Stock */}
-        <StockBadge inventory={product.inventory} />
-      </div>
-    </div>
-  );
-}