@forgecart/cli 2.202608221935.0 → 2.202609190800.0

package/templates/storefront/src/app/verify/page.tsx

@@ -0,0 +1,155 @@
+import type { Metadata } from 'next';
+import { connection } from 'next/server';
+import { Suspense } from 'react';
+
+import { AccountMessage, type AccountMessageTone } from '../../components/account/AccountMessage';
+import { LocaleLink } from '../../components/LocaleLink';
+import { readLinkToken, type AccountLinkOutcome } from '../../lib/account/account-link';
+import { verifyState, type VerifyState } from '../../lib/account/verify-state';
+import { verifyCustomerAccount } from '../../lib/forgecart';
+import { getRequestLocale } from '../../lib/locale/request-binding';
+import { routeMetadata } from '../../lib/seo/metadata';
+import type { RouteSearchParams } from '../../lib/seo/noindex';
+
+/**
+ * `/verify?token=…` — the page the platform's verification e-mail links to
+ * (#1472).
+ *
+ * Before this route existed, that link pointed at one platform-global host
+ * that served no such page, so every shopper who clicked it got a 404 and no
+ * account was ever verified from a mail. The link now resolves to the
+ * CHANNEL's own storefront, which is the only place that can both consume the
+ * token and tell the shopper, in the store's own voice, what happened to it.
+ *
+ * The token is consumed by the RENDER. That is what a mail link is: a GET
+ * whose entire purpose is to spend a one-shot credential, so there is no
+ * button to press first — pressing one would only add a step between the
+ * shopper and the outcome. It also means the second load of the same link is
+ * an expected state (`link-invalid`), not an error, which is why
+ * `verifyCustomerAccount` answers instead of throwing.
+ */
+
+const PAGE_TITLE = 'Verify your e-mail';
+
+/**
+ * Noindex via `NOINDEX_PATHS`, and NO alternates.
+ *
+ * `pathsByLocale` is deliberately empty rather than `staticPathsByLocale(…)`:
+ * `/verify` exists once per store (see `lib/locale/grammar.ts`), so there is no
+ * cluster of per-language addresses to claim — and building one would emit
+ * hreflang tags pointing every language at the same URL.
+ *
+ * The request's query is deliberately NOT passed either. The route rule
+ * already refuses indexing, so the only thing `searchParams` could add here is
+ * a shopper's one-shot token inside the metadata layer.
+ */
+export async function generateMetadata(): Promise<Metadata> {
+  const { binding, shopName, channelResolved } = await getRequestLocale();
+  return routeMetadata({
+    binding,
+    shopName,
+    channelResolved,
+    pathname: '/verify',
+    pathsByLocale: {},
+    title: PAGE_TITLE,
+  });
+}
+
+/**
+ * Every account surface stamps `data-fc-account-mode` + `data-fc-account-state`
+ * on the element it renders (the same shape as the home page's
+ * `data-fc-variant`).
+ *
+ * The states of these pages are, by construction, the hardest thing in the
+ * template to observe: each is reached once, with a credential the visit
+ * destroys. The markers make the state machine READABLE from the served HTML,
+ * which is what `tool/storefront-verify` asserts against — deliberately
+ * instead of the copy, because the copy belongs to the merchant and is the
+ * first thing a rebrand rewrites, while the state set is the contract.
+ */
+
+/** What each outcome tells the shopper, and where it sends them next. */
+const VERIFY_COPY: Readonly<
+  Record<VerifyState, { tone: AccountMessageTone; title: string; body: string; cta: string }>
+> = {
+  verified: {
+    tone: 'success',
+    title: 'Your e-mail address is verified',
+    body: 'Your account is ready — you can sign in with the address you registered.',
+    cta: 'Start shopping',
+  },
+  'no-token': {
+    tone: 'warning',
+    title: 'This link is missing its verification token',
+    body: 'Open the link straight from the e-mail we sent you. It carries a one-time token this page needs, and copying only part of the address leaves it behind.',
+    cta: 'Go to the store',
+  },
+  'link-invalid': {
+    tone: 'warning',
+    title: 'This verification link is no longer valid',
+    body: 'It has either been used already or it has expired. If your account is still unverified, request a new verification e-mail and open the newest link.',
+    cta: 'Go to the store',
+  },
+  'wrong-store': {
+    tone: 'warning',
+    title: 'This link belongs to a different store',
+    body: 'The account it verifies does not shop here. Open the link from the e-mail that store sent you — every store sends its own.',
+    cta: 'Go to the store',
+  },
+  failed: {
+    tone: 'error',
+    title: 'We could not verify your e-mail address',
+    body: 'Something went wrong on our side. Please open the link again in a few minutes — and if it has stopped working by then, request a new verification e-mail.',
+    cta: 'Go to the store',
+  },
+};
+
+export default function VerifyPage({ searchParams }: { searchParams: Promise<RouteSearchParams> }) {
+  return (
+    <div className="mx-auto max-w-xl space-y-6">
+      <h1 className="text-2xl font-bold tracking-tight">{PAGE_TITLE}</h1>
+      <Suspense fallback={<VerifyRouteSkeleton />}>
+        <VerifyOutcome searchParams={searchParams} />
+      </Suspense>
+    </div>
+  );
+}
+
+/**
+ * The request-time hole: the token is read and spent here, inside the Suspense
+ * boundary, so the shell paints while the API is asked.
+ *
+ * The `searchParams` promise is passed DOWN rather than awaited in the shell —
+ * awaiting it above would pull the token into the static part of the render for
+ * no benefit, since nothing above this component reads it.
+ */
+async function VerifyOutcome({ searchParams }: { searchParams: Promise<RouteSearchParams> }) {
+  await connection();
+  const [params, { binding }] = await Promise.all([searchParams, getRequestLocale()]);
+
+  const token = readLinkToken(params);
+  const outcome: AccountLinkOutcome =
+    token === null ? { kind: 'no-token' } : await verifyCustomerAccount(token);
+  const state = verifyState(outcome);
+  const copy = VERIFY_COPY[state];
+
+  return (
+    <div className="space-y-6" data-fc-account-mode="verify" data-fc-account-state={state}>
+      <AccountMessage tone={copy.tone} title={copy.title}>
+        {copy.body}
+      </AccountMessage>
+      <LocaleLink href="/" locale={binding} className="btn btn-primary">
+        {copy.cta}
+      </LocaleLink>
+    </div>
+  );
+}
+
+function VerifyRouteSkeleton() {
+  return (
+    <div className="space-y-6" aria-busy="true" aria-label="Verifying your e-mail address">
+      <div className="skeleton h-20 w-full"></div>
+      <div className="skeleton h-12 w-44"></div>
+    </div>
+  );
+}

package/templates/storefront/src/components/CartView.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import Link from 'next/link';
+import type { LocaleBinding } from '../lib/locale/localized-path';
+import { LocaleLink } from './LocaleLink';
 import { useState } from 'react';
 
+import { getAssetAlt } from '../lib/asset-alt';
 import { useCart } from '../lib/cart-context';
 import type { SellingPlan, SellingPlanGroup } from '../lib/forgecart';
 import { formatPrice, getPlanCadenceLabel, getPlanSavingsLabel } from '../lib/format';
@@ -20,7 +22,14 @@ import { formatPrice, getPlanCadenceLabel, getPlanSavingsLabel } from '../lib/fo
  * carry their own `sellingPlanId` (per-line subscriptions added from a product
  * page) get a small "Subscription" label.
  */
-export function CartView({ channelGroups }: { channelGroups: SellingPlanGroup[] }) {
+export function CartView({
+  channelGroups,
+  locale,
+}: {
+  channelGroups: SellingPlanGroup[];
+  /** Threaded from the server page — a client component cannot read it. */
+  locale: LocaleBinding;
+}) {
   const {
     cart,
     itemCount,
@@ -59,9 +68,14 @@ export function CartView({ channelGroups }: { channelGroups: SellingPlanGroup[]
         <p className="text-base-content/60">
           Your cart is empty — it starts the moment you add your first item.
         </p>
-        <Link href="/products" data-fc-track="cart-browse-products" className="btn btn-primary">
+        <LocaleLink
+          href="/products"
+          locale={locale}
+          data-fc-track="cart-browse-products"
+          className="btn btn-primary"
+        >
           Browse products
-        </Link>
+        </LocaleLink>
       </div>
     );
   }
@@ -86,7 +100,7 @@ export function CartView({ channelGroups }: { channelGroups: SellingPlanGroup[]
                     // eslint-disable-next-line @next/next/no-img-element
                     <img
                       src={line.featuredAsset.preview}
-                      alt={line.productVariant.name}
+                      alt={getAssetAlt(line.featuredAsset)}
                       className="h-full w-full object-cover"
                     />
                   ) : null}
@@ -279,9 +293,14 @@ export function CartView({ channelGroups }: { channelGroups: SellingPlanGroup[]
               </div>
             </div>
 
-            <Link href="/checkout" data-fc-track="cart-checkout" className="btn btn-primary w-full">
+            <LocaleLink
+              href="/checkout"
+              locale={locale}
+              data-fc-track="cart-checkout"
+              className="btn btn-primary w-full"
+            >
               Checkout
-            </Link>
+            </LocaleLink>
           </div>
         </aside>
       </div>

package/templates/storefront/src/components/ForgeTracker.tsx

@@ -3,6 +3,11 @@
 import { usePathname } from 'next/navigation';
 import { useEffect } from 'react';
 
+import {
+  type MarketingIdentifier,
+  parseMarketingParams,
+  type UtmParams,
+} from '../lib/marketing-params';
 import { mintUuid } from '../lib/uuid';
 
 /**
@@ -29,6 +34,14 @@ import { mintUuid } from '../lib/uuid';
  *   - `heartbeat` every {@link HEARTBEAT_MS} while the tab is visible (plus
  *     one on refocus) — liveness plumbing only, excluded from aggregates.
  *
+ * What a landing additionally does: a view whose URL carries marketing
+ * parameters reads them once (`lib/marketing-params`). The click IDs go to
+ * {@link IDENTIFY_ENDPOINT} and that request is AWAITED before the view is
+ * enqueued, so the identity the relay mints carries them instead of the two
+ * racing; the campaign tags are held for the rest of the visit and ride every
+ * later event. A URL without any of them does nothing at all — no request, no
+ * stored state, no change to the events below.
+ *
  * Delivery: events buffer and flush as one batch at {@link FLUSH_MAX_EVENTS}
  * events or after an age timer via `fetch(keepalive)` — the FIRST batch waits
  * {@link ESTABLISHMENT_GRACE_MS}, every later batch {@link FLUSH_INTERVAL_MS}
@@ -80,6 +93,8 @@ const SUPPRESS_MS = 300;
  */
 const ENGAGEMENT_MIN_DWELL_MS = 250;
 const TRACK_ENDPOINT = '/__fc/track';
+/** Landing-only: where a captured click ID is attached to the shopper. */
+const IDENTIFY_ENDPOINT = '/__fc/identify';
 
 /** One buffered event — the relay forwards these fields to `trackEvent`. */
 interface TrackedEvent {
@@ -87,6 +102,21 @@ interface TrackedEvent {
   eventId: string;
   occurredAt: string;
   properties?: Record<string, unknown>;
+  /**
+   * The campaign this visit arrived on, repeated on every event of the visit.
+   *
+   * Spelled out rather than reused from the parser's `UtmParams` because the
+   * five fields are a CONTRACT with the relay's allowlist, not a shape that
+   * should follow the parser if it ever grows a sixth tag. An absent tag is an
+   * absent KEY here, never `''`: the backend stores a present empty string as a
+   * real ClickHouse dimension, where it can no longer be told apart from a
+   * campaign that genuinely has no medium.
+   */
+  utmSource?: string;
+  utmMedium?: string;
+  utmCampaign?: string;
+  utmTerm?: string;
+  utmContent?: string;
 }
 
 // Module scope on purpose: the buffer, timers and suppressors must survive
@@ -100,6 +130,23 @@ const lastClickAtBySlug = new Map<string, number>();
 let lastPageView: { path: string; at: number } | null = null;
 let previousPathname: string | null = null;
 let lastHeartbeatAt = 0;
+/**
+ * The campaign tags of the landing that started this visit. Module scope for
+ * the same reason as the buffer — StrictMode remounts the component and a ref
+ * would reset — and because there is nowhere else to read them from: an
+ * internal navigation carries no query string.
+ */
+let capturedUtm: UtmParams = {};
+/**
+ * The click IDs already sent to {@link IDENTIFY_ENDPOINT}, as `key=value&…`.
+ *
+ * Module scope so StrictMode's mount → unmount → mount sends ONE identify for
+ * one landing. A signature rather than a boolean because "once per captured
+ * landing" is not "once per visit": a shopper who clicks a second ad back into
+ * the store brings a different click ID that must still be delivered, while a
+ * revisit of the same landing URL must not send the same one twice.
+ */
+let identifiedClickIds: string | null = null;
 
 /**
  * Consent extension point. Tracking currently needs no opt-in, so this is a
@@ -127,6 +174,9 @@ function enqueue(eventType: string, properties?: Record<string, unknown>): void
     eventType,
     eventId: mintEventId(),
     occurredAt: new Date().toISOString(),
+    // Spreading an empty object adds no keys, so an organic visit emits exactly
+    // the event shape it did before any of this existed.
+    ...capturedUtm,
   };
   if (properties) event.properties = properties;
   buffer.push(event);
@@ -167,6 +217,61 @@ function flush(): void {
   }).catch(() => undefined);
 }
 
+/**
+ * Read this URL's marketing parameters and act on what it carries.
+ *
+ * Resolves once the click IDs have been delivered — the caller awaits it so the
+ * identify request and the first tracked batch cannot race. Does nothing
+ * whatsoever for a URL that carries none, which is the overwhelmingly common
+ * case and the reason the parser returns a union.
+ */
+async function captureLanding(search: string): Promise<void> {
+  // Consent is checked HERE as well as in `enqueue` because the identify
+  // request is not a buffered event: it leaves on its own, carrying a click ID
+  // that identifies the visitor more directly than anything in the buffer, so
+  // a gate that only guards `enqueue` would let it past a visitor who declined.
+  if (!hasTrackingConsent()) return;
+  const marketing = parseMarketingParams(search);
+  if (marketing.kind === 'none') return;
+
+  // Merge, never clear — the same semantics `middleware.ts` uses for the
+  // `fc-exp` cookie. Only a URL that carries tags updates them, so an internal
+  // navigation keeps the campaign the visitor arrived on, and a second ad
+  // landing legitimately overwrites the tags it brings.
+  capturedUtm = { ...capturedUtm, ...marketing.utm };
+
+  if (marketing.identifiers.length === 0) return;
+  const signature = signClickIds(marketing.identifiers);
+  if (signature === identifiedClickIds) return;
+  // Recorded BEFORE the await: StrictMode's second mount runs while this
+  // request is still in flight and must find the landing already claimed.
+  identifiedClickIds = signature;
+  await fetch(IDENTIFY_ENDPOINT, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ identifiers: marketing.identifiers }),
+    keepalive: true,
+  }).catch(() => undefined); // same swallow as flush(): analytics never breaks the storefront
+}
+
+/** The click IDs of one landing as a comparable string, in parser order. */
+function signClickIds(identifiers: readonly MarketingIdentifier[]): string {
+  return identifiers.map(({ key, value }) => `${key}=${value}`).join('&');
+}
+
+/**
+ * Capture the landing, THEN record the view.
+ *
+ * The order is the whole point. The first request of a visit is what mints the
+ * shopper session, so sending the identify and the page_view in parallel would
+ * mint one identity per request and split the visit in two — the click ID on
+ * one, every tracked event on the other, and no attribution joining them.
+ */
+async function emitPageView(properties: Record<string, unknown>): Promise<void> {
+  await captureLanding(window.location.search);
+  enqueue('page_view', properties);
+}
+
 /**
  * `pagehide` delivery: `sendBeacon` — the only flush that uses it, for its
  * survive-the-unload queueing guarantee. Falls back to keepalive fetch where
@@ -212,7 +317,9 @@ export function ForgeTracker({ enabled }: { enabled: boolean }) {
       properties.referrer = document.referrer;
     }
     previousPathname = pathname;
-    enqueue('page_view', properties);
+    // The suppressor above is already stamped, so the double mount StrictMode
+    // performs while this is in flight still emits exactly one view.
+    void emitPageView(properties);
   }, [enabled, pathname]);
 
   // cta_click — one delegated capture-phase listener — and the pagehide flush.

package/templates/storefront/src/components/Header.tsx

@@ -1,12 +1,26 @@
 'use client';
 
-import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
+import type { LocaleBinding } from '../lib/locale/localized-path';
 import { useCart } from '../lib/cart-context';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { LocaleLink } from './LocaleLink';
+
+export interface HeaderProps {
+  /**
+   * The request's locale, threaded down from the layout. A client component
+   * cannot read it: `usePathname()` returns the REWRITTEN path under the
+   * locale rewrite, so deriving it here would emit English links on every
+   * German page.
+   */
+  locale: LocaleBinding;
+  /** The channel's languages, for the switcher. */
+  languageCodes: readonly string[];
+}
 
 /** Top navigation: Home / Products / Cart, with a live cart item count. */
-export function Header() {
+export function Header({ locale, languageCodes }: HeaderProps) {
   const { itemCount } = useCart();
 
   // The count is seeded from the server's `initialCart`, but a cookie set after
@@ -22,22 +36,28 @@ export function Header() {
   return (
     <header className="sticky top-0 z-30 border-b border-base-300 bg-base-100">
       <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
-        <Link href="/" className="text-lg font-bold tracking-tight">
+        <LocaleLink href="/" locale={locale} className="text-lg font-bold tracking-tight">
           Storefront
-        </Link>
+        </LocaleLink>
         <nav aria-label="Store" className="flex items-center gap-1 text-sm font-medium">
-          <Link href="/" className="btn btn-ghost btn-sm">
+          <LocaleLink href="/" locale={locale} className="btn btn-ghost btn-sm">
             Home
-          </Link>
-          <Link href="/products" className="btn btn-ghost btn-sm">
+          </LocaleLink>
+          <LocaleLink href="/products" locale={locale} className="btn btn-ghost btn-sm">
             Products
-          </Link>
-          <Link href="/cart" data-fc-track="header-cart" className="btn btn-ghost btn-sm">
+          </LocaleLink>
+          <LocaleLink
+            href="/cart"
+            locale={locale}
+            data-fc-track="header-cart"
+            className="btn btn-ghost btn-sm"
+          >
             Cart
             {mounted && itemCount > 0 && (
               <span className="badge badge-primary badge-sm font-semibold">{itemCount}</span>
             )}
-          </Link>
+          </LocaleLink>
+          <LanguageSwitcher locale={locale} languageCodes={languageCodes} />
         </nav>
       </div>
     </header>

package/templates/storefront/src/components/LanguageSwitcher.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+
+import { switchedLocalePath } from '../lib/locale/localized-path';
+import type { LocaleBinding } from '../lib/locale/localized-path';
+
+/**
+ * The language switcher (#1346, W1-8 / S2).
+ *
+ * Deliberately plain `<a>` elements rather than `<LocaleLink>` / `next/link`,
+ * for two reasons that point the same way:
+ *
+ *  1. **A locale switch must produce a NEW DOCUMENT.** Under the middleware
+ *     rewrite `/products` and `/de/products` render the SAME route, so a
+ *     client-side navigation between them changes no route segment and the
+ *     shared root layout is not re-run — `<html lang>` would keep the language
+ *     the shopper just left. A document load re-enters the middleware and
+ *     re-resolves the locale from the URL, which makes the new `lang`, the new
+ *     `Content-Language` and the new session language unconditional.
+ *  2. **These anchors are the discovery bridge between clusters.** Every other
+ *     link stays inside its own locale by construction, so without a real
+ *     crawlable `<a>` here nothing on the English site would ever point at the
+ *     German one. (The head-level `<link rel="alternate" hreflang>` annotation
+ *     that formalises the relationship is #1347's; `hrefLang` on the anchor is
+ *     just the honest description of where this particular link goes.)
+ *
+ * **Why `usePathname()` here, when `LocaleLink` forbids it.** What that hook
+ * cannot give you is the LOCALE: the rewrite strips the prefix, so the path it
+ * returns names the route, not the language — which is why the binding arrives
+ * as a prop. The PATH is the one thing it reports correctly, and it does so on
+ * both branches: on a prefixed URL it returns the rewritten (unprefixed) route,
+ * and on an unprefixed URL it returns the path itself. Either form is safe
+ * input, because the grammar strips any prefix before applying the target's —
+ * `de → fr` yields `/fr/...`, never `/fr/de/...`, whichever form it saw.
+ *
+ * The alternative — carrying the path in a middleware request header — was
+ * rejected: the header is only authored on the REWRITE branch, so it is absent
+ * on exactly the unprefixed pages this switcher must work on, and populating it
+ * there would force `NextResponse.next({request})` (a full copy of the inbound
+ * header block) onto every request that currently takes the fast path.
+ */
+
+export interface LanguageSwitcherProps {
+  /** The request's locale binding, from the layout. Never derived here. */
+  locale: LocaleBinding;
+  /** The channel's languages, from `getRequestLocale()`. */
+  languageCodes: readonly string[];
+}
+
+export function LanguageSwitcher({ locale, languageCodes }: LanguageSwitcherProps) {
+  const pathname = usePathname();
+
+  // A one-language channel has nothing to switch between, and the grammar
+  // never serves it a prefix — a single dead entry would be noise.
+  if (languageCodes.length < 2) return null;
+
+  return (
+    <nav aria-label="Language" className="flex items-center gap-1">
+      {languageCodes.map((code) => {
+        // The current language is not a link to itself: a self-link is a crawl
+        // trap and reads as an available action when it is not one.
+        if (code === locale.locale) {
+          return (
+            <span
+              key={code}
+              aria-current="true"
+              className="btn btn-ghost btn-xs btn-active font-semibold uppercase"
+            >
+              {code}
+            </span>
+          );
+        }
+        return (
+          <a
+            key={code}
+            href={switchedLocalePath(code, pathname, locale)}
+            hrefLang={code}
+            data-fc-track="language-switch"
+            className="btn btn-ghost btn-xs uppercase"
+          >
+            {code}
+          </a>
+        );
+      })}
+    </nav>
+  );
+}

package/templates/storefront/src/components/LocaleLink.tsx

@@ -0,0 +1,49 @@
+import Link from 'next/link';
+import type { ComponentProps, ReactNode } from 'react';
+
+import { localizedPath } from '../lib/locale/localized-path';
+import type { LocaleBinding } from '../lib/locale/localized-path';
+
+/**
+ * An internal link that stays inside the request's locale cluster (#1346,
+ * W1-8 / S2).
+ *
+ * Every internal navigation goes through this instead of `next/link` directly.
+ * A German page whose links all point at the English cluster leaves every
+ * German page but the entry point unreachable by following links, so a crawler
+ * never discovers them and the locale is effectively unindexed.
+ *
+ * The locale arrives as a PROP and is never derived here. Under the middleware
+ * rewrite the browser's URL and the rendered route differ — `/de/products`
+ * renders the `/products` route — so `usePathname()` returns the REWRITTEN
+ * path, and a component that read the locale from it would emit English links
+ * on every German page while looking correct in review. Server components take
+ * the binding from `getRequestLocale()`; client components receive it from
+ * whichever server component renders them.
+ *
+ * `href` is the UNPREFIXED route path, always — the same string you would have
+ * written before the locale layer existed. Prefixing is this component's job.
+ */
+
+// `locale` is omitted because `next/link` HAS a prop by that name — the Pages
+// Router i18n feature, typed `string | false`. This storefront does its own
+// locale routing (App Router, middleware rewrite), so that prop is never the
+// one we want, and forwarding it would collide with the binding below: the
+// production build fails with TS2430, which `next dev` never reports.
+type ForwardedLinkProps = Omit<ComponentProps<typeof Link>, 'href' | 'children' | 'locale'>;
+
+export interface LocaleLinkProps extends ForwardedLinkProps {
+  /** The unprefixed route path, e.g. `/products`. */
+  href: string;
+  /** The request's locale binding, from `getRequestLocale()`. */
+  locale: LocaleBinding;
+  children: ReactNode;
+}
+
+export function LocaleLink({ href, locale, children, ...rest }: LocaleLinkProps): ReactNode {
+  return (
+    <Link href={localizedPath(href, locale)} {...rest}>
+      {children}
+    </Link>
+  );
+}

package/templates/storefront/src/components/ProductCard.tsx

@@ -1,5 +1,7 @@
-import Link from 'next/link';
+import type { LocaleBinding } from '../lib/locale/localized-path';
+import { LocaleLink } from './LocaleLink';
 
+import { getAssetAlt } from '../lib/asset-alt';
 import type { Product } from '../lib/forgecart';
 import { formatPrice, getStartingPrice } from '../lib/format';
 
@@ -10,16 +12,20 @@ import { formatPrice, getStartingPrice } from '../lib/format';
  */
 export function ProductCard({
   product,
+  locale,
   emphasis = false,
 }: {
   product: Product;
+  /** The request's locale binding — a card's link must stay in its cluster. */
+  locale: LocaleBinding;
   emphasis?: boolean;
 }) {
   const startingPrice = getStartingPrice(product);
 
   return (
-    <Link
+    <LocaleLink
       href={`/products/${product.slug}`}
+      locale={locale}
       data-fc-track="product-card"
       className="card card-border group h-full bg-base-100 transition-shadow hover:shadow-md"
     >
@@ -29,7 +35,7 @@ export function ProductCard({
           // eslint-disable-next-line @next/next/no-img-element
           <img
             src={product.featuredAsset.preview}
-            alt={product.name}
+            alt={getAssetAlt(product.featuredAsset)}
             loading="lazy"
             className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
           />
@@ -47,6 +53,6 @@ export function ProductCard({
           <p className="text-sm text-base-content/60">From {formatPrice(startingPrice)}</p>
         )}
       </div>
-    </Link>
+    </LocaleLink>
   );
 }