create-brainerce-store 1.0.0

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

@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import type { CustomerProfile, Order } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useAuth } from '@/providers/store-provider';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { ProfileSection } from '@/components/account/profile-section';
+import { OrderHistory } from '@/components/account/order-history';
+
+export default function AccountPage() {
+  const router = useRouter();
+  const { isLoggedIn, logout } = useAuth();
+  const [profile, setProfile] = useState<CustomerProfile | null>(null);
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      router.push('/login');
+      return;
+    }
+
+    async function loadAccountData() {
+      try {
+        const client = getClient();
+        const [profileResult, ordersResult] = await Promise.allSettled([
+          client.getMyProfile(),
+          client.getMyOrders({ limit: 20 }),
+        ]);
+
+        if (profileResult.status === 'fulfilled') {
+          setProfile(profileResult.value);
+        } else {
+          setError('Failed to load profile.');
+        }
+
+        if (ordersResult.status === 'fulfilled') {
+          setOrders(ordersResult.value.data);
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Failed to load account data.';
+        setError(message);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadAccountData();
+  }, [isLoggedIn, router]);
+
+  if (!isLoggedIn) {
+    return null;
+  }
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  if (error && !profile) {
+    return (
+      <div className="mx-auto max-w-3xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <h1 className="text-foreground text-2xl font-bold">Something went wrong</h1>
+        <p className="text-muted-foreground mt-2">{error}</p>
+        <button
+          type="button"
+          onClick={() => window.location.reload()}
+          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+        >
+          Try Again
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-foreground text-2xl font-bold">My Account</h1>
+        <button
+          type="button"
+          onClick={logout}
+          className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+        >
+          Sign out
+        </button>
+      </div>
+
+      {/* Profile Section */}
+      {profile && <ProfileSection profile={profile} className="mb-8" />}
+
+      {/* Order History */}
+      <div>
+        <h2 className="text-foreground mb-4 text-lg font-semibold">Order History</h2>
+        <OrderHistory orders={orders} />
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/auth/callback/page.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { Suspense, useEffect, useState, useRef } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import type { CustomerOAuthProvider } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useAuth } from '@/providers/store-provider';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+
+function OAuthCallbackContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const auth = useAuth();
+  const [error, setError] = useState<string | null>(null);
+  const processedRef = useRef(false);
+
+  const code = searchParams.get('code');
+  const state = searchParams.get('state');
+  const provider = searchParams.get('provider') as CustomerOAuthProvider | null;
+
+  useEffect(() => {
+    // Prevent double-processing in React StrictMode
+    if (processedRef.current) return;
+    processedRef.current = true;
+
+    async function handleCallback() {
+      if (!code || !provider) {
+        setError('Missing authentication parameters. Please try again.');
+        return;
+      }
+
+      try {
+        const client = getClient();
+        const result = await client.handleOAuthCallback(provider, code, state || '');
+
+        auth.login(result.token);
+        router.push('/');
+      } catch (err) {
+        const message =
+          err instanceof Error ? err.message : 'Authentication failed. Please try again.';
+        setError(message);
+      }
+    }
+
+    handleCallback();
+  }, [code, state, provider, auth, router]);
+
+  if (error) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+        <div className="w-full max-w-md space-y-4 text-center">
+          <svg
+            className="text-destructive mx-auto h-12 w-12"
+            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 4c-.77-.834-2.694-.834-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+            />
+          </svg>
+          <h1 className="text-foreground text-2xl font-bold">Authentication failed</h1>
+          <p className="text-muted-foreground text-sm">{error}</p>
+          <button
+            type="button"
+            onClick={() => router.push('/login')}
+            className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+          >
+            Back to Login
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4 py-12">
+      <LoadingSpinner size="lg" />
+      <p className="text-muted-foreground mt-4">Completing sign in...</p>
+    </div>
+  );
+}
+
+export default function OAuthCallbackPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[60vh] items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      }
+    >
+      <OAuthCallbackContent />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,263 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import type { LocalCart, LocalCartItem } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useStoreInfo, 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 { LoadingSpinner } from '@/components/shared/loading-spinner';
+
+export default function CartPage() {
+  const { storeInfo } = useStoreInfo();
+  const { cart, cartLoading, refreshCart, itemCount, isServerCart } = useCart();
+  const currency = storeInfo?.currency || 'USD';
+
+  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">Your cart is empty</h1>
+        <p className="text-muted-foreground mt-2">
+          Looks like you haven&apos;t added anything to your cart yet.
+        </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"
+        >
+          Continue Shopping
+        </Link>
+      </div>
+    );
+  }
+
+  const serverCart = isServerCart(cart) ? cart : null;
+
+  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">
+        Shopping Cart ({itemCount} {itemCount === 1 ? 'item' : 'items'})
+      </h1>
+
+      {/* Reservation countdown */}
+      {serverCart?.reservation?.hasReservation && (
+        <ReservationCountdown reservation={serverCart.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 */}
+          {serverCart?.nudges && serverCart.nudges.length > 0 && (
+            <CartNudges nudges={serverCart.nudges} className="mb-4" />
+          )}
+
+          {/* Server cart items */}
+          {serverCart && (
+            <div>
+              {serverCart.items.map((item) => (
+                <CartItem key={item.id} item={item} onUpdate={refreshCart} />
+              ))}
+            </div>
+          )}
+
+          {/* Local cart items (guest) */}
+          {!serverCart && (
+            <div>
+              {(cart as LocalCart).items.map((item: LocalCartItem) => (
+                <LocalCartItemRow
+                  key={`${item.productId}-${item.variantId || 'default'}`}
+                  item={item}
+                  currency={currency}
+                  onUpdate={refreshCart}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Coupon input - server cart only */}
+          {serverCart && (
+            <div className="border-border mt-6 border-t pt-4">
+              <CouponInput cart={serverCart} 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"
+            >
+              Proceed to Checkout
+            </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"
+            >
+              Continue Shopping
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Local cart item display for guest users
+function LocalCartItemRow({
+  item,
+  currency,
+  onUpdate,
+}: {
+  item: LocalCartItem;
+  currency: string;
+  onUpdate: () => void;
+}) {
+  const [updating, setUpdating] = useState(false);
+  const [removing, setRemoving] = useState(false);
+
+  const unitPrice = parseFloat(item.price || '0');
+  const lineTotal = unitPrice * item.quantity;
+
+  async function handleQuantityChange(newQuantity: number) {
+    if (newQuantity < 1 || updating) return;
+
+    try {
+      setUpdating(true);
+      const { getClient } = await import('@/lib/brainerce');
+      const client = getClient();
+      await client.smartUpdateCartItem(item.productId, newQuantity, item.variantId);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to update quantity:', err);
+    } finally {
+      setUpdating(false);
+    }
+  }
+
+  async function handleRemove() {
+    if (removing) return;
+
+    try {
+      setRemoving(true);
+      const { getClient } = await import('@/lib/brainerce');
+      const client = getClient();
+      await client.smartRemoveFromCart(item.productId, item.variantId);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to remove item:', err);
+    } finally {
+      setRemoving(false);
+    }
+  }
+
+  return (
+    <div className="border-border flex gap-4 border-b py-4 last:border-0">
+      {/* Image */}
+      <div className="bg-muted relative h-20 w-20 flex-shrink-0 overflow-hidden rounded">
+        {item.image ? (
+          <Image
+            src={item.image}
+            alt={item.name || 'Product'}
+            fill
+            sizes="80px"
+            className="object-cover"
+          />
+        ) : (
+          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+            <svg className="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>
+
+      {/* Details */}
+      <div className="min-w-0 flex-1">
+        <h3 className="text-foreground truncate text-sm font-medium">{item.name || 'Product'}</h3>
+
+        <p className="text-muted-foreground mt-1 text-sm">
+          {formatPrice(unitPrice, { currency }) as string}
+        </p>
+
+        <div className="mt-2 flex items-center gap-3">
+          <div className="border-border flex items-center rounded border">
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity - 1)}
+              disabled={updating || item.quantity <= 1}
+              className="text-foreground hover:bg-muted px-2 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+              aria-label="Decrease quantity"
+            >
+              -
+            </button>
+            <span className="text-foreground min-w-[2.5rem] px-3 py-1 text-center text-sm font-medium">
+              {item.quantity}
+            </span>
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity + 1)}
+              disabled={updating}
+              className="text-foreground hover:bg-muted px-2 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+              aria-label="Increase quantity"
+            >
+              +
+            </button>
+          </div>
+
+          <button
+            type="button"
+            onClick={handleRemove}
+            disabled={removing}
+            className="text-destructive hover:text-destructive/80 text-xs transition-colors disabled:opacity-40"
+          >
+            {removing ? 'Removing...' : 'Remove'}
+          </button>
+        </div>
+      </div>
+
+      {/* Line total */}
+      <div className="flex-shrink-0 text-end">
+        <span className="text-foreground text-sm font-medium">
+          {formatPrice(lineTotal, { currency }) as string}
+        </span>
+      </div>
+    </div>
+  );
+}