create-brainerce-store 1.72.0 → 1.74.0

package/templates/nextjs/designs/atelier/ui/home/testimonials-band.tsx

@@ -1,46 +1,79 @@
-'use client';
-
-/** Testimonials band — three quote cards, copy from translation keys. */
-import { useTranslations } from '@/core/lib/translations';
-import { IconStar, IconQuote } from '@/ui/shared/icons';
-
-const TESTIMONIALS = [1, 2, 3] as const;
-
-export function TestimonialsBand() {
-  const t = useTranslations('home');
-
-  return (
-    <section className="section-pad wash-sand">
-      <div className="container-page">
-        <div className="mb-8 max-w-xl lg:mb-10">
-          <span className="eyebrow">{t('testimonialsEyebrow')}</span>
-          <h2 className="text-4xl sm:text-5xl">{t('testimonialsTitle')}</h2>
-        </div>
-
-        <ul className="grid gap-4 sm:gap-6 lg:grid-cols-3">
-          {TESTIMONIALS.map((n) => (
-            <li key={n}>
-              <figure className={`card card-hover flex h-full flex-col gap-4 p-6 ${n === 2 ? 'lg:rotate-1' : 'lg:-rotate-1'} lg:hover:rotate-0`}>
-                <span className="text-primary/30" aria-hidden="true">
-                  <IconQuote size={28} />
-                </span>
-                <span className="inline-flex text-primary" aria-label="5/5">
-                  {[1, 2, 3, 4, 5].map((s) => (
-                    <IconStar key={s} size={16} filled />
-                  ))}
-                </span>
-                <blockquote className="flex-1 leading-7 text-foreground">
-                  “{t(`testimonial${n}Quote`)}”
-                </blockquote>
-                <figcaption className="border-t pt-4 text-sm">
-                  <span className="font-semibold text-foreground">{t(`testimonial${n}Name`)}</span>
-                  <span className="text-muted-foreground"> · {t(`testimonial${n}Meta`)}</span>
-                </figcaption>
-              </figure>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-  );
-}
+'use client';
+
+/**
+ * Social-proof band — the store's best-rated products, from real review data.
+ *
+ * Never invent testimonials. A storefront that ships hardcoded quotes and star
+ * ratings is publishing fake reviews under the merchant's name, which is illegal
+ * in most markets. This section renders only what shoppers actually left, and
+ * auto-hides entirely until someone has reviewed something.
+ *
+ * `avgRating` / `reviewCount` already ride on the products the page loaded, so
+ * this costs no extra request.
+ */
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { IconStar } from '@/ui/shared/icons';
+
+const MAX_SHOWN = 3;
+
+export function TestimonialsBand({ products }: { products: Product[] }) {
+  const t = useTranslations('home');
+
+  const rated = products
+    .filter((p) => (p.reviewCount ?? 0) > 0 && (p.avgRating ?? 0) > 0)
+    .sort((a, b) => (b.avgRating ?? 0) - (a.avgRating ?? 0))
+    .slice(0, MAX_SHOWN);
+
+  // Nothing reviewed yet — show nothing rather than filling the gap with fiction.
+  if (rated.length === 0) return null;
+
+  return (
+    <section className="section-pad wash-sand">
+      <div className="container-page">
+        <div className="mb-8 max-w-xl lg:mb-10">
+          <span className="eyebrow">{t('ratedEyebrow')}</span>
+          <h2 className="text-4xl sm:text-5xl">{t('ratedTitle')}</h2>
+        </div>
+
+        <ul className="grid gap-4 sm:gap-6 lg:grid-cols-3">
+          {rated.map((product) => {
+            const rating = product.avgRating ?? 0;
+            const rounded = Math.round(rating);
+
+            return (
+              <li key={product.id}>
+                <Link
+                  // `slug` is optional on Product; fall back to the id the way
+                  // the hero does, so a product without one still links somewhere.
+                  href={`/products/${product.slug || product.id}`}
+                  className="card card-hover flex h-full flex-col gap-4 p-6"
+                >
+                  <span
+                    className="inline-flex text-primary"
+                    aria-label={t('ratedStars', { rating: rating.toFixed(1) })}
+                  >
+                    {[1, 2, 3, 4, 5].map((s) => (
+                      <IconStar key={s} size={16} filled={s <= rounded} />
+                    ))}
+                  </span>
+
+                  <p className="flex-1 text-lg font-semibold leading-7 text-foreground">
+                    {product.name}
+                  </p>
+
+                  <p className="border-t pt-4 text-sm text-muted-foreground">
+                    <span className="font-semibold text-foreground">{rating.toFixed(1)}</span>
+                    {' · '}
+                    {t('ratedCount', { count: String(product.reviewCount ?? 0) })}
+                  </p>
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/layout/header-search.tsx

@@ -0,0 +1,264 @@
+'use client';
+
+/**
+ * Header search with autocomplete — Atelier treatment.
+ *
+ * Same contract as the base island (see `base/src/ui/layout/header-search.tsx`):
+ * `useSearch()` owns the debounce / minimum-length / abort behaviour, this
+ * component owns the input and the dropdown. Submitting lands on
+ * `/products?search=…`, which `use-product-listing` already reads back.
+ *
+ * On mobile the field collapses to a single icon button that expands the
+ * input over the bar, so the pill row stays uncrowded next to the account and
+ * cart controls.
+ */
+
+import * as React from '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';
+import { IconSearch, IconX } from '@/ui/shared/icons';
+
+interface HeaderSearchProps {
+  className?: string;
+}
+
+/** One flattened dropdown row — products first, then categories. */
+type Option = {
+  kind: 'product' | '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 [expanded, setExpanded] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const { suggestions, loading } = useSearch(query);
+
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const listboxId = React.useId();
+
+  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]);
+
+  React.useEffect(() => {
+    setActiveIndex(-1);
+  }, [options]);
+
+  React.useEffect(() => {
+    if (!open && !expanded) return;
+    function onPointerDown(event: PointerEvent) {
+      if (!rootRef.current) return;
+      if (rootRef.current.contains(event.target as Node)) return;
+      setOpen(false);
+      setExpanded(false);
+    }
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [open, expanded]);
+
+  function go(href: string) {
+    setOpen(false);
+    setExpanded(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();
+      }
+    }
+  }
+
+  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)}>
+      {/* Mobile trigger — the field itself is hidden until this is pressed. */}
+      <button
+        type="button"
+        aria-label={t('search')}
+        aria-expanded={expanded}
+        onClick={() => {
+          setExpanded((prev) => !prev);
+          // Focus lands after the field is actually in the tree.
+          window.setTimeout(() => inputRef.current?.focus(), 0);
+        }}
+        className={cn(
+          'text-foreground hover:bg-secondary flex h-10 w-10 items-center justify-center rounded-full transition-colors sm:hidden',
+          expanded && 'bg-secondary'
+        )}
+      >
+        {expanded ? <IconX size={20} /> : <IconSearch size={20} />}
+      </button>
+
+      <form
+        role="search"
+        onSubmit={(event) => {
+          event.preventDefault();
+          submit();
+        }}
+        className={cn(
+          // Mobile: an overlay panel under the bar. Desktop: an inline pill.
+          expanded ? 'absolute end-0 top-12 z-50 w-[min(18rem,calc(100vw-2rem))]' : 'hidden',
+          'sm:relative sm:end-auto sm:top-auto sm:z-auto sm:block sm:w-56 lg:w-64'
+        )}
+      >
+        <label htmlFor={`${listboxId}-input`} className="sr-only">
+          {t('search')}
+        </label>
+        <div className="relative">
+          <span
+            aria-hidden="true"
+            className="text-muted-foreground pointer-events-none absolute start-3 top-1/2 -translate-y-1/2"
+          >
+            <IconSearch size={16} />
+          </span>
+          <input
+            ref={inputRef}
+            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-10 w-full rounded-full border pe-4 ps-9 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2"
+          />
+        </div>
+      </form>
+
+      {showPanel && (
+        <div className="bg-background absolute end-0 top-full z-50 mt-2 w-[min(20rem,calc(100vw-2rem))] overflow-hidden rounded-xl border p-1 shadow-lg sm:inset-x-0 sm:w-auto">
+          {loading && options.length === 0 ? (
+            <p className="text-muted-foreground px-3 py-2.5 text-sm">{tc('loading')}</p>
+          ) : options.length === 0 ? (
+            <p className="text-muted-foreground px-3 py-2.5 text-sm">{tc('noResults')}</p>
+          ) : (
+            <ul
+              id={listboxId}
+              role="listbox"
+              aria-label={t('search')}
+              className="max-h-80 overflow-y-auto"
+            >
+              {options.map((option, index) => (
+                <React.Fragment key={`${option.kind}-${option.id}`}>
+                  {index === 0 && productCount > 0 && (
+                    <li
+                      role="presentation"
+                      className="text-muted-foreground px-3 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-3 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 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
+                      index === activeIndex
+                        ? 'bg-secondary text-foreground'
+                        : 'text-foreground hover:bg-secondary'
+                    )}
+                    onPointerDown={(event) => {
+                      // Keep focus in the input so the outside-click 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/designs/atelier/ui/layout/region-switcher.tsx

@@ -0,0 +1,44 @@
+'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 { SelectMenu } from '@/ui/shared/select-menu';
+
+export function RegionSwitcher() {
+  const { regions, region, setRegion } = useRegion();
+
+  if (regions.length <= 1 || !region) return null;
+
+  return (
+    <SelectMenu
+      value={region.id}
+      options={regions.map((r) => ({ value: r.id, label: `${r.name} (${r.currency})` }))}
+      onChange={setRegion}
+      ariaLabel="Select region and currency"
+    />
+  );
+}

package/templates/nextjs/designs/atelier/ui/layout/site-header.tsx.ejs

@@ -15,9 +15,11 @@ import { Link } from '@/core/lib/navigation';
 import type { Content } from 'brainerce';
 import { HeaderAccount } from './header-account';
 import { HeaderCart } from './header-cart';
+import { HeaderSearch } from './header-search';
 <% if (i18nEnabled) { %>
 import { LanguageSwitcher } from '@/ui/layout/language-switcher';
 <% } %>
+import { RegionSwitcher } from '@/ui/layout/region-switcher';
 import { IconMenu } from '@/ui/shared/icons';
 import { resolveNavUrl } from '@/ui/layout/nav-url';
 
@@ -83,6 +85,8 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
         )}
 
         <div className="flex items-center gap-1 sm:gap-2">
+          {/* Collapses to an icon button below `sm` — see header-search.tsx. */}
+          <HeaderSearch />
           {cta ? (
             <a href={resolveNavUrl(cta.url)} className="btn-primary btn-sm hidden lg:inline-flex">
               {cta.label}
@@ -92,6 +96,7 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
 
           <LanguageSwitcher />
 <% } %>
+          <RegionSwitcher />
           <HeaderAccount />
           <HeaderCart />