create-brainerce-store 1.15.2 → 1.16.0

package/messages/en.json

@@ -88,7 +88,11 @@
     "digitalProduct": "Digital Product",
     "instantDownload": "Instant Download",
     "downloadAfterPurchase": "Available for download after purchase",
-    "filesIncluded": "{count} files included"
+    "filesIncluded": "{count} files included",
+    "frequentlyBoughtTogether": "Frequently Bought Together",
+    "addSelectedToCart": "Add Selected to Cart",
+    "totalPrice": "Total: {price}",
+    "addingAll": "Adding..."
   },
   "cart": {
     "pageTitle": "Shopping Cart",
@@ -98,7 +102,16 @@
     "proceedToCheckout": "Proceed to Checkout",
     "orderSummary": "Order Summary",
     "taxAtCheckout": "Calculated at checkout",
-    "youMightAlsoNeed": "You Might Also Need"
+    "youMightAlsoNeed": "You Might Also Need",
+    "freeShippingQualified": "You've got free shipping!",
+    "freeShippingRemaining": "You're {amount} away from free shipping!",
+    "upgradeFor": "Upgrade to {name} for only +{amount}",
+    "upgrade": "Upgrade",
+    "upgrading": "Upgrading...",
+    "dismissUpgrade": "Dismiss",
+    "bundleOffers": "Bundle & Save",
+    "addBundleItem": "Add & Save",
+    "addingBundle": "Adding..."
   },
   "checkout": {
     "pageTitle": "Checkout",
@@ -155,7 +168,8 @@
     "failedToSetDeliveryMethod": "Failed to set delivery method",
     "failedToSelectPickup": "Failed to select pickup location",
     "failedToLoadPaymentSdk": "Failed to load payment SDK",
-    "paymentTimedOut": "Payment session timed out. Please try again."
+    "paymentTimedOut": "Payment session timed out. Please try again.",
+    "addToYourOrder": "Add to your order"
   },
   "checkoutForm": {
     "email": "Email",

package/messages/he.json

@@ -88,7 +88,11 @@
     "digitalProduct": "מוצר דיגיטלי",
     "instantDownload": "הורדה מיידית",
     "downloadAfterPurchase": "זמין להורדה לאחר רכישה",
-    "filesIncluded": "{count} קבצים כלולים"
+    "filesIncluded": "{count} קבצים כלולים",
+    "frequentlyBoughtTogether": "לקוחות קנו גם",
+    "addSelectedToCart": "הוסף הנבחרים לעגלה",
+    "totalPrice": "סה\"כ: {price}",
+    "addingAll": "...מוסיף"
   },
   "cart": {
     "pageTitle": "עגלת קניות",
@@ -98,7 +102,16 @@
     "proceedToCheckout": "המשך לתשלום",
     "orderSummary": "סיכום הזמנה",
     "taxAtCheckout": "יחושב בקופה",
-    "youMightAlsoNeed": "אולי גם תצטרכו"
+    "youMightAlsoNeed": "אולי גם תצטרכו",
+    "freeShippingQualified": "!יש לך משלוח חינם",
+    "freeShippingRemaining": "חסרים לך {amount} למשלוח חינם!",
+    "upgradeFor": "שדרגו ל-{name} בתוספת של {amount} בלבד",
+    "upgrade": "שדרג",
+    "upgrading": "...משדרג",
+    "dismissUpgrade": "סגור",
+    "bundleOffers": "חבילה וחיסכון",
+    "addBundleItem": "הוסף וחסוך",
+    "addingBundle": "...מוסיף"
   },
   "checkout": {
     "pageTitle": "תשלום",
@@ -155,7 +168,8 @@
     "failedToSetDeliveryMethod": "שגיאה בהגדרת שיטת המשלוח",
     "failedToSelectPickup": "שגיאה בבחירת נקודת האיסוף",
     "failedToLoadPaymentSdk": "שגיאה בטעינת מערכת התשלום",
-    "paymentTimedOut": "פג תוקף הפעלת התשלום. אנא נסו שנית."
+    "paymentTimedOut": "פג תוקף הפעלת התשלום. אנא נסו שנית.",
+    "addToYourOrder": "הוסיפו להזמנה"
   },
   "checkoutForm": {
     "email": "אימייל",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.15.2",
+  "version": "1.16.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/src/app/cart/page.tsx

@@ -2,13 +2,17 @@
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import type { CartRecommendationsResponse } 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';
 import { CartItem } from '@/components/cart/cart-item';
+import { CartUpgradeBanner } from '@/components/cart/cart-upgrade-banner';
+import { CartBundleOfferCard } from '@/components/cart/cart-bundle-offer';
 import { CartSummary } from '@/components/cart/cart-summary';
 import { CouponInput } from '@/components/cart/coupon-input';
 import { CartNudges } from '@/components/cart/cart-nudges';
+import { FreeShippingBar } from '@/components/cart/free-shipping-bar';
 import { ReservationCountdown } from '@/components/cart/reservation-countdown';
 import { CartRecommendationSection } from '@/components/products/recommendation-section';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
@@ -16,9 +20,12 @@ import { useTranslations } from '@/lib/translations';
 
 export default function CartPage() {
   const { cart, cartLoading, refreshCart, itemCount } = useCart();
+  const { storeInfo } = useStoreInfo();
   const t = useTranslations('cart');
   const tc = useTranslations('common');
   const [cartRecs, setCartRecs] = useState<CartRecommendationsResponse | null>(null);
+  const [upgrades, setUpgrades] = useState<CartUpgradesResponse | null>(null);
+  const [bundles, setBundles] = useState<CartBundlesResponse | null>(null);
 
   // Load cross-sell recommendations when cart changes
   useEffect(() => {
@@ -33,6 +40,32 @@ export default function CartPage() {
       .catch(() => {});
   }, [cart?.id, cart?.items.length]);
 
+  // Load upgrade suggestions when cart changes
+  useEffect(() => {
+    if (!cart?.id || cart.items.length === 0 || storeInfo?.upsell?.cartUpgradeBannerEnabled === false) {
+      setUpgrades(null);
+      return;
+    }
+    const client = getClient();
+    client
+      .getCartUpgrades(cart.id)
+      .then(setUpgrades)
+      .catch(() => {});
+  }, [cart?.id, cart?.items.length, storeInfo?.upsell?.cartUpgradeBannerEnabled]);
+
+  // Load bundle offers when cart changes
+  useEffect(() => {
+    if (!cart?.id || cart.items.length === 0 || storeInfo?.upsell?.cartBundleEnabled === false) {
+      setBundles(null);
+      return;
+    }
+    const client = getClient();
+    client
+      .getCartBundles(cart.id)
+      .then(setBundles)
+      .catch(() => {});
+  }, [cart?.id, cart?.items.length, storeInfo?.upsell?.cartBundleEnabled]);
+
   if (cartLoading) {
     return (
       <div className="flex min-h-[60vh] items-center justify-center">
@@ -92,10 +125,30 @@ export default function CartPage() {
           {/* Cart items */}
           <div>
             {cart.items.map((item) => (
-              <CartItem key={item.id} item={item} onUpdate={refreshCart} />
+              <div key={item.id}>
+                <CartItem item={item} onUpdate={refreshCart} />
+                {upgrades?.upgrades?.[item.productId] && (
+                  <CartUpgradeBanner
+                    suggestion={upgrades.upgrades[item.productId]}
+                    cartItem={item}
+                    onUpgrade={refreshCart}
+                    className="mb-2 ms-24"
+                  />
+                )}
+              </div>
             ))}
           </div>
 
+          {/* Bundle offers */}
+          {bundles?.bundles && bundles.bundles.length > 0 && (
+            <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} />
+              ))}
+            </div>
+          )}
+
           {/* Coupon input */}
           <div className="border-border mt-6 border-t pt-4">
             <CouponInput cart={cart} onUpdate={refreshCart} />
@@ -105,6 +158,7 @@ export default function CartPage() {
         {/* Summary sidebar */}
         <div className="lg:col-span-1">
           <div className="bg-muted/50 border-border sticky top-24 rounded-lg border p-6">
+            <FreeShippingBar className="mb-4" />
             <CartSummary />
 
             <Link

package/templates/nextjs/base/src/app/checkout/page.tsx

@@ -10,6 +10,7 @@ import type {
   SetShippingAddressDto,
   ShippingDestinations,
   PickupLocation,
+  CheckoutBumpsResponse,
 } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
@@ -20,6 +21,7 @@ import { PaymentStep } from '@/components/checkout/payment-step';
 import { DeliveryMethodStep } from '@/components/checkout/delivery-method-step';
 import { PickupStep } from '@/components/checkout/pickup-step';
 import { TaxDisplay } from '@/components/checkout/tax-display';
+import { OrderBumpCard } from '@/components/checkout/order-bump-card';
 import { CouponInput } from '@/components/cart/coupon-input';
 import { ReservationCountdown } from '@/components/cart/reservation-countdown';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
@@ -56,6 +58,9 @@ function CheckoutContent() {
     phone?: string;
   } | null>(null);
   const [hasSavedAddress, setHasSavedAddress] = useState(false);
+  const [orderBumps, setOrderBumps] = useState<CheckoutBumpsResponse | null>(null);
+  const [addedBumpIds, setAddedBumpIds] = useState<Set<string>>(new Set());
+  const [bumpLoading, setBumpLoading] = useState<string | null>(null);
 
   // Check for returning from canceled payment
   const canceled = searchParams.get('canceled') === 'true';
@@ -158,9 +163,59 @@ function CheckoutContent() {
     };
 
     initCheckout();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cart?.id, existingCheckoutId]);
 
+  // Load order bumps when checkout is available
+  useEffect(() => {
+    if (!checkout?.id || storeInfo?.upsell?.checkoutOrderBumpEnabled === false) {
+      setOrderBumps(null);
+      return;
+    }
+    const client = getClient();
+    client
+      .getCheckoutBumps(checkout.id)
+      .then((data) => {
+        setOrderBumps(data);
+        // Detect already-added bumps from cart
+        if (cart?.items) {
+          const existingBumpIds = new Set<string>();
+          for (const item of cart.items) {
+            const meta = item.metadata as Record<string, unknown> | undefined;
+            if (meta?.isOrderBump && meta?.orderBumpId) {
+              existingBumpIds.add(meta.orderBumpId as string);
+            }
+          }
+          setAddedBumpIds(existingBumpIds);
+        }
+      })
+      .catch(() => {});
+  }, [checkout?.id, storeInfo?.upsell?.checkoutOrderBumpEnabled]);
+
+  // Handle bump toggle
+  async function handleBumpToggle(bumpId: string, add: boolean) {
+    if (!cart?.id || bumpLoading) return;
+    try {
+      setBumpLoading(bumpId);
+      const client = getClient();
+      if (add) {
+        await client.addOrderBump(cart.id, bumpId);
+        setAddedBumpIds((prev) => new Set([...prev, bumpId]));
+      } else {
+        await client.removeOrderBump(cart.id, bumpId);
+        setAddedBumpIds((prev) => {
+          const next = new Set(prev);
+          next.delete(bumpId);
+          return next;
+        });
+      }
+      await refreshCart();
+    } catch (err) {
+      console.error('Failed to toggle order bump:', err);
+    } finally {
+      setBumpLoading(null);
+    }
+  }
+
   // Handle shipping address submission
   async function handleAddressSubmit(
     address: SetShippingAddressDto,
@@ -663,6 +718,24 @@ function CheckoutContent() {
               )
             )}
 
+            {/* Order bumps */}
+            {orderBumps?.bumps && orderBumps.bumps.length > 0 && (
+              <div className="border-border space-y-2 border-t pt-4">
+                <p className="text-foreground text-xs font-semibold uppercase tracking-wide">
+                  {t('addToYourOrder')}
+                </p>
+                {orderBumps.bumps.map((bump) => (
+                  <OrderBumpCard
+                    key={bump.id}
+                    bump={bump}
+                    isAdded={addedBumpIds.has(bump.id)}
+                    onToggle={handleBumpToggle}
+                    loading={bumpLoading === bump.id}
+                  />
+                ))}
+              </div>
+            )}
+
             {/* Coupon input — show from shipping/pickup step onwards (or immediately if digital) */}
             {cart &&
               (isAllDigital || step === 'shipping' || step === 'pickup' || step === 'payment') && (

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

@@ -16,6 +16,7 @@ import { LoadingSpinner } from '@/components/shared/loading-spinner';
 import { VariantSelector } from '@/components/products/variant-selector';
 import { StockBadge } from '@/components/products/stock-badge';
 import { RecommendationSection } from '@/components/products/recommendation-section';
+import { FrequentlyBoughtTogether } from '@/components/products/frequently-bought-together';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
@@ -454,6 +455,15 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
         </div>
       </div>
 
+      {/* Frequently Bought Together (cross-sells) */}
+      {recommendations?.crossSells && recommendations.crossSells.length > 0 && (
+        <FrequentlyBoughtTogether
+          items={recommendations.crossSells}
+          currentProduct={product}
+          className="mt-12"
+        />
+      )}
+
       {/* Upsells */}
       {recommendations?.upsells && recommendations.upsells.length > 0 && (
         <RecommendationSection

package/templates/nextjs/base/src/components/cart/cart-bundle-offer.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+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;
+  onAdd: () => void;
+  className?: string;
+}
+
+export function CartBundleOfferCard({ offer, onAdd, className }: CartBundleOfferCardProps) {
+  const { storeInfo } = useStoreInfo();
+  const t = useTranslations('cart');
+  const currency = storeInfo?.currency || 'USD';
+  const [adding, setAdding] = useState(false);
+
+  const product = offer.bundleProduct;
+  const firstImage = product.images?.[0];
+  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;
+
+  async function handleAdd() {
+    if (adding) return;
+    try {
+      setAdding(true);
+      const client = getClient();
+      await client.smartAddToCart({
+        productId: product.id,
+        variantId: offer.bundleVariantId || undefined,
+        quantity: 1,
+      });
+      onAdd();
+    } catch (err) {
+      console.error('Failed to add bundle item:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'bg-background border-border flex items-center gap-4 rounded-lg border p-4',
+        className
+      )}
+    >
+      {/* 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>
+
+      {/* 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>
+        )}
+        <div className="mt-1 flex items-center gap-2">
+          <span className="text-muted-foreground text-sm line-through">
+            {formatPrice(originalPrice, { currency }) as string}
+          </span>
+          <span className="text-foreground text-sm font-semibold">
+            {formatPrice(discountedPrice, { 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>
+      </div>
+
+      {/* Add button */}
+      <button
+        type="button"
+        onClick={handleAdd}
+        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') : t('addBundleItem')}
+      </button>
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/cart/cart-upgrade-banner.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
+import type { CartUpgradeSuggestion, CartItem as CartItemType } 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 CartUpgradeBannerProps {
+  suggestion: CartUpgradeSuggestion;
+  cartItem: CartItemType;
+  onUpgrade: () => void;
+  className?: string;
+}
+
+export function CartUpgradeBanner({
+  suggestion,
+  cartItem,
+  onUpgrade,
+  className,
+}: CartUpgradeBannerProps) {
+  const { storeInfo } = useStoreInfo();
+  const t = useTranslations('cart');
+  const currency = storeInfo?.currency || 'USD';
+  const [upgrading, setUpgrading] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+
+  const storageKey = `dismissed_upgrade_${suggestion.sourceProductId}`;
+
+  useEffect(() => {
+    try {
+      if (sessionStorage.getItem(storageKey)) {
+        setDismissed(true);
+      }
+    } catch {}
+  }, [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 formattedDelta = formatPrice(parseFloat(suggestion.priceDelta), { currency }) as string;
+
+  function handleDismiss() {
+    try {
+      sessionStorage.setItem(storageKey, '1');
+    } catch {}
+    setDismissed(true);
+  }
+
+  async function handleUpgrade() {
+    if (upgrading) return;
+    try {
+      setUpgrading(true);
+      const client = getClient();
+      await client.smartRemoveFromCart(cartItem.productId, cartItem.variantId || undefined);
+      await client.smartAddToCart({ productId: target.id, quantity: cartItem.quantity });
+      onUpgrade();
+    } catch (err) {
+      console.error('Failed to upgrade cart item:', err);
+    } finally {
+      setUpgrading(false);
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'bg-primary/5 border-primary/20 relative flex items-center gap-3 rounded-lg border px-4 py-3',
+        className
+      )}
+    >
+      {/* Dismiss button */}
+      <button
+        type="button"
+        onClick={handleDismiss}
+        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}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+
+      {/* Product image */}
+      <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
+        {imageUrl ? (
+          <Image src={imageUrl} alt={target.name} fill sizes="48px" className="object-cover" />
+        ) : (
+          <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" />
+            </svg>
+          </div>
+        )}
+      </div>
+
+      {/* Text */}
+      <div className="min-w-0 flex-1">
+        <p className="text-foreground text-sm font-medium">
+          {t('upgradeFor', { name: target.name, amount: formattedDelta })}
+        </p>
+      </div>
+
+      {/* Upgrade button */}
+      <button
+        type="button"
+        onClick={handleUpgrade}
+        disabled={upgrading}
+        className={cn(
+          'bg-primary text-primary-foreground flex-shrink-0 rounded px-3 py-1.5 text-xs font-medium transition-opacity hover:opacity-90',
+          'disabled:cursor-not-allowed disabled:opacity-50'
+        )}
+      >
+        {upgrading ? t('upgrading') : t('upgrade')}
+      </button>
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/cart/free-shipping-bar.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useStoreInfo, useCart } from '@/providers/store-provider';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+interface FreeShippingBarProps {
+  className?: string;
+}
+
+export function FreeShippingBar({ className }: FreeShippingBarProps) {
+  const t = useTranslations('cart');
+  const { storeInfo } = useStoreInfo();
+  const { totals } = useCart();
+
+  const upsell = storeInfo?.upsell;
+  const threshold = upsell?.freeShippingThreshold;
+  const enabled = upsell?.freeShippingBarEnabled !== false;
+
+  // Don't render if disabled or no threshold configured
+  if (!enabled || !threshold || threshold <= 0) return null;
+
+  const subtotal = totals.subtotal;
+  const remaining = Math.max(0, threshold - subtotal);
+  const progress = Math.min(100, (subtotal / threshold) * 100);
+  const qualified = remaining <= 0;
+  const currency = storeInfo?.currency || 'USD';
+
+  // Don't show if already qualified
+  if (qualified) {
+    return (
+      <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"
+            />
+          </svg>
+          {t('freeShippingQualified')}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('rounded-lg border border-amber-200 bg-amber-50 p-3', className)}>
+      <p className="mb-2 text-sm text-amber-800">
+        {t('freeShippingRemaining', {
+          amount: formatPrice(remaining, { currency }) as string,
+        })}
+      </p>
+      <div className="h-2 w-full overflow-hidden rounded-full bg-amber-200">
+        <div
+          className="h-full rounded-full bg-amber-500 transition-all duration-500 ease-out"
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,79 @@
+'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>
+  );
+}

package/templates/nextjs/base/src/components/products/frequently-bought-together.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import type { Product, ProductRecommendation } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useCart } from '@/providers/store-provider';
+import { useStoreInfo } from '@/providers/store-provider';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+interface FrequentlyBoughtTogetherProps {
+  items: ProductRecommendation[];
+  currentProduct: Product;
+  className?: string;
+}
+
+function getEffectivePrice(item: { basePrice: string; salePrice?: string | null }): number {
+  const sale = item.salePrice ? parseFloat(item.salePrice) : null;
+  const base = parseFloat(item.basePrice);
+  return sale != null && sale < base ? sale : base;
+}
+
+function ProductThumb({
+  name,
+  imageUrl,
+  price,
+  currency,
+  checked,
+  onToggle,
+  disabled,
+}: {
+  name: string;
+  imageUrl: string | null;
+  price: number;
+  currency: string;
+  checked: boolean;
+  onToggle?: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <label
+      className={cn(
+        'border-border bg-background relative flex cursor-pointer flex-col items-center rounded-lg border p-3 transition-all',
+        checked ? 'ring-primary ring-2' : 'opacity-60',
+        disabled && 'pointer-events-none'
+      )}
+    >
+      {onToggle && (
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={onToggle}
+          className="absolute start-2 top-2 h-4 w-4 rounded"
+        />
+      )}
+      <div className="bg-muted relative mb-2 h-20 w-20 overflow-hidden rounded">
+        {imageUrl ? (
+          <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>
+          </div>
+        )}
+      </div>
+      <span className="text-foreground line-clamp-2 text-center text-xs font-medium">{name}</span>
+      <span className="text-muted-foreground mt-1 text-xs">
+        {formatPrice(price, { currency }) as string}
+      </span>
+    </label>
+  );
+}
+
+export function FrequentlyBoughtTogether({
+  items,
+  currentProduct,
+  className,
+}: FrequentlyBoughtTogetherProps) {
+  const { storeInfo } = useStoreInfo();
+  const { refreshCart } = useCart();
+  const t = useTranslations('productDetail');
+
+  // Only show up to 3 cross-sells
+  const crossSells = items.slice(0, 3);
+
+  const [selected, setSelected] = useState<Set<string>>(() => new Set(crossSells.map((i) => i.id)));
+  const [adding, setAdding] = useState(false);
+
+  if (!storeInfo?.upsell?.frequentlyBoughtTogetherEnabled) return null;
+  if (crossSells.length === 0) return null;
+
+  const currency = storeInfo.currency || 'USD';
+
+  const currentPrice = getEffectivePrice(currentProduct);
+  const currentImage = currentProduct.images?.[0];
+  const currentImageUrl = currentImage
+    ? typeof currentImage === 'string'
+      ? currentImage
+      : currentImage.url
+    : null;
+
+  const totalPrice = crossSells
+    .filter((item) => selected.has(item.id))
+    .reduce((sum, item) => sum + getEffectivePrice(item), currentPrice);
+
+  const toggleItem = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  async function handleAddAll() {
+    if (adding || selected.size === 0) return;
+    try {
+      setAdding(true);
+      const { getClient } = await import('@/lib/brainerce');
+      const client = getClient();
+      const selectedItems = crossSells.filter((item) => selected.has(item.id));
+      for (const item of selectedItems) {
+        await client.smartAddToCart({ productId: item.id, quantity: 1 });
+      }
+      await refreshCart();
+    } catch (err) {
+      console.error('Failed to add items to cart:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  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>
+
+      <div className="flex flex-wrap items-center gap-3">
+        {/* Current product (always included, no checkbox) */}
+        <ProductThumb
+          name={currentProduct.name}
+          imageUrl={currentImageUrl}
+          price={currentPrice}
+          currency={currency}
+          checked={true}
+          disabled
+        />
+
+        {crossSells.map((item) => {
+          const img = item.images?.[0];
+          const imgUrl = img ? (typeof img === 'string' ? img : img.url) : null;
+          return (
+            <div key={item.id} className="flex items-center gap-3">
+              <span className="text-muted-foreground text-lg font-light">+</span>
+              <ProductThumb
+                name={item.name}
+                imageUrl={imgUrl}
+                price={getEffectivePrice(item)}
+                currency={currency}
+                checked={selected.has(item.id)}
+                onToggle={() => toggleItem(item.id)}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Total + Add button */}
+      <div className="mt-4 flex flex-wrap items-center gap-4">
+        <span className="text-foreground text-lg font-semibold">
+          {t('totalPrice', { price: formatPrice(totalPrice, { currency }) as string })}
+        </span>
+        <button
+          onClick={handleAddAll}
+          disabled={adding || selected.size === 0}
+          className={cn(
+            'bg-primary text-primary-foreground rounded px-5 py-2.5 text-sm font-medium transition-opacity hover:opacity-90',
+            'disabled:cursor-not-allowed disabled:opacity-50'
+          )}
+        >
+          {adding ? t('addingAll') : t('addSelectedToCart')}
+        </button>
+      </div>
+    </div>
+  );
+}