create-brainerce-store 1.0.1 → 1.2.0

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

@@ -1,463 +1,477 @@
-'use client';
-
-import { Suspense, useEffect, useState, useCallback } from 'react';
-import { useSearchParams } from 'next/navigation';
-import Image from 'next/image';
-import Link from 'next/link';
-import type { Checkout, ShippingRate, SetShippingAddressDto } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useStoreInfo, useAuth, 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';
-import { TaxDisplay } from '@/components/checkout/tax-display';
-import { ReservationCountdown } from '@/components/cart/reservation-countdown';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { cn } from '@/lib/utils';
-
-type CheckoutStep = 'address' | 'shipping' | 'payment';
-
-function CheckoutContent() {
-  const searchParams = useSearchParams();
-  const { storeInfo } = useStoreInfo();
-  const { isLoggedIn } = useAuth();
-  const { cart, isServerCart } = useCart();
-  const currency = storeInfo?.currency || 'USD';
-
-  const [step, setStep] = useState<CheckoutStep>('address');
-  const [checkout, setCheckout] = useState<Checkout | null>(null);
-  const [shippingRates, setShippingRates] = useState<ShippingRate[]>([]);
-  const [selectedRateId, setSelectedRateId] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [initializing, setInitializing] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Check for returning from canceled payment
-  const canceled = searchParams.get('canceled') === 'true';
-  const existingCheckoutId = searchParams.get('checkout_id');
-
-  // Initialize or resume checkout
-  const initCheckout = useCallback(async () => {
-    try {
-      setInitializing(true);
-      setError(null);
-      const client = getClient();
-
-      // If returning with existing checkout ID, resume it
-      if (existingCheckoutId) {
-        const existing = await client.getCheckout(existingCheckoutId);
-        setCheckout(existing);
-
-        // Determine step based on checkout state
-        if (existing.shippingAddress && existing.shippingRateId) {
-          setStep('payment');
-        } else if (existing.shippingAddress) {
-          // Fetch shipping rates
-          const rates = await client.getShippingRates(existing.id);
-          setShippingRates(rates);
-          setStep('shipping');
-        }
-        return;
-      }
-
-      // Create new checkout
-      if (isLoggedIn && cart && isServerCart(cart)) {
-        // Logged-in user: create checkout from server cart
-        const newCheckout = await client.createCheckout({ cartId: cart.id });
-        setCheckout(newCheckout);
-      } else if (cart && !isServerCart(cart)) {
-        // Guest user: start guest checkout
-        const result = await client.startGuestCheckout();
-
-        if (result.tracked) {
-          const newCheckout = await client.getCheckout(result.checkoutId);
-          setCheckout(newCheckout);
-        } else {
-          setError('Unable to start checkout. Please try again.');
-        }
-      } else {
-        setError('Your cart is empty.');
-      }
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Failed to initialize checkout';
-      setError(message);
-    } finally {
-      setInitializing(false);
-    }
-  }, [existingCheckoutId, isLoggedIn, cart, isServerCart]);
-
-  const cartLoaded = cart !== null;
-  useEffect(() => {
-    if (cartLoaded) {
-      initCheckout();
-    }
-  }, [cartLoaded, initCheckout]);
-
-  // Handle shipping address submission
-  async function handleAddressSubmit(address: SetShippingAddressDto) {
-    if (!checkout) return;
-
-    try {
-      setLoading(true);
-      setError(null);
-      const client = getClient();
-
-      const response = await client.setShippingAddress(checkout.id, address);
-      setCheckout(response.checkout);
-      setShippingRates(response.rates);
-      setStep('shipping');
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Failed to save address';
-      setError(message);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  // Handle shipping method selection
-  async function handleShippingSelect(rateId: string) {
-    if (!checkout) return;
-
-    try {
-      setLoading(true);
-      setError(null);
-      setSelectedRateId(rateId);
-      const client = getClient();
-
-      const updated = await client.selectShippingMethod(checkout.id, rateId);
-      setCheckout(updated);
-      setStep('payment');
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Failed to select shipping';
-      setError(message);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  if (initializing) {
-    return (
-      <div className="flex min-h-[60vh] items-center justify-center">
-        <LoadingSpinner size="lg" />
-      </div>
-    );
-  }
-
-  // Empty cart
-  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">
-        <h1 className="text-foreground text-2xl font-bold">Your cart is empty</h1>
-        <p className="text-muted-foreground mt-2">
-          Add some items to your cart before checking out.
-        </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"
-        >
-          Shop Now
-        </Link>
-      </div>
-    );
-  }
-
-  if (error && !checkout) {
-    return (
-      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <h1 className="text-foreground text-2xl font-bold">Checkout Error</h1>
-        <p className="text-destructive mt-2">{error}</p>
-        <Link
-          href="/cart"
-          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-        >
-          Return to Cart
-        </Link>
-      </div>
-    );
-  }
-
-  const steps: { key: CheckoutStep; label: string; number: number }[] = [
-    { key: 'address', label: 'Address', number: 1 },
-    { key: 'shipping', label: 'Shipping', number: 2 },
-    { key: 'payment', label: 'Payment', number: 3 },
-  ];
-
-  const currentStepIndex = steps.findIndex((s) => s.key === step);
-
-  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">Checkout</h1>
-
-      {/* Canceled payment banner */}
-      {canceled && (
-        <div className="mb-6 rounded-lg border border-orange-200 bg-orange-50 px-4 py-3 text-sm text-orange-800 dark:border-orange-800 dark:bg-orange-950/30 dark:text-orange-300">
-          Payment was canceled. You can try again or change your payment method.
-        </div>
-      )}
-
-      {/* Reservation countdown */}
-      {checkout?.reservation?.hasReservation && (
-        <ReservationCountdown reservation={checkout.reservation} className="mb-6" />
-      )}
-
-      {/* Step indicator */}
-      <div className="mb-8 flex items-center gap-2">
-        {steps.map((s, index) => (
-          <div key={s.key} className="flex items-center">
-            {index > 0 && (
-              <div
-                className={cn(
-                  'mx-2 h-px w-8 sm:w-12',
-                  index <= currentStepIndex ? 'bg-primary' : 'bg-border'
-                )}
-              />
-            )}
-            <div className="flex items-center gap-2">
-              <div
-                className={cn(
-                  'flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium',
-                  index < currentStepIndex
-                    ? 'bg-primary text-primary-foreground'
-                    : index === currentStepIndex
-                      ? 'bg-primary text-primary-foreground'
-                      : 'bg-muted text-muted-foreground'
-                )}
-              >
-                {index < currentStepIndex ? (
-                  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M5 13l4 4L19 7"
-                    />
-                  </svg>
-                ) : (
-                  s.number
-                )}
-              </div>
-              <span
-                className={cn(
-                  'hidden text-sm sm:block',
-                  index <= currentStepIndex
-                    ? 'text-foreground font-medium'
-                    : 'text-muted-foreground'
-                )}
-              >
-                {s.label}
-              </span>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Error banner */}
-      {error && checkout && (
-        <div className="bg-destructive/10 border-destructive/20 text-destructive mb-6 rounded-lg border px-4 py-3 text-sm">
-          {error}
-        </div>
-      )}
-
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-        {/* Main content */}
-        <div className="lg:col-span-2">
-          {/* Step 1: Address */}
-          {step === 'address' && (
-            <div>
-              <h2 className="text-foreground mb-4 text-lg font-semibold">Shipping Address</h2>
-              <CheckoutForm
-                onSubmit={handleAddressSubmit}
-                loading={loading}
-                initialValues={
-                  checkout?.shippingAddress
-                    ? {
-                        email: checkout.email || '',
-                        firstName: checkout.shippingAddress.firstName,
-                        lastName: checkout.shippingAddress.lastName,
-                        line1: checkout.shippingAddress.line1,
-                        line2: checkout.shippingAddress.line2 || '',
-                        city: checkout.shippingAddress.city,
-                        region: checkout.shippingAddress.region || '',
-                        postalCode: checkout.shippingAddress.postalCode,
-                        country: checkout.shippingAddress.country,
-                        phone: checkout.shippingAddress.phone || '',
-                      }
-                    : undefined
-                }
-              />
-            </div>
-          )}
-
-          {/* Step 2: Shipping */}
-          {step === 'shipping' && (
-            <div>
-              <div className="mb-4 flex items-center justify-between">
-                <h2 className="text-foreground text-lg font-semibold">Shipping Method</h2>
-                <button
-                  type="button"
-                  onClick={() => setStep('address')}
-                  className="text-primary text-sm hover:underline"
-                >
-                  Edit address
-                </button>
-              </div>
-
-              <ShippingStep
-                rates={shippingRates}
-                selectedRateId={selectedRateId}
-                onSelect={handleShippingSelect}
-                loading={loading}
-              />
-            </div>
-          )}
-
-          {/* Step 3: Payment */}
-          {step === 'payment' && checkout && (
-            <div>
-              <div className="mb-4 flex items-center justify-between">
-                <h2 className="text-foreground text-lg font-semibold">Payment</h2>
-                <button
-                  type="button"
-                  onClick={() => setStep('shipping')}
-                  className="text-primary text-sm hover:underline"
-                >
-                  Change shipping
-                </button>
-              </div>
-
-              <PaymentStep checkoutId={checkout.id} />
-            </div>
-          )}
-        </div>
-
-        {/* Order summary sidebar */}
-        <div className="lg:col-span-1">
-          <div className="bg-muted/50 border-border sticky top-24 rounded-lg border p-6">
-            <h3 className="text-foreground mb-4 text-lg font-semibold">Order Summary</h3>
-
-            {/* Line items */}
-            {checkout?.lineItems && checkout.lineItems.length > 0 ? (
-              <div className="mb-4 space-y-3">
-                {checkout.lineItems.map((item) => {
-                  const imageUrl = item.product.images?.[0]?.url || null;
-                  const name = item.variant?.name || item.product.name;
-                  const lineTotal = parseFloat(item.unitPrice) * item.quantity;
-
-                  return (
-                    <div key={item.id} className="flex gap-3">
-                      <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
-                        {imageUrl ? (
-                          <Image
-                            src={imageUrl}
-                            alt={name}
-                            fill
-                            sizes="48px"
-                            className="object-cover"
-                          />
-                        ) : (
-                          <div className="text-muted-foreground absolute inset-0 flex 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>
-
-                      <div className="min-w-0 flex-1">
-                        <p className="text-foreground truncate text-sm">{name}</p>
-                        <p className="text-muted-foreground text-xs">Qty: {item.quantity}</p>
-                      </div>
-
-                      <span className="text-foreground flex-shrink-0 text-sm font-medium">
-                        {formatPrice(lineTotal, { currency }) as string}
-                      </span>
-                    </div>
-                  );
-                })}
-              </div>
-            ) : (
-              // Fallback to cart items if checkout line items aren't loaded yet
-              cart && (
-                <div className="mb-4 space-y-2">
-                  <p className="text-muted-foreground text-sm">
-                    {cart.items.length} {cart.items.length === 1 ? 'item' : 'items'}
-                  </p>
-                </div>
-              )
-            )}
-
-            {/* Totals */}
-            {checkout && (
-              <div className="border-border space-y-2 border-t pt-4 text-sm">
-                <div className="flex items-center justify-between">
-                  <span className="text-muted-foreground">Subtotal</span>
-                  <span className="text-foreground">
-                    {formatPrice(parseFloat(checkout.subtotal), { currency }) as string}
-                  </span>
-                </div>
-
-                {parseFloat(checkout.discountAmount) > 0 && (
-                  <div className="flex items-center justify-between">
-                    <span className="text-muted-foreground">Discount</span>
-                    <span className="text-destructive">
-                      -{formatPrice(parseFloat(checkout.discountAmount), { currency }) as string}
-                    </span>
-                  </div>
-                )}
-
-                {parseFloat(checkout.shippingAmount) > 0 && (
-                  <div className="flex items-center justify-between">
-                    <span className="text-muted-foreground">Shipping</span>
-                    <span className="text-foreground">
-                      {formatPrice(parseFloat(checkout.shippingAmount), { currency }) as string}
-                    </span>
-                  </div>
-                )}
-
-                <TaxDisplay
-                  addressSet={!!checkout.shippingAddress}
-                  taxAmount={checkout.taxAmount}
-                  taxBreakdown={checkout.taxBreakdown}
-                />
-
-                <div className="border-border mt-2 border-t pt-2">
-                  <div className="flex items-center justify-between">
-                    <span className="text-foreground font-semibold">Total</span>
-                    <span className="text-foreground text-base font-semibold">
-                      {formatPrice(parseFloat(checkout.total), { currency }) as string}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default function CheckoutPage() {
-  return (
-    <Suspense
-      fallback={
-        <div className="flex min-h-[60vh] items-center justify-center">
-          <LoadingSpinner size="lg" />
-        </div>
-      }
-    >
-      <CheckoutContent />
-    </Suspense>
-  );
-}
+'use client';
+
+import { Suspense, useEffect, useState, useCallback } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Image from 'next/image';
+import Link from 'next/link';
+import type {
+  Checkout,
+  ShippingRate,
+  SetShippingAddressDto,
+  ShippingDestinations,
+} from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useStoreInfo, useAuth, 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';
+import { TaxDisplay } from '@/components/checkout/tax-display';
+import { ReservationCountdown } from '@/components/cart/reservation-countdown';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { cn } from '@/lib/utils';
+
+type CheckoutStep = 'address' | 'shipping' | 'payment';
+
+function CheckoutContent() {
+  const searchParams = useSearchParams();
+  const { storeInfo } = useStoreInfo();
+  const { isLoggedIn } = useAuth();
+  const { cart } = useCart();
+  const currency = storeInfo?.currency || 'USD';
+
+  const [step, setStep] = useState<CheckoutStep>('address');
+  const [checkout, setCheckout] = useState<Checkout | null>(null);
+  const [shippingRates, setShippingRates] = useState<ShippingRate[]>([]);
+  const [selectedRateId, setSelectedRateId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [initializing, setInitializing] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [destinations, setDestinations] = useState<ShippingDestinations | null>(null);
+
+  // Check for returning from canceled payment
+  const canceled = searchParams.get('canceled') === 'true';
+  const existingCheckoutId = searchParams.get('checkout_id');
+
+  // Initialize or resume checkout
+  const initCheckout = useCallback(async () => {
+    try {
+      setInitializing(true);
+      setError(null);
+      const client = getClient();
+
+      // Fetch shipping destinations for country/region dropdowns
+      client
+        .getShippingDestinations()
+        .then(setDestinations)
+        .catch(() => {});
+
+      // If returning with existing checkout ID, resume it
+      if (existingCheckoutId) {
+        const existing = await client.getCheckout(existingCheckoutId);
+        setCheckout(existing);
+
+        // Determine step based on checkout state
+        if (existing.shippingAddress && existing.shippingRateId) {
+          setStep('payment');
+        } else if (existing.shippingAddress) {
+          // Fetch shipping rates
+          const rates = await client.getShippingRates(existing.id);
+          setShippingRates(rates);
+          setStep('shipping');
+        }
+        return;
+      }
+
+      // 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('Unable to start checkout. Please try again.');
+          }
+        }
+      } else {
+        setError('Your cart is empty.');
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to initialize checkout';
+      setError(message);
+    } finally {
+      setInitializing(false);
+    }
+  }, [existingCheckoutId, isLoggedIn, cart]);
+
+  const cartLoaded = cart !== null;
+  useEffect(() => {
+    if (cartLoaded) {
+      initCheckout();
+    }
+  }, [cartLoaded, initCheckout]);
+
+  // Handle shipping address submission
+  async function handleAddressSubmit(address: SetShippingAddressDto) {
+    if (!checkout) return;
+
+    try {
+      setLoading(true);
+      setError(null);
+      const client = getClient();
+
+      const response = await client.setShippingAddress(checkout.id, address);
+      setCheckout(response.checkout);
+      setShippingRates(response.rates);
+      setStep('shipping');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to save address';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // Handle shipping method selection
+  async function handleShippingSelect(rateId: string) {
+    if (!checkout) return;
+
+    try {
+      setLoading(true);
+      setError(null);
+      setSelectedRateId(rateId);
+      const client = getClient();
+
+      const updated = await client.selectShippingMethod(checkout.id, rateId);
+      setCheckout(updated);
+      setStep('payment');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to select shipping';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (initializing) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  // Empty cart
+  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">
+        <h1 className="text-foreground text-2xl font-bold">Your cart is empty</h1>
+        <p className="text-muted-foreground mt-2">
+          Add some items to your cart before checking out.
+        </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"
+        >
+          Shop Now
+        </Link>
+      </div>
+    );
+  }
+
+  if (error && !checkout) {
+    return (
+      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <h1 className="text-foreground text-2xl font-bold">Checkout Error</h1>
+        <p className="text-destructive mt-2">{error}</p>
+        <Link
+          href="/cart"
+          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+        >
+          Return to Cart
+        </Link>
+      </div>
+    );
+  }
+
+  const steps: { key: CheckoutStep; label: string; number: number }[] = [
+    { key: 'address', label: 'Address', number: 1 },
+    { key: 'shipping', label: 'Shipping', number: 2 },
+    { key: 'payment', label: 'Payment', number: 3 },
+  ];
+
+  const currentStepIndex = steps.findIndex((s) => s.key === step);
+
+  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">Checkout</h1>
+
+      {/* Canceled payment banner */}
+      {canceled && (
+        <div className="mb-6 rounded-lg border border-orange-200 bg-orange-50 px-4 py-3 text-sm text-orange-800 dark:border-orange-800 dark:bg-orange-950/30 dark:text-orange-300">
+          Payment was canceled. You can try again or change your payment method.
+        </div>
+      )}
+
+      {/* Reservation countdown */}
+      {checkout?.reservation?.hasReservation && (
+        <ReservationCountdown reservation={checkout.reservation} className="mb-6" />
+      )}
+
+      {/* Step indicator */}
+      <div className="mb-8 flex items-center gap-2">
+        {steps.map((s, index) => (
+          <div key={s.key} className="flex items-center">
+            {index > 0 && (
+              <div
+                className={cn(
+                  'mx-2 h-px w-8 sm:w-12',
+                  index <= currentStepIndex ? 'bg-primary' : 'bg-border'
+                )}
+              />
+            )}
+            <div className="flex items-center gap-2">
+              <div
+                className={cn(
+                  'flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium',
+                  index < currentStepIndex
+                    ? 'bg-primary text-primary-foreground'
+                    : index === currentStepIndex
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted text-muted-foreground'
+                )}
+              >
+                {index < currentStepIndex ? (
+                  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M5 13l4 4L19 7"
+                    />
+                  </svg>
+                ) : (
+                  s.number
+                )}
+              </div>
+              <span
+                className={cn(
+                  'hidden text-sm sm:block',
+                  index <= currentStepIndex
+                    ? 'text-foreground font-medium'
+                    : 'text-muted-foreground'
+                )}
+              >
+                {s.label}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Error banner */}
+      {error && checkout && (
+        <div className="bg-destructive/10 border-destructive/20 text-destructive mb-6 rounded-lg border px-4 py-3 text-sm">
+          {error}
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+        {/* Main content */}
+        <div className="lg:col-span-2">
+          {/* Step 1: Address */}
+          {step === 'address' && (
+            <div>
+              <h2 className="text-foreground mb-4 text-lg font-semibold">Shipping Address</h2>
+              <CheckoutForm
+                onSubmit={handleAddressSubmit}
+                loading={loading}
+                destinations={destinations}
+                initialValues={
+                  checkout?.shippingAddress
+                    ? {
+                        email: checkout.email || '',
+                        firstName: checkout.shippingAddress.firstName,
+                        lastName: checkout.shippingAddress.lastName,
+                        line1: checkout.shippingAddress.line1,
+                        line2: checkout.shippingAddress.line2 || '',
+                        city: checkout.shippingAddress.city,
+                        region: checkout.shippingAddress.region || '',
+                        postalCode: checkout.shippingAddress.postalCode,
+                        country: checkout.shippingAddress.country,
+                        phone: checkout.shippingAddress.phone || '',
+                      }
+                    : undefined
+                }
+              />
+            </div>
+          )}
+
+          {/* Step 2: Shipping */}
+          {step === 'shipping' && (
+            <div>
+              <div className="mb-4 flex items-center justify-between">
+                <h2 className="text-foreground text-lg font-semibold">Shipping Method</h2>
+                <button
+                  type="button"
+                  onClick={() => setStep('address')}
+                  className="text-primary text-sm hover:underline"
+                >
+                  Edit address
+                </button>
+              </div>
+
+              <ShippingStep
+                rates={shippingRates}
+                selectedRateId={selectedRateId}
+                onSelect={handleShippingSelect}
+                loading={loading}
+              />
+            </div>
+          )}
+
+          {/* Step 3: Payment */}
+          {step === 'payment' && checkout && (
+            <div>
+              <div className="mb-4 flex items-center justify-between">
+                <h2 className="text-foreground text-lg font-semibold">Payment</h2>
+                <button
+                  type="button"
+                  onClick={() => setStep('shipping')}
+                  className="text-primary text-sm hover:underline"
+                >
+                  Change shipping
+                </button>
+              </div>
+
+              <PaymentStep checkoutId={checkout.id} />
+            </div>
+          )}
+        </div>
+
+        {/* Order summary sidebar */}
+        <div className="lg:col-span-1">
+          <div className="bg-muted/50 border-border sticky top-24 rounded-lg border p-6">
+            <h3 className="text-foreground mb-4 text-lg font-semibold">Order Summary</h3>
+
+            {/* Line items */}
+            {checkout?.lineItems && checkout.lineItems.length > 0 ? (
+              <div className="mb-4 space-y-3">
+                {checkout.lineItems.map((item) => {
+                  const imageUrl = item.product.images?.[0]?.url || null;
+                  const name = item.variant?.name || item.product.name;
+                  const lineTotal = parseFloat(item.unitPrice) * item.quantity;
+
+                  return (
+                    <div key={item.id} className="flex gap-3">
+                      <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
+                        {imageUrl ? (
+                          <Image
+                            src={imageUrl}
+                            alt={name}
+                            fill
+                            sizes="48px"
+                            className="object-cover"
+                          />
+                        ) : (
+                          <div className="text-muted-foreground absolute inset-0 flex 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>
+
+                      <div className="min-w-0 flex-1">
+                        <p className="text-foreground truncate text-sm">{name}</p>
+                        <p className="text-muted-foreground text-xs">Qty: {item.quantity}</p>
+                      </div>
+
+                      <span className="text-foreground flex-shrink-0 text-sm font-medium">
+                        {formatPrice(lineTotal, { currency }) as string}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              // Fallback to cart items if checkout line items aren't loaded yet
+              cart && (
+                <div className="mb-4 space-y-2">
+                  <p className="text-muted-foreground text-sm">
+                    {cart.items.length} {cart.items.length === 1 ? 'item' : 'items'}
+                  </p>
+                </div>
+              )
+            )}
+
+            {/* Totals */}
+            {checkout && (
+              <div className="border-border space-y-2 border-t pt-4 text-sm">
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">Subtotal</span>
+                  <span className="text-foreground">
+                    {formatPrice(parseFloat(checkout.subtotal), { currency }) as string}
+                  </span>
+                </div>
+
+                {parseFloat(checkout.discountAmount) > 0 && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-muted-foreground">Discount</span>
+                    <span className="text-destructive">
+                      -{formatPrice(parseFloat(checkout.discountAmount), { currency }) as string}
+                    </span>
+                  </div>
+                )}
+
+                {parseFloat(checkout.shippingAmount) > 0 && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-muted-foreground">Shipping</span>
+                    <span className="text-foreground">
+                      {formatPrice(parseFloat(checkout.shippingAmount), { currency }) as string}
+                    </span>
+                  </div>
+                )}
+
+                <TaxDisplay
+                  addressSet={!!checkout.shippingAddress}
+                  taxAmount={checkout.taxAmount}
+                  taxBreakdown={checkout.taxBreakdown}
+                />
+
+                <div className="border-border mt-2 border-t pt-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-foreground font-semibold">Total</span>
+                    <span className="text-foreground text-base font-semibold">
+                      {formatPrice(parseFloat(checkout.total), { currency }) as string}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function CheckoutPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[60vh] items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      }
+    >
+      <CheckoutContent />
+    </Suspense>
+  );
+}