create-brainerce-store 1.0.0

package/templates/nextjs/base/src/app/order-confirmation/page.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { Suspense, useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import type { WaitForOrderResult } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+
+function OrderConfirmationContent() {
+  const searchParams = useSearchParams();
+  const checkoutId = searchParams.get('checkout_id');
+
+  const [result, setResult] = useState<WaitForOrderResult | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!checkoutId) {
+      setError('Missing checkout information.');
+      setLoading(false);
+      return;
+    }
+
+    async function waitForOrder() {
+      try {
+        const client = getClient();
+        const orderResult = await client.waitForOrder(checkoutId!, {
+          maxWaitMs: 30000,
+        });
+        setResult(orderResult);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Failed to confirm order';
+        setError(message);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    waitForOrder();
+  }, [checkoutId]);
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[60vh] flex-col items-center justify-center">
+        <LoadingSpinner size="lg" />
+        <p className="text-muted-foreground mt-4">Confirming your order...</p>
+        <p className="text-muted-foreground mt-1 text-xs">This may take a few seconds.</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <svg
+          className="text-destructive 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="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">Something went wrong</h1>
+        <p className="text-muted-foreground mt-2">{error}</p>
+        <p className="text-muted-foreground mt-1 text-sm">
+          If you were charged, your order may still be processing. Please check your email for a
+          confirmation.
+        </p>
+        <Link
+          href="/"
+          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 Home
+        </Link>
+      </div>
+    );
+  }
+
+  // Order was created successfully
+  if (result?.success) {
+    const orderNumber = result.status.orderNumber;
+
+    return (
+      <div className="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <svg
+          className="text-primary 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+
+        <h1 className="text-foreground text-2xl font-bold">Thank you for your order!</h1>
+
+        {orderNumber && (
+          <p className="text-foreground mt-3 text-lg">
+            Order Number: <span className="font-semibold">{orderNumber}</span>
+          </p>
+        )}
+
+        <p className="text-muted-foreground mt-2">
+          We&apos;ve sent a confirmation email with your order details.
+        </p>
+
+        <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
+          <Link
+            href="/products"
+            className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+          >
+            Continue Shopping
+          </Link>
+
+          <Link
+            href="/account"
+            className="border-border text-foreground hover:bg-muted inline-flex items-center rounded border px-6 py-3 font-medium transition-colors"
+          >
+            View Orders
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // Order not yet confirmed (polling timed out) - still show success
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 lg:px-8">
+      <svg
+        className="text-primary 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+
+      <h1 className="text-foreground text-2xl font-bold">Payment received!</h1>
+
+      <p className="text-muted-foreground mt-2">
+        Your order is being processed. You&apos;ll receive a confirmation email shortly with your
+        order details.
+      </p>
+
+      <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
+        <Link
+          href="/products"
+          className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+        >
+          Continue Shopping
+        </Link>
+
+        <Link
+          href="/account"
+          className="border-border text-foreground hover:bg-muted inline-flex items-center rounded border px-6 py-3 font-medium transition-colors"
+        >
+          View Orders
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default function OrderConfirmationPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[60vh] items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      }
+    >
+      <OrderConfirmationContent />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,95 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import type { Product, DiscountBanner } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useStoreInfo } from '@/providers/store-provider';
+import { ProductGrid } from '@/components/products/product-grid';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+
+export default function HomePage() {
+  const { storeInfo, loading: storeLoading } = useStoreInfo();
+  const [products, setProducts] = useState<Product[]>([]);
+  const [banners, setBanners] = useState<DiscountBanner[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const client = getClient();
+        const [productsRes, bannersRes] = await Promise.allSettled([
+          client.getProducts({ limit: 8, sortBy: 'createdAt', sortOrder: 'desc' }),
+          client.getDiscountBanners(),
+        ]);
+
+        if (productsRes.status === 'fulfilled') {
+          setProducts(productsRes.value.data);
+        }
+        if (bannersRes.status === 'fulfilled') {
+          setBanners(bannersRes.value);
+        }
+      } catch (err) {
+        console.error('Failed to load home page data:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    load();
+  }, []);
+
+  if (storeLoading || loading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Discount Banners */}
+      {banners.length > 0 && (
+        <div className="bg-primary text-primary-foreground">
+          <div className="mx-auto max-w-7xl px-4 py-2 sm:px-6 lg:px-8">
+            <div className="flex items-center justify-center gap-4 overflow-x-auto text-sm font-medium">
+              {banners.map((banner) => (
+                <span key={banner.ruleId}>{banner.text}</span>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Hero Section */}
+      <section className="bg-muted">
+        <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
+          <h1 className="text-foreground text-4xl font-bold tracking-tight sm:text-5xl">
+            Welcome to {storeInfo?.name || 'Our Store'}
+          </h1>
+          <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
+            Discover our curated collection of products crafted with care.
+          </p>
+          <Link
+            href="/products"
+            className="bg-primary text-primary-foreground mt-8 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+          >
+            Shop Now
+          </Link>
+        </div>
+      </section>
+
+      {/* Featured Products */}
+      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+        <div className="mb-8 flex items-center justify-between">
+          <h2 className="text-foreground text-2xl font-bold">Featured Products</h2>
+          <Link href="/products" className="text-primary text-sm font-medium hover:underline">
+            View all
+          </Link>
+        </div>
+        <ProductGrid products={products} />
+      </section>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -0,0 +1,346 @@
+'use client';
+
+import { useEffect, useState, useMemo } from 'react';
+import { useParams } from 'next/navigation';
+import Image from 'next/image';
+import Link from 'next/link';
+import type { Product, ProductVariant, ProductImage } from 'brainerce';
+import { getProductPriceInfo, getDescriptionContent } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useCart } from '@/providers/store-provider';
+import { PriceDisplay } from '@/components/shared/price-display';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { VariantSelector } from '@/components/products/variant-selector';
+import { StockBadge } from '@/components/products/stock-badge';
+import { cn } from '@/lib/utils';
+
+export default function ProductDetailPage() {
+  const params = useParams();
+  const slug = params.slug as string;
+  const { refreshCart } = useCart();
+  const [product, setProduct] = useState<Product | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const [quantity, setQuantity] = useState(1);
+  const [addingToCart, setAddingToCart] = useState(false);
+  const [addedMessage, setAddedMessage] = useState(false);
+
+  // Load product
+  useEffect(() => {
+    async function load() {
+      try {
+        setLoading(true);
+        setError(null);
+        const client = getClient();
+        const p = await client.getProductBySlug(slug);
+        setProduct(p);
+
+        // Auto-select first variant
+        if (p.variants && p.variants.length > 0) {
+          setSelectedVariant(p.variants[0]);
+        }
+      } catch {
+        setError('Product not found.');
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, [slug]);
+
+  // Images list - switch main image when variant changes
+  const images: ProductImage[] = useMemo(() => {
+    return product?.images || [];
+  }, [product]);
+
+  // When variant changes, update selected image to variant image if available
+  useEffect(() => {
+    if (!selectedVariant?.image || !product) return;
+
+    const variantImgUrl =
+      typeof selectedVariant.image === 'string' ? selectedVariant.image : selectedVariant.image.url;
+
+    // Find if variant image exists in product images
+    const idx = images.findIndex((img) => img.url === variantImgUrl);
+    if (idx >= 0) {
+      setSelectedImageIndex(idx);
+    } else {
+      // Variant image not in product images - select index 0 as fallback
+      // (The variant image will be shown as the main image via override)
+      setSelectedImageIndex(-1);
+    }
+  }, [selectedVariant, images, product]);
+
+  // Determine which image to show
+  const mainImageUrl = useMemo(() => {
+    if (selectedImageIndex === -1 && selectedVariant?.image) {
+      const img = selectedVariant.image;
+      return typeof img === 'string' ? img : img.url;
+    }
+    return images[selectedImageIndex]?.url || null;
+  }, [selectedImageIndex, selectedVariant, images]);
+
+  // Price info - use variant price if selected, else product price
+  const priceInfo = useMemo(() => {
+    if (selectedVariant?.price) {
+      return {
+        price: parseFloat(selectedVariant.salePrice || selectedVariant.price),
+        originalPrice: parseFloat(selectedVariant.price),
+        isOnSale:
+          selectedVariant.salePrice != null &&
+          parseFloat(selectedVariant.salePrice) < parseFloat(selectedVariant.price),
+        discountPercent:
+          selectedVariant.salePrice != null &&
+          parseFloat(selectedVariant.salePrice) < parseFloat(selectedVariant.price)
+            ? Math.round(
+                ((parseFloat(selectedVariant.price) - parseFloat(selectedVariant.salePrice)) /
+                  parseFloat(selectedVariant.price)) *
+                  100
+              )
+            : 0,
+      };
+    }
+    return getProductPriceInfo(product);
+  }, [product, selectedVariant]);
+
+  // Inventory: use variant inventory if selected, else product inventory
+  const inventory = selectedVariant?.inventory ?? product?.inventory ?? null;
+  const canPurchase = inventory?.canPurchase !== false;
+
+  // Description
+  const description = useMemo(() => {
+    return product ? getDescriptionContent(product) : null;
+  }, [product]);
+
+  async function handleAddToCart() {
+    if (!product || addingToCart) return;
+
+    try {
+      setAddingToCart(true);
+      const client = getClient();
+      await client.smartAddToCart({
+        productId: product.id,
+        variantId: selectedVariant?.id,
+        quantity,
+        name: product.name,
+        price: String(priceInfo.price),
+        image: mainImageUrl || undefined,
+      });
+      await refreshCart();
+      setAddedMessage(true);
+      setTimeout(() => setAddedMessage(false), 2000);
+    } catch (err) {
+      console.error('Failed to add to cart:', err);
+    } finally {
+      setAddingToCart(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  if (error || !product) {
+    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">{error || 'Product not found'}</h1>
+        <Link href="/products" className="text-primary mt-4 inline-block hover:underline">
+          Back to products
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12">
+        {/* Image Gallery */}
+        <div className="space-y-4">
+          {/* Main Image */}
+          <div className="bg-muted relative aspect-square overflow-hidden rounded-lg">
+            {mainImageUrl ? (
+              <Image
+                src={mainImageUrl}
+                alt={product.name}
+                fill
+                sizes="(max-width: 1024px) 100vw, 50vw"
+                className="object-contain"
+                priority
+              />
+            ) : (
+              <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+                <svg className="h-24 w-24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={1}
+                    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>
+
+          {/* Thumbnails */}
+          {images.length > 1 && (
+            <div className="flex gap-2 overflow-x-auto pb-2">
+              {images.map((img, idx) => (
+                <button
+                  key={idx}
+                  type="button"
+                  onClick={() => setSelectedImageIndex(idx)}
+                  className={cn(
+                    'relative h-16 w-16 flex-shrink-0 overflow-hidden rounded border-2 transition-colors',
+                    selectedImageIndex === idx
+                      ? 'border-primary'
+                      : 'border-border hover:border-muted-foreground'
+                  )}
+                >
+                  <Image
+                    src={img.url}
+                    alt={img.alt || `${product.name} ${idx + 1}`}
+                    fill
+                    sizes="64px"
+                    className="object-cover"
+                  />
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Product Info */}
+        <div className="space-y-6">
+          {/* Categories */}
+          {product.categories && product.categories.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {product.categories.map((cat) => (
+                <span
+                  key={cat.id}
+                  className="text-muted-foreground bg-muted rounded px-2 py-1 text-xs"
+                >
+                  {cat.name}
+                </span>
+              ))}
+            </div>
+          )}
+
+          {/* Title */}
+          <h1 className="text-foreground text-2xl font-bold sm:text-3xl">{product.name}</h1>
+
+          {/* Price */}
+          <PriceDisplay
+            price={priceInfo.originalPrice}
+            salePrice={priceInfo.isOnSale ? priceInfo.price : undefined}
+            size="lg"
+          />
+
+          {/* Stock */}
+          <StockBadge inventory={inventory} lowStockThreshold={5} />
+
+          {/* Variant Selector */}
+          {product.type === 'VARIABLE' && product.variants && product.variants.length > 0 && (
+            <VariantSelector
+              product={product}
+              selectedVariant={selectedVariant}
+              onVariantChange={setSelectedVariant}
+            />
+          )}
+
+          {/* Quantity + Add to Cart */}
+          <div className="flex items-center gap-4">
+            <div className="border-border flex items-center rounded border">
+              <button
+                type="button"
+                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+                className="text-foreground hover:bg-muted px-3 py-2 transition-colors"
+                aria-label="Decrease quantity"
+              >
+                -
+              </button>
+              <span className="text-foreground min-w-[3rem] px-4 py-2 text-center text-sm font-medium">
+                {quantity}
+              </span>
+              <button
+                type="button"
+                onClick={() => setQuantity((q) => q + 1)}
+                className="text-foreground hover:bg-muted px-3 py-2 transition-colors"
+                aria-label="Increase quantity"
+              >
+                +
+              </button>
+            </div>
+
+            <button
+              type="button"
+              onClick={handleAddToCart}
+              disabled={!canPurchase || addingToCart}
+              className={cn(
+                'flex-1 rounded px-6 py-3 text-sm font-medium transition-all',
+                canPurchase
+                  ? 'bg-primary text-primary-foreground hover:opacity-90'
+                  : 'bg-muted text-muted-foreground cursor-not-allowed'
+              )}
+            >
+              {addingToCart ? (
+                <span className="inline-flex items-center gap-2">
+                  <LoadingSpinner
+                    size="sm"
+                    className="border-primary-foreground/30 border-t-primary-foreground"
+                  />
+                  Adding...
+                </span>
+              ) : addedMessage ? (
+                'Added to Cart!'
+              ) : !canPurchase ? (
+                'Out of Stock'
+              ) : (
+                'Add to Cart'
+              )}
+            </button>
+          </div>
+
+          {/* Description */}
+          {description && (
+            <div className="border-border border-t pt-4">
+              <h2 className="text-foreground mb-3 text-lg font-semibold">Description</h2>
+              {'html' in description ? (
+                <div
+                  className="prose prose-sm text-muted-foreground max-w-none"
+                  dangerouslySetInnerHTML={{ __html: description.html }}
+                />
+              ) : (
+                <p className="text-muted-foreground whitespace-pre-wrap">{description.text}</p>
+              )}
+            </div>
+          )}
+
+          {/* Metafields / Specifications */}
+          {product.metafields && product.metafields.length > 0 && (
+            <div className="border-border border-t pt-4">
+              <h2 className="text-foreground mb-3 text-lg font-semibold">Specifications</h2>
+              <table className="w-full text-sm">
+                <tbody>
+                  {product.metafields.map((field) => (
+                    <tr key={field.id} className="border-border border-b last:border-0">
+                      <td className="text-foreground whitespace-nowrap py-2 pe-4 font-medium">
+                        {field.definitionName}
+                      </td>
+                      <td className="text-muted-foreground py-2">{field.value}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}