create-brainerce-store 1.18.0 → 1.20.0

package/templates/nextjs/base/src/components/checkout/order-bump-card.tsx

@@ -1,83 +1,243 @@
-'use client';
-
-import Image from 'next/image';
-import type { OrderBump } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { useStoreInfo } from '@/providers/store-provider';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-
-interface OrderBumpCardProps {
-  bump: OrderBump;
-  isAdded: boolean;
-  onToggle: (bumpId: string, add: boolean) => void;
-  loading: boolean;
-  className?: string;
-}
-
-export function OrderBumpCard({ bump, isAdded, onToggle, loading, className }: OrderBumpCardProps) {
-  const { storeInfo } = useStoreInfo();
-  const t = useTranslations('checkout');
-  const currency = storeInfo?.currency || 'USD';
-
-  const product = bump.bumpProduct;
-  const firstImage = product.images?.[0];
-  const imageUrl = firstImage
-    ? typeof firstImage === 'string'
-      ? firstImage
-      : firstImage.url
-    : null;
-  const originalPrice = parseFloat(bump.originalPrice);
-  const hasDiscount = bump.discountedPrice != null;
-  const discountedPrice = hasDiscount ? parseFloat(bump.discountedPrice!) : null;
-
-  return (
-    <label
-      className={cn(
-        'border-border hover:border-primary/50 flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors',
-        isAdded && 'border-primary bg-primary/5',
-        loading && 'pointer-events-none opacity-60',
-        className
-      )}
-    >
-      <input
-        type="checkbox"
-        checked={isAdded}
-        onChange={() => onToggle(bump.id, !isAdded)}
-        disabled={loading}
-        className="mt-1 h-4 w-4 shrink-0 rounded"
-      />
-
-      {/* Image */}
-      {imageUrl && (
-        <div className="bg-muted relative h-10 w-10 shrink-0 overflow-hidden rounded">
-          <Image src={imageUrl} alt={product.name} fill sizes="40px" className="object-cover" />
-        </div>
-      )}
-
-      {/* Content */}
-      <div className="min-w-0 flex-1">
-        <p className="text-foreground text-sm font-medium">{bump.title}</p>
-        {bump.description && (
-          <p className="text-muted-foreground mt-0.5 text-xs">{bump.description}</p>
-        )}
-        <div className="mt-1 flex items-center gap-2">
-          {hasDiscount ? (
-            <>
-              <span className="text-muted-foreground text-xs line-through">
-                {formatPrice(originalPrice, { currency }) as string}
-              </span>
-              <span className="text-foreground text-sm font-semibold">
-                {formatPrice(discountedPrice!, { currency }) as string}
-              </span>
-            </>
-          ) : (
-            <span className="text-foreground text-sm font-semibold">
-              {formatPrice(originalPrice, { currency }) as string}
-            </span>
-          )}
-        </div>
-      </div>
-    </label>
-  );
-}
+'use client';
+
+import { useState, useMemo } from 'react';
+import Image from 'next/image';
+import type { OrderBump, RecommendationVariant } from 'brainerce';
+import { formatPrice, getVariantOptions } from 'brainerce';
+import { useStoreInfo } from '@/providers/store-provider';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+interface OrderBumpCardProps {
+  bump: OrderBump;
+  isAdded: boolean;
+  onToggle: (bumpId: string, add: boolean, variantId?: string) => void;
+  loading: boolean;
+  className?: string;
+}
+
+export function OrderBumpCard({ bump, isAdded, onToggle, loading, className }: OrderBumpCardProps) {
+  const { storeInfo } = useStoreInfo();
+  const t = useTranslations('checkout');
+  const currency = storeInfo?.currency || 'USD';
+  const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
+
+  const product = bump.bumpProduct;
+  const variants = product.variants;
+  const requiresSelection = bump.requiresVariantSelection && variants && variants.length > 0;
+
+  // Build attribute groups from variants for pill selector
+  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]);
+
+  // Track selected attributes
+  const [selectedAttrs, setSelectedAttrs] = useState<Record<string, string>>({});
+
+  // Find matching variant based on selected attributes
+  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]);
+
+  // Update selectedVariantId when variant match changes
+  const effectiveVariantId = selectedVariant?.id ?? selectedVariantId;
+
+  function handleAttrSelect(attrName: string, value: string) {
+    const next = { ...selectedAttrs, [attrName]: value };
+    setSelectedAttrs(next);
+    // Find matching variant with new selection
+    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 price
+  const { displayOriginal, displayDiscounted } = 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(bump.originalPrice);
+    } else {
+      effectivePrice = parseFloat(bump.originalPrice);
+    }
+
+    let discounted: number | null = null;
+    if (bump.discountType && bump.discountValue) {
+      const dv = parseFloat(bump.discountValue);
+      if (bump.discountType === 'PERCENTAGE') {
+        discounted = effectivePrice * (1 - dv / 100);
+      } else {
+        discounted = Math.max(0, effectivePrice - dv);
+      }
+    }
+
+    return { displayOriginal: effectivePrice, displayDiscounted: discounted };
+  }, [selectedVariant, bump.originalPrice, bump.discountType, bump.discountValue]);
+
+  // Check if selected variant is out of stock
+  const isOos =
+    selectedVariant?.inventory?.trackingMode !== 'NOT_TRACKED' &&
+    selectedVariant?.inventory?.available != null &&
+    selectedVariant.inventory.available <= 0;
+
+  // Locked variant label
+  const lockedLabel =
+    bump.lockedVariant?.name ??
+    (bump.lockedVariant?.attributes
+      ? Object.values(bump.lockedVariant.attributes).join(' / ')
+      : null);
+
+  const firstImage = product.images?.[0];
+  const imageUrl = firstImage
+    ? typeof firstImage === 'string'
+      ? firstImage
+      : firstImage.url
+    : null;
+
+  const canToggle = !requiresSelection || !!effectiveVariantId;
+
+  return (
+    <div
+      className={cn(
+        'border-border hover:border-primary/50 rounded-lg border p-3 transition-colors',
+        isAdded && 'border-primary bg-primary/5',
+        loading && 'pointer-events-none opacity-60',
+        className
+      )}
+    >
+      <label className="flex cursor-pointer items-start gap-3">
+        <input
+          type="checkbox"
+          checked={isAdded}
+          onChange={() => {
+            if (canToggle) {
+              onToggle(bump.id, !isAdded, effectiveVariantId ?? undefined);
+            }
+          }}
+          disabled={loading || !canToggle || isOos}
+          className="mt-1 h-4 w-4 shrink-0 rounded"
+        />
+
+        {/* Image */}
+        {imageUrl && (
+          <div className="bg-muted relative h-10 w-10 shrink-0 overflow-hidden rounded">
+            <Image src={imageUrl} alt={product.name} fill sizes="40px" className="object-cover" />
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="min-w-0 flex-1">
+          <p className="text-foreground text-sm font-medium">{bump.title}</p>
+          {bump.description && (
+            <p className="text-muted-foreground mt-0.5 text-xs">{bump.description}</p>
+          )}
+
+          {/* Locked variant label */}
+          {lockedLabel && <p className="text-muted-foreground mt-0.5 text-xs">{lockedLabel}</p>}
+
+          {/* Price */}
+          <div className="mt-1 flex items-center gap-2">
+            {displayDiscounted != null ? (
+              <>
+                <span className="text-muted-foreground text-xs line-through">
+                  {formatPrice(displayOriginal, { currency }) as string}
+                </span>
+                <span className="text-foreground text-sm font-semibold">
+                  {formatPrice(displayDiscounted, { currency }) as string}
+                </span>
+              </>
+            ) : (
+              <span className="text-foreground text-sm font-semibold">
+                {formatPrice(displayOriginal, { currency }) as string}
+              </span>
+            )}
+            {requiresSelection && !effectiveVariantId && (
+              <span className="text-muted-foreground text-xs">
+                {t('selectOptions') || 'Select options'}
+              </span>
+            )}
+          </div>
+        </div>
+      </label>
+
+      {/* Compact variant selector */}
+      {requiresSelection && !isAdded && (
+        <div className="ms-7 mt-2 space-y-1.5">
+          {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;
+                // Check if this value leads to any available variant
+                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;
+                  // Check other selected attrs
+                  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/checkout/payment-step.tsx

@@ -154,7 +154,12 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
     initialized.current = true;
 
     const client = getClient();
-    const successUrl = `${window.location.origin}/order-confirmation?checkout_id=${checkoutId}`;
+    // For iframe-based providers, redirect inside the iframe goes to a
+    // lightweight callback page that sends postMessage to the parent window.
+    // For redirect-based providers, go straight to order-confirmation.
+    const iframeSuccessUrl = `${window.location.origin}/payment-complete?checkout_id=${checkoutId}`;
+    const iframeFailedUrl = `${window.location.origin}/payment-complete?checkout_id=${checkoutId}&failed=true`;
+    const redirectSuccessUrl = `${window.location.origin}/order-confirmation?checkout_id=${checkoutId}`;
     const cancelUrl = `${window.location.origin}/checkout?checkout_id=${checkoutId}&canceled=true`;
 
     let sdkInitDone = false;
@@ -315,8 +320,19 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
     });
 
     // C) Create payment intent (starts wallet timer)
-    const intentPromise = client
-      .createPaymentIntent(checkoutId, { successUrl, cancelUrl })
+    // Wait for provider info so we can choose the right success URL:
+    // iframe providers redirect inside the iframe to /payment-complete (postMessage),
+    // redirect providers go straight to /order-confirmation.
+    const intentPromise = providerPromise
+      .then((providerSdk) => {
+        const isIframe = providerSdk?.renderType === 'iframe';
+        const successUrl = isIframe ? iframeSuccessUrl : redirectSuccessUrl;
+        const failedUrl = isIframe ? iframeFailedUrl : cancelUrl;
+        return client.createPaymentIntent(checkoutId, {
+          successUrl,
+          cancelUrl: failedUrl,
+        });
+      })
       .then((intent) => {
         setPaymentIntent(intent);
         return intent;
@@ -341,6 +357,36 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
         window.location.href = intent.clientSecret;
         return;
       }
+
+      // Iframe mode: listen for postMessage from the /payment-complete callback
+      // page that loads inside the iframe after the provider redirects on completion.
+      if (sdk.renderType === 'iframe') {
+        const handleMessage = (event: MessageEvent) => {
+          if (event.origin !== window.location.origin) return;
+          if (event.data?.type !== 'brainerce:payment-complete') return;
+
+          const params = event.data.data as Record<string, string> | undefined;
+          if (params?.failed === 'true') {
+            setError(t('paymentError'));
+            return;
+          }
+
+          // Map provider-specific params to normalized format for
+          // server-side verification (e.g. CardCom lowprofilecode → paymentIntentId)
+          const lowProfileCode = params?.lowprofilecode || params?.LowProfileCode;
+          const normalized: Record<string, unknown> = { ...params };
+          if (lowProfileCode) {
+            normalized.paymentIntentId = lowProfileCode;
+          }
+
+          // Trigger server-side verification + order creation
+          handleSuccess(normalized);
+        };
+        window.addEventListener('message', handleMessage);
+        cleanups.push(() => window.removeEventListener('message', handleMessage));
+        return;
+      }
+
       if (sdk.renderType !== 'sdk-widget' || !sdk.globalName) return;
 
       // Store for retryRender from onError callback

package/templates/nextjs/base/src/components/layout/footer.tsx

@@ -1,41 +1,41 @@
-'use client';
-
-import Link from 'next/link';
-import { useTranslations } from '@/lib/translations';
-import { useStoreInfo, useAuth } from '@/providers/store-provider';
-
-export function Footer() {
-  const t = useTranslations('common');
-  const tn = useTranslations('nav');
-  const { storeInfo } = useStoreInfo();
-  const { isLoggedIn } = useAuth();
-  const year = new Date().getFullYear();
-
-  return (
-    <footer className="border-border bg-background border-t">
-      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
-          <p className="text-muted-foreground text-sm">
-            {year} {storeInfo?.name || t('store')}. {t('allRightsReserved')}
-          </p>
-          <nav className="flex items-center gap-4">
-            <Link
-              href="/products"
-              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-            >
-              {tn('products')}
-            </Link>
-            {isLoggedIn && (
-              <Link
-                href="/account"
-                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-              >
-                {tn('account')}
-              </Link>
-            )}
-          </nav>
-        </div>
-      </div>
-    </footer>
-  );
-}
+'use client';
+
+import Link from 'next/link';
+import { useTranslations } from '@/lib/translations';
+import { useStoreInfo, useAuth } from '@/providers/store-provider';
+
+export function Footer() {
+  const t = useTranslations('common');
+  const tn = useTranslations('nav');
+  const { storeInfo } = useStoreInfo();
+  const { isLoggedIn } = useAuth();
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="border-border bg-background border-t">
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
+          <p className="text-muted-foreground text-sm">
+            {year} {storeInfo?.name || t('store')}. {t('allRightsReserved')}
+          </p>
+          <nav className="flex items-center gap-4">
+            <Link
+              href="/products"
+              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+            >
+              {tn('products')}
+            </Link>
+            {isLoggedIn && (
+              <Link
+                href="/account"
+                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+              >
+                {tn('account')}
+              </Link>
+            )}
+          </nav>
+        </div>
+      </div>
+    </footer>
+  );
+}