create-brainerce-store 1.33.2 → 1.34.2

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

@@ -0,0 +1,242 @@
+'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';
+import { AllergenChips } from './allergen-chips';
+
+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>
+                )}
+                {modifier.allergens && modifier.allergens.length > 0 && (
+                  <AllergenChips allergens={modifier.allergens} />
+                )}
+              </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;
+}

package/templates/nextjs/base/src/lib/auth.ts

@@ -4,7 +4,12 @@
  * The token is managed server-side via httpOnly cookies — never exposed to JS.
  */
 
-const CONNECTION_ID = process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID || '';
+// Read either env var name. The new one is preferred; the old one is a soft
+// alias kept for backwards compatibility — both are accepted by the SDK.
+const CONNECTION_ID =
+  process.env.NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID ||
+  process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID ||
+  '';
 
 const CSRF_HEADERS: Record<string, string> = {
   'Content-Type': 'application/json',

package/templates/nextjs/base/src/lib/brainerce.ts.ejs

@@ -1,6 +1,11 @@
 import { BrainerceClient } from 'brainerce';
 
-const CONNECTION_ID = process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID || '<%= connectionId %>';
+// Read either env var name. The new one is preferred; the old one is a soft
+// alias kept for backwards compatibility — both are accepted by the SDK.
+const SALES_CHANNEL_ID =
+  process.env.NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID ||
+  process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID ||
+  '<%= connectionId %>';
 
 // Singleton SDK client — routes through same-origin BFF proxy for httpOnly cookie auth
 let clientInstance: BrainerceClient | null = null;
@@ -8,7 +13,7 @@ let clientInstance: BrainerceClient | null = null;
 export function getClient(): BrainerceClient {
   if (!clientInstance) {
     clientInstance = new BrainerceClient({
-      connectionId: CONNECTION_ID,
+      salesChannelId: SALES_CHANNEL_ID,
       baseUrl: '/api/store', // same-origin proxy handles auth via httpOnly cookie
       proxyMode: true, // skip client-side token checks; proxy adds Authorization header
     });
@@ -52,7 +57,7 @@ export function initClient(): BrainerceClient {
 export function getServerClient(locale?: string): BrainerceClient {
   const apiUrl = process.env.BRAINERCE_API_URL || 'https://api.brainerce.com';
   const client = new BrainerceClient({
-    connectionId: CONNECTION_ID,
+    salesChannelId: SALES_CHANNEL_ID,
     baseUrl: apiUrl,
     origin: process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000',
   });

package/templates/nextjs/base/src/lib/safe-redirect.ts

@@ -1,60 +1,38 @@
-const ALLOWED_PAYMENT_HOSTS: readonly string[] = [
-  'checkout.stripe.com',
-  'js.stripe.com',
-  'hooks.stripe.com',
-  'www.paypal.com',
-  'www.sandbox.paypal.com',
-  'secure.cardcom.solutions',
-  'meshulam.co.il',
-  'grow.link',
-  'grow.security',
-  'creditguard.co.il',
-  // Brainerce-hosted payment embeds (cardcom-payments /embed/:lpCode etc.).
-  // These are platform-owned iframe shells that wrap provider-specific flows
-  // and relay postMessage events back to the storefront.
-  'brainerce.com',
-];
-
-export function isAllowedPaymentUrl(url: string): boolean {
-  if (!url || typeof url !== 'string') return false;
-
-  let parsed: URL;
-  try {
-    parsed = new URL(url);
-  } catch {
-    return false;
-  }
-
-  const hostname = parsed.hostname.toLowerCase();
-
-  // Dev-only: allow http://localhost|127.0.0.1 so the local storefront can
-  // iframe the local backend's embed proxy. Stripped in production builds.
-  if (
-    process.env.NODE_ENV !== 'production' &&
-    parsed.protocol === 'http:' &&
-    (hostname === 'localhost' || hostname === '127.0.0.1')
-  ) {
-    return true;
-  }
-
-  if (parsed.protocol !== 'https:') return false;
-
-  return ALLOWED_PAYMENT_HOSTS.some((host) => hostname === host || hostname.endsWith('.' + host));
-}
-
-export function safePaymentRedirect(url: string): void {
-  if (!isAllowedPaymentUrl(url)) {
-    throw new Error('Payment redirect URL is not in the allowlist');
-  }
-  if (typeof window !== 'undefined') {
-    window.location.href = url;
-  }
-}
-
-// CUID format used by Prisma for Checkout.id — c + 24 lowercase alphanumeric chars.
-// Allow a small range to tolerate cuid2 (slightly different length).
-const CHECKOUT_ID_RE = /^c[a-z0-9]{20,30}$/;
-
-export function isValidCheckoutId(id: unknown): id is string {
-  return typeof id === 'string' && CHECKOUT_ID_RE.test(id);
-}
+// Re-export the platform-maintained payment URL allowlist from the SDK.
+//
+// Why a re-export and not a direct import everywhere: keeping a stable
+// `@/lib/safe-redirect` import path means future SDK API changes (e.g. an
+// `extraHosts` rename) only need editing here, and merchants don't have to
+// touch every component that does payment redirects. It also leaves a clear
+// place to plug in store-specific extras (custom self-hosted PSP) without
+// scattering option objects across components.
+//
+// The allowlist itself now lives in the `brainerce` package — running
+// `npm update brainerce` picks up new payment providers and platform
+// embed domains automatically.
+
+import {
+  isAllowedPaymentUrl as sdkIsAllowedPaymentUrl,
+  safePaymentRedirect as sdkSafePaymentRedirect,
+} from 'brainerce';
+
+// Dev-only: allow http://localhost|127.0.0.1 so the local storefront can
+// iframe the local backend's embed proxy. Inlined to a literal at build time
+// by Next.js, so the allow path is stripped from production bundles.
+const allowLocalhost = process.env.NODE_ENV !== 'production';
+
+export function isAllowedPaymentUrl(url: string): boolean {
+  return sdkIsAllowedPaymentUrl(url, { allowLocalhost });
+}
+
+export function safePaymentRedirect(url: string): void {
+  sdkSafePaymentRedirect(url, { allowLocalhost });
+}
+
+// CUID format used by Prisma for Checkout.id — c + 24 lowercase alphanumeric chars.
+// Allow a small range to tolerate cuid2 (slightly different length).
+const CHECKOUT_ID_RE = /^c[a-z0-9]{20,30}$/;
+
+export function isValidCheckoutId(id: unknown): id is string {
+  return typeof id === 'string' && CHECKOUT_ID_RE.test(id);
+}