create-brainerce-store 1.33.2 → 1.34.1

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/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);
+}