create-brainerce-store 1.51.0 → 1.52.0

package/templates/nextjs/designs/{passepartout → atelier}/ui/product/frequently-bought-together.tsx

@@ -1,205 +1,196 @@
-'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>
-  );
-}
+'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';
+import { IconPlus, IconBag } from '@/ui/shared/icons';
+
+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(
+        'flex w-40 cursor-pointer flex-col gap-2 rounded-xl border bg-background p-3 transition-colors',
+        checked ? 'border-primary' : 'border-border',
+        disabled && 'cursor-default'
+      )}
+    >
+      {/* `relative` + fixed box are layout-critical for next/image fill */}
+      <span className="relative block aspect-square overflow-hidden rounded-lg bg-secondary">
+        {imageUrl ? <Image src={imageUrl} alt={name} fill sizes="160px" className="object-cover" /> : null}
+        {onToggle && (
+          <input
+            type="checkbox"
+            checked={checked}
+            onChange={onToggle}
+            disabled={disabled}
+            className="absolute end-2 top-2 h-[18px] w-[18px] accent-primary"
+            aria-label={name}
+          />
+        )}
+      </span>
+      <span className="line-clamp-2 text-xs font-semibold leading-snug text-foreground">
+        {name}
+      </span>
+      <span className="text-sm font-semibold text-foreground">
+        {formatPrice(price, { currency }) as string}
+      </span>
+    </label>
+  );
+}
+
+/**
+ * "Frequently bought together" bundle on the product page: current product +
+ * selectable cross-sells + combined total + add-all button; items come from
+ * useProductPage().recommendations.crossSells, the feature gate from
+ * useStoreInfo().upsell.
+ */
+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 (
+    <section className={cn('rounded-2xl border bg-secondary/50 p-6 sm:p-8', className)}>
+      <h2 className="mb-6 text-2xl">{t('frequentlyBoughtTogether')}</h2>
+
+      <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 aria-hidden="true" className="text-muted-foreground">
+                <IconPlus size={20} />
+              </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 border-t pt-5">
+        <span className="text-lg font-semibold text-foreground">
+          {t('totalPrice').replace('{price}', formatPrice(totalPrice, { currency }) as string)}
+        </span>
+        <button
+          type="button"
+          onClick={handleAddAll}
+          disabled={adding || selected.size === 0}
+          className="btn-primary btn-md"
+        >
+          <IconBag size={18} />
+          {adding ? t('addingAll') : t('addSelectedToCart')}
+        </button>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +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(', ')})` : '';
+}