create-brainerce-store 1.72.0 → 1.74.0

package/templates/nextjs/base/src/ui/layout/header-search.tsx

@@ -0,0 +1,249 @@
+'use client';
+
+/**
+ * Header search with autocomplete.
+ *
+ * The header itself is a server component (merchant-configured Content), so
+ * the search box is a client island — the same bridge `HeaderAccount` uses.
+ *
+ * Behaviour:
+ *   - `useSearch()` supplies the suggestions (300ms debounce, 2-char minimum,
+ *     abort on re-query). This component owns only the input + dropdown.
+ *   - Submitting navigates to `/products?search=<query>`, which is exactly
+ *     what `use-product-listing` reads back off the URL. The listing side
+ *     already works; this is the surface that writes the param.
+ *   - Picking a product suggestion goes straight to its PDP; picking a
+ *     category goes to the listing filtered by `?category=<id>`, because a
+ *     CategorySuggestion carries `id` + `name` + `productCount` and no slug.
+ *
+ * The dropdown auto-hides: `suggestions` is `null` until a query clears the
+ * 2-char minimum, and an empty store answers `{ products: [], categories: [] }`
+ * which renders the "no results" line rather than an empty box.
+ *
+ * Keyboard: ArrowDown / ArrowUp move the active option, Enter opens it (or
+ * submits the raw query when nothing is active), Escape closes the panel and
+ * keeps focus in the field. A blur that lands outside the widget closes it.
+ */
+
+import * as React from 'react';
+import { Search } from 'lucide-react';
+import { useRouter } from '@/core/lib/navigation';
+import { useSearch } from '@/core/hooks/use-search';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface HeaderSearchProps {
+  className?: string;
+}
+
+/** One flattened dropdown row — products first, then categories. */
+type Option =
+  | { kind: 'product'; id: string; label: string; href: string }
+  | { kind: 'category'; id: string; label: string; href: string };
+
+export function HeaderSearch({ className }: HeaderSearchProps) {
+  const router = useRouter();
+  const t = useTranslations('nav');
+  const tc = useTranslations('common');
+  const tp = useTranslations('products');
+
+  const [query, setQuery] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const { suggestions, loading } = useSearch(query);
+
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const listboxId = React.useId();
+
+  // Products first, then categories — one flat list so the arrow keys can walk
+  // the whole panel without caring which section a row came from.
+  const options: Option[] = React.useMemo(() => {
+    if (!suggestions) return [];
+    const rows: Option[] = [];
+    for (const product of suggestions.products) {
+      rows.push({
+        kind: 'product',
+        id: product.id,
+        label: product.name,
+        // `slug` is nullable on a ProductSuggestion — fall back to the id,
+        // the same way the product cards do.
+        href: `/products/${product.slug || product.id}`,
+      });
+    }
+    for (const category of suggestions.categories) {
+      rows.push({
+        kind: 'category',
+        id: category.id,
+        label: category.name,
+        // CategorySuggestion carries no slug, so filter the listing by id.
+        href: `/products?category=${encodeURIComponent(category.id)}`,
+      });
+    }
+    return rows;
+  }, [suggestions]);
+
+  // A fresh result set invalidates whatever row was highlighted.
+  React.useEffect(() => {
+    setActiveIndex(-1);
+  }, [options]);
+
+  // Close when the click lands outside the widget. Pointerdown rather than
+  // click so the panel is gone before a link underneath activates.
+  React.useEffect(() => {
+    if (!open) return;
+    function onPointerDown(event: PointerEvent) {
+      if (!rootRef.current) return;
+      if (!rootRef.current.contains(event.target as Node)) setOpen(false);
+    }
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [open]);
+
+  function go(href: string) {
+    setOpen(false);
+    setActiveIndex(-1);
+    router.push(href);
+  }
+
+  function submit() {
+    const trimmed = query.trim();
+    if (!trimmed) return;
+    go(`/products?search=${encodeURIComponent(trimmed)}`);
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.key === 'Escape') {
+      setOpen(false);
+      setActiveIndex(-1);
+      return;
+    }
+
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      if (options.length === 0) return;
+      event.preventDefault();
+      setOpen(true);
+      setActiveIndex((prev) => {
+        const step = event.key === 'ArrowDown' ? 1 : -1;
+        const next = prev + step;
+        if (next < 0) return options.length - 1;
+        if (next >= options.length) return 0;
+        return next;
+      });
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      const active = activeIndex >= 0 ? options[activeIndex] : undefined;
+      if (active) {
+        go(active.href);
+      } else {
+        submit();
+      }
+    }
+  }
+
+  // The panel is only worth showing once the hook has something to say —
+  // either rows, a spinner, or an explicit "nothing matched".
+  const showPanel = open && (loading || suggestions !== null);
+  const activeOptionId = activeIndex >= 0 ? `${listboxId}-${activeIndex}` : undefined;
+  const productCount = suggestions?.products.length ?? 0;
+
+  return (
+    <div ref={rootRef} className={cn('relative', className)}>
+      <form
+        role="search"
+        onSubmit={(event) => {
+          event.preventDefault();
+          submit();
+        }}
+      >
+        <label htmlFor={`${listboxId}-input`} className="sr-only">
+          {t('search')}
+        </label>
+        <div className="relative">
+          <Search
+            className="text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 h-4 w-4 -translate-y-1/2"
+            aria-hidden="true"
+          />
+          <input
+            id={`${listboxId}-input`}
+            type="search"
+            role="combobox"
+            autoComplete="off"
+            aria-expanded={showPanel}
+            aria-controls={listboxId}
+            aria-activedescendant={activeOptionId}
+            placeholder={t('searchPlaceholder')}
+            value={query}
+            onChange={(event) => {
+              setQuery(event.target.value);
+              setOpen(true);
+            }}
+            onFocus={() => setOpen(true)}
+            onKeyDown={handleKeyDown}
+            className="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-primary h-9 w-full rounded-md border pe-3 ps-8 text-sm focus-visible:outline-none focus-visible:ring-2"
+          />
+        </div>
+      </form>
+
+      {showPanel && (
+        <div className="border-border bg-background absolute inset-x-0 top-full z-50 mt-2 overflow-hidden rounded-lg border shadow-lg">
+          {loading && options.length === 0 ? (
+            <p className="text-muted-foreground px-4 py-3 text-sm">{tc('loading')}</p>
+          ) : options.length === 0 ? (
+            <p className="text-muted-foreground px-4 py-3 text-sm">{tc('noResults')}</p>
+          ) : (
+            <ul
+              id={listboxId}
+              role="listbox"
+              aria-label={t('search')}
+              className="max-h-80 overflow-y-auto py-1"
+            >
+              {options.map((option, index) => (
+                <React.Fragment key={`${option.kind}-${option.id}`}>
+                  {index === 0 && productCount > 0 && (
+                    <li
+                      role="presentation"
+                      className="text-muted-foreground px-4 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide"
+                    >
+                      {tp('pageTitle')}
+                    </li>
+                  )}
+                  {index === productCount && option.kind === 'category' && (
+                    <li
+                      role="presentation"
+                      className="text-muted-foreground px-4 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide"
+                    >
+                      {t('categories')}
+                    </li>
+                  )}
+                  <li
+                    id={`${listboxId}-${index}`}
+                    role="option"
+                    aria-selected={index === activeIndex}
+                    className={cn(
+                      'cursor-pointer px-4 py-2 text-sm transition-colors',
+                      index === activeIndex
+                        ? 'bg-muted text-foreground'
+                        : 'text-foreground/80 hover:bg-muted/60'
+                    )}
+                    onPointerDown={(event) => {
+                      // Keep focus in the input so the blur handler cannot
+                      // close the panel before the navigation runs.
+                      event.preventDefault();
+                      go(option.href);
+                    }}
+                    onMouseEnter={() => setActiveIndex(index)}
+                  >
+                    {option.label}
+                  </li>
+                </React.Fragment>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/base/src/ui/layout/region-switcher.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+/**
+ * Region / currency switcher.
+ *
+ * ⛔ RENDERS NOTHING on a single-region store, which is almost every store.
+ * `regions.length <= 1` returns null before any markup: an empty or
+ * one-option dropdown in the header is worse than no switcher at all, and the
+ * whole regions feature is meant to be invisible until a merchant actually
+ * adds a second region.
+ *
+ * ⛔ It also renders nothing when the regions call FAILED. A brand-new store
+ * is empty and the call can fail (channel not live yet, backend hiccup); the
+ * provider swallows that and leaves `regions` at `[]`, which lands in the same
+ * early return. There is no error box and no skeleton, because a shopper has
+ * no idea what a region is and nothing here is worth interrupting them for.
+ *
+ * Why a manual switcher exists at all when the edge already guesses: the guess
+ * is an IP, and an IP is wrong for travellers, expats, VPNs and anyone behind
+ * a corporate egress. The shopper is the authority on where they are, and
+ * their choice is stored in a cookie so the SERVER renders the same prices on
+ * the next navigation instead of the client re-pricing after hydration.
+ *
+ * The labels are store data (`region.name`, `region.currency`), not UI copy,
+ * so this component needs no translation keys in any locale.
+ */
+
+import { useRegion } from '@/core/providers/store-provider';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+export function RegionSwitcher() {
+  const { regions, region, setRegion } = useRegion();
+
+  if (regions.length <= 1 || !region) return null;
+
+  return (
+    <Select value={region.id} onValueChange={setRegion}>
+      <SelectTrigger
+        className="h-8 w-auto gap-1 rounded border bg-transparent px-2 py-1 text-sm"
+        aria-label="Select region and currency"
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {regions.map((r) => (
+          <SelectItem key={r.id} value={r.id}>
+            {r.name} ({r.currency})
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/templates/nextjs/base/src/ui/layout/site-header.tsx.ejs

@@ -1,152 +1,171 @@
-/**
- * Merchant-controlled site header.
- *
- * The merchant configures the header in the Brainerce dashboard under
- *   Sell → Content → Header
- *
- * Renders brand (logo or store-name fallback) + nav items + CTA + cart link,
- * with a `<details>` mobile menu that works without client-side JS. Everything
- * is generic — do NOT hardcode nav labels or logo paths here; the merchant
- * edits them in the dashboard and the change propagates within ~5 minutes.
- *
- * If `header` is null (404 from the API, or the merchant deleted the row),
- * we render a minimal static fallback with just the brand label and cart link
- * so the layout never collapses. New stores ship with a seeded HEADER row
- * from the backend (StoresService.seedDefaultContent), so the populated
- * branch is the common case.
- */
-import * as React from 'react';
-import { Menu, ShoppingCart } from 'lucide-react';
-import type { Content } from 'brainerce';
-import { Button } from '@/components/ui/button';
-// Locale-aware Link (client component — fine to render from this server
-// component). Used for the static internal links (brand → /, cart) so the
-// current locale prefix is preserved; merchant-configured nav items keep
-// plain <a> since their URLs are arbitrary (may be external).
-import { Link } from '@/core/lib/navigation';
-import { HeaderAccount } from './header-account';
-<% if (i18nEnabled) { %>
-import { LanguageSwitcher } from '@/ui/layout/language-switcher';
-<% } %>
-
-interface SiteHeaderProps {
-  /** Pre-fetched header payload (server-side). `null` triggers static fallback. */
-  header: Content<'HEADER'> | null;
-  /** Fallback brand label when the merchant hasn't uploaded a logo yet. */
-  storeName?: string;
-}
-
-export function SiteHeader({ header, storeName }: SiteHeaderProps) {
-  const data = header?.data;
-  const logo = data?.logo;
-  const navItems = data?.navItems ?? [];
-  const cta = data?.cta;
-  const brandLabel = logo?.alt || storeName || 'Store';
-
-  // Static fallback — runs when the Content API returned null (no HEADER row
-  // for this store yet, or fetch failed). Keep the brand + cart so the page
-  // always has a clickable home link and entry to checkout, but no nav since
-  // the merchant hasn't defined any items.
-  if (!header) {
-    return (
-      <header className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-40 border-b backdrop-blur">
-        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
-          <Link href="/" className="text-lg font-semibold tracking-tight" aria-label={brandLabel}>
-            {brandLabel}
-          </Link>
-          <div className="flex items-center gap-2">
-            <% if (i18nEnabled) { %>
-            <LanguageSwitcher />
-            <% } %>
-            <HeaderAccount />
-            <Link
-              href="/cart"
-              aria-label="Cart"
-              className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 w-9 items-center justify-center rounded-md transition-colors"
-            >
-              <ShoppingCart className="h-5 w-5" aria-hidden="true" />
-            </Link>
-          </div>
-        </div>
-      </header>
-    );
-  }
-
-  return (
-    <header className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-40 border-b backdrop-blur">
-      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
-        <Link
-          href="/"
-          className="flex items-center gap-2 font-semibold tracking-tight"
-          aria-label={brandLabel}
-        >
-          {logo ? (
-            // eslint-disable-next-line @next/next/no-img-element -- merchant-supplied URL, dynamic optimization handled by CDN
-            <img src={logo.src} alt={logo.alt} className="h-8 w-auto" />
-          ) : (
-            <span className="text-lg">{brandLabel}</span>
-          )}
-        </Link>
-
-        {navItems.length > 0 ? (
-          <nav className="hidden items-center gap-8 md:flex">
-            {navItems.map((item, idx) => (
-              <a
-                key={`${item.url}-${idx}`}
-                href={item.url}
-                className="text-foreground/80 hover:text-foreground text-sm font-medium transition-colors"
-              >
-                {item.label}
-              </a>
-            ))}
-          </nav>
-        ) : null}
-
-        <div className="flex items-center gap-2">
-          {cta ? (
-            <Button asChild className="hidden sm:inline-flex">
-              <a href={cta.url}>{cta.label}</a>
-            </Button>
-          ) : null}
-
-          <% if (i18nEnabled) { %>
-          <LanguageSwitcher />
-          <% } %>
-
-          <HeaderAccount />
-
-          <Link
-            href="/cart"
-            aria-label="Cart"
-            className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 w-9 items-center justify-center rounded-md transition-colors"
-          >
-            <ShoppingCart className="h-5 w-5" aria-hidden="true" />
-          </Link>
-
-          {navItems.length > 0 ? (
-            <details className="group relative md:hidden">
-              <summary className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 w-9 cursor-pointer list-none items-center justify-center rounded-md transition-colors [&::-webkit-details-marker]:hidden">
-                <Menu className="h-5 w-5" aria-hidden="true" />
-                <span className="sr-only">Menu</span>
-              </summary>
-              <nav className="border-border bg-background absolute end-0 top-full z-50 mt-2 w-56 overflow-hidden rounded-lg border shadow-lg">
-                <ul className="py-1">
-                  {navItems.map((item, idx) => (
-                    <li key={`m-${item.url}-${idx}`}>
-                      <a
-                        href={item.url}
-                        className="text-foreground/80 hover:text-foreground hover:bg-muted block px-4 py-2 text-sm transition-colors"
-                      >
-                        {item.label}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              </nav>
-            </details>
-          ) : null}
-        </div>
-      </div>
-    </header>
-  );
-}
+/**
+ * Merchant-controlled site header.
+ *
+ * The merchant configures the header in the Brainerce dashboard under
+ *   Sell → Content → Header
+ *
+ * Renders brand (logo or store-name fallback) + nav items + CTA + cart link,
+ * with a `<details>` mobile menu that works without client-side JS. Everything
+ * is generic — do NOT hardcode nav labels or logo paths here; the merchant
+ * edits them in the dashboard and the change propagates within ~5 minutes.
+ *
+ * If `header` is null (404 from the API, or the merchant deleted the row),
+ * we render a minimal static fallback with just the brand label and cart link
+ * so the layout never collapses. New stores ship with a seeded HEADER row
+ * from the backend (StoresService.seedDefaultContent), so the populated
+ * branch is the common case.
+ */
+import * as React from 'react';
+import { Menu, ShoppingCart } from 'lucide-react';
+import type { Content } from 'brainerce';
+import { Button } from '@/components/ui/button';
+// Locale-aware Link (client component — fine to render from this server
+// component). Used for the static internal links (brand → /, cart) so the
+// current locale prefix is preserved; merchant-configured nav items keep
+// plain <a> since their URLs are arbitrary (may be external).
+import { Link } from '@/core/lib/navigation';
+import { HeaderAccount } from './header-account';
+import { HeaderSearch } from './header-search';
+<% if (i18nEnabled) { %>
+import { LanguageSwitcher } from '@/ui/layout/language-switcher';
+<% } %>
+import { RegionSwitcher } from '@/ui/layout/region-switcher';
+
+interface SiteHeaderProps {
+  /** Pre-fetched header payload (server-side). `null` triggers static fallback. */
+  header: Content<'HEADER'> | null;
+  /** Fallback brand label when the merchant hasn't uploaded a logo yet. */
+  storeName?: string;
+}
+
+export function SiteHeader({ header, storeName }: SiteHeaderProps) {
+  const data = header?.data;
+  const logo = data?.logo;
+  const navItems = data?.navItems ?? [];
+  const cta = data?.cta;
+  const brandLabel = logo?.alt || storeName || 'Store';
+
+  // Static fallback — runs when the Content API returned null (no HEADER row
+  // for this store yet, or fetch failed). Keep the brand + cart so the page
+  // always has a clickable home link and entry to checkout, but no nav since
+  // the merchant hasn't defined any items.
+  if (!header) {
+    return (
+      <header className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-40 border-b backdrop-blur">
+        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
+          <Link href="/" className="text-lg font-semibold tracking-tight" aria-label={brandLabel}>
+            {brandLabel}
+          </Link>
+          {/* Search lives in the fallback branch too — a store whose merchant
+              has not seeded a HEADER row still needs to be searchable. */}
+          <HeaderSearch className="hidden max-w-xs flex-1 sm:block" />
+          <div className="flex items-center gap-2">
+            <% if (i18nEnabled) { %>
+            <LanguageSwitcher />
+            <% } %>
+            <RegionSwitcher />
+            <HeaderAccount />
+            <Link
+              href="/cart"
+              aria-label="Cart"
+              className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 w-9 items-center justify-center rounded-md transition-colors"
+            >
+              <ShoppingCart className="h-5 w-5" aria-hidden="true" />
+            </Link>
+          </div>
+        </div>
+        {/* Narrow screens get the field on its own row rather than a cramped
+            icon: the bar above is already three controls wide. */}
+        <div className="mx-auto max-w-7xl px-4 pb-3 sm:hidden">
+          <HeaderSearch />
+        </div>
+      </header>
+    );
+  }
+
+  return (
+    <header className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-40 border-b backdrop-blur">
+      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
+        <Link
+          href="/"
+          className="flex items-center gap-2 font-semibold tracking-tight"
+          aria-label={brandLabel}
+        >
+          {logo ? (
+            // eslint-disable-next-line @next/next/no-img-element -- merchant-supplied URL, dynamic optimization handled by CDN
+            <img src={logo.src} alt={logo.alt} className="h-8 w-auto" />
+          ) : (
+            <span className="text-lg">{brandLabel}</span>
+          )}
+        </Link>
+
+        {navItems.length > 0 ? (
+          <nav className="hidden items-center gap-8 md:flex">
+            {navItems.map((item, idx) => (
+              <a
+                key={`${item.url}-${idx}`}
+                href={item.url}
+                className="text-foreground/80 hover:text-foreground text-sm font-medium transition-colors"
+              >
+                {item.label}
+              </a>
+            ))}
+          </nav>
+        ) : null}
+
+        <HeaderSearch className="hidden max-w-xs flex-1 sm:block" />
+
+        <div className="flex items-center gap-2">
+          {cta ? (
+            <Button asChild className="hidden sm:inline-flex">
+              <a href={cta.url}>{cta.label}</a>
+            </Button>
+          ) : null}
+
+          <% if (i18nEnabled) { %>
+          <LanguageSwitcher />
+          <% } %>
+          <RegionSwitcher />
+
+          <HeaderAccount />
+
+          <Link
+            href="/cart"
+            aria-label="Cart"
+            className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 w-9 items-center justify-center rounded-md transition-colors"
+          >
+            <ShoppingCart className="h-5 w-5" aria-hidden="true" />
+          </Link>
+
+          {navItems.length > 0 ? (
+            <details className="group relative md:hidden">
+              <summary className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 w-9 cursor-pointer list-none items-center justify-center rounded-md transition-colors [&::-webkit-details-marker]:hidden">
+                <Menu className="h-5 w-5" aria-hidden="true" />
+                <span className="sr-only">Menu</span>
+              </summary>
+              <nav className="border-border bg-background absolute end-0 top-full z-50 mt-2 w-56 overflow-hidden rounded-lg border shadow-lg">
+                <ul className="py-1">
+                  {navItems.map((item, idx) => (
+                    <li key={`m-${item.url}-${idx}`}>
+                      <a
+                        href={item.url}
+                        className="text-foreground/80 hover:text-foreground hover:bg-muted block px-4 py-2 text-sm transition-colors"
+                      >
+                        {item.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            </details>
+          ) : null}
+        </div>
+      </div>
+      {/* Narrow screens get the field on its own row rather than a cramped
+          icon: the bar above is already three controls wide. */}
+      <div className="mx-auto max-w-7xl px-4 pb-3 sm:hidden">
+        <HeaderSearch />
+      </div>
+    </header>
+  );
+}