create-brainerce-store 1.50.5 → 1.52.0

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

@@ -1,627 +1,8 @@
 'use client';
 
-import { Suspense, useEffect, useMemo, useState, useCallback, useRef } from 'react';
-import { useSearchParams } from 'next/navigation';
-import { useRouter } from '@/lib/navigation';
-import type { Product, ProductQueryParams, PublicMetafieldDefinition } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { ProductGrid } from '@/components/products/product-grid';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-
-const PAGE_SIZE = 20;
-
-/**
- * Metafield (custom-field) values are passed in the URL as `mf_<key>=v1,v2`
- * for readability (no JSON encoding). The SDK assembles them back into
- * `{ [key]: string[] }` before calling `client.getProducts`.
- *
- * Only definitions with `filterable: true` of type SELECT / MULTI_SELECT /
- * BOOLEAN are honored server-side — the storefront renders facets only for
- * those.
- */
-const METAFIELD_URL_PREFIX = 'mf_';
-const FILTERABLE_TYPES = new Set(['SELECT', 'MULTI_SELECT', 'BOOLEAN']);
-
-type SortOption = {
-  labelKey: 'sortNewest' | 'sortNameAZ' | 'sortNameZA' | 'sortPriceLow' | 'sortPriceHigh';
-  sortBy: ProductQueryParams['sortBy'];
-  sortOrder: ProductQueryParams['sortOrder'];
-};
-
-const sortOptions: SortOption[] = [
-  { labelKey: 'sortNewest', sortBy: 'createdAt', sortOrder: 'desc' },
-  { labelKey: 'sortNameAZ', sortBy: 'name', sortOrder: 'asc' },
-  { labelKey: 'sortNameZA', sortBy: 'name', sortOrder: 'desc' },
-  { labelKey: 'sortPriceLow', sortBy: 'price', sortOrder: 'asc' },
-  { labelKey: 'sortPriceHigh', sortBy: 'price', sortOrder: 'desc' },
-];
-
-interface CategoryNode {
-  id: string;
-  name: string;
-  image?: string | null;
-  parentId?: string | null;
-  children: CategoryNode[];
-}
-
-/** Collect all descendant IDs (including self) */
-function getAllDescendantIds(node: CategoryNode): string[] {
-  const ids = [node.id];
-  for (const child of node.children) {
-    ids.push(...getAllDescendantIds(child));
-  }
-  return ids;
-}
-
-/** Check if a category or any of its descendants matches the selected ID */
-function isActiveInTree(node: CategoryNode, selectedId: string): boolean {
-  if (node.id === selectedId) return true;
-  return node.children.some((child) => isActiveInTree(child, selectedId));
-}
-
-/** Chevron down SVG */
-function ChevronDown({ className }: { className?: string }) {
-  return (
-    <svg
-      className={className}
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M3 4.5L6 7.5L9 4.5" />
-    </svg>
-  );
-}
-
-/** Recursive dropdown items for nested categories */
-function CategoryDropdownItems({
-  items,
-  depth,
-  selectedId,
-  onSelect,
-}: {
-  items: CategoryNode[];
-  depth: number;
-  selectedId: string;
-  onSelect: (id: string) => void;
-}) {
-  return (
-    <>
-      {items.map((child) => (
-        <div key={child.id}>
-          <button
-            onClick={() => onSelect(child.id)}
-            className={cn(
-              'hover:bg-muted w-full px-4 py-2 text-start text-sm transition-colors',
-              selectedId === child.id && 'bg-primary/10 text-primary font-medium'
-            )}
-            style={{ paddingInlineStart: `${(depth + 1) * 16}px` }}
-          >
-            {child.name}
-          </button>
-          {child.children.length > 0 && (
-            <CategoryDropdownItems
-              items={child.children}
-              depth={depth + 1}
-              selectedId={selectedId}
-              onSelect={onSelect}
-            />
-          )}
-        </div>
-      ))}
-    </>
-  );
-}
-
-/** Category chip with dropdown for subcategories */
-function CategoryChip({
-  category,
-  selectedId,
-  onSelect,
-  tc,
-}: {
-  category: CategoryNode;
-  selectedId: string;
-  onSelect: (id: string) => void;
-  tc: (key: string) => string;
-}) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-  const hasChildren = category.children.length > 0;
-  const isActive = isActiveInTree(category, selectedId);
-
-  // Find the display name for the selected subcategory
-  function findName(nodes: CategoryNode[], id: string): string | null {
-    for (const n of nodes) {
-      if (n.id === id) return n.name;
-      const found = findName(n.children, id);
-      if (found) return found;
-    }
-    return null;
-  }
-
-  const selectedChildName =
-    isActive && selectedId !== category.id ? findName(category.children, selectedId) : null;
-
-  // Close dropdown on outside click
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [open]);
-
-  if (!hasChildren) {
-    return (
-      <button
-        onClick={() => onSelect(category.id)}
-        className={cn(
-          'rounded-full border px-3 py-1.5 text-sm transition-colors',
-          selectedId === category.id
-            ? 'bg-primary text-primary-foreground border-primary'
-            : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
-        )}
-      >
-        {category.name}
-      </button>
-    );
-  }
-
-  return (
-    <div ref={ref} className="relative">
-      <button
-        onClick={() => setOpen((prev) => !prev)}
-        className={cn(
-          'inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-sm transition-colors',
-          isActive
-            ? 'bg-primary text-primary-foreground border-primary'
-            : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
-        )}
-      >
-        {category.name}
-        {selectedChildName && (
-          <span className="opacity-80">
-            {'·'} {selectedChildName}
-          </span>
-        )}
-        <ChevronDown className={cn('ms-0.5 transition-transform', open && 'rotate-180')} />
-      </button>
-
-      {open && (
-        <div className="bg-background border-border absolute start-0 top-full z-50 mt-1 min-w-[180px] overflow-hidden rounded-lg border shadow-lg">
-          {/* "All in [category]" option */}
-          <button
-            onClick={() => {
-              onSelect(category.id);
-              setOpen(false);
-            }}
-            className={cn(
-              'hover:bg-muted w-full px-4 py-2 text-start text-sm font-medium transition-colors',
-              selectedId === category.id && 'bg-primary/10 text-primary'
-            )}
-          >
-            {tc('all')} {category.name}
-          </button>
-          <div className="bg-border mx-2 h-px" />
-          {/* Recursive children */}
-          <div onClick={() => setOpen(false)}>
-            <CategoryDropdownItems
-              items={category.children}
-              depth={0}
-              selectedId={selectedId}
-              onSelect={onSelect}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ProductsContent() {
-  const searchParams = useSearchParams();
-  const router = useRouter();
-  const t = useTranslations('products');
-  const tc = useTranslations('common');
-
-  const searchQuery = searchParams.get('search') || '';
-  const categoryId = searchParams.get('category') || '';
-  const brandId = searchParams.get('brand') || '';
-  const tagId = searchParams.get('tag') || '';
-  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<CategoryNode[]>([]);
-  const [brands, setBrands] = useState<Array<{ id: string; name: string }>>([]);
-  const [tags, setTags] = useState<Array<{ id: string; name: string }>>([]);
-  const [metafieldDefs, setMetafieldDefs] = useState<PublicMetafieldDefinition[]>([]);
-
-  const sortIndex = parseInt(sortParam, 10) || 0;
-  const currentSort = sortOptions[sortIndex] || sortOptions[0];
-
-  // Load categories, brands, tags, and metafield definitions (for custom-field facets).
-  // The metafield-definitions endpoint already returns only definitions
-  // published to this sales channel; we filter client-side to the ones flagged
-  // `filterable: true` and of a UI-renderable type.
-  useEffect(() => {
-    async function loadFilters() {
-      const client = getClient();
-      const [catRes, brandRes, tagRes, mfRes] = await Promise.allSettled([
-        client.getCategories(),
-        client.getBrands(),
-        client.getTags(),
-        client.getPublicMetafieldDefinitions(),
-      ]);
-      if (catRes.status === 'fulfilled') setCategories(catRes.value.categories as CategoryNode[]);
-      if (brandRes.status === 'fulfilled') setBrands(brandRes.value.brands);
-      if (tagRes.status === 'fulfilled') setTags(tagRes.value.tags);
-      if (mfRes.status === 'fulfilled') {
-        setMetafieldDefs(
-          mfRes.value.definitions.filter(
-            (d) => d.filterable === true && FILTERABLE_TYPES.has(d.type)
-          )
-        );
-      }
-    }
-    loadFilters();
-  }, []);
-
-  // Stable serialized signature of the selected metafield facets — used as
-  // the `loadProducts` dependency (and to derive the SDK shape). When no
-  // facets are selected, this is `''` so the SDK call omits `metafields`
-  // entirely and the backend short-circuits the filter branch.
-  const metafieldsKey = useMemo(() => {
-    if (metafieldDefs.length === 0) return '';
-    const parts: string[] = [];
-    for (const def of metafieldDefs) {
-      const raw = searchParams.get(`${METAFIELD_URL_PREFIX}${def.key}`);
-      if (raw) parts.push(`${def.key}=${raw}`);
-    }
-    return parts.sort().join('&');
-  }, [metafieldDefs, searchParams]);
-
-  // 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;
-        if (brandId) params.brands = brandId;
-        if (tagId) params.tags = tagId;
-        // Build the `metafields` shape from `metafieldsKey` (each segment is
-        // `key=v1,v2`). Equivalent to reading the URL params directly but
-        // tied to the stable signature already in this callback's deps.
-        if (metafieldsKey) {
-          const mf: Record<string, string[]> = {};
-          for (const segment of metafieldsKey.split('&')) {
-            const eq = segment.indexOf('=');
-            if (eq < 0) continue;
-            const k = segment.slice(0, eq);
-            const v = segment
-              .slice(eq + 1)
-              .split(',')
-              .map((s) => s.trim())
-              .filter(Boolean);
-            if (v.length > 0) mf[k] = v;
-          }
-          if (Object.keys(mf).length > 0) params.metafields = mf;
-        }
-
-        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,
-      brandId,
-      tagId,
-      currentSort.sortBy,
-      currentSort.sortOrder,
-      metafieldsKey,
-    ]
-  );
-
-  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()}`);
-  }
-
-  function handleCategorySelect(id: string) {
-    updateParam('category', id);
-  }
-
-  /** Read the currently-selected values for a given metafield definition. */
-  function getSelectedMetafieldValues(key: string): string[] {
-    const raw = searchParams.get(`${METAFIELD_URL_PREFIX}${key}`);
-    if (!raw) return [];
-    return raw
-      .split(',')
-      .map((v) => v.trim())
-      .filter(Boolean);
-  }
-
-  /**
-   * Toggle one value on/off in a metafield facet's URL param. Multi-select
-   * adds/removes from the list; single-select / boolean replace the value.
-   */
-  function setMetafieldValue(key: string, values: string[]) {
-    updateParam(`${METAFIELD_URL_PREFIX}${key}`, values.join(','));
-  }
-
-  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 ? `${t('searchPrefix')} "${searchQuery}"` : t('allProducts')}
-        </h1>
-        {!loading && (
-          <p className="text-muted-foreground mt-1 text-sm">
-            {total} {total === 1 ? tc('product') : tc('products')} {tc('found')}
-          </p>
-        )}
-      </div>
-
-      {/* Filters and Sort */}
-      <div className="mb-6 flex flex-col gap-4">
-        {/* 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'
-              )}
-            >
-              {tc('all')}
-            </button>
-            {categories.map((cat) => (
-              <CategoryChip
-                key={cat.id}
-                category={cat}
-                selectedId={categoryId}
-                onSelect={handleCategorySelect}
-                tc={tc as (key: string) => string}
-              />
-            ))}
-          </div>
-        )}
-
-        {/* Brand, Tag & Sort row */}
-        <div className="flex flex-wrap items-center gap-3">
-          {/* Brand Filter */}
-          {brands.length > 0 && (
-            <select
-              value={brandId}
-              onChange={(e) => updateParam('brand', 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"
-            >
-              <option value="">{t('allBrands')}</option>
-              {brands.map((b) => (
-                <option key={b.id} value={b.id}>
-                  {b.name}
-                </option>
-              ))}
-            </select>
-          )}
-
-          {/* Tag Filter */}
-          {tags.length > 0 && (
-            <select
-              value={tagId}
-              onChange={(e) => updateParam('tag', 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"
-            >
-              <option value="">{t('allTags')}</option>
-              {tags.map((tg) => (
-                <option key={tg.id} value={tg.id}>
-                  {tg.name}
-                </option>
-              ))}
-            </select>
-          )}
-
-          {/* Custom-field (metafield) facets — rendered per definition type.
-              Only definitions flagged `filterable: true` and published to
-              this sales channel reach this list (see `metafieldDefs` filter
-              above). The merchant's display name (`def.name`) is shown as-is
-              — `enumValues` come from the merchant's dashboard config. */}
-          {metafieldDefs.map((def) => {
-            const selected = getSelectedMetafieldValues(def.key);
-
-            if (def.type === 'BOOLEAN') {
-              const isOn = selected.includes('true');
-              return (
-                <label
-                  key={def.id}
-                  className="border-border text-foreground hover:border-primary inline-flex h-9 cursor-pointer items-center gap-2 rounded border px-3 text-sm transition-colors"
-                >
-                  <input
-                    type="checkbox"
-                    checked={isOn}
-                    onChange={(e) => setMetafieldValue(def.key, e.target.checked ? ['true'] : [])}
-                    className="accent-primary h-4 w-4"
-                  />
-                  {def.name}
-                </label>
-              );
-            }
-
-            if (def.type === 'SELECT') {
-              return (
-                <select
-                  key={def.id}
-                  value={selected[0] || ''}
-                  onChange={(e) =>
-                    setMetafieldValue(def.key, e.target.value ? [e.target.value] : [])
-                  }
-                  aria-label={def.name}
-                  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"
-                >
-                  <option value="">{`${tc('all')} ${def.name}`}</option>
-                  {(def.enumValues || []).map((v) => (
-                    <option key={v} value={v}>
-                      {v}
-                    </option>
-                  ))}
-                </select>
-              );
-            }
-
-            // MULTI_SELECT — chip toggles. Each click adds/removes one value.
-            return (
-              <div
-                key={def.id}
-                className="border-border inline-flex items-center gap-1 rounded border px-2 py-1"
-                aria-label={def.name}
-              >
-                <span className="text-muted-foreground px-1 text-xs">{def.name}:</span>
-                {(def.enumValues || []).map((v) => {
-                  const active = selected.includes(v);
-                  return (
-                    <button
-                      key={v}
-                      type="button"
-                      onClick={() =>
-                        setMetafieldValue(
-                          def.key,
-                          active ? selected.filter((s) => s !== v) : [...selected, v]
-                        )
-                      }
-                      className={cn(
-                        'rounded-full border px-2 py-0.5 text-xs transition-colors',
-                        active
-                          ? 'bg-primary text-primary-foreground border-primary'
-                          : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
-                      )}
-                    >
-                      {v}
-                    </button>
-                  );
-                })}
-              </div>
-            );
-          })}
-
-          {/* Sort */}
-          <div className="flex items-center gap-2 sm:ms-auto">
-            <label htmlFor="sort" className="text-muted-foreground whitespace-nowrap text-sm">
-              {tc('sortBy')}
-            </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}>
-                  {t(opt.labelKey)}
-                </option>
-              ))}
-            </select>
-          </div>
-        </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"
-                    />
-                    {tc('loading')}
-                  </>
-                ) : (
-                  t('loadMore')
-                )}
-              </button>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
+import { Suspense } from 'react';
+import { ProductListing } from '@/ui/product/product-listing';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
 
 export default function ProductsPage() {
   return (
@@ -632,7 +13,7 @@ export default function ProductsPage() {
         </div>
       }
     >
-      <ProductsContent />
+      <ProductListing />
     </Suspense>
   );
 }

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

@@ -1,12 +1,12 @@
 'use client';
 
 import { useState } from 'react';
-import { useRouter, Link } from '@/lib/navigation';
-import { useAuth } from '@/providers/store-provider';
-import { proxyRegister } from '@/lib/auth';
+import { useRouter, Link } from '@/core/lib/navigation';
+import { useAuth } from '@/core/providers/store-provider';
+import { proxyRegister } from '@/core/lib/auth';
 import { RegisterForm } from '@/components/auth/register-form';
 import { OAuthButtons } from '@/components/auth/oauth-buttons';
-import { useTranslations } from '@/lib/translations';
+import { useTranslations } from '@/core/lib/translations';
 
 export default function RegisterPage() {
   const router = useRouter();

package/templates/nextjs/base/src/app/reset-password/page.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { useState } from 'react';
-import { useRouter, Link } from '@/lib/navigation';
-import { proxyResetPassword } from '@/lib/auth';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
-import { getPasswordError } from '@/lib/validation';
+import { useRouter, Link } from '@/core/lib/navigation';
+import { proxyResetPassword } from '@/core/lib/auth';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
+import { getPasswordError } from '@/core/lib/validation';
 
 export default function ResetPasswordPage() {
   const router = useRouter();

package/templates/nextjs/base/src/app/sitemap.ts

@@ -1,5 +1,5 @@
 import type { MetadataRoute } from 'next';
-import { getServerClient } from '@/lib/brainerce';
+import { getServerClient } from '@/core/lib/brainerce';
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';