create-brainerce-store 1.50.5 → 1.52.0

package/templates/nextjs/base/src/components/products/modifier-group-selector.tsx

@@ -1,238 +0,0 @@
-'use client';
-
-/**
- * <ModifierGroupSelector> — reference React component for storefront authors
- * (PRD §8.4).
- *
- * Drop-in renderer for a single modifier group (toppings, sauce, bread type, …).
- * Storefront authors are encouraged to copy this file and tailor the styling /
- * markup to their site — the data contract is what matters, not the markup.
- *
- * Behavior pinned by the contract:
- *   - 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, ModifierSelection } from 'brainerce';
-
-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) {
-  // 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="modifier-group">
-      <legend className="modifier-group__legend">
-        <span className="modifier-group__name">{group.name}</span>
-        {group.required && <span className="modifier-group__required"> *</span>}
-        <span className="modifier-group__rules">{ruleSummary(group)}</span>
-      </legend>
-
-      {group.description && <p className="modifier-group__description">{group.description}</p>}
-
-      {showFreeCounter && (
-        <p className="modifier-group__counter" aria-live="polite">
-          {usedFreeSlots} of {group.freeQuantity} free
-        </p>
-      )}
-
-      <ul className="modifier-group__options">
-        {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} className="modifier-option">
-              <label className="modifier-option__label">
-                <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="modifier-option__input"
-                />
-                <span className="modifier-option__name">{modifier.name}</span>
-                <ModifierPriceLabel modifier={modifier} />
-                {!modifier.available && (
-                  <span
-                    className="modifier-option__badge modifier-option__badge--soldout"
-                    aria-label="Sold out"
-                  >
-                    Sold out
-                  </span>
-                )}
-              </label>
-              {modifier.description && (
-                <p className="modifier-option__description">{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="modifier-option__price">
-      {sign}
-      {modifier.priceDelta}
-    </span>
-  );
-}
-
-function ruleSummary(group: ModifierGroup): string {
-  const parts: string[] = [];
-  if (group.selectionType === 'SINGLE') {
-    parts.push('Pick one');
-  } else if (group.max != null) {
-    if (group.min === 0) parts.push(`Up to ${group.max}`);
-    else if (group.min === group.max) parts.push(`Pick exactly ${group.min}`);
-    else parts.push(`${group.min}–${group.max}`);
-  } else if (group.min > 0) {
-    parts.push(`At least ${group.min}`);
-  }
-  return parts.length ? `(${parts.join(', ')})` : '';
-}
-
-/**
- * Lightweight client-side validation that mirrors the server's checks. Use
- * this to gate the add-to-cart button — but always treat the server's 400
- * (`MODIFIER_VALIDATION_FAILED`) as the authoritative answer.
- */
-export function validateSelections(
-  groups: ModifierGroup[],
-  selections: Record<string, string[]>
-): string | null {
-  for (const group of groups) {
-    if (group.max === 0) continue; // disabled-for-variant — skip
-    const picks = selections[group.id] ?? [];
-    if (group.required && picks.length === 0) {
-      return `${group.name} is required`;
-    }
-    if (picks.length < group.min) {
-      return `Pick at least ${group.min} from ${group.name}`;
-    }
-    if (group.max != null && picks.length > group.max) {
-      return `Pick at most ${group.max} from ${group.name}`;
-    }
-    if (group.selectionType === 'SINGLE' && picks.length > 1) {
-      return `Only one option allowed in ${group.name}`;
-    }
-  }
-  return null;
-}
-
-/**
- * Adapter: convert the local Record<groupId, modifierIds> shape used by this
- * component into the wire-format `ModifierSelection[]` array the SDK expects
- * on `addToCart` / `updateCartItem`.
- */
-export function toModifierSelections(
-  groups: ModifierGroup[],
-  selections: Record<string, string[]>
-): ModifierSelection[] {
-  const out: ModifierSelection[] = [];
-  for (const group of groups) {
-    if (group.max === 0) continue;
-    const picks = selections[group.id] ?? [];
-    if (picks.length === 0) continue;
-    out.push({ modifierGroupId: group.id, modifierIds: picks });
-  }
-  return out;
-}
-
-/**
- * Build the initial selection map from the group's defaults — call once on
- * first render for each group. Honors `defaultModifierIds` first (per-attach
- * defaults), falling back to per-modifier `isDefault` flags. Sold-out
- * modifiers are filtered out so the user doesn't start with an invalid pick.
- */
-export function buildInitialSelections(groups: ModifierGroup[]): Record<string, string[]> {
-  const out: Record<string, string[]> = {};
-  for (const group of groups) {
-    if (group.max === 0) continue;
-    const fromDefaults = group.defaultModifierIds ?? [];
-    const fromIsDefault = group.modifiers
-      .filter((m) => m.isDefault && m.available)
-      .map((m) => m.id);
-    const merged =
-      fromDefaults.length > 0
-        ? fromDefaults.filter((id) => group.modifiers.some((m) => m.id === id && m.available))
-        : fromIsDefault;
-    // Cap by max for SINGLE groups — defaults can't violate selection rules.
-    const capped = group.selectionType === 'SINGLE' ? merged.slice(0, 1) : merged;
-    if (capped.length > 0) out[group.id] = capped;
-  }
-  return out;
-}