create-brainerce-store 1.50.5 → 1.51.0

package/templates/nextjs/designs/passepartout/ui/layout/whatsapp-button.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useTranslations } from '@/core/lib/translations';
+
+/**
+ * Floating WhatsApp contact — a common e-commerce service convention.
+ * Sits above the store-bot bubble on the end side (visually left in RTL).
+ * WhatsApp green is kept deliberately: recognizability beats palette here.
+ *
+ * Renders ONLY when `NEXT_PUBLIC_WHATSAPP_PHONE` is set (digits, international
+ * format without "+", e.g. 14155550123) — see `.env.local`. The pre-filled
+ * message comes from the locale messages (`common.whatsappMessage`).
+ */
+const PHONE = process.env.NEXT_PUBLIC_WHATSAPP_PHONE;
+
+export function WhatsAppButton() {
+  const t = useTranslations('common');
+
+  if (!PHONE) return null;
+
+  return (
+    <a
+      href={`https://wa.me/${PHONE}?text=${encodeURIComponent(t('whatsappMessage'))}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="WhatsApp"
+      className="fixed bottom-20 end-4 z-40 flex h-11 w-11 items-center justify-center rounded-full bg-[#25D366] text-white shadow-[0_8px_20px_-8px_rgba(0,0,0,0.4)] transition-transform hover:scale-105"
+    >
+      <svg viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6" aria-hidden="true">
+        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.297-.497.1-.198.05-.371-.025-.52-.074-.149-.668-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
+      </svg>
+    </a>
+  );
+}

package/templates/nextjs/designs/passepartout/ui/product/discount-badge.tsx

@@ -0,0 +1,22 @@
+import type { ProductDiscount } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+
+interface DiscountBadgeProps {
+  discount?: ProductDiscount | null;
+  className?: string;
+}
+
+export function DiscountBadge({ discount, className }: DiscountBadgeProps) {
+  if (!discount) return null;
+
+  return (
+    <span
+      className={cn(
+        'text-destructive inline-flex items-center text-[0.6875rem] font-semibold tracking-[0.08em]',
+        className
+      )}
+    >
+      {discount.badgeText}
+    </span>
+  );
+}

package/templates/nextjs/designs/passepartout/ui/product/frequently-bought-together.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import { useState } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { Product, ProductRecommendation } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useCart, useStoreInfo } from '@/core/providers/store-provider';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface FrequentlyBoughtTogetherProps {
+  items: ProductRecommendation[];
+  currentProduct: Product;
+  className?: string;
+}
+
+function getEffectivePrice(item: { basePrice: string; salePrice?: string | null }): number {
+  const sale = item.salePrice ? parseFloat(item.salePrice) : null;
+  const base = parseFloat(item.basePrice);
+  return sale != null && sale < base ? sale : base;
+}
+
+function ProductThumb({
+  name,
+  imageUrl,
+  price,
+  currency,
+  checked,
+  onToggle,
+  disabled,
+}: {
+  name: string;
+  imageUrl: string | null;
+  price: number;
+  currency: string;
+  checked: boolean;
+  onToggle?: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <label
+      className={cn(
+        'border-border bg-background relative flex cursor-pointer flex-col items-center rounded-none border p-3 transition-all',
+        checked ? 'ring-primary ring-2' : 'opacity-60',
+        disabled && 'pointer-events-none'
+      )}
+    >
+      {onToggle && (
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={onToggle}
+          className="absolute start-2 top-2 h-4 w-4 rounded"
+        />
+      )}
+      <div className="bg-muted relative mb-2 h-20 w-20 overflow-hidden rounded">
+        {imageUrl ? (
+          <Image src={imageUrl} alt={name} fill sizes="80px" className="object-cover" />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <svg
+              className="text-muted-foreground h-8 w-8"
+              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>
+        )}
+      </div>
+      <span className="text-foreground line-clamp-2 text-center text-xs font-medium">{name}</span>
+      <span className="text-muted-foreground mt-1 text-xs">
+        {formatPrice(price, { currency }) as string}
+      </span>
+    </label>
+  );
+}
+
+export function FrequentlyBoughtTogether({
+  items,
+  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);
+
+  const [selected, setSelected] = useState<Set<string>>(() => new Set(crossSells.map((i) => i.id)));
+  const [adding, setAdding] = useState(false);
+
+  if (!storeInfo?.upsell?.frequentlyBoughtTogetherEnabled) return null;
+  if (crossSells.length === 0) return null;
+
+  const currentPrice = getEffectivePrice(currentProduct);
+  const currentImage = currentProduct.images?.[0];
+  const currentImageUrl = currentImage
+    ? typeof currentImage === 'string'
+      ? currentImage
+      : currentImage.url
+    : null;
+
+  const totalPrice = crossSells
+    .filter((item) => selected.has(item.id))
+    .reduce((sum, item) => sum + getEffectivePrice(item), currentPrice);
+
+  const toggleItem = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  async function handleAddAll() {
+    if (adding || selected.size === 0) return;
+    try {
+      setAdding(true);
+      const { getClient } = await import('@/core/lib/brainerce');
+      const client = getClient();
+      const selectedItems = crossSells.filter((item) => selected.has(item.id));
+      for (const item of selectedItems) {
+        await client.smartAddToCart({ productId: item.id, quantity: 1 });
+      }
+      await refreshCart();
+    } catch (err) {
+      console.error('Failed to add items to cart:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <div className={cn('border-border border p-6', className)}>
+      <p className="placard tabular">{t('fbtKicker')}</p>
+      <h2 className="text-foreground mt-1 font-serif text-xl font-normal">
+        {t('frequentlyBoughtTogether')}
+      </h2>
+      <div className="border-border mb-6 mt-5 border-b" />
+
+      <div className="flex flex-wrap items-center gap-3">
+        {/* Current product (always included, no checkbox) */}
+        <ProductThumb
+          name={currentProduct.name}
+          imageUrl={currentImageUrl}
+          price={currentPrice}
+          currency={currency}
+          checked={true}
+          disabled
+        />
+
+        {crossSells.map((item) => {
+          const img = item.images?.[0];
+          const imgUrl = img ? (typeof img === 'string' ? img : img.url) : null;
+          return (
+            <div key={item.id} className="flex items-center gap-3">
+              <span className="text-accent text-lg font-light">+</span>
+              <ProductThumb
+                name={item.name}
+                imageUrl={imgUrl}
+                price={getEffectivePrice(item)}
+                currency={currency}
+                checked={selected.has(item.id)}
+                onToggle={() => toggleItem(item.id)}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Total + Add button */}
+      <div className="mt-6 flex flex-wrap items-center gap-4">
+        <span className="text-foreground tabular text-lg">
+          {t('totalPrice', { price: formatPrice(totalPrice, { currency }) as string })}
+        </span>
+        <button
+          onClick={handleAddAll}
+          disabled={adding || selected.size === 0}
+          className={cn(
+            'bg-primary text-primary-foreground px-5 py-2.5 text-[0.8125rem] font-semibold transition-colors',
+            'disabled:cursor-not-allowed disabled:opacity-50'
+          )}
+        >
+          {adding ? t('addingAll') : t('addSelectedToCart')}
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/designs/passepartout/ui/product/price-display.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { cn } from '@/core/lib/utils';
+
+interface PriceDisplayProps {
+  price: string | number;
+  salePrice?: string | number | null;
+  currency?: string;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const sizeClasses = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-[1.375rem]',
+};
+
+/**
+ * Split a formatted price into currency symbol and digits so the symbol can
+ * be set small and quiet — a discreet price tag ('₪ 1,240').
+ * Falls back to the raw string when the shape is unexpected.
+ */
+function splitFormatted(formatted: string): { pre: string; num: string; post: string } | null {
+  const m = formatted.match(/^([^\d-]*)(-?\d[\d.,  \s]*)([^\d]*)$/);
+  if (!m) return null;
+  return { pre: m[1].trim(), num: m[2].trim(), post: m[3].trim() };
+}
+
+function PriceTag({
+  amount,
+  currency,
+  digitsClass,
+  symbolClass,
+  raised,
+  className,
+}: {
+  amount: number;
+  currency: string;
+  digitsClass: string;
+  symbolClass: string;
+  /** PDP-scale auction-catalogue treatment: symbol raised 0.15em. */
+  raised?: boolean;
+  className?: string;
+}) {
+  const formatted = formatPrice(amount, { currency }) as string;
+  const parts = splitFormatted(formatted);
+
+  if (!parts) {
+    return <span className={cn('tabular', digitsClass, className)}>{formatted}</span>;
+  }
+
+  const symbol = cn(symbolClass, raised && 'relative -top-[0.15em]');
+
+  return (
+    <span className={cn('tabular inline-flex items-baseline gap-1', className)}>
+      {parts.pre ? <span className={symbol}>{parts.pre}</span> : null}
+      <span className={digitsClass}>{parts.num}</span>
+      {parts.post ? <span className={symbol}>{parts.post}</span> : null}
+    </span>
+  );
+}
+
+export function PriceDisplay({
+  price,
+  salePrice,
+  currency,
+  className,
+  size = 'md',
+}: PriceDisplayProps) {
+  const currencyCode = useCurrency(currency);
+
+  const basePrice = typeof price === 'string' ? parseFloat(price) : price;
+  const sale =
+    salePrice != null ? (typeof salePrice === 'string' ? parseFloat(salePrice) : salePrice) : null;
+  const isOnSale = sale !== null && sale < basePrice;
+  const raised = size === 'lg';
+
+  return (
+    <span className={cn('inline-flex flex-wrap items-baseline gap-2', sizeClasses[size], className)}>
+      {isOnSale ? (
+        <>
+          <PriceTag
+            amount={sale!}
+            currency={currencyCode}
+            digitsClass="text-destructive"
+            symbolClass="text-accent text-[0.75em]"
+            raised={raised}
+          />
+          <PriceTag
+            amount={basePrice}
+            currency={currencyCode}
+            digitsClass="text-muted-foreground line-through"
+            symbolClass="text-muted-foreground text-[0.75em]"
+            className="text-[0.85em] opacity-60"
+          />
+        </>
+      ) : (
+        <PriceTag
+          amount={basePrice}
+          currency={currencyCode}
+          digitsClass="text-foreground"
+          symbolClass="text-muted-foreground text-[0.75em]"
+          raised={raised}
+        />
+      )}
+    </span>
+  );
+}

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

@@ -0,0 +1,265 @@
+'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>
+  );
+}