create-brainerce-store 1.33.2 → 1.34.2

package/templates/nextjs/base/src/app/products/[slug]/product-client-section.tsx

@@ -8,6 +8,7 @@ import type {
   ProductImage,
   ProductMetafield,
   DownloadFile,
+  ModifierGroup,
 } from 'brainerce';
 import { getProductPriceInfo, getDescriptionContent } from 'brainerce';
 import { useCart } from '@/providers/store-provider';
@@ -22,6 +23,12 @@ import {
   validateCustomization,
   type CustomizationValues,
 } from '@/components/products/customization-fields';
+import {
+  ModifierGroupSelector,
+  buildInitialSelections,
+  toModifierSelections,
+  validateSelections,
+} from '@/components/products/modifier-group-selector';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 import { sanitizeProductHtml } from '@/lib/sanitize-html';
@@ -138,6 +145,16 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
   });
   const [customizationErrors, setCustomizationErrors] = useState<Record<string, string>>({});
 
+  // Modifier groups (PRD §8.4) — only present on restaurant / build-your-own products.
+  const modifierGroups: ModifierGroup[] = useMemo(
+    () => (product as Product & { modifierGroups?: ModifierGroup[] }).modifierGroups ?? [],
+    [product]
+  );
+  const [modifierSelections, setModifierSelections] = useState<Record<string, string[]>>(() =>
+    buildInitialSelections(modifierGroups)
+  );
+  const [modifierError, setModifierError] = useState<string | null>(null);
+
   // Images list - switch main image when variant changes
   const images: ProductImage[] = useMemo(() => {
     return product?.images || [];
@@ -227,6 +244,24 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
     }
     setCustomizationErrors({});
 
+    // Client-side modifier validation mirrors the server's checks. The server
+    // is authoritative — `MODIFIER_VALIDATION_FAILED` envelope on add-to-cart
+    // failure is the source of truth — but pre-flighting catches the obvious
+    // issues without a round-trip.
+    if (modifierGroups.length > 0) {
+      const error = validateSelections(modifierGroups, modifierSelections);
+      if (error) {
+        setModifierError(error);
+        return;
+      }
+    }
+    setModifierError(null);
+
+    const selections =
+      modifierGroups.length > 0
+        ? toModifierSelections(modifierGroups, modifierSelections)
+        : undefined;
+
     try {
       setAddingToCart(true);
       const { getClient } = await import('@/lib/brainerce');
@@ -239,12 +274,20 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
           customizationFields.length > 0 && Object.keys(customizationValues).length > 0
             ? customizationValues
             : undefined,
+        ...(selections && selections.length > 0 ? { selections } : {}),
       });
       await refreshCart();
       setAddedMessage(true);
       setTimeout(() => setAddedMessage(false), 2000);
     } catch (err) {
-      console.error('Failed to add to cart:', err);
+      // Surface the structured `MODIFIER_VALIDATION_FAILED` envelope when present.
+      const e = err as { details?: { code?: string; errors?: Array<{ message: string }> } };
+      const validationErrors = e?.details?.errors;
+      if (e?.details?.code === 'MODIFIER_VALIDATION_FAILED' && validationErrors?.length) {
+        setModifierError(validationErrors.map((v) => v.message).join('; '));
+      } else {
+        console.error('Failed to add to cart:', err);
+      }
     } finally {
       setAddingToCart(false);
     }
@@ -439,6 +482,28 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
             />
           )}
 
+          {/* Modifier groups (toppings, sauce, bread type, …) */}
+          {modifierGroups.length > 0 && (
+            <div className="space-y-4">
+              {modifierGroups.map((group) => (
+                <ModifierGroupSelector
+                  key={group.attachmentId ?? group.id}
+                  group={group}
+                  value={modifierSelections[group.id] ?? []}
+                  onChange={(next) =>
+                    setModifierSelections((prev) => ({ ...prev, [group.id]: next }))
+                  }
+                  disabled={addingToCart}
+                />
+              ))}
+              {modifierError && (
+                <p className="text-destructive text-sm" role="alert">
+                  {modifierError}
+                </p>
+              )}
+            </div>
+          )}
+
           {/* Quantity + Add to Cart */}
           <div className="flex items-center gap-4">
             <div className="border-border flex items-center rounded border">

package/templates/nextjs/base/src/components/cart/cart-bundle-offer.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState } from 'react';
 import Image from 'next/image';
 import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
-import { formatPrice, getVariantOptions } from 'brainerce';
+import { formatPrice } from 'brainerce';
 import { useStoreInfo } from '@/providers/store-provider';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
@@ -20,117 +20,28 @@ export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBun
   const t = useTranslations('cart');
   const currency = storeInfo?.currency || 'USD';
   const [adding, setAdding] = useState(false);
-  const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
 
-  const product = offer.bundleProduct;
-  const variants = product.variants;
-  const requiresSelection = offer.requiresVariantSelection && variants && variants.length > 0;
+  const offered = offer.offeredProducts;
 
-  // Build attribute groups from variants
-  const attributeGroups = useMemo(() => {
-    if (!requiresSelection || !variants) return [];
-    const groups = new Map<string, Set<string>>();
-    for (const v of variants) {
-      const opts = getVariantOptions(v as any);
-      for (const opt of opts) {
-        if (!groups.has(opt.name)) groups.set(opt.name, new Set());
-        groups.get(opt.name)!.add(opt.value);
-      }
-    }
-    return Array.from(groups.entries()).map(([name, values]) => ({
-      name,
-      values: Array.from(values),
-    }));
-  }, [requiresSelection, variants]);
-
-  const [selectedAttrs, setSelectedAttrs] = useState<Record<string, string>>({});
-
-  const selectedVariant = useMemo(() => {
-    if (!requiresSelection || !variants) return null;
-    return (
-      variants.find((v) => {
-        const opts = getVariantOptions(v as any);
-        return attributeGroups.every((group) => {
-          const opt = opts.find((o) => o.name === group.name);
-          return opt && selectedAttrs[group.name] === opt.value;
-        });
-      }) ?? null
-    );
-  }, [requiresSelection, variants, selectedAttrs, attributeGroups]);
-
-  const effectiveVariantId = selectedVariant?.id ?? selectedVariantId;
-
-  function handleAttrSelect(attrName: string, value: string) {
-    const next = { ...selectedAttrs, [attrName]: value };
-    setSelectedAttrs(next);
-    if (variants) {
-      const match = variants.find((v) => {
-        const opts = getVariantOptions(v as any);
-        return attributeGroups.every((group) => {
-          const opt = opts.find((o) => o.name === group.name);
-          return opt && next[group.name] === opt.value;
-        });
-      });
-      setSelectedVariantId(match?.id ?? null);
-    }
-  }
-
-  // Compute display prices
-  const { displayOriginal, displayDiscounted, discountLabel } = useMemo(() => {
-    let effectivePrice: number;
-    if (selectedVariant) {
-      const vSale = selectedVariant.salePrice ? parseFloat(selectedVariant.salePrice) : null;
-      const vPrice = selectedVariant.price ? parseFloat(selectedVariant.price) : null;
-      effectivePrice = vSale ?? vPrice ?? parseFloat(offer.originalPrice);
-    } else {
-      effectivePrice = parseFloat(offer.originalPrice);
-    }
-
-    let discounted: number;
-    if (offer.discountType === 'PERCENTAGE') {
-      discounted = effectivePrice * (1 - parseFloat(offer.discountValue) / 100);
-    } else {
-      discounted = Math.max(0, effectivePrice - parseFloat(offer.discountValue));
-    }
-
-    const label =
-      offer.discountType === 'PERCENTAGE'
-        ? `${offer.discountValue}%`
-        : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
-
-    return { displayOriginal: effectivePrice, displayDiscounted: discounted, discountLabel: label };
-  }, [selectedVariant, offer.originalPrice, offer.discountType, offer.discountValue, currency]);
-
-  const isOos =
-    selectedVariant?.inventory?.trackingMode !== 'NOT_TRACKED' &&
-    selectedVariant?.inventory?.available != null &&
-    selectedVariant.inventory.available <= 0;
-
-  const lockedLabel =
-    offer.lockedVariant?.name ??
-    (offer.lockedVariant?.attributes
-      ? Object.values(offer.lockedVariant.attributes).join(' / ')
-      : null);
-
-  const firstImage = product.images?.[0];
-  const imageUrl = firstImage
-    ? typeof firstImage === 'string'
-      ? firstImage
-      : firstImage.url
-    : null;
-
-  const canAdd = !requiresSelection || !!effectiveVariantId;
+  const totalOriginal = parseFloat(offer.totalOriginalPrice);
+  const totalDiscounted = parseFloat(offer.totalDiscountedPrice);
+  const discountLabel =
+    offer.discountType === 'PERCENTAGE'
+      ? `${offer.discountValue}%`
+      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
 
   async function handleAdd() {
-    if (adding || !canAdd || isOos) return;
+    if (adding) return;
     try {
       setAdding(true);
       const { getClient } = await import('@/lib/brainerce');
       const client = getClient();
-      await client.addBundleToCart(cartId, offer.id, effectiveVariantId ?? undefined);
+      // No variant selections in the default template — products with
+      // variants are best handled with a dedicated picker per offered item.
+      await client.addBundleToCart(cartId, offer.id);
       onAdd();
     } catch (err) {
-      console.error('Failed to add bundle item:', err);
+      console.error('Failed to add bundle:', err);
     } finally {
       setAdding(false);
     }
@@ -138,110 +49,64 @@ export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBun
 
   return (
     <div className={cn('bg-background border-border rounded-lg border p-4', className)}>
-      <div className="flex items-center gap-4">
-        {/* Product image */}
-        <div className="bg-muted relative h-16 w-16 flex-shrink-0 overflow-hidden rounded">
-          {imageUrl ? (
-            <Image src={imageUrl} alt={product.name} fill sizes="64px" className="object-cover" />
-          ) : (
-            <div className="text-muted-foreground flex h-full w-full items-center justify-center">
-              <svg className="h-6 w-6" 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>
+      <div className="mb-3">
+        <p className="text-foreground text-sm font-medium">{offer.name}</p>
+        {offer.description && (
+          <p className="text-muted-foreground mt-0.5 text-xs">{offer.description}</p>
+        )}
+      </div>
 
-        {/* Details */}
-        <div className="min-w-0 flex-1">
-          <p className="text-foreground text-sm font-medium">{offer.name}</p>
-          {offer.description && (
-            <p className="text-muted-foreground mt-0.5 text-xs">{offer.description}</p>
-          )}
-          {lockedLabel && <p className="text-muted-foreground mt-0.5 text-xs">{lockedLabel}</p>}
-          <div className="mt-1 flex items-center gap-2">
-            <span className="text-muted-foreground text-sm line-through">
-              {formatPrice(displayOriginal, { currency }) as string}
-            </span>
-            <span className="text-foreground text-sm font-semibold">
-              {formatPrice(displayDiscounted, { currency }) as string}
-            </span>
-            <span className="bg-destructive/10 text-destructive rounded px-1.5 py-0.5 text-xs font-medium">
-              -{discountLabel}
-            </span>
-          </div>
+      <ul className="space-y-2">
+        {offered.map((p) => {
+          const firstImage = p.images?.[0];
+          const imageUrl = firstImage?.url ?? null;
+          return (
+            <li key={p.id} className="flex items-center gap-3">
+              <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
+                {imageUrl ? (
+                  <Image src={imageUrl} alt={p.name} fill sizes="48px" className="object-cover" />
+                ) : null}
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="text-foreground truncate text-sm">{p.name}</p>
+                <div className="mt-0.5 flex items-center gap-2">
+                  <span className="text-muted-foreground text-xs line-through">
+                    {formatPrice(parseFloat(p.originalPrice), { currency }) as string}
+                  </span>
+                  <span className="text-foreground text-xs font-semibold">
+                    {formatPrice(parseFloat(p.discountedPrice), { currency }) as string}
+                  </span>
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+
+      <div className="border-border mt-3 flex items-center justify-between border-t pt-3">
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground text-sm line-through">
+            {formatPrice(totalOriginal, { currency }) as string}
+          </span>
+          <span className="text-foreground text-sm font-semibold">
+            {formatPrice(totalDiscounted, { currency }) as string}
+          </span>
+          <span className="bg-destructive/10 text-destructive rounded px-1.5 py-0.5 text-xs font-medium">
+            -{discountLabel}
+          </span>
         </div>
-
-        {/* Add button */}
         <button
           type="button"
           onClick={handleAdd}
-          disabled={adding || !canAdd || isOos}
+          disabled={adding}
           className={cn(
             'bg-primary text-primary-foreground flex-shrink-0 rounded px-4 py-2 text-xs font-medium transition-opacity hover:opacity-90',
             'disabled:cursor-not-allowed disabled:opacity-50'
           )}
         >
-          {adding
-            ? t('addingBundle')
-            : requiresSelection && !canAdd
-              ? t('selectOptions') || 'Select options'
-              : t('addBundleItem')}
+          {adding ? t('addingBundle') : t('addBundleItem')}
         </button>
       </div>
-
-      {/* Compact variant selector */}
-      {requiresSelection && (
-        <div className="mt-3 space-y-1.5 ps-20">
-          {attributeGroups.map((group) => (
-            <div key={group.name} className="flex flex-wrap items-center gap-1.5">
-              <span className="text-muted-foreground text-xs">{group.name}:</span>
-              {group.values.map((value) => {
-                const isSelected = selectedAttrs[group.name] === value;
-                const variantForValue = variants?.find((v) => {
-                  const opts = getVariantOptions(v as any);
-                  const matchesValue = opts.some((o) => o.name === group.name && o.value === value);
-                  if (!matchesValue) return false;
-                  return Object.entries(selectedAttrs).every(([k, sv]) => {
-                    if (k === group.name) return true;
-                    return opts.some((o) => o.name === k && o.value === sv);
-                  });
-                });
-                const isVariantOos =
-                  variantForValue?.inventory?.trackingMode !== 'NOT_TRACKED' &&
-                  variantForValue?.inventory?.available != null &&
-                  variantForValue.inventory.available <= 0;
-
-                return (
-                  <button
-                    key={value}
-                    type="button"
-                    onClick={() => handleAttrSelect(group.name, value)}
-                    disabled={isVariantOos}
-                    className={cn(
-                      'rounded-full border px-2.5 py-0.5 text-xs transition-colors',
-                      isSelected
-                        ? 'border-primary bg-primary text-primary-foreground'
-                        : 'border-border text-foreground hover:border-primary/50',
-                      isVariantOos && 'cursor-not-allowed line-through opacity-40'
-                    )}
-                  >
-                    {value}
-                  </button>
-                );
-              })}
-            </div>
-          ))}
-          {isOos && effectiveVariantId && (
-            <p className="text-destructive text-xs">{t('outOfStock') || 'Out of stock'}</p>
-          )}
-        </div>
-      )}
     </div>
   );
 }

package/templates/nextjs/base/src/components/products/allergen-chips.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+/**
+ * <AllergenChips> — informational allergen markers for storefront PDPs.
+ * Pure presentation; no interactivity. Pairs with `<ModifierGroupSelector>`
+ * but works standalone next to a product as well.
+ *
+ * Allergens are descriptive only: the system surfaces them but does not
+ * auto-block purchase. Customer-side allergen filtering is a deferred SDK
+ * feature (PRD §16).
+ *
+ * Icon resolution (PRD §15 Q4): when `allergen.iconUrl` is set, use it.
+ * Otherwise fall back to a built-in emoji keyed by `allergen.code` for the
+ * 8 common allergens listed in PRD §5.7. Stores that want branded icons
+ * upload via `iconUrl` per allergen; the rest get a sensible default
+ * without any setup.
+ */
+
+import type { Allergen } from 'brainerce';
+
+/**
+ * Default emoji per canonical allergen code. The schema's @@unique on
+ * `(accountId, storeId, code)` means a store may have at most one of each;
+ * any code not in this map renders without an icon (the chip still shows
+ * the localized name, so the customer is informed regardless).
+ */
+const DEFAULT_EMOJI_BY_CODE: Record<string, string> = {
+  gluten: '🌾',
+  dairy: '🥛',
+  nuts: '🥜',
+  eggs: '🥚',
+  soy: '🫘',
+  fish: '🐟',
+  shellfish: '🦐',
+  sesame: '🌱',
+};
+
+interface AllergenChipsProps {
+  allergens: Allergen[];
+  /**
+   * When the storefront has more allergen icons than fit nicely, condense
+   * to "Contains: X, Y, +N more" instead of rendering every chip.
+   */
+  maxVisible?: number;
+}
+
+export function AllergenChips({ allergens, maxVisible = 6 }: AllergenChipsProps) {
+  if (!allergens || allergens.length === 0) return null;
+
+  const visible = allergens.slice(0, maxVisible);
+  const overflow = Math.max(0, allergens.length - visible.length);
+
+  return (
+    <span className="allergen-chips" role="list" aria-label="Contains">
+      {visible.map((allergen) => {
+        const fallbackEmoji = DEFAULT_EMOJI_BY_CODE[allergen.code];
+        return (
+          <span key={allergen.id} className="allergen-chip" role="listitem" title={allergen.name}>
+            {allergen.iconUrl ? (
+              <img
+                src={allergen.iconUrl}
+                alt=""
+                aria-hidden="true"
+                className="allergen-chip__icon"
+              />
+            ) : fallbackEmoji ? (
+              <span aria-hidden="true" className="allergen-chip__emoji">
+                {fallbackEmoji}
+              </span>
+            ) : null}
+            <span className="allergen-chip__name">{allergen.name}</span>
+          </span>
+        );
+      })}
+      {overflow > 0 && <span className="allergen-chip allergen-chip--more">+{overflow} more</span>}
+    </span>
+  );
+}