@brainerce/mcp-server 2.1.0 → 2.3.0

package/dist/bin/http.js

@@ -777,6 +777,12 @@ const { bundles } = await client.getCartBundles(cartId);
 // bundles[].bundleProduct \u2014 the product to offer
 // bundles[].originalPrice / bundles[].discountedPrice \u2014 prices
 // bundles[].discountType ('PERCENTAGE' | 'FIXED_AMOUNT') + discountValue
+
+// Add a bundle to cart (applies the discount automatically):
+await client.addBundleToCart(cartId, bundleOfferId);
+// Remove a bundle from cart:
+await client.removeBundleFromCart(cartId, bundleOfferId);
+// Detect already-added bundles: check cart.items for metadata?.isBundleItem === true
 \`\`\`
 
 **Free shipping progress bar** (configured threshold in channel settings):
@@ -3001,7 +3007,11 @@ export default async function ProductDetailPage({ params }: Props) {
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import type { CartRecommendationsResponse, CartUpgradesResponse, CartBundlesResponse } from 'brainerce';
+import type {
+  CartRecommendationsResponse,
+  CartUpgradesResponse,
+  CartBundlesResponse,
+} from 'brainerce';
 import { getClient } from '@/lib/brainerce';
 import { useCart } from '@/providers/store-provider';
 import { useStoreInfo } from '@/providers/store-provider';
@@ -3041,7 +3051,11 @@ export default function CartPage() {
 
   // Load upgrade suggestions when cart changes
   useEffect(() => {
-    if (!cart?.id || cart.items.length === 0 || storeInfo?.upsell?.cartUpgradeBannerEnabled === false) {
+    if (
+      !cart?.id ||
+      cart.items.length === 0 ||
+      storeInfo?.upsell?.cartUpgradeBannerEnabled === false
+    ) {
       setUpgrades(null);
       return;
     }
@@ -3143,7 +3157,12 @@ export default function CartPage() {
             <div className="mt-6 space-y-3">
               <h3 className="text-foreground text-sm font-semibold">{t('bundleOffers')}</h3>
               {bundles.bundles.map((offer) => (
-                <CartBundleOfferCard key={offer.id} offer={offer} onAdd={refreshCart} />
+                <CartBundleOfferCard
+                  key={offer.id}
+                  offer={offer}
+                  cartId={cart.id}
+                  onAdd={refreshCart}
+                />
               ))}
             </div>
           )}
@@ -7640,8 +7659,9 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       })
       .catch(() => null);
 
-    // B) Load + init SDK as early as possible
+    // B) Load + init SDK as early as possible (skip for sandbox)
     providerPromise.then((providerSdk) => {
+      if (providerSdk?.renderType === 'sandbox') return;
       if (providerSdk?.renderType === 'sdk-widget' && providerSdk.scriptUrl) {
         currentSdk = providerSdk;
         loadScript(providerSdk);
@@ -7668,6 +7688,9 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       const sdk = resolveClientSdk(intent, providerSdk);
       currentSdk = sdk;
 
+      // Sandbox mode \u2014 no SDK to load, UI handles it
+      if (sdk.renderType === 'sandbox') return;
+
       if (sdk.renderType === 'redirect') {
         window.location.href = intent.clientSecret;
         return;
@@ -7762,6 +7785,48 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
 
   const sdk = resolveClientSdk(paymentIntent, preloadedSdk);
 
+  if (sdk.renderType === 'sandbox') {
+    const handleCompleteSandbox = async () => {
+      setLoading(true);
+      try {
+        const client = getClient();
+        await client.completeGuestCheckout(checkoutId);
+        window.location.href = \`/order-confirmation?checkout_id=\${checkoutId}\`;
+      } catch (err) {
+        setError(err instanceof Error ? err.message : t('paymentError'));
+        setLoading(false);
+      }
+    };
+
+    return (
+      <div className={cn('py-8 text-center', className)}>
+        <div className="mx-auto max-w-md rounded-lg border border-amber-200 bg-amber-50 p-6">
+          <svg
+            className="mx-auto mb-3 h-10 w-10 text-amber-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+            />
+          </svg>
+          <h3 className="text-foreground mb-1 text-lg font-semibold">{t('sandboxTitle')}</h3>
+          <p className="text-muted-foreground mb-4 text-sm">{t('sandboxDescription')}</p>
+          <button
+            onClick={handleCompleteSandbox}
+            className="inline-flex items-center rounded-md bg-amber-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-amber-600"
+          >
+            {t('completeTestOrder')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   if (sdk.renderType === 'sdk-widget') {
     const containerId =
       sdk.containerId || \`\${paymentIntent.provider || 'payment'}-payment-container\`;
@@ -9568,8 +9633,18 @@ function ProductThumb({
           <Image src={imageUrl} alt={name} fill sizes="80px" className="object-cover" />
         ) : (
           <div className="flex h-full w-full items-center justify-center">
-            <svg className="text-muted-foreground h-8 w-8" 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
+              className="text-muted-foreground h-8 w-8"
+              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>
         )}
@@ -9646,7 +9721,9 @@ export function FrequentlyBoughtTogether({
 
   return (
     <div className={cn('border-border rounded-lg border p-6', className)}>
-      <h2 className="text-foreground mb-4 text-xl font-semibold">{t('frequentlyBoughtTogether')}</h2>
+      <h2 className="text-foreground mb-4 text-xl font-semibold">
+        {t('frequentlyBoughtTogether')}
+      </h2>
 
       <div className="flex flex-wrap items-center gap-3">
         {/* Current product (always included, no checkbox) */}
@@ -9733,12 +9810,7 @@ export function FreeShippingBar({ className }: FreeShippingBarProps) {
       <div className={cn('rounded-lg border border-green-200 bg-green-50 p-3', className)}>
         <div className="flex items-center gap-2 text-sm font-medium text-green-700">
           <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M5 13l4 4L19 7"
-            />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
           </svg>
           {t('freeShippingQualified')}
         </div>
@@ -9800,20 +9872,28 @@ export function CartUpgradeBanner({
       if (sessionStorage.getItem(storageKey)) {
         setDismissed(true);
       }
-    } catch {}
+    } catch {
+      /* ignore */
+    }
   }, [storageKey]);
 
   if (dismissed) return null;
 
   const target = suggestion.targetProduct;
   const firstImage = target.images?.[0];
-  const imageUrl = firstImage ? (typeof firstImage === 'string' ? firstImage : firstImage.url) : null;
+  const imageUrl = firstImage
+    ? typeof firstImage === 'string'
+      ? firstImage
+      : firstImage.url
+    : null;
   const formattedDelta = formatPrice(parseFloat(suggestion.priceDelta), { currency }) as string;
 
   function handleDismiss() {
     try {
       sessionStorage.setItem(storageKey, '1');
-    } catch {}
+    } catch {
+      /* ignore */
+    }
     setDismissed(true);
   }
 
@@ -9846,7 +9926,13 @@ export function CartUpgradeBanner({
         className="text-muted-foreground hover:text-foreground absolute end-2 top-2 text-xs"
         aria-label={t('dismissUpgrade')}
       >
-        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
           <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
         </svg>
       </button>
@@ -9858,7 +9944,12 @@ export function CartUpgradeBanner({
         ) : (
           <div className="text-muted-foreground flex h-full w-full items-center justify-center">
             <svg className="h-5 w-5" 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" />
+              <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>
         )}
@@ -9893,18 +9984,18 @@ import { useState } from 'react';
 import Image from 'next/image';
 import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
 import { useStoreInfo } from '@/providers/store-provider';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
 interface CartBundleOfferCardProps {
   offer: CartBundleOfferType;
+  cartId: string;
   onAdd: () => void;
   className?: string;
 }
 
-export function CartBundleOfferCard({ offer, onAdd, className }: CartBundleOfferCardProps) {
+export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
   const { storeInfo } = useStoreInfo();
   const t = useTranslations('cart');
   const currency = storeInfo?.currency || 'USD';
@@ -9912,24 +10003,25 @@ export function CartBundleOfferCard({ offer, onAdd, className }: CartBundleOffer
 
   const product = offer.bundleProduct;
   const firstImage = product.images?.[0];
-  const imageUrl = firstImage ? (typeof firstImage === 'string' ? firstImage : firstImage.url) : null;
+  const imageUrl = firstImage
+    ? typeof firstImage === 'string'
+      ? firstImage
+      : firstImage.url
+    : null;
   const originalPrice = parseFloat(offer.originalPrice);
   const discountedPrice = parseFloat(offer.discountedPrice);
   const discountLabel =
     offer.discountType === 'PERCENTAGE'
       ? \`\${offer.discountValue}%\`
-      : formatPrice(parseFloat(offer.discountValue), { currency }) as string;
+      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
 
   async function handleAdd() {
     if (adding) return;
     try {
       setAdding(true);
+      const { getClient } = await import('@/lib/brainerce');
       const client = getClient();
-      await client.smartAddToCart({
-        productId: product.id,
-        variantId: offer.bundleVariantId || undefined,
-        quantity: 1,
-      });
+      await client.addBundleToCart(cartId, offer.id);
       onAdd();
     } catch (err) {
       console.error('Failed to add bundle item:', err);
@@ -9952,7 +10044,12 @@ export function CartBundleOfferCard({ offer, onAdd, className }: CartBundleOffer
         ) : (
           <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" />
+              <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>
         )}
@@ -10017,7 +10114,11 @@ export function OrderBumpCard({ bump, isAdded, onToggle, loading, className }: O
 
   const product = bump.bumpProduct;
   const firstImage = product.images?.[0];
-  const imageUrl = firstImage ? (typeof firstImage === 'string' ? firstImage : firstImage.url) : null;
+  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;

package/dist/bin/stdio.js

@@ -775,6 +775,12 @@ const { bundles } = await client.getCartBundles(cartId);
 // bundles[].bundleProduct \u2014 the product to offer
 // bundles[].originalPrice / bundles[].discountedPrice \u2014 prices
 // bundles[].discountType ('PERCENTAGE' | 'FIXED_AMOUNT') + discountValue
+
+// Add a bundle to cart (applies the discount automatically):
+await client.addBundleToCart(cartId, bundleOfferId);
+// Remove a bundle from cart:
+await client.removeBundleFromCart(cartId, bundleOfferId);
+// Detect already-added bundles: check cart.items for metadata?.isBundleItem === true
 \`\`\`
 
 **Free shipping progress bar** (configured threshold in channel settings):
@@ -2999,7 +3005,11 @@ export default async function ProductDetailPage({ params }: Props) {
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import type { CartRecommendationsResponse, CartUpgradesResponse, CartBundlesResponse } from 'brainerce';
+import type {
+  CartRecommendationsResponse,
+  CartUpgradesResponse,
+  CartBundlesResponse,
+} from 'brainerce';
 import { getClient } from '@/lib/brainerce';
 import { useCart } from '@/providers/store-provider';
 import { useStoreInfo } from '@/providers/store-provider';
@@ -3039,7 +3049,11 @@ export default function CartPage() {
 
   // Load upgrade suggestions when cart changes
   useEffect(() => {
-    if (!cart?.id || cart.items.length === 0 || storeInfo?.upsell?.cartUpgradeBannerEnabled === false) {
+    if (
+      !cart?.id ||
+      cart.items.length === 0 ||
+      storeInfo?.upsell?.cartUpgradeBannerEnabled === false
+    ) {
       setUpgrades(null);
       return;
     }
@@ -3141,7 +3155,12 @@ export default function CartPage() {
             <div className="mt-6 space-y-3">
               <h3 className="text-foreground text-sm font-semibold">{t('bundleOffers')}</h3>
               {bundles.bundles.map((offer) => (
-                <CartBundleOfferCard key={offer.id} offer={offer} onAdd={refreshCart} />
+                <CartBundleOfferCard
+                  key={offer.id}
+                  offer={offer}
+                  cartId={cart.id}
+                  onAdd={refreshCart}
+                />
               ))}
             </div>
           )}
@@ -7638,8 +7657,9 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       })
       .catch(() => null);
 
-    // B) Load + init SDK as early as possible
+    // B) Load + init SDK as early as possible (skip for sandbox)
     providerPromise.then((providerSdk) => {
+      if (providerSdk?.renderType === 'sandbox') return;
       if (providerSdk?.renderType === 'sdk-widget' && providerSdk.scriptUrl) {
         currentSdk = providerSdk;
         loadScript(providerSdk);
@@ -7666,6 +7686,9 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       const sdk = resolveClientSdk(intent, providerSdk);
       currentSdk = sdk;
 
+      // Sandbox mode \u2014 no SDK to load, UI handles it
+      if (sdk.renderType === 'sandbox') return;
+
       if (sdk.renderType === 'redirect') {
         window.location.href = intent.clientSecret;
         return;
@@ -7760,6 +7783,48 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
 
   const sdk = resolveClientSdk(paymentIntent, preloadedSdk);
 
+  if (sdk.renderType === 'sandbox') {
+    const handleCompleteSandbox = async () => {
+      setLoading(true);
+      try {
+        const client = getClient();
+        await client.completeGuestCheckout(checkoutId);
+        window.location.href = \`/order-confirmation?checkout_id=\${checkoutId}\`;
+      } catch (err) {
+        setError(err instanceof Error ? err.message : t('paymentError'));
+        setLoading(false);
+      }
+    };
+
+    return (
+      <div className={cn('py-8 text-center', className)}>
+        <div className="mx-auto max-w-md rounded-lg border border-amber-200 bg-amber-50 p-6">
+          <svg
+            className="mx-auto mb-3 h-10 w-10 text-amber-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+            />
+          </svg>
+          <h3 className="text-foreground mb-1 text-lg font-semibold">{t('sandboxTitle')}</h3>
+          <p className="text-muted-foreground mb-4 text-sm">{t('sandboxDescription')}</p>
+          <button
+            onClick={handleCompleteSandbox}
+            className="inline-flex items-center rounded-md bg-amber-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-amber-600"
+          >
+            {t('completeTestOrder')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   if (sdk.renderType === 'sdk-widget') {
     const containerId =
       sdk.containerId || \`\${paymentIntent.provider || 'payment'}-payment-container\`;
@@ -9566,8 +9631,18 @@ function ProductThumb({
           <Image src={imageUrl} alt={name} fill sizes="80px" className="object-cover" />
         ) : (
           <div className="flex h-full w-full items-center justify-center">
-            <svg className="text-muted-foreground h-8 w-8" 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
+              className="text-muted-foreground h-8 w-8"
+              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>
         )}
@@ -9644,7 +9719,9 @@ export function FrequentlyBoughtTogether({
 
   return (
     <div className={cn('border-border rounded-lg border p-6', className)}>
-      <h2 className="text-foreground mb-4 text-xl font-semibold">{t('frequentlyBoughtTogether')}</h2>
+      <h2 className="text-foreground mb-4 text-xl font-semibold">
+        {t('frequentlyBoughtTogether')}
+      </h2>
 
       <div className="flex flex-wrap items-center gap-3">
         {/* Current product (always included, no checkbox) */}
@@ -9731,12 +9808,7 @@ export function FreeShippingBar({ className }: FreeShippingBarProps) {
       <div className={cn('rounded-lg border border-green-200 bg-green-50 p-3', className)}>
         <div className="flex items-center gap-2 text-sm font-medium text-green-700">
           <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M5 13l4 4L19 7"
-            />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
           </svg>
           {t('freeShippingQualified')}
         </div>
@@ -9798,20 +9870,28 @@ export function CartUpgradeBanner({
       if (sessionStorage.getItem(storageKey)) {
         setDismissed(true);
       }
-    } catch {}
+    } catch {
+      /* ignore */
+    }
   }, [storageKey]);
 
   if (dismissed) return null;
 
   const target = suggestion.targetProduct;
   const firstImage = target.images?.[0];
-  const imageUrl = firstImage ? (typeof firstImage === 'string' ? firstImage : firstImage.url) : null;
+  const imageUrl = firstImage
+    ? typeof firstImage === 'string'
+      ? firstImage
+      : firstImage.url
+    : null;
   const formattedDelta = formatPrice(parseFloat(suggestion.priceDelta), { currency }) as string;
 
   function handleDismiss() {
     try {
       sessionStorage.setItem(storageKey, '1');
-    } catch {}
+    } catch {
+      /* ignore */
+    }
     setDismissed(true);
   }
 
@@ -9844,7 +9924,13 @@ export function CartUpgradeBanner({
         className="text-muted-foreground hover:text-foreground absolute end-2 top-2 text-xs"
         aria-label={t('dismissUpgrade')}
       >
-        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
           <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
         </svg>
       </button>
@@ -9856,7 +9942,12 @@ export function CartUpgradeBanner({
         ) : (
           <div className="text-muted-foreground flex h-full w-full items-center justify-center">
             <svg className="h-5 w-5" 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" />
+              <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>
         )}
@@ -9891,18 +9982,18 @@ import { useState } from 'react';
 import Image from 'next/image';
 import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
 import { useStoreInfo } from '@/providers/store-provider';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
 interface CartBundleOfferCardProps {
   offer: CartBundleOfferType;
+  cartId: string;
   onAdd: () => void;
   className?: string;
 }
 
-export function CartBundleOfferCard({ offer, onAdd, className }: CartBundleOfferCardProps) {
+export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
   const { storeInfo } = useStoreInfo();
   const t = useTranslations('cart');
   const currency = storeInfo?.currency || 'USD';
@@ -9910,24 +10001,25 @@ export function CartBundleOfferCard({ offer, onAdd, className }: CartBundleOffer
 
   const product = offer.bundleProduct;
   const firstImage = product.images?.[0];
-  const imageUrl = firstImage ? (typeof firstImage === 'string' ? firstImage : firstImage.url) : null;
+  const imageUrl = firstImage
+    ? typeof firstImage === 'string'
+      ? firstImage
+      : firstImage.url
+    : null;
   const originalPrice = parseFloat(offer.originalPrice);
   const discountedPrice = parseFloat(offer.discountedPrice);
   const discountLabel =
     offer.discountType === 'PERCENTAGE'
       ? \`\${offer.discountValue}%\`
-      : formatPrice(parseFloat(offer.discountValue), { currency }) as string;
+      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
 
   async function handleAdd() {
     if (adding) return;
     try {
       setAdding(true);
+      const { getClient } = await import('@/lib/brainerce');
       const client = getClient();
-      await client.smartAddToCart({
-        productId: product.id,
-        variantId: offer.bundleVariantId || undefined,
-        quantity: 1,
-      });
+      await client.addBundleToCart(cartId, offer.id);
       onAdd();
     } catch (err) {
       console.error('Failed to add bundle item:', err);
@@ -9950,7 +10042,12 @@ export function CartBundleOfferCard({ offer, onAdd, className }: CartBundleOffer
         ) : (
           <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" />
+              <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>
         )}
@@ -10015,7 +10112,11 @@ export function OrderBumpCard({ bump, isAdded, onToggle, loading, className }: O
 
   const product = bump.bumpProduct;
   const firstImage = product.images?.[0];
-  const imageUrl = firstImage ? (typeof firstImage === 'string' ? firstImage : firstImage.url) : null;
+  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;

package/dist/index.js

@@ -792,6 +792,12 @@ const { bundles } = await client.getCartBundles(cartId);
 // bundles[].bundleProduct \u2014 the product to offer
 // bundles[].originalPrice / bundles[].discountedPrice \u2014 prices
 // bundles[].discountType ('PERCENTAGE' | 'FIXED_AMOUNT') + discountValue
+
+// Add a bundle to cart (applies the discount automatically):
+await client.addBundleToCart(cartId, bundleOfferId);
+// Remove a bundle from cart:
+await client.removeBundleFromCart(cartId, bundleOfferId);
+// Detect already-added bundles: check cart.items for metadata?.isBundleItem === true
 \`\`\`
 
 **Free shipping progress bar** (configured threshold in channel settings):
@@ -3016,7 +3022,11 @@ export default async function ProductDetailPage({ params }: Props) {
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import type { CartRecommendationsResponse, CartUpgradesResponse, CartBundlesResponse } from 'brainerce';
+import type {
+  CartRecommendationsResponse,
+  CartUpgradesResponse,
+  CartBundlesResponse,
+} from 'brainerce';
 import { getClient } from '@/lib/brainerce';
 import { useCart } from '@/providers/store-provider';
 import { useStoreInfo } from '@/providers/store-provider';
@@ -3056,7 +3066,11 @@ export default function CartPage() {
 
   // Load upgrade suggestions when cart changes
   useEffect(() => {
-    if (!cart?.id || cart.items.length === 0 || storeInfo?.upsell?.cartUpgradeBannerEnabled === false) {
+    if (
+      !cart?.id ||
+      cart.items.length === 0 ||
+      storeInfo?.upsell?.cartUpgradeBannerEnabled === false
+    ) {
       setUpgrades(null);
       return;
     }
@@ -3158,7 +3172,12 @@ export default function CartPage() {
             <div className="mt-6 space-y-3">
               <h3 className="text-foreground text-sm font-semibold">{t('bundleOffers')}</h3>
               {bundles.bundles.map((offer) => (
-                <CartBundleOfferCard key={offer.id} offer={offer} onAdd={refreshCart} />
+                <CartBundleOfferCard
+                  key={offer.id}
+                  offer={offer}
+                  cartId={cart.id}
+                  onAdd={refreshCart}
+                />
               ))}
             </div>
           )}
@@ -7655,8 +7674,9 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       })
       .catch(() => null);
 
-    // B) Load + init SDK as early as possible
+    // B) Load + init SDK as early as possible (skip for sandbox)
     providerPromise.then((providerSdk) => {
+      if (providerSdk?.renderType === 'sandbox') return;
       if (providerSdk?.renderType === 'sdk-widget' && providerSdk.scriptUrl) {
         currentSdk = providerSdk;
         loadScript(providerSdk);
@@ -7683,6 +7703,9 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       const sdk = resolveClientSdk(intent, providerSdk);
       currentSdk = sdk;
 
+      // Sandbox mode \u2014 no SDK to load, UI handles it
+      if (sdk.renderType === 'sandbox') return;
+
       if (sdk.renderType === 'redirect') {
         window.location.href = intent.clientSecret;
         return;
@@ -7777,6 +7800,48 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
 
   const sdk = resolveClientSdk(paymentIntent, preloadedSdk);
 
+  if (sdk.renderType === 'sandbox') {
+    const handleCompleteSandbox = async () => {
+      setLoading(true);
+      try {
+        const client = getClient();
+        await client.completeGuestCheckout(checkoutId);
+        window.location.href = \`/order-confirmation?checkout_id=\${checkoutId}\`;
+      } catch (err) {
+        setError(err instanceof Error ? err.message : t('paymentError'));
+        setLoading(false);
+      }
+    };
+
+    return (
+      <div className={cn('py-8 text-center', className)}>
+        <div className="mx-auto max-w-md rounded-lg border border-amber-200 bg-amber-50 p-6">
+          <svg
+            className="mx-auto mb-3 h-10 w-10 text-amber-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+            />
+          </svg>
+          <h3 className="text-foreground mb-1 text-lg font-semibold">{t('sandboxTitle')}</h3>
+          <p className="text-muted-foreground mb-4 text-sm">{t('sandboxDescription')}</p>
+          <button
+            onClick={handleCompleteSandbox}
+            className="inline-flex items-center rounded-md bg-amber-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-amber-600"
+          >
+            {t('completeTestOrder')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   if (sdk.renderType === 'sdk-widget') {
     const containerId =
       sdk.containerId || \`\${paymentIntent.provider || 'payment'}-payment-container\`;
@@ -9583,8 +9648,18 @@ function ProductThumb({
           <Image src={imageUrl} alt={name} fill sizes="80px" className="object-cover" />
         ) : (
           <div className="flex h-full w-full items-center justify-center">
-            <svg className="text-muted-foreground h-8 w-8" 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
+              className="text-muted-foreground h-8 w-8"
+              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>
         )}
@@ -9661,7 +9736,9 @@ export function FrequentlyBoughtTogether({
 
   return (
     <div className={cn('border-border rounded-lg border p-6', className)}>
-      <h2 className="text-foreground mb-4 text-xl font-semibold">{t('frequentlyBoughtTogether')}</h2>
+      <h2 className="text-foreground mb-4 text-xl font-semibold">
+        {t('frequentlyBoughtTogether')}
+      </h2>
 
       <div className="flex flex-wrap items-center gap-3">
         {/* Current product (always included, no checkbox) */}
@@ -9748,12 +9825,7 @@ export function FreeShippingBar({ className }: FreeShippingBarProps) {
       <div className={cn('rounded-lg border border-green-200 bg-green-50 p-3', className)}>
         <div className="flex items-center gap-2 text-sm font-medium text-green-700">
           <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M5 13l4 4L19 7"
-            />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
           </svg>
           {t('freeShippingQualified')}
         </div>
@@ -9815,20 +9887,28 @@ export function CartUpgradeBanner({
       if (sessionStorage.getItem(storageKey)) {
         setDismissed(true);
       }
-    } catch {}
+    } catch {
+      /* ignore */
+    }
   }, [storageKey]);
 
   if (dismissed) return null;
 
   const target = suggestion.targetProduct;
   const firstImage = target.images?.[0];
-  const imageUrl = firstImage ? (typeof firstImage === 'string' ? firstImage : firstImage.url) : null;
+  const imageUrl = firstImage
+    ? typeof firstImage === 'string'
+      ? firstImage
+      : firstImage.url
+    : null;
   const formattedDelta = formatPrice(parseFloat(suggestion.priceDelta), { currency }) as string;
 
   function handleDismiss() {
     try {
       sessionStorage.setItem(storageKey, '1');
-    } catch {}
+    } catch {
+      /* ignore */
+    }
     setDismissed(true);
   }
 
@@ -9861,7 +9941,13 @@ export function CartUpgradeBanner({
         className="text-muted-foreground hover:text-foreground absolute end-2 top-2 text-xs"
         aria-label={t('dismissUpgrade')}
       >
-        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
           <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
         </svg>
       </button>
@@ -9873,7 +9959,12 @@ export function CartUpgradeBanner({
         ) : (
           <div className="text-muted-foreground flex h-full w-full items-center justify-center">
             <svg className="h-5 w-5" 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" />
+              <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>
         )}
@@ -9908,18 +9999,18 @@ import { useState } from 'react';
 import Image from 'next/image';
 import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
 import { useStoreInfo } from '@/providers/store-provider';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
 interface CartBundleOfferCardProps {
   offer: CartBundleOfferType;
+  cartId: string;
   onAdd: () => void;
   className?: string;
 }
 
-export function CartBundleOfferCard({ offer, onAdd, className }: CartBundleOfferCardProps) {
+export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
   const { storeInfo } = useStoreInfo();
   const t = useTranslations('cart');
   const currency = storeInfo?.currency || 'USD';
@@ -9927,24 +10018,25 @@ export function CartBundleOfferCard({ offer, onAdd, className }: CartBundleOffer
 
   const product = offer.bundleProduct;
   const firstImage = product.images?.[0];
-  const imageUrl = firstImage ? (typeof firstImage === 'string' ? firstImage : firstImage.url) : null;
+  const imageUrl = firstImage
+    ? typeof firstImage === 'string'
+      ? firstImage
+      : firstImage.url
+    : null;
   const originalPrice = parseFloat(offer.originalPrice);
   const discountedPrice = parseFloat(offer.discountedPrice);
   const discountLabel =
     offer.discountType === 'PERCENTAGE'
       ? \`\${offer.discountValue}%\`
-      : formatPrice(parseFloat(offer.discountValue), { currency }) as string;
+      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
 
   async function handleAdd() {
     if (adding) return;
     try {
       setAdding(true);
+      const { getClient } = await import('@/lib/brainerce');
       const client = getClient();
-      await client.smartAddToCart({
-        productId: product.id,
-        variantId: offer.bundleVariantId || undefined,
-        quantity: 1,
-      });
+      await client.addBundleToCart(cartId, offer.id);
       onAdd();
     } catch (err) {
       console.error('Failed to add bundle item:', err);
@@ -9967,7 +10059,12 @@ export function CartBundleOfferCard({ offer, onAdd, className }: CartBundleOffer
         ) : (
           <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" />
+              <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>
         )}
@@ -10032,7 +10129,11 @@ export function OrderBumpCard({ bump, isAdded, onToggle, loading, className }: O
 
   const product = bump.bumpProduct;
   const firstImage = product.images?.[0];
-  const imageUrl = firstImage ? (typeof firstImage === 'string' ? firstImage : firstImage.url) : null;
+  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;

package/dist/index.mjs

@@ -747,6 +747,12 @@ const { bundles } = await client.getCartBundles(cartId);
 // bundles[].bundleProduct \u2014 the product to offer
 // bundles[].originalPrice / bundles[].discountedPrice \u2014 prices
 // bundles[].discountType ('PERCENTAGE' | 'FIXED_AMOUNT') + discountValue
+
+// Add a bundle to cart (applies the discount automatically):
+await client.addBundleToCart(cartId, bundleOfferId);
+// Remove a bundle from cart:
+await client.removeBundleFromCart(cartId, bundleOfferId);
+// Detect already-added bundles: check cart.items for metadata?.isBundleItem === true
 \`\`\`
 
 **Free shipping progress bar** (configured threshold in channel settings):
@@ -2971,7 +2977,11 @@ export default async function ProductDetailPage({ params }: Props) {
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import type { CartRecommendationsResponse, CartUpgradesResponse, CartBundlesResponse } from 'brainerce';
+import type {
+  CartRecommendationsResponse,
+  CartUpgradesResponse,
+  CartBundlesResponse,
+} from 'brainerce';
 import { getClient } from '@/lib/brainerce';
 import { useCart } from '@/providers/store-provider';
 import { useStoreInfo } from '@/providers/store-provider';
@@ -3011,7 +3021,11 @@ export default function CartPage() {
 
   // Load upgrade suggestions when cart changes
   useEffect(() => {
-    if (!cart?.id || cart.items.length === 0 || storeInfo?.upsell?.cartUpgradeBannerEnabled === false) {
+    if (
+      !cart?.id ||
+      cart.items.length === 0 ||
+      storeInfo?.upsell?.cartUpgradeBannerEnabled === false
+    ) {
       setUpgrades(null);
       return;
     }
@@ -3113,7 +3127,12 @@ export default function CartPage() {
             <div className="mt-6 space-y-3">
               <h3 className="text-foreground text-sm font-semibold">{t('bundleOffers')}</h3>
               {bundles.bundles.map((offer) => (
-                <CartBundleOfferCard key={offer.id} offer={offer} onAdd={refreshCart} />
+                <CartBundleOfferCard
+                  key={offer.id}
+                  offer={offer}
+                  cartId={cart.id}
+                  onAdd={refreshCart}
+                />
               ))}
             </div>
           )}
@@ -7610,8 +7629,9 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       })
       .catch(() => null);
 
-    // B) Load + init SDK as early as possible
+    // B) Load + init SDK as early as possible (skip for sandbox)
     providerPromise.then((providerSdk) => {
+      if (providerSdk?.renderType === 'sandbox') return;
       if (providerSdk?.renderType === 'sdk-widget' && providerSdk.scriptUrl) {
         currentSdk = providerSdk;
         loadScript(providerSdk);
@@ -7638,6 +7658,9 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       const sdk = resolveClientSdk(intent, providerSdk);
       currentSdk = sdk;
 
+      // Sandbox mode \u2014 no SDK to load, UI handles it
+      if (sdk.renderType === 'sandbox') return;
+
       if (sdk.renderType === 'redirect') {
         window.location.href = intent.clientSecret;
         return;
@@ -7732,6 +7755,48 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
 
   const sdk = resolveClientSdk(paymentIntent, preloadedSdk);
 
+  if (sdk.renderType === 'sandbox') {
+    const handleCompleteSandbox = async () => {
+      setLoading(true);
+      try {
+        const client = getClient();
+        await client.completeGuestCheckout(checkoutId);
+        window.location.href = \`/order-confirmation?checkout_id=\${checkoutId}\`;
+      } catch (err) {
+        setError(err instanceof Error ? err.message : t('paymentError'));
+        setLoading(false);
+      }
+    };
+
+    return (
+      <div className={cn('py-8 text-center', className)}>
+        <div className="mx-auto max-w-md rounded-lg border border-amber-200 bg-amber-50 p-6">
+          <svg
+            className="mx-auto mb-3 h-10 w-10 text-amber-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+            />
+          </svg>
+          <h3 className="text-foreground mb-1 text-lg font-semibold">{t('sandboxTitle')}</h3>
+          <p className="text-muted-foreground mb-4 text-sm">{t('sandboxDescription')}</p>
+          <button
+            onClick={handleCompleteSandbox}
+            className="inline-flex items-center rounded-md bg-amber-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-amber-600"
+          >
+            {t('completeTestOrder')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   if (sdk.renderType === 'sdk-widget') {
     const containerId =
       sdk.containerId || \`\${paymentIntent.provider || 'payment'}-payment-container\`;
@@ -9538,8 +9603,18 @@ function ProductThumb({
           <Image src={imageUrl} alt={name} fill sizes="80px" className="object-cover" />
         ) : (
           <div className="flex h-full w-full items-center justify-center">
-            <svg className="text-muted-foreground h-8 w-8" 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
+              className="text-muted-foreground h-8 w-8"
+              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>
         )}
@@ -9616,7 +9691,9 @@ export function FrequentlyBoughtTogether({
 
   return (
     <div className={cn('border-border rounded-lg border p-6', className)}>
-      <h2 className="text-foreground mb-4 text-xl font-semibold">{t('frequentlyBoughtTogether')}</h2>
+      <h2 className="text-foreground mb-4 text-xl font-semibold">
+        {t('frequentlyBoughtTogether')}
+      </h2>
 
       <div className="flex flex-wrap items-center gap-3">
         {/* Current product (always included, no checkbox) */}
@@ -9703,12 +9780,7 @@ export function FreeShippingBar({ className }: FreeShippingBarProps) {
       <div className={cn('rounded-lg border border-green-200 bg-green-50 p-3', className)}>
         <div className="flex items-center gap-2 text-sm font-medium text-green-700">
           <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M5 13l4 4L19 7"
-            />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
           </svg>
           {t('freeShippingQualified')}
         </div>
@@ -9770,20 +9842,28 @@ export function CartUpgradeBanner({
       if (sessionStorage.getItem(storageKey)) {
         setDismissed(true);
       }
-    } catch {}
+    } catch {
+      /* ignore */
+    }
   }, [storageKey]);
 
   if (dismissed) return null;
 
   const target = suggestion.targetProduct;
   const firstImage = target.images?.[0];
-  const imageUrl = firstImage ? (typeof firstImage === 'string' ? firstImage : firstImage.url) : null;
+  const imageUrl = firstImage
+    ? typeof firstImage === 'string'
+      ? firstImage
+      : firstImage.url
+    : null;
   const formattedDelta = formatPrice(parseFloat(suggestion.priceDelta), { currency }) as string;
 
   function handleDismiss() {
     try {
       sessionStorage.setItem(storageKey, '1');
-    } catch {}
+    } catch {
+      /* ignore */
+    }
     setDismissed(true);
   }
 
@@ -9816,7 +9896,13 @@ export function CartUpgradeBanner({
         className="text-muted-foreground hover:text-foreground absolute end-2 top-2 text-xs"
         aria-label={t('dismissUpgrade')}
       >
-        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
           <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
         </svg>
       </button>
@@ -9828,7 +9914,12 @@ export function CartUpgradeBanner({
         ) : (
           <div className="text-muted-foreground flex h-full w-full items-center justify-center">
             <svg className="h-5 w-5" 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" />
+              <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>
         )}
@@ -9863,18 +9954,18 @@ import { useState } from 'react';
 import Image from 'next/image';
 import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
 import { useStoreInfo } from '@/providers/store-provider';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
 interface CartBundleOfferCardProps {
   offer: CartBundleOfferType;
+  cartId: string;
   onAdd: () => void;
   className?: string;
 }
 
-export function CartBundleOfferCard({ offer, onAdd, className }: CartBundleOfferCardProps) {
+export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
   const { storeInfo } = useStoreInfo();
   const t = useTranslations('cart');
   const currency = storeInfo?.currency || 'USD';
@@ -9882,24 +9973,25 @@ export function CartBundleOfferCard({ offer, onAdd, className }: CartBundleOffer
 
   const product = offer.bundleProduct;
   const firstImage = product.images?.[0];
-  const imageUrl = firstImage ? (typeof firstImage === 'string' ? firstImage : firstImage.url) : null;
+  const imageUrl = firstImage
+    ? typeof firstImage === 'string'
+      ? firstImage
+      : firstImage.url
+    : null;
   const originalPrice = parseFloat(offer.originalPrice);
   const discountedPrice = parseFloat(offer.discountedPrice);
   const discountLabel =
     offer.discountType === 'PERCENTAGE'
       ? \`\${offer.discountValue}%\`
-      : formatPrice(parseFloat(offer.discountValue), { currency }) as string;
+      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
 
   async function handleAdd() {
     if (adding) return;
     try {
       setAdding(true);
+      const { getClient } = await import('@/lib/brainerce');
       const client = getClient();
-      await client.smartAddToCart({
-        productId: product.id,
-        variantId: offer.bundleVariantId || undefined,
-        quantity: 1,
-      });
+      await client.addBundleToCart(cartId, offer.id);
       onAdd();
     } catch (err) {
       console.error('Failed to add bundle item:', err);
@@ -9922,7 +10014,12 @@ export function CartBundleOfferCard({ offer, onAdd, className }: CartBundleOffer
         ) : (
           <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" />
+              <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>
         )}
@@ -9987,7 +10084,11 @@ export function OrderBumpCard({ bump, isAdded, onToggle, loading, className }: O
 
   const product = bump.bumpProduct;
   const firstImage = product.images?.[0];
-  const imageUrl = firstImage ? (typeof firstImage === 'string' ? firstImage : firstImage.url) : null;
+  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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brainerce/mcp-server",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "MCP server for AI-powered Brainerce store building. Provides SDK docs, types, and code examples to AI tools like Lovable, Cursor, and Claude Code.",
   "bin": {
     "brainerce-mcp": "dist/bin/stdio.js"