create-brainerce-store 1.0.0

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

@@ -0,0 +1,243 @@
+'use client';
+
+import { Suspense, useEffect, useState, useCallback } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import type { Product } from 'brainerce';
+import type { ProductQueryParams } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { ProductGrid } from '@/components/products/product-grid';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { cn } from '@/lib/utils';
+
+const PAGE_SIZE = 20;
+
+type SortOption = {
+  label: string;
+  sortBy: ProductQueryParams['sortBy'];
+  sortOrder: ProductQueryParams['sortOrder'];
+};
+
+const sortOptions: SortOption[] = [
+  { label: 'Newest', sortBy: 'createdAt', sortOrder: 'desc' },
+  { label: 'Name A-Z', sortBy: 'name', sortOrder: 'asc' },
+  { label: 'Name Z-A', sortBy: 'name', sortOrder: 'desc' },
+  { label: 'Price: Low to High', sortBy: 'price', sortOrder: 'asc' },
+  { label: 'Price: High to Low', sortBy: 'price', sortOrder: 'desc' },
+];
+
+interface CategoryFilter {
+  id: string;
+  name: string;
+}
+
+function ProductsContent() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const searchQuery = searchParams.get('search') || '';
+  const categoryId = searchParams.get('category') || '';
+  const sortParam = searchParams.get('sort') || '0';
+
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [categories, setCategories] = useState<CategoryFilter[]>([]);
+
+  const sortIndex = parseInt(sortParam, 10) || 0;
+  const currentSort = sortOptions[sortIndex] || sortOptions[0];
+
+  // Load categories
+  useEffect(() => {
+    async function loadCategories() {
+      try {
+        const client = getClient();
+        const result = await client.getCategories();
+        setCategories(result.categories.map((c) => ({ id: c.id, name: c.name })));
+      } catch {
+        // Categories endpoint may not be available in all modes
+      }
+    }
+    loadCategories();
+  }, []);
+
+  // Load products when filters change
+  const loadProducts = useCallback(
+    async (pageNum: number, append: boolean) => {
+      try {
+        if (append) {
+          setLoadingMore(true);
+        } else {
+          setLoading(true);
+        }
+
+        const client = getClient();
+        const params: ProductQueryParams = {
+          page: pageNum,
+          limit: PAGE_SIZE,
+          sortBy: currentSort.sortBy,
+          sortOrder: currentSort.sortOrder,
+        };
+
+        if (searchQuery) params.search = searchQuery;
+        if (categoryId) params.categories = categoryId;
+
+        const result = await client.getProducts(params);
+
+        if (append) {
+          setProducts((prev) => [...prev, ...result.data]);
+        } else {
+          setProducts(result.data);
+        }
+        setTotalPages(result.meta.totalPages);
+        setTotal(result.meta.total);
+        setPage(pageNum);
+      } catch (err) {
+        console.error('Failed to load products:', err);
+      } finally {
+        setLoading(false);
+        setLoadingMore(false);
+      }
+    },
+    [searchQuery, categoryId, currentSort.sortBy, currentSort.sortOrder]
+  );
+
+  useEffect(() => {
+    loadProducts(1, false);
+  }, [loadProducts]);
+
+  function handleLoadMore() {
+    if (page < totalPages && !loadingMore) {
+      loadProducts(page + 1, true);
+    }
+  }
+
+  function updateParam(key: string, value: string) {
+    const params = new URLSearchParams(searchParams.toString());
+    if (value) {
+      params.set(key, value);
+    } else {
+      params.delete(key);
+    }
+    router.push(`/products?${params.toString()}`);
+  }
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      {/* Page Header */}
+      <div className="mb-8">
+        <h1 className="text-foreground text-3xl font-bold">
+          {searchQuery ? `Search: "${searchQuery}"` : 'All Products'}
+        </h1>
+        {!loading && (
+          <p className="text-muted-foreground mt-1 text-sm">
+            {total} {total === 1 ? 'product' : 'products'} found
+          </p>
+        )}
+      </div>
+
+      {/* Filters and Sort */}
+      <div className="mb-6 flex flex-col items-start gap-4 sm:flex-row sm:items-center">
+        {/* Category Filter */}
+        {categories.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            <button
+              onClick={() => updateParam('category', '')}
+              className={cn(
+                'rounded-full border px-3 py-1.5 text-sm transition-colors',
+                !categoryId
+                  ? 'bg-primary text-primary-foreground border-primary'
+                  : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
+              )}
+            >
+              All
+            </button>
+            {categories.map((cat) => (
+              <button
+                key={cat.id}
+                onClick={() => updateParam('category', cat.id)}
+                className={cn(
+                  'rounded-full border px-3 py-1.5 text-sm transition-colors',
+                  categoryId === cat.id
+                    ? 'bg-primary text-primary-foreground border-primary'
+                    : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
+                )}
+              >
+                {cat.name}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Sort */}
+        <div className="flex items-center gap-2 sm:ms-auto">
+          <label htmlFor="sort" className="text-muted-foreground whitespace-nowrap text-sm">
+            Sort by:
+          </label>
+          <select
+            id="sort"
+            value={sortIndex}
+            onChange={(e) => updateParam('sort', e.target.value)}
+            className="border-border bg-background text-foreground focus:ring-primary/20 focus:border-primary h-9 rounded border px-3 text-sm focus:outline-none focus:ring-2"
+          >
+            {sortOptions.map((opt, idx) => (
+              <option key={idx} value={idx}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Products Grid */}
+      {loading ? (
+        <div className="flex items-center justify-center py-20">
+          <LoadingSpinner size="lg" />
+        </div>
+      ) : (
+        <>
+          <ProductGrid products={products} />
+
+          {/* Load More */}
+          {page < totalPages && (
+            <div className="mt-10 flex justify-center">
+              <button
+                onClick={handleLoadMore}
+                disabled={loadingMore}
+                className="bg-primary text-primary-foreground inline-flex items-center gap-2 rounded px-6 py-2.5 font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
+              >
+                {loadingMore ? (
+                  <>
+                    <LoadingSpinner
+                      size="sm"
+                      className="border-primary-foreground/30 border-t-primary-foreground"
+                    />
+                    Loading...
+                  </>
+                ) : (
+                  'Load More'
+                )}
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export default function ProductsPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[60vh] items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      }
+    >
+      <ProductsContent />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,66 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { getClient } from '@/lib/brainerce';
+import { useAuth } from '@/providers/store-provider';
+import { RegisterForm } from '@/components/auth/register-form';
+import { OAuthButtons } from '@/components/auth/oauth-buttons';
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const auth = useAuth();
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleRegister(data: {
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+  }) {
+    try {
+      setError(null);
+      const client = getClient();
+      const result = await client.registerCustomer({
+        firstName: data.firstName,
+        lastName: data.lastName,
+        email: data.email,
+        password: data.password,
+      });
+
+      if (result.requiresVerification) {
+        router.push(`/verify-email?token=${encodeURIComponent(result.token)}`);
+        return;
+      }
+
+      auth.login(result.token);
+      router.push('/');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Registration failed. Please try again.';
+      setError(message);
+    }
+  }
+
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center">
+          <h1 className="text-foreground text-2xl font-bold">Create an account</h1>
+          <p className="text-muted-foreground mt-1 text-sm">Join us to start shopping</p>
+        </div>
+
+        <RegisterForm onSubmit={handleRegister} error={error} />
+
+        <OAuthButtons />
+
+        <p className="text-muted-foreground text-center text-sm">
+          Already have an account?{' '}
+          <Link href="/login" className="text-primary font-medium hover:underline">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/verify-email/page.tsx

@@ -0,0 +1,291 @@
+'use client';
+
+import { Suspense, useState, useRef, useEffect, useCallback } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import { getClient } from '@/lib/brainerce';
+import { useAuth } from '@/providers/store-provider';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+
+const CODE_LENGTH = 6;
+const RESEND_COOLDOWN_SECONDS = 60;
+
+function VerifyEmailContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const auth = useAuth();
+
+  const token = searchParams.get('token');
+
+  const [digits, setDigits] = useState<string[]>(Array(CODE_LENGTH).fill(''));
+  const [loading, setLoading] = useState(false);
+  const [resending, setResending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [cooldown, setCooldown] = useState(0);
+
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  // Auto-focus first input on mount
+  useEffect(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+
+  // Cooldown timer
+  useEffect(() => {
+    if (cooldown <= 0) return;
+    const timer = setInterval(() => {
+      setCooldown((prev) => prev - 1);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [cooldown]);
+
+  const handleSubmit = useCallback(
+    async (code: string) => {
+      if (!token || code.length !== CODE_LENGTH || loading) return;
+
+      try {
+        setLoading(true);
+        setError(null);
+        const client = getClient();
+        const result = await client.verifyEmail(code, token);
+
+        if (result.verified) {
+          // token field exists on newer SDK versions
+          const authToken = (result as unknown as { token?: string }).token || token;
+          auth.login(authToken);
+          setSuccess('Email verified successfully! Redirecting...');
+          setTimeout(() => router.push('/'), 1500);
+        } else {
+          setError(result.message || 'Verification failed. Please try again.');
+        }
+      } catch (err) {
+        const message =
+          err instanceof Error ? err.message : 'Verification failed. Please try again.';
+        setError(message);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [token, loading, auth, router]
+  );
+
+  function handleDigitChange(index: number, value: string) {
+    // Allow only single digits
+    const digit = value.replace(/\D/g, '').slice(-1);
+
+    const newDigits = [...digits];
+    newDigits[index] = digit;
+    setDigits(newDigits);
+
+    // Auto-focus next input
+    if (digit && index < CODE_LENGTH - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+
+    // Auto-submit when all digits are filled
+    const fullCode = newDigits.join('');
+    if (fullCode.length === CODE_LENGTH) {
+      handleSubmit(fullCode);
+    }
+  }
+
+  function handleKeyDown(index: number, e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Backspace' && !digits[index] && index > 0) {
+      // Move focus to previous input on backspace when current is empty
+      inputRefs.current[index - 1]?.focus();
+    }
+  }
+
+  function handlePaste(e: React.ClipboardEvent) {
+    e.preventDefault();
+    const pastedText = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, CODE_LENGTH);
+
+    if (pastedText.length === 0) return;
+
+    const newDigits = [...digits];
+    for (let i = 0; i < pastedText.length; i++) {
+      newDigits[i] = pastedText[i];
+    }
+    setDigits(newDigits);
+
+    // Focus the next empty input, or the last filled one
+    const nextEmptyIndex = newDigits.findIndex((d) => !d);
+    const focusIndex = nextEmptyIndex === -1 ? CODE_LENGTH - 1 : nextEmptyIndex;
+    inputRefs.current[focusIndex]?.focus();
+
+    // Auto-submit if all digits pasted
+    if (pastedText.length === CODE_LENGTH) {
+      handleSubmit(pastedText);
+    }
+  }
+
+  async function handleResend() {
+    if (!token || resending || cooldown > 0) return;
+
+    try {
+      setResending(true);
+      setError(null);
+      const client = getClient();
+      await client.resendVerificationEmail(token);
+      setSuccess('Verification code sent! Check your email.');
+      setCooldown(RESEND_COOLDOWN_SECONDS);
+      // Clear digits for fresh entry
+      setDigits(Array(CODE_LENGTH).fill(''));
+      inputRefs.current[0]?.focus();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to resend code.';
+      setError(message);
+    } finally {
+      setResending(false);
+    }
+  }
+
+  function handleFormSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const code = digits.join('');
+    handleSubmit(code);
+  }
+
+  // No token provided
+  if (!token) {
+    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-muted-foreground mx-auto h-12 w-12"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+            />
+          </svg>
+          <h1 className="text-foreground text-2xl font-bold">Verification link invalid</h1>
+          <p className="text-muted-foreground text-sm">
+            This verification link is missing required information. Please try registering again.
+          </p>
+          <Link
+            href="/register"
+            className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+          >
+            Go to Register
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center">
+          <svg
+            className="text-primary mx-auto mb-3 h-12 w-12"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+            />
+          </svg>
+          <h1 className="text-foreground text-2xl font-bold">Verify your email</h1>
+          <p className="text-muted-foreground mt-1 text-sm">
+            Enter the 6-digit code we sent to your email address.
+          </p>
+        </div>
+
+        {error && (
+          <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
+            {error}
+          </div>
+        )}
+
+        {success && (
+          <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-300">
+            {success}
+          </div>
+        )}
+
+        <form onSubmit={handleFormSubmit} className="space-y-6">
+          {/* Digit inputs */}
+          <div className="flex justify-center gap-2 sm:gap-3" onPaste={handlePaste}>
+            {digits.map((digit, index) => (
+              <input
+                key={index}
+                ref={(el) => {
+                  inputRefs.current[index] = el;
+                }}
+                type="text"
+                inputMode="numeric"
+                autoComplete="one-time-code"
+                maxLength={1}
+                value={digit}
+                onChange={(e) => handleDigitChange(index, e.target.value)}
+                onKeyDown={(e) => handleKeyDown(index, e)}
+                disabled={loading}
+                className="border-border bg-background text-foreground focus:ring-primary/20 focus:border-primary h-12 w-11 rounded border text-center text-xl font-semibold focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-14 sm:w-12"
+                aria-label={`Digit ${index + 1}`}
+              />
+            ))}
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading || digits.join('').length !== CODE_LENGTH}
+            className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {loading ? (
+              <>
+                <LoadingSpinner
+                  size="sm"
+                  className="border-primary-foreground/30 border-t-primary-foreground"
+                />
+                Verifying...
+              </>
+            ) : (
+              'Verify Email'
+            )}
+          </button>
+        </form>
+
+        {/* Resend code */}
+        <div className="text-center">
+          <p className="text-muted-foreground text-sm">
+            Didn&apos;t receive the code?{' '}
+            <button
+              type="button"
+              onClick={handleResend}
+              disabled={resending || cooldown > 0}
+              className="text-primary font-medium hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50"
+            >
+              {resending ? 'Sending...' : cooldown > 0 ? `Resend in ${cooldown}s` : 'Resend code'}
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function VerifyEmailPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[60vh] items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      }
+    >
+      <VerifyEmailContent />
+    </Suspense>
+  );
+}