create-brainerce-store 1.9.1 → 1.11.1

package/templates/nextjs/base/src/app/api/store/[...path]/route.ts

@@ -75,9 +75,11 @@ async function proxyRequest(
   };
 
   // Forward Origin/Referer so backend BrowserOriginGuard accepts proxied requests
-  const origin = request.headers.get('origin');
+  // Always send Origin — same-origin GET requests may not include it, but the backend
+  // uses its presence to distinguish fetch() calls from direct browser navigation
+  const origin = request.headers.get('origin') || request.nextUrl.origin;
   const referer = request.headers.get('referer');
-  if (origin) headers['Origin'] = origin;
+  headers['Origin'] = origin;
   if (referer) headers['Referer'] = referer;
 
   // Forward SDK version header if present

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

@@ -1,134 +1,137 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import Link from 'next/link';
-import type { CartRecommendationsResponse } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useCart } from '@/providers/store-provider';
-import { CartItem } from '@/components/cart/cart-item';
-import { CartSummary } from '@/components/cart/cart-summary';
-import { CouponInput } from '@/components/cart/coupon-input';
-import { CartNudges } from '@/components/cart/cart-nudges';
-import { ReservationCountdown } from '@/components/cart/reservation-countdown';
-import { CartRecommendationSection } from '@/components/products/recommendation-section';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
-
-export default function CartPage() {
-  const { cart, cartLoading, refreshCart, itemCount } = useCart();
-  const t = useTranslations('cart');
-  const tc = useTranslations('common');
-  const [cartRecs, setCartRecs] = useState<CartRecommendationsResponse | null>(null);
-
-  // Load cross-sell recommendations when cart changes
-  useEffect(() => {
-    if (!cart?.id || cart.items.length === 0) {
-      setCartRecs(null);
-      return;
-    }
-    const client = getClient();
-    client.getCartRecommendations(cart.id, 4).then(setCartRecs).catch(() => {});
-  }, [cart?.id, cart?.items.length]);
-
-  if (cartLoading) {
-    return (
-      <div className="flex min-h-[60vh] items-center justify-center">
-        <LoadingSpinner size="lg" />
-      </div>
-    );
-  }
-
-  // Empty cart state
-  if (!cart || cart.items.length === 0) {
-    return (
-      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <svg
-          className="text-muted-foreground mx-auto mb-4 h-16 w-16"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
-          />
-        </svg>
-        <h1 className="text-foreground text-2xl font-bold">{t('emptyTitle')}</h1>
-        <p className="text-muted-foreground mt-2">{t('emptySubtitle')}</p>
-        <Link
-          href="/products"
-          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-        >
-          {tc('continueShopping')}
-        </Link>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-bold">
-        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
-      </h1>
-
-      {/* Reservation countdown */}
-      {cart.reservation?.hasReservation && (
-        <ReservationCountdown reservation={cart.reservation} className="mb-6" />
-      )}
-
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-        {/* Cart Items */}
-        <div className="lg:col-span-2">
-          {/* Nudges */}
-          {cart.nudges && cart.nudges.length > 0 && (
-            <CartNudges nudges={cart.nudges} className="mb-4" />
-          )}
-
-          {/* Cart items */}
-          <div>
-            {cart.items.map((item) => (
-              <CartItem key={item.id} item={item} onUpdate={refreshCart} />
-            ))}
-          </div>
-
-          {/* Coupon input */}
-          <div className="border-border mt-6 border-t pt-4">
-            <CouponInput cart={cart} onUpdate={refreshCart} />
-          </div>
-        </div>
-
-        {/* Summary sidebar */}
-        <div className="lg:col-span-1">
-          <div className="bg-muted/50 border-border sticky top-24 rounded-lg border p-6">
-            <CartSummary />
-
-            <Link
-              href="/checkout"
-              className="bg-primary text-primary-foreground mt-6 inline-flex w-full items-center justify-center rounded px-6 py-3 text-sm font-medium transition-opacity hover:opacity-90"
-            >
-              {t('proceedToCheckout')}
-            </Link>
-
-            <Link
-              href="/products"
-              className="text-muted-foreground hover:text-foreground mt-3 inline-flex w-full items-center justify-center px-6 py-2 text-sm transition-colors"
-            >
-              {tc('continueShopping')}
-            </Link>
-          </div>
-        </div>
-      </div>
-
-      {/* Cross-sell recommendations */}
-      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
-        <CartRecommendationSection
-          title={t('youMightAlsoNeed')}
-          items={cartRecs.recommendations}
-          className="mt-10"
-        />
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import type { CartRecommendationsResponse } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useCart } from '@/providers/store-provider';
+import { CartItem } from '@/components/cart/cart-item';
+import { CartSummary } from '@/components/cart/cart-summary';
+import { CouponInput } from '@/components/cart/coupon-input';
+import { CartNudges } from '@/components/cart/cart-nudges';
+import { ReservationCountdown } from '@/components/cart/reservation-countdown';
+import { CartRecommendationSection } from '@/components/products/recommendation-section';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { useTranslations } from '@/lib/translations';
+
+export default function CartPage() {
+  const { cart, cartLoading, refreshCart, itemCount } = useCart();
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const [cartRecs, setCartRecs] = useState<CartRecommendationsResponse | null>(null);
+
+  // Load cross-sell recommendations when cart changes
+  useEffect(() => {
+    if (!cart?.id || cart.items.length === 0) {
+      setCartRecs(null);
+      return;
+    }
+    const client = getClient();
+    client
+      .getCartRecommendations(cart.id, 4)
+      .then(setCartRecs)
+      .catch(() => {});
+  }, [cart?.id, cart?.items.length]);
+
+  if (cartLoading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  // Empty cart state
+  if (!cart || cart.items.length === 0) {
+    return (
+      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <svg
+          className="text-muted-foreground mx-auto mb-4 h-16 w-16"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+          />
+        </svg>
+        <h1 className="text-foreground text-2xl font-bold">{t('emptyTitle')}</h1>
+        <p className="text-muted-foreground mt-2">{t('emptySubtitle')}</p>
+        <Link
+          href="/products"
+          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+        >
+          {tc('continueShopping')}
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-bold">
+        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
+      </h1>
+
+      {/* Reservation countdown */}
+      {cart.reservation?.hasReservation && (
+        <ReservationCountdown reservation={cart.reservation} className="mb-6" />
+      )}
+
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+        {/* Cart Items */}
+        <div className="lg:col-span-2">
+          {/* Nudges */}
+          {cart.nudges && cart.nudges.length > 0 && (
+            <CartNudges nudges={cart.nudges} className="mb-4" />
+          )}
+
+          {/* Cart items */}
+          <div>
+            {cart.items.map((item) => (
+              <CartItem key={item.id} item={item} onUpdate={refreshCart} />
+            ))}
+          </div>
+
+          {/* Coupon input */}
+          <div className="border-border mt-6 border-t pt-4">
+            <CouponInput cart={cart} onUpdate={refreshCart} />
+          </div>
+        </div>
+
+        {/* Summary sidebar */}
+        <div className="lg:col-span-1">
+          <div className="bg-muted/50 border-border sticky top-24 rounded-lg border p-6">
+            <CartSummary />
+
+            <Link
+              href="/checkout"
+              className="bg-primary text-primary-foreground mt-6 inline-flex w-full items-center justify-center rounded px-6 py-3 text-sm font-medium transition-opacity hover:opacity-90"
+            >
+              {t('proceedToCheckout')}
+            </Link>
+
+            <Link
+              href="/products"
+              className="text-muted-foreground hover:text-foreground mt-3 inline-flex w-full items-center justify-center px-6 py-2 text-sm transition-colors"
+            >
+              {tc('continueShopping')}
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* Cross-sell recommendations */}
+      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
+        <CartRecommendationSection
+          title={t('youMightAlsoNeed')}
+          items={cartRecs.recommendations}
+          className="mt-10"
+        />
+      )}
+    </div>
+  );
+}

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

@@ -13,7 +13,7 @@ import type {
 } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
-import { useStoreInfo, useAuth, useCart } from '@/providers/store-provider';
+import { useStoreInfo, useCart } from '@/providers/store-provider';
 import { CheckoutForm } from '@/components/checkout/checkout-form';
 import { ShippingStep } from '@/components/checkout/shipping-step';
 import { PaymentStep } from '@/components/checkout/payment-step';
@@ -31,7 +31,6 @@ type CheckoutStep = 'method' | 'address' | 'shipping' | 'pickup' | 'payment';
 function CheckoutContent() {
   const searchParams = useSearchParams();
   const { storeInfo } = useStoreInfo();
-  const { isLoggedIn } = useAuth();
   const { cart, refreshCart } = useCart();
   const currency = storeInfo?.currency || 'USD';
   const t = useTranslations('checkout');
@@ -92,20 +91,8 @@ function CheckoutContent() {
 
       // Create new checkout — cart is always server-side now
       if (cart && cart.id) {
-        if (isLoggedIn) {
-          // Logged-in user: create checkout from customer cart
-          const newCheckout = await client.createCheckout({ cartId: cart.id });
-          setCheckout(newCheckout);
-        } else {
-          // Guest user: start guest checkout (creates checkout from session cart)
-          const result = await client.startGuestCheckout();
-          if (result.tracked) {
-            const newCheckout = await client.getCheckout(result.checkoutId);
-            setCheckout(newCheckout);
-          } else {
-            setError(t('failedToStartCheckout'));
-          }
-        }
+        const newCheckout = await client.createCheckout({ cartId: cart.id });
+        setCheckout(newCheckout);
       } else {
         setError(t('cartIsEmpty'));
       }
@@ -120,7 +107,7 @@ function CheckoutContent() {
     } finally {
       setInitializing(false);
     }
-  }, [existingCheckoutId, isLoggedIn, cart]);
+  }, [existingCheckoutId, cart]);
 
   const cartLoaded = cart !== null;
   useEffect(() => {