create-brainerce-store 1.16.0 → 1.18.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.15.2",
+      version: "1.18.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/messages/en.json

@@ -154,6 +154,9 @@
     "paymentNotConfigured": "Payment Not Configured",
     "paymentNotConfiguredDesc": "Payment has not been set up for this store yet. Please contact the store owner.",
     "paymentError": "Payment Error",
+    "sandboxTitle": "Sandbox Mode",
+    "sandboxDescription": "This is a test order. No real payment will be processed.",
+    "completeTestOrder": "Complete Test Order",
     "redirectingToPayment": "Redirecting to payment provider...",
     "redirectingHint": "If you are not redirected automatically, ",
     "clickHere": "click here",

package/messages/he.json

@@ -154,6 +154,9 @@
     "paymentNotConfigured": "תשלום לא מוגדר",
     "paymentNotConfiguredDesc": "התשלום עדיין לא הוגדר לחנות זו. אנא פנו לבעל החנות.",
     "paymentError": "שגיאת תשלום",
+    "sandboxTitle": "מצב בדיקה",
+    "sandboxDescription": "זוהי הזמנת בדיקה. לא יבוצע תשלום אמיתי.",
+    "completeTestOrder": "השלם הזמנת בדיקה",
     "redirectingToPayment": "...מפנה לספק התשלום",
     "redirectingHint": "אם אינכם מופנים אוטומטית, ",
     "clickHere": "לחצו כאן",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.16.0",
+  "version": "1.18.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,7 +2,11 @@
 
 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';
@@ -42,7 +46,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;
     }
@@ -144,7 +152,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>
           )}

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

@@ -4,18 +4,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';
@@ -23,24 +23,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);
@@ -63,7 +64,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>
         )}

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

@@ -35,20 +35,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);
   }
 
@@ -81,7 +89,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>
@@ -93,7 +107,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>
         )}

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

@@ -33,12 +33,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>

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

@@ -22,7 +22,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/templates/nextjs/base/src/components/checkout/payment-step.tsx

@@ -305,8 +305,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);
@@ -333,6 +334,9 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       const sdk = resolveClientSdk(intent, providerSdk);
       currentSdk = sdk;
 
+      // Sandbox mode — no SDK to load, UI handles it
+      if (sdk.renderType === 'sandbox') return;
+
       if (sdk.renderType === 'redirect') {
         window.location.href = intent.clientSecret;
         return;
@@ -427,6 +431,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`;

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

@@ -59,8 +59,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>
         )}
@@ -137,7 +147,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) */}