create-brainerce-store 1.50.5 → 1.51.0

package/templates/nextjs/base/src/{components/products → ui/product}/customization-fields.tsx

@@ -2,11 +2,16 @@
 
 import { useState } from 'react';
 import type { ProductCustomizationField } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import type { CustomizationValues } from '@/core/lib/product-options';
 
-export type CustomizationValues = Record<string, unknown>;
+// The pure validation logic 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 { validateCustomization } from '@/core/lib/product-options';
+export type { CustomizationValues } from '@/core/lib/product-options';
 
 interface CustomizationFieldsProps {
   fields: ProductCustomizationField[];
@@ -192,8 +197,8 @@ function CustomizationFieldRow({ field, value, error, onChange }: RowProps) {
           >
             <option value="">{t('selectPlaceholder')}</option>
             {options.map((opt) => (
-              <option key={opt} value={opt}>
-                {opt}
+              <option key={opt.value} value={opt.value}>
+                {opt.label || opt.value}
               </option>
             ))}
           </select>
@@ -214,14 +219,14 @@ function CustomizationFieldRow({ field, value, error, onChange }: RowProps) {
           {labelText}
           <div className="space-y-1.5">
             {options.map((opt) => (
-              <label key={opt} className="me-4 inline-flex items-center gap-2">
+              <label key={opt.value} className="me-4 inline-flex items-center gap-2">
                 <input
                   type="checkbox"
-                  checked={current.includes(opt)}
-                  onChange={() => toggle(opt)}
+                  checked={current.includes(opt.value)}
+                  onChange={() => toggle(opt.value)}
                   className="h-4 w-4"
                 />
-                <span className="text-foreground text-sm">{opt}</span>
+                <span className="text-foreground text-sm">{opt.label || opt.value}</span>
               </label>
             ))}
           </div>
@@ -316,7 +321,7 @@ function SingleImageField({
     setUploading(true);
     setUploadError(null);
     try {
-      const { getClient } = await import('@/lib/brainerce');
+      const { getClient } = await import('@/core/lib/brainerce');
       const client = getClient();
       const result = await client.uploadCustomizationFile(file);
       onChange(result.url);
@@ -374,7 +379,7 @@ function GalleryField({
     setUploading(true);
     setUploadError(null);
     try {
-      const { getClient } = await import('@/lib/brainerce');
+      const { getClient } = await import('@/core/lib/brainerce');
       const client = getClient();
       const newUrls: string[] = [];
       for (const file of Array.from(fileList)) {
@@ -437,42 +442,4 @@ function GalleryField({
       {errorHint}
     </div>
   );
-}
-
-export function validateCustomization(
-  fields: ProductCustomizationField[],
-  values: CustomizationValues
-): Record<string, string> {
-  const errors: Record<string, string> = {};
-  for (const field of fields) {
-    const value = values[field.key];
-    const empty =
-      value === undefined ||
-      value === null ||
-      value === '' ||
-      (Array.isArray(value) && value.length === 0);
-
-    if (field.required && empty) {
-      errors[field.key] = 'required';
-      continue;
-    }
-    if (empty) continue;
-
-    if (field.type === 'SELECT') {
-      const allowed = field.enumValues ?? [];
-      if (typeof value !== 'string' || !allowed.includes(value)) {
-        errors[field.key] = 'invalidOption';
-      }
-    }
-    if (field.type === 'MULTI_SELECT') {
-      const allowed = field.enumValues ?? [];
-      if (
-        !Array.isArray(value) ||
-        !(value as unknown[]).every((v) => typeof v === 'string' && allowed.includes(v as string))
-      ) {
-        errors[field.key] = 'invalidOption';
-      }
-    }
-  }
-  return errors;
-}
+}

package/templates/nextjs/base/src/{components/products → ui/product}/discount-badge.tsx

@@ -1,5 +1,5 @@
 import type { ProductDiscount } from 'brainerce';
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 
 interface DiscountBadgeProps {
   discount?: ProductDiscount | null;

package/templates/nextjs/base/src/{components/products → ui/product}/frequently-bought-together.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { useState } from 'react';
-import { CdnImage as Image } from '@/components/shared/cdn-image';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import type { Product, ProductRecommendation } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { useCart, useStoreInfo } from '@/providers/store-provider';
-import { useCurrency } from '@/lib/use-currency';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+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[];
@@ -132,7 +132,7 @@ export function FrequentlyBoughtTogether({
     if (adding || selected.size === 0) return;
     try {
       setAdding(true);
-      const { getClient } = await import('@/lib/brainerce');
+      const { getClient } = await import('@/core/lib/brainerce');
       const client = getClient();
       const selectedItems = crossSells.filter((item) => selected.has(item.id));
       for (const item of selectedItems) {

package/templates/nextjs/base/src/{components/products → ui/product}/modifier-group-selector.tsx

@@ -23,7 +23,16 @@
  * `modifiers[]` / `modifiersTotal` snapshot — render those after add-to-cart.
  */
 
-import type { Modifier, ModifierGroup, ModifierSelection } from 'brainerce';
+import type { Modifier, ModifierGroup } from 'brainerce';
+
+// 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 {
   /**
@@ -164,75 +173,3 @@ function ruleSummary(group: ModifierGroup): string {
   }
   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;
-}

package/templates/nextjs/base/src/{components/shared → ui/product}/price-display.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { formatPrice } from 'brainerce';
-import { useCurrency } from '@/lib/use-currency';
-import { cn } from '@/lib/utils';
+import { useCurrency } from '@/core/lib/use-currency';
+import { cn } from '@/core/lib/utils';
 
 interface PriceDisplayProps {
   price: string | number;

package/templates/nextjs/base/src/{components/products → ui/product}/product-card.tsx

@@ -1,17 +1,17 @@
 'use client';
 
 import { useState } from 'react';
-import { Link, useRouter } from '@/lib/navigation';
-import { CdnImage as Image } from '@/components/shared/cdn-image';
+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 '@/lib/translations';
-import { PriceDisplay } from '@/components/shared/price-display';
-import { StockBadge } from '@/components/products/stock-badge';
-import { DiscountBadge } from '@/components/products/discount-badge';
-import { useCart } from '@/providers/store-provider';
-import { useCurrency } from '@/lib/use-currency';
-import { cn } from '@/lib/utils';
+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';
 
 interface ProductCardProps {
   product: Product;
@@ -115,7 +115,7 @@ export function ProductCard({ product, className }: ProductCardProps) {
 
     try {
       setAdding(true);
-      const { getClient } = await import('@/lib/brainerce');
+      const { getClient } = await import('@/core/lib/brainerce');
       const client = getClient();
       await client.smartAddToCart({ productId: product.id, quantity: 1 });
       await refreshCart();

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

@@ -1,37 +1,19 @@
 'use client';
 
-import { useEffect, useState, useMemo } from 'react';
-import { CdnImage as Image } from '@/components/shared/cdn-image';
-import type {
-  Product,
-  ProductVariant,
-  ProductImage,
-  ProductMetafield,
-  DownloadFile,
-  ModifierGroup,
-} from 'brainerce';
-import { getProductPriceInfo, getDescriptionContent } from 'brainerce';
-import { useCart } from '@/providers/store-provider';
-import { PriceDisplay } from '@/components/shared/price-display';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { VariantSelector } from '@/components/products/variant-selector';
-import { StockBadge } from '@/components/products/stock-badge';
-import { RecommendationSection } from '@/components/products/recommendation-section';
-import { FrequentlyBoughtTogether } from '@/components/products/frequently-bought-together';
-import {
-  CustomizationFields,
-  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';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { Product, ProductMetafield, DownloadFile } from 'brainerce';
+import { useProductPage } from '@/core/hooks/use-product-page';
+import { PriceDisplay } from '@/ui/product/price-display';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { VariantSelector } from '@/ui/product/variant-selector';
+import { StockBadge } from '@/ui/product/stock-badge';
+import { RecommendationSection } from '@/ui/product/recommendation-section';
+import { FrequentlyBoughtTogether } from '@/ui/product/frequently-bought-together';
+import { CustomizationFields } from '@/ui/product/customization-fields';
+import { ModifierGroupSelector } from '@/ui/product/modifier-group-selector';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { sanitizeProductHtml } from '@/core/lib/sanitize-html';
 
 /** Render a metafield value based on its type */
 function MetafieldValue({ field }: { field: ProductMetafield }) {
@@ -122,176 +104,35 @@ interface ProductClientSectionProps {
 }
 
 export function ProductClientSection({ product: initialProduct }: ProductClientSectionProps) {
-  const { refreshCart } = useCart();
   const t = useTranslations('productDetail');
 
-  const product = initialProduct;
-  const recommendations = product?.recommendations ?? null;
-
-  const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(
-    product.variants && product.variants.length > 0 ? product.variants[0] : null
-  );
-  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
-  const [quantity, setQuantity] = useState(1);
-  const [addingToCart, setAddingToCart] = useState(false);
-  const [addedMessage, setAddedMessage] = useState(false);
-  const customizationFields = product.customizationFields ?? [];
-  const [customizationValues, setCustomizationValues] = useState<CustomizationValues>(() => {
-    const initial: CustomizationValues = {};
-    for (const field of customizationFields) {
-      if (field.defaultValue != null) initial[field.key] = field.defaultValue;
-    }
-    return initial;
-  });
-  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 || [];
-  }, [product]);
-
-  // When variant changes, update selected image to variant image if available
-  useEffect(() => {
-    if (!selectedVariant?.image || !product) return;
-
-    const variantImgUrl =
-      typeof selectedVariant.image === 'string' ? selectedVariant.image : selectedVariant.image.url;
-
-    // Find if variant image exists in product images
-    const idx = images.findIndex((img) => img.url === variantImgUrl);
-    if (idx >= 0) {
-      setSelectedImageIndex(idx);
-    } else {
-      // Variant image not in product images - select index 0 as fallback
-      setSelectedImageIndex(-1);
-    }
-  }, [selectedVariant, images, product]);
-
-  // Determine which image to show
-  const mainImageUrl = useMemo(() => {
-    if (selectedImageIndex === -1 && selectedVariant?.image) {
-      const img = selectedVariant.image;
-      return typeof img === 'string' ? img : img.url;
-    }
-    return images[selectedImageIndex]?.url || null;
-  }, [selectedImageIndex, selectedVariant, images]);
-
-  // Price info - use variant price if selected, else product price
-  const priceInfo = useMemo(() => {
-    if (selectedVariant?.price) {
-      const variantBase = parseFloat(selectedVariant.price);
-      const variantSale = selectedVariant.salePrice ? parseFloat(selectedVariant.salePrice) : null;
-      const variantEffective =
-        variantSale != null && variantSale < variantBase ? variantSale : variantBase;
-
-      // Overlay any product-level discount rule onto the variant price using the rule's ratio
-      if (product.discount) {
-        const ruleOriginal = parseFloat(product.discount.originalPrice) || 0;
-        const ruleDiscounted = parseFloat(product.discount.discountedPrice) || 0;
-        const ratio = ruleOriginal > 0 ? ruleDiscounted / ruleOriginal : 1;
-        const discounted = variantEffective * ratio;
-        const amount = Math.max(0, variantEffective - discounted);
-        return {
-          price: discounted,
-          originalPrice: variantEffective,
-          isOnSale: discounted < variantEffective,
-          discountAmount: amount,
-          discountPercent: variantEffective > 0 ? Math.round((amount / variantEffective) * 100) : 0,
-        };
-      }
-
-      return {
-        price: variantEffective,
-        originalPrice: variantBase,
-        isOnSale: variantEffective < variantBase,
-        discountPercent:
-          variantEffective < variantBase && variantBase > 0
-            ? Math.round(((variantBase - variantEffective) / variantBase) * 100)
-            : 0,
-      };
-    }
-    return getProductPriceInfo(product);
-  }, [product, selectedVariant]);
-
-  // Inventory: use variant inventory if selected, else product inventory
-  const inventory = selectedVariant?.inventory ?? product?.inventory ?? null;
-  const canPurchase = inventory?.canPurchase !== false;
-
-  // Description
-  const description = useMemo(() => {
-    return product ? getDescriptionContent(product) : null;
-  }, [product]);
-
-  async function handleAddToCart() {
-    if (!product || addingToCart) return;
-
-    if (customizationFields.length > 0) {
-      const errs = validateCustomization(customizationFields, customizationValues);
-      if (Object.keys(errs).length > 0) {
-        setCustomizationErrors(errs);
-        return;
-      }
-    }
-    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');
-      const client = getClient();
-      await client.smartAddToCart({
-        productId: product.id,
-        variantId: selectedVariant?.id,
-        quantity,
-        metadata:
-          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) {
-      // 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);
-    }
-  }
+  const {
+    product,
+    recommendations,
+    images,
+    selectedImageIndex,
+    setSelectedImageIndex,
+    mainImageUrl,
+    selectedVariant,
+    setSelectedVariant,
+    priceInfo,
+    inventory,
+    canPurchase,
+    description,
+    quantity,
+    setQuantity,
+    addingToCart,
+    addedMessage,
+    handleAddToCart,
+    customizationFields,
+    customizationValues,
+    setCustomizationValues,
+    customizationErrors,
+    modifierGroups,
+    modifierSelections,
+    setModifierSelection,
+    modifierError,
+  } = useProductPage(initialProduct);
 
   return (
     <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
@@ -384,10 +225,10 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
           <h1 className="text-foreground text-2xl font-bold sm:text-3xl">{product.name}</h1>
 
           {/* Tags */}
-          {(product as { tags?: Array<{ id: string; name: string }> }).tags &&
-            (product as { tags: Array<{ id: string; name: string }> }).tags.length > 0 && (
+          {(product as unknown as { tags?: Array<{ id: string; name: string }> }).tags &&
+            (product as unknown as { tags: Array<{ id: string; name: string }> }).tags.length > 0 && (
               <div className="flex flex-wrap gap-1.5">
-                {(product as { tags: Array<{ id: string; name: string }> }).tags.map((tag) => (
+                {(product as unknown as { tags: Array<{ id: string; name: string }> }).tags.map((tag) => (
                   <span
                     key={tag.id}
                     className="border-border text-muted-foreground rounded-full border px-2.5 py-0.5 text-xs"
@@ -490,9 +331,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
                   key={group.attachmentId ?? group.id}
                   group={group}
                   value={modifierSelections[group.id] ?? []}
-                  onChange={(next) =>
-                    setModifierSelections((prev) => ({ ...prev, [group.id]: next }))
-                  }
+                  onChange={(next) => setModifierSelection(group.id, next)}
                   disabled={addingToCart}
                 />
               ))}

package/templates/nextjs/base/src/{components/products → ui/product}/product-grid.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import type { Product } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { ProductCard } from '@/components/products/product-card';
-import { cn } from '@/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+import { ProductCard } from '@/ui/product/product-card';
+import { cn } from '@/core/lib/utils';
 
 interface ProductGridProps {
   products: Product[];