create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/designs/atelier/ui/product/modifier-group-selector.tsx

@@ -1,193 +1,193 @@
-'use client';
-
-/**
- * <ModifierGroupSelector> — bare-skeleton renderer for a single modifier
- * group (toppings, sauce, bread type, …) per PRD §8.4.
- *
- * DESIGN ME — modifier group on the product page; the group + selections
- * come from useProductPage() via props. The data contract is what matters:
- *
- *   - SINGLE   → renders as <input type="radio">,    max picks = 1
- *   - MULTIPLE → renders as <input type="checkbox">, picks bounded by min..max
- *   - effectiveMax === 0 → group is hidden entirely (variant-disable convention)
- *   - available === false → modifier is disabled with "Sold out" badge
- *   - free counter shows "{used} of {freeQuantity} free" when freeQuantity > 0
- *   - defaultModifierIds + isDefault drive first-render checked state
- *   - client-side guards mirror min/max (UX); the SERVER is authoritative — wire
- *     `MODIFIER_VALIDATION_FAILED` errors back to the user when add-to-cart fails
- *
- * The price-delta side: this component does NOT compute totals. The server
- * runs the free-allocation policy and returns the line's `unitPrice` /
- * `modifiers[]` / `modifiersTotal` snapshot — render those after add-to-cart.
- */
-
-import type { Modifier, ModifierGroup } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-// The pure selection logic (defaults, validation, wire-format adapter) lives
-// in core (zero markup) so that `core/hooks/use-product-page` never imports
-// from `ui/`. Re-exported here for backward compatibility with existing imports.
-export {
-  buildInitialSelections,
-  toModifierSelections,
-  validateSelections,
-} from '@/core/lib/product-options';
-
-interface ModifierGroupSelectorProps {
-  /**
-   * Effective group as returned by `GET /products/:id` (overrides already
-   * applied — `min`, `max`, `freeQuantity`, etc. are the values the server
-   * will validate against for the active variant).
-   */
-  group: ModifierGroup;
-  /** Currently-selected modifier IDs in click-order. */
-  value: string[];
-  onChange: (next: string[]) => void;
-  /** Disable all controls (e.g., while add-to-cart is in flight). */
-  disabled?: boolean;
-}
-
-export function ModifierGroupSelector({
-  group,
-  value,
-  onChange,
-  disabled = false,
-}: ModifierGroupSelectorProps) {
-  const t = useTranslations('productDetail');
-
-  // PRD §7.2.2: variant-disable convention — group with effectiveMax=0 is hidden.
-  if (group.max === 0) return null;
-
-  const isSingle = group.selectionType === 'SINGLE';
-  // Client-side bound — server is authoritative.
-  const effectiveMax = isSingle ? 1 : (group.max ?? Infinity);
-
-  const handleToggle = (modifierId: string, checked: boolean) => {
-    if (disabled) return;
-
-    if (isSingle) {
-      // Radio behavior: replace the selection.
-      onChange(checked ? [modifierId] : []);
-      return;
-    }
-
-    if (checked) {
-      if (value.length >= effectiveMax) return; // would exceed max — ignore the click
-      if (value.includes(modifierId)) return;
-      onChange([...value, modifierId]);
-    } else {
-      onChange(value.filter((id) => id !== modifierId));
-    }
-  };
-
-  const sortedModifiers = [...group.modifiers].sort((a, b) => a.position - b.position);
-
-  // Counter: how many of the picked items are within the "free" window.
-  const usedFreeSlots = Math.min(value.length, group.freeQuantity);
-  const showFreeCounter = group.freeQuantity > 0;
-
-  return (
-    <fieldset className="rounded-xl border p-5">
-      <legend className="px-1.5 text-sm font-semibold text-foreground">
-        <span>{group.name}</span>
-        {group.required && (
-          <span aria-hidden="true" className="text-destructive">
-            {' '}
-            *
-          </span>
-        )}
-        <span className="font-normal text-muted-foreground"> {ruleSummary(group, t)}</span>
-      </legend>
-
-      {group.description && (
-        <p className="mb-3 text-sm text-muted-foreground">{group.description}</p>
-      )}
-
-      {showFreeCounter && (
-        <p aria-live="polite" className="mb-3 inline-flex rounded-full bg-secondary px-3 py-1 text-xs font-semibold">
-          {t('freeCounter')
-            .replace('{used}', String(usedFreeSlots))
-            .replace('{free}', String(group.freeQuantity))}
-        </p>
-      )}
-
-      <ul className="space-y-2">
-        {sortedModifiers.map((modifier) => {
-          const isChecked = value.includes(modifier.id);
-          const isAtCap = !isSingle && !isChecked && value.length >= effectiveMax;
-          const isDisabled = disabled || !modifier.available || isAtCap;
-
-          return (
-            <li key={modifier.id}>
-              <label
-                className={cn(
-                  'flex cursor-pointer items-center gap-3 rounded-lg border px-3.5 py-2.5 transition-colors',
-                  isChecked ? 'border-primary bg-secondary/60' : 'border-border',
-                  isDisabled ? 'cursor-default opacity-50' : 'hover:border-foreground/40'
-                )}
-              >
-                <input
-                  type={isSingle ? 'radio' : 'checkbox'}
-                  name={`modifier-group-${group.id}`}
-                  value={modifier.id}
-                  checked={isChecked}
-                  disabled={isDisabled}
-                  onChange={(e) => handleToggle(modifier.id, e.target.checked)}
-                  className="h-4 w-4 accent-primary"
-                />
-                <span className="flex-1 text-sm font-medium text-foreground">{modifier.name}</span>
-                <ModifierPriceLabel modifier={modifier} />
-                {!modifier.available && (
-                  <span aria-label={t('soldOut')} className="badge-destructive">
-                    {t('soldOut')}
-                  </span>
-                )}
-              </label>
-              {modifier.description && (
-                <p className="mt-1 ps-7 text-xs text-muted-foreground">{modifier.description}</p>
-              )}
-            </li>
-          );
-        })}
-      </ul>
-    </fieldset>
-  );
-}
-
-/**
- * Renders the modifier's price contribution next to its name.
- *
- * Negative deltas display with a leading minus sign (downsell modifiers per
- * PRD §6.3.4); zero-delta modifiers render nothing — silence is the right
- * affordance for a free option.
- */
-function ModifierPriceLabel({ modifier }: { modifier: Modifier }) {
-  const delta = parseFloat(modifier.priceDelta);
-  if (Number.isNaN(delta) || delta === 0) return null;
-  const sign = delta > 0 ? '+' : '';
-  return (
-    <span className="text-sm font-semibold text-muted-foreground">
-      {sign}
-      {modifier.priceDelta}
-    </span>
-  );
-}
-
-function ruleSummary(group: ModifierGroup, t: (key: string) => string): string {
-  const parts: string[] = [];
-  if (group.selectionType === 'SINGLE') {
-    parts.push(t('pickOne'));
-  } else if (group.max != null) {
-    if (group.min === 0) parts.push(t('upTo').replace('{max}', String(group.max)));
-    else if (group.min === group.max)
-      parts.push(t('pickExactly').replace('{min}', String(group.min)));
-    else
-      parts.push(
-        t('pickRange').replace('{min}', String(group.min)).replace('{max}', String(group.max))
-      );
-  } else if (group.min > 0) {
-    parts.push(t('atLeast').replace('{min}', String(group.min)));
-  }
-  return parts.length ? `(${parts.join(', ')})` : '';
-}
+'use client';
+
+/**
+ * <ModifierGroupSelector> — bare-skeleton renderer for a single modifier
+ * group (toppings, sauce, bread type, …) per PRD §8.4.
+ *
+ * DESIGN ME — modifier group on the product page; the group + selections
+ * come from useProductPage() via props. The data contract is what matters:
+ *
+ *   - SINGLE   → renders as <input type="radio">,    max picks = 1
+ *   - MULTIPLE → renders as <input type="checkbox">, picks bounded by min..max
+ *   - effectiveMax === 0 → group is hidden entirely (variant-disable convention)
+ *   - available === false → modifier is disabled with "Sold out" badge
+ *   - free counter shows "{used} of {freeQuantity} free" when freeQuantity > 0
+ *   - defaultModifierIds + isDefault drive first-render checked state
+ *   - client-side guards mirror min/max (UX); the SERVER is authoritative — wire
+ *     `MODIFIER_VALIDATION_FAILED` errors back to the user when add-to-cart fails
+ *
+ * The price-delta side: this component does NOT compute totals. The server
+ * runs the free-allocation policy and returns the line's `unitPrice` /
+ * `modifiers[]` / `modifiersTotal` snapshot — render those after add-to-cart.
+ */
+
+import type { Modifier, ModifierGroup } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+// The pure selection logic (defaults, validation, wire-format adapter) lives
+// in core (zero markup) so that `core/hooks/use-product-page` never imports
+// from `ui/`. Re-exported here for backward compatibility with existing imports.
+export {
+  buildInitialSelections,
+  toModifierSelections,
+  validateSelections,
+} from '@/core/lib/product-options';
+
+interface ModifierGroupSelectorProps {
+  /**
+   * Effective group as returned by `GET /products/:id` (overrides already
+   * applied — `min`, `max`, `freeQuantity`, etc. are the values the server
+   * will validate against for the active variant).
+   */
+  group: ModifierGroup;
+  /** Currently-selected modifier IDs in click-order. */
+  value: string[];
+  onChange: (next: string[]) => void;
+  /** Disable all controls (e.g., while add-to-cart is in flight). */
+  disabled?: boolean;
+}
+
+export function ModifierGroupSelector({
+  group,
+  value,
+  onChange,
+  disabled = false,
+}: ModifierGroupSelectorProps) {
+  const t = useTranslations('productDetail');
+
+  // PRD §7.2.2: variant-disable convention — group with effectiveMax=0 is hidden.
+  if (group.max === 0) return null;
+
+  const isSingle = group.selectionType === 'SINGLE';
+  // Client-side bound — server is authoritative.
+  const effectiveMax = isSingle ? 1 : (group.max ?? Infinity);
+
+  const handleToggle = (modifierId: string, checked: boolean) => {
+    if (disabled) return;
+
+    if (isSingle) {
+      // Radio behavior: replace the selection.
+      onChange(checked ? [modifierId] : []);
+      return;
+    }
+
+    if (checked) {
+      if (value.length >= effectiveMax) return; // would exceed max — ignore the click
+      if (value.includes(modifierId)) return;
+      onChange([...value, modifierId]);
+    } else {
+      onChange(value.filter((id) => id !== modifierId));
+    }
+  };
+
+  const sortedModifiers = [...group.modifiers].sort((a, b) => a.position - b.position);
+
+  // Counter: how many of the picked items are within the "free" window.
+  const usedFreeSlots = Math.min(value.length, group.freeQuantity);
+  const showFreeCounter = group.freeQuantity > 0;
+
+  return (
+    <fieldset className="rounded-xl border p-5">
+      <legend className="px-1.5 text-sm font-semibold text-foreground">
+        <span>{group.name}</span>
+        {group.required && (
+          <span aria-hidden="true" className="text-destructive">
+            {' '}
+            *
+          </span>
+        )}
+        <span className="font-normal text-muted-foreground"> {ruleSummary(group, t)}</span>
+      </legend>
+
+      {group.description && (
+        <p className="mb-3 text-sm text-muted-foreground">{group.description}</p>
+      )}
+
+      {showFreeCounter && (
+        <p aria-live="polite" className="mb-3 inline-flex rounded-full bg-secondary px-3 py-1 text-xs font-semibold">
+          {t('freeCounter')
+            .replace('{used}', String(usedFreeSlots))
+            .replace('{free}', String(group.freeQuantity))}
+        </p>
+      )}
+
+      <ul className="space-y-2">
+        {sortedModifiers.map((modifier) => {
+          const isChecked = value.includes(modifier.id);
+          const isAtCap = !isSingle && !isChecked && value.length >= effectiveMax;
+          const isDisabled = disabled || !modifier.available || isAtCap;
+
+          return (
+            <li key={modifier.id}>
+              <label
+                className={cn(
+                  'flex cursor-pointer items-center gap-3 rounded-lg border px-3.5 py-2.5 transition-colors',
+                  isChecked ? 'border-primary bg-secondary/60' : 'border-border',
+                  isDisabled ? 'cursor-default opacity-50' : 'hover:border-foreground/40'
+                )}
+              >
+                <input
+                  type={isSingle ? 'radio' : 'checkbox'}
+                  name={`modifier-group-${group.id}`}
+                  value={modifier.id}
+                  checked={isChecked}
+                  disabled={isDisabled}
+                  onChange={(e) => handleToggle(modifier.id, e.target.checked)}
+                  className="h-4 w-4 accent-primary"
+                />
+                <span className="flex-1 text-sm font-medium text-foreground">{modifier.name}</span>
+                <ModifierPriceLabel modifier={modifier} />
+                {!modifier.available && (
+                  <span aria-label={t('soldOut')} className="badge-destructive">
+                    {t('soldOut')}
+                  </span>
+                )}
+              </label>
+              {modifier.description && (
+                <p className="mt-1 ps-7 text-xs text-muted-foreground">{modifier.description}</p>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </fieldset>
+  );
+}
+
+/**
+ * Renders the modifier's price contribution next to its name.
+ *
+ * Negative deltas display with a leading minus sign (downsell modifiers per
+ * PRD §6.3.4); zero-delta modifiers render nothing — silence is the right
+ * affordance for a free option.
+ */
+function ModifierPriceLabel({ modifier }: { modifier: Modifier }) {
+  const delta = parseFloat(modifier.priceDelta);
+  if (Number.isNaN(delta) || delta === 0) return null;
+  const sign = delta > 0 ? '+' : '';
+  return (
+    <span className="text-sm font-semibold text-muted-foreground">
+      {sign}
+      {modifier.priceDelta}
+    </span>
+  );
+}
+
+function ruleSummary(group: ModifierGroup, t: (key: string) => string): string {
+  const parts: string[] = [];
+  if (group.selectionType === 'SINGLE') {
+    parts.push(t('pickOne'));
+  } else if (group.max != null) {
+    if (group.min === 0) parts.push(t('upTo').replace('{max}', String(group.max)));
+    else if (group.min === group.max)
+      parts.push(t('pickExactly').replace('{min}', String(group.min)));
+    else
+      parts.push(
+        t('pickRange').replace('{min}', String(group.min)).replace('{max}', String(group.max))
+      );
+  } else if (group.min > 0) {
+    parts.push(t('atLeast').replace('{min}', String(group.min)));
+  }
+  return parts.length ? `(${parts.join(', ')})` : '';
+}

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

@@ -1,69 +1,69 @@
-'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 CURRENT: Record<NonNullable<PriceDisplayProps['size']>, string> = {
-  sm: 'text-sm font-semibold',
-  md: 'text-base font-semibold',
-  lg: 'text-2xl font-semibold',
-};
-const STRUCK: Record<NonNullable<PriceDisplayProps['size']>, string> = {
-  sm: 'text-xs',
-  md: 'text-sm',
-  lg: 'text-base',
-};
-
-/**
- * Price renderer used by cards, product page and recommendations; computes
- * sale state + discount % from props (currency via useCurrency()).
- * Never hardcode currency symbols — formatPrice handles them.
- */
-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 discountPercent =
-    isOnSale && basePrice > 0 ? Math.round(((basePrice - sale!) / basePrice) * 100) : 0;
-
-  return (
-    <span data-size={size} className={cn('inline-flex flex-wrap items-baseline gap-2', className)}>
-      {isOnSale ? (
-        <>
-          <span className={cn(CURRENT[size], 'text-foreground')}>
-            {formatPrice(sale!, { currency: currencyCode }) as string}
-          </span>
-          <s className={cn(STRUCK[size], 'text-muted-foreground')}>
-            {formatPrice(basePrice, { currency: currencyCode }) as string}
-          </s>
-          {discountPercent > 0 && (
-            <span className="badge-destructive self-center">-{discountPercent}%</span>
-          )}
-        </>
-      ) : (
-        <span className={cn(CURRENT[size], 'text-foreground')}>
-          {formatPrice(basePrice, { currency: currencyCode }) as string}
-        </span>
-      )}
-    </span>
-  );
-}
+'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 CURRENT: Record<NonNullable<PriceDisplayProps['size']>, string> = {
+  sm: 'text-sm font-semibold',
+  md: 'text-base font-semibold',
+  lg: 'text-2xl font-semibold',
+};
+const STRUCK: Record<NonNullable<PriceDisplayProps['size']>, string> = {
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+};
+
+/**
+ * Price renderer used by cards, product page and recommendations; computes
+ * sale state + discount % from props (currency via useCurrency()).
+ * Never hardcode currency symbols — formatPrice handles them.
+ */
+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 discountPercent =
+    isOnSale && basePrice > 0 ? Math.round(((basePrice - sale!) / basePrice) * 100) : 0;
+
+  return (
+    <span data-size={size} className={cn('inline-flex flex-wrap items-baseline gap-2', className)}>
+      {isOnSale ? (
+        <>
+          <span className={cn(CURRENT[size], 'text-foreground')}>
+            {formatPrice(sale!, { currency: currencyCode }) as string}
+          </span>
+          <s className={cn(STRUCK[size], 'text-muted-foreground')}>
+            {formatPrice(basePrice, { currency: currencyCode }) as string}
+          </s>
+          {discountPercent > 0 && (
+            <span className="badge-destructive self-center">-{discountPercent}%</span>
+          )}
+        </>
+      ) : (
+        <span className={cn(CURRENT[size], 'text-foreground')}>
+          {formatPrice(basePrice, { currency: currencyCode }) as string}
+        </span>
+      )}
+    </span>
+  );
+}

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

@@ -13,6 +13,7 @@ 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 { cn } from '@/core/lib/utils';
 import { IconBag, IconCheck, IconDownload } from '@/ui/shared/icons';
 
@@ -35,8 +36,7 @@ function pickDisplayPrice(
   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;
+    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.
@@ -75,7 +75,7 @@ function VariantPriceRange({ product }: { product: Product }) {
   if (isNaN(min) || isNaN(max)) return null;
 
   return (
-    <span className="text-base font-semibold text-foreground">
+    <span className="text-foreground text-base font-semibold">
       {min === max
         ? (formatPrice(min, { currency }) as string)
         : `${formatPrice(min, { currency })} – ${formatPrice(max, { currency })}`}
@@ -127,6 +127,11 @@ export function ProductCard({ product, className }: ProductCardProps) {
       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) {
@@ -138,15 +143,12 @@ export function ProductCard({ product, className }: ProductCardProps) {
 
   return (
     <article
-      className={cn(
-        'group card card-hover relative flex flex-col overflow-hidden',
-        className
-      )}
+      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="relative aspect-square overflow-hidden bg-secondary">
+          <div ref={imageWellRef} className="bg-secondary relative aspect-square overflow-hidden">
             {imageUrl ? (
               <>
                 <Image
@@ -192,7 +194,7 @@ export function ProductCard({ product, className }: ProductCardProps) {
       <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">
+          <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>}
@@ -203,10 +205,10 @@ export function ProductCard({ product, className }: ProductCardProps) {
         )}
 
         {/* Name — the card-covering link */}
-        <h3 className="font-sans text-[15px] font-semibold leading-snug text-foreground">
+        <h3 className="text-foreground font-sans text-[15px] font-semibold leading-snug">
           <Link
             href={`/products/${slug}`}
-            className="after:absolute after:inset-0 after:content-[''] hover:text-primary"
+            className="hover:text-primary after:absolute after:inset-0 after:content-['']"
           >
             {product.name}
           </Link>