@salifbiaye/create-boutique 0.1.1

package/templates/storefront/src/modules/ub/campaign-ended.tsx

@@ -0,0 +1,28 @@
+import { getBoutique } from "@lib/boutique/config"
+import { t } from "@lib/boutique/i18n"
+import Button from "./button"
+
+/** Page « This sale has ended » + lien vers la campagne suivante du client (autre boutique du projet). */
+export default function CampaignEnded({ nextUrl }: { nextUrl?: string }) {
+  const { storeName } = getBoutique()
+
+  return (
+    <section className="ub-hero">
+      <div className="ub-wrap" style={{ padding: "96px 24px", textAlign: "center", display: "grid", gap: 24, justifyItems: "center" }}>
+        <h1 className="ub-hero__title ub-head">{t("ended.title")}</h1>
+        <p className="ub-hero__sub">{t("ended.text", { storeName })}</p>
+        {nextUrl ? (
+          // Lien absolu vers une autre boutique du même projet (URL connue par project.json).
+          <a className="ub-btn ub-btn--primary" href={nextUrl}>
+            <span>{t("ended.cta")}</span>
+          </a>
+        ) : (
+          <p className="ub-hero__sub">{t("ended.soon")}</p>
+        )}
+        <Button href="/account" variant="ghost">
+          {t("nav.account")}
+        </Button>
+      </div>
+    </section>
+  )
+}

package/templates/storefront/src/modules/ub/category-tiles.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link"
+import { t } from "@lib/boutique/i18n"
+import { HttpTypes } from "@medusajs/types"
+import { Icon, TILE_ICONS } from "./icons"
+
+/** Tuiles catégorie : catégories racines de Medusa (6 max), couleurs --tint-1…4 du thème. */
+export default function CategoryTiles({ categories }: { categories: HttpTypes.StoreProductCategory[] }) {
+  const roots = categories.filter((c) => !c.parent_category).slice(0, 6)
+  if (!roots.length) return null
+
+  return (
+    <div className="ub-tiles">
+      {roots.map((c, i) => (
+        <Link
+          key={c.id}
+          className="ub-tile"
+          href={`/categories/${c.handle}`}
+          style={{ "--tile": `var(--tint-${(i % 4) + 1})` } as React.CSSProperties}
+        >
+          {typeof c.metadata?.image === "string" && /^https?:\/\//.test(c.metadata.image) ? (
+            <span className="ub-tile__img" style={{ overflow: "hidden" }}>
+              {/* Image de la catégorie : admin → catégorie → « Image de la catégorie » */}
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={c.metadata.image} alt="" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+            </span>
+          ) : (
+            <span className="ub-tile__img ub-ph" />
+          )}
+          <span className="ub-tile__ic">
+            <Icon name={TILE_ICONS[i % TILE_ICONS.length]} />
+          </span>
+          <span className="ub-tile__txt">
+            <span className="ub-tile__name">{c.name}</span>
+            {c.products && <span className="ub-tile__meta">{t("tile.items", { count: c.products.length })}</span>}
+            <span className="ub-tile__cta">{t("tile.cta")}</span>
+          </span>
+        </Link>
+      ))}
+    </div>
+  )
+}

package/templates/storefront/src/modules/ub/countdown.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+type Labels = { label: string; days: string; hours: string; mins: string; secs: string }
+
+const pad = (n: number) => String(n).padStart(2, "0")
+
+function parts(ms: number) {
+  const s = Math.max(0, Math.floor(ms / 1000))
+  return { d: Math.floor(s / 86400), h: Math.floor((s % 86400) / 3600), m: Math.floor((s % 3600) / 60), s: s % 60 }
+}
+
+/**
+ * Compte à rebours jusqu'à endsAt. Le premier rendu (serveur) reçoit `now` du serveur
+ * pour éviter un écart d'hydratation ; ensuite l'horloge du navigateur prend le relais.
+ */
+export default function Countdown({ endsAt, serverNow, labels }: { endsAt: string; serverNow: number; labels: Labels }) {
+  const end = Date.parse(endsAt)
+  const [now, setNow] = useState(serverNow)
+
+  useEffect(() => {
+    setNow(Date.now())
+    const id = setInterval(() => setNow(Date.now()), 1000)
+    return () => clearInterval(id)
+  }, [])
+
+  const v = parts(end - now)
+  const cells: [number, string][] = [
+    [v.d, labels.days],
+    [v.h, labels.hours],
+    [v.m, labels.mins],
+    [v.s, labels.secs],
+  ]
+
+  return (
+    <div className="ub-countdown" role="timer" aria-label={labels.label}>
+      {cells.map(([n, l]) => (
+        <div className="ub-countdown__c" key={l}>
+          <b>{pad(n)}</b>
+          <small>{l}</small>
+        </div>
+      ))}
+    </div>
+  )
+}

package/templates/storefront/src/modules/ub/footer.tsx

@@ -0,0 +1,56 @@
+import Link from "next/link"
+import { getBoutique } from "@lib/boutique/config"
+import { t } from "@lib/boutique/i18n"
+import { Logo } from "./nav"
+
+// Simples libellés : en production, remplacer par les marques officielles fournies par Stripe.
+const PAYMENTS = ["VISA", "Mastercard", "Amex", "Apple Pay", "Google Pay"]
+
+export default function Footer() {
+  const { storeName } = getBoutique()
+
+  return (
+    <footer className="ub-footer">
+      <div className="ub-wrap">
+        <div className="ub-footer__top">
+          <div>
+            <Logo />
+            <p>{t("footer.tagline")}</p>
+          </div>
+          <div>
+            <h4>{t("footer.shop")}</h4>
+            <ul>
+              <li><Link href="/store">{t("footer.all")}</Link></li>
+              <li><Link href="/cart">{t("footer.cart")}</Link></li>
+              <li><Link href="/account">{t("nav.account")}</Link></li>
+            </ul>
+          </div>
+          <div>
+            <h4>{t("footer.help")}</h4>
+            <ul>
+              <li><Link href="/legal/shipping">{t("legal.shipping")}</Link></li>
+              <li><Link href="/legal/returns">{t("legal.returns")}</Link></li>
+              <li><Link href="/order/track">{t("nav.track")}</Link></li>
+            </ul>
+          </div>
+          <div>
+            <h4>{t("footer.company")}</h4>
+            <ul>
+              <li><Link href="/legal/contact">{t("legal.contact")}</Link></li>
+              <li><Link href="/legal/privacy">{t("legal.privacy")}</Link></li>
+              <li><Link href="/legal/terms">{t("legal.terms")}</Link></li>
+            </ul>
+          </div>
+        </div>
+        <div className="ub-footer__bot">
+          <span>{t("footer.rights", { year: new Date().getFullYear(), storeName })}</span>
+          <div className="ub-pays" aria-label={t("footer.payments")}>
+            {PAYMENTS.map((p) => (
+              <span key={p}>{p}</span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/templates/storefront/src/modules/ub/icons.tsx

@@ -0,0 +1,42 @@
+// Icônes des maquettes (design/previews) : trait 1.6, currentColor.
+const paths = {
+  truck: <><path d="M3 6h11v10H3zM14 9h4l3 3v4h-7" /><circle cx="7" cy="17.5" r="1.8" /><circle cx="17" cy="17.5" r="1.8" /></>,
+  tag: <><path d="M3 12V4h8l10 10-8 8z" /><circle cx="7.5" cy="8.5" r="1.3" /></>,
+  lock: <><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></>,
+  search: <><circle cx="11" cy="11" r="6.5" /><path d="M20 20l-4.2-4.2" /></>,
+  heart: <path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" />,
+  user: <><circle cx="12" cy="8" r="3.5" /><path d="M5 20a7 7 0 0 1 14 0" /></>,
+  cart: <><path d="M3 4h2l2.2 11h11.3L21 7H6.2" /><circle cx="9" cy="19.5" r="1.3" /><circle cx="17" cy="19.5" r="1.3" /></>,
+  arrowUpRight: <path d="M7 17L17 7M9 7h8v8" />,
+  arrowRight: <path d="M5 12h14M13 6l6 6-6 6" />,
+  shield: <><path d="M12 3l7 3v6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z" /><path d="M9 12l2 2 4-4" /></>,
+  returns: <path d="M4 12a8 8 0 1 0 2.3-5.6M4 4v4h4" />,
+  headset: <><path d="M4 14v-2a8 8 0 0 1 16 0v2" /><rect x="3" y="13" width="4" height="6" rx="1.5" /><rect x="17" y="13" width="4" height="6" rx="1.5" /></>,
+  shirt: <path d="M8 4l4 2 4-2 4 3-2 4h-2v9H8v-9H6L4 7z" />,
+  phone: <><rect x="7" y="3" width="10" height="18" rx="2" /><path d="M11 18h2" /></>,
+  home: <><path d="M4 11l8-7 8 7v9H4z" /><path d="M10 20v-5h4v5" /></>,
+  gift: <><rect x="4" y="9" width="16" height="11" rx="1" /><path d="M3 9h18M12 9v11M12 9c-2-4-6-4-6-1s6 1 6 1zm0 0c2-4 6-4 6-1s-6 1-6 1z" /></>,
+  sparkle: <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6" />,
+  watch: <><rect x="7" y="6" width="10" height="12" rx="3" /><path d="M9 6l1-3h4l1 3M9 18l1 3h4l1-3M12 10v2l1.5 1" /></>,
+} as const
+
+export type IconName = keyof typeof paths
+
+export const TILE_ICONS: IconName[] = ["shirt", "phone", "home", "gift", "sparkle", "watch"]
+
+export function Icon({ name, strokeWidth = 1.6, style }: { name: IconName; strokeWidth?: number; style?: React.CSSProperties }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      style={style}
+    >
+      {paths[name]}
+    </svg>
+  )
+}

package/templates/storefront/src/modules/ub/nav.tsx

@@ -0,0 +1,90 @@
+import { Suspense } from "react"
+import Link from "next/link"
+import { getCampaign } from "@lib/boutique/campaign"
+import { getBoutique } from "@lib/boutique/config"
+import { t } from "@lib/boutique/i18n"
+import { retrieveCart } from "@lib/data/cart"
+import Button from "./button"
+import { Icon } from "./icons"
+
+async function CartCount() {
+  const cart = await retrieveCart().catch(() => null)
+  const count = cart?.items?.reduce((n, i) => n + i.quantity, 0) ?? 0
+
+  return (
+    <Link className="ub-icon" href="/cart" aria-label={t("nav.cart", { count })} data-testid="nav-cart-link">
+      <Icon name="cart" />
+      {count > 0 && <span className="ub-count">{count}</span>}
+    </Link>
+  )
+}
+
+function CartFallback() {
+  return (
+    <Link className="ub-icon" href="/cart" aria-label={t("nav.cart", { count: 0 })}>
+      <Icon name="cart" />
+    </Link>
+  )
+}
+
+/** Logo de la boutique (admin → Campagnes) ; à défaut, pastille de couleur du thème + nom. */
+export async function Logo() {
+  const { storeName } = getBoutique()
+  const logo = await getCampaign()
+    .then((c) => c.logo)
+    .catch(() => undefined)
+
+  if (logo) {
+    return (
+      <Link className="ub-logo" href="/" data-testid="nav-store-link" aria-label={storeName}>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={logo} alt={storeName} style={{ height: 36, width: "auto", maxWidth: 180, objectFit: "contain" }} />
+      </Link>
+    )
+  }
+
+  return (
+    <Link className="ub-logo" href="/" data-testid="nav-store-link">
+      <span className="ub-logo__mark" />
+      <span>{getBoutique().storeName}</span>
+    </Link>
+  )
+}
+
+export default function Nav({ current }: { current?: "home" | "shop" }) {
+  return (
+    <header className="ub-nav">
+      <div className="ub-wrap">
+        <Logo />
+        <nav className="ub-nav__links" aria-label={t("nav.main")}>
+          <Link href="/" aria-current={current === "home" ? "page" : undefined}>
+            {t("nav.home")}
+          </Link>
+          <Link href="/store" aria-current={current === "shop" ? "page" : undefined}>
+            {t("nav.shop")}
+          </Link>
+          <Link href="/order/track">{t("nav.track")}</Link>
+          <Link href="/legal/contact">{t("nav.contact")}</Link>
+        </nav>
+        <Link className="ub-search" href="/store">
+          {t("nav.search")}
+          <Icon name="search" />
+        </Link>
+        <div className="ub-nav__icons">
+          <Link className="ub-icon ub-icon--search" href="/store" aria-label={t("nav.search")}>
+            <Icon name="search" />
+          </Link>
+          <Link className="ub-icon ub-icon--user" href="/account" aria-label={t("nav.account")} data-testid="nav-account-link">
+            <Icon name="user" />
+          </Link>
+          <Suspense fallback={<CartFallback />}>
+            <CartCount />
+          </Suspense>
+        </div>
+        <Button href="/store" small className="ub-nav__cta">
+          {t("nav.cta")}
+        </Button>
+      </div>
+    </header>
+  )
+}

package/templates/storefront/src/modules/ub/pdp/buy-box.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import { addToCart } from "@lib/data/cart"
+import { getPricesForVariant } from "@lib/util/get-product-price"
+import { convertToLocale } from "@lib/util/money"
+import { HttpTypes } from "@medusajs/types"
+import { isEqual } from "lodash"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useMemo, useState, useTransition } from "react"
+
+export type BuyBoxLabels = {
+  addToCart: string
+  buyNow: string
+  adding: string
+  selectVariant: string
+  outOfStock: string
+  /** "Save {amount}" */
+  save: string
+}
+
+const optionsOf = (v?: HttpTypes.StoreProductVariant) =>
+  (v?.options ?? []).reduce<Record<string, string>>((acc, o) => {
+    if (o.option_id) acc[o.option_id] = o.value
+    return acc
+  }, {})
+
+/**
+ * Options, prix et boutons « Add to Cart » / « Buy Now » (markup ub-pdp).
+ * Le prix affiché vient de Medusa (calculated_price) ; le panier ne reçoit
+ * qu'un identifiant de variante et une quantité, jamais un prix.
+ */
+export default function BuyBox({
+  product,
+  labels,
+  disabled,
+}: {
+  product: HttpTypes.StoreProduct
+  labels: BuyBoxLabels
+  disabled?: boolean
+}) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [pending, startTransition] = useTransition()
+
+  const variants = product.variants ?? []
+  const initial = variants.find((v) => v.id === searchParams.get("v_id")) ?? (variants.length === 1 ? variants[0] : undefined)
+  const [options, setOptions] = useState<Record<string, string>>(optionsOf(initial))
+
+  const selected = useMemo(() => variants.find((v) => isEqual(optionsOf(v), options)), [variants, options])
+
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams.toString())
+    if ((params.get("v_id") ?? undefined) === selected?.id) return
+    if (selected?.id) params.set("v_id", selected.id)
+    else params.delete("v_id")
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected?.id])
+
+  const inStock =
+    !!selected &&
+    (!selected.manage_inventory || selected.allow_backorder || (selected.inventory_quantity ?? 0) > 0)
+
+  // Prix de la variante choisie, sinon le moins cher du produit
+  const cheapest = [...variants]
+    .filter((v) => v.calculated_price?.calculated_amount != null)
+    .sort((a, b) => a.calculated_price!.calculated_amount! - b.calculated_price!.calculated_amount!)[0]
+  const price = getPricesForVariant(selected ?? cheapest)
+  const onSale = price && price.original_price_number > price.calculated_price_number
+
+  const add = (thenCheckout: boolean) => {
+    if (!selected?.id) return
+    startTransition(async () => {
+      await addToCart({ variantId: selected.id, quantity: 1 })
+      if (thenCheckout) router.push("/checkout?step=address")
+    })
+  }
+
+  const blocked = !selected || !inStock || !!disabled || pending
+  const label = !selected ? labels.selectVariant : !inStock ? labels.outOfStock : pending ? labels.adding : labels.addToCart
+
+  return (
+    <>
+      {price && (
+        <>
+          {onSale && <p className="ub-pdp__was">{price.original_price}</p>}
+          <div className="ub-pdp__price">
+            <b data-testid="product-price">{price.calculated_price}</b>
+            {onSale && (
+              <span className="ub-save">
+                {labels.save.replace(
+                  "{amount}",
+                  convertToLocale({
+                    amount: price.original_price_number - price.calculated_price_number,
+                    currency_code: price.currency_code,
+                  })
+                )}
+              </span>
+            )}
+          </div>
+        </>
+      )}
+
+      {variants.length > 1 &&
+        (product.options ?? []).map((option) => (
+          <div className="ub-options" role="group" aria-label={option.title ?? undefined} key={option.id}>
+            {(option.values ?? []).map((v) => (
+              <button
+                key={v.id}
+                type="button"
+                className="ub-opt"
+                aria-pressed={options[option.id] === v.value}
+                disabled={!!disabled || pending}
+                onClick={() => setOptions((prev) => ({ ...prev, [option.id]: v.value }))}
+                data-testid="option-button"
+              >
+                {v.value}
+              </button>
+            ))}
+          </div>
+        ))}
+
+      <div className="ub-pdp__buy">
+        <button
+          type="button"
+          className="ub-btn ub-btn--primary ub-btn--full"
+          disabled={blocked}
+          onClick={() => add(false)}
+          data-testid="add-product-button"
+        >
+          {label}
+        </button>
+        <button type="button" className="ub-btn ub-btn--dark ub-btn--full" disabled={blocked} onClick={() => add(true)}>
+          {labels.buyNow}
+        </button>
+      </div>
+    </>
+  )
+}

package/templates/storefront/src/modules/ub/pdp/gallery.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { useState } from "react"
+
+type Img = { id: string; url: string }
+
+/** Galerie de la fiche produit : image principale + vignettes (4 max visibles). */
+export default function Gallery({ images, alt }: { images: Img[]; alt: string }) {
+  const [current, setCurrent] = useState(0)
+  const main = images[current]
+
+  return (
+    <div>
+      <div className={`ub-gallery__main${main ? "" : " ub-ph"}`}>
+        {main && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img src={main.url} alt={alt} style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: "inherit" }} />
+        )}
+      </div>
+      {images.length > 1 && (
+        <div className="ub-gallery__thumbs">
+          {images.slice(0, 4).map((img, i) => (
+            <button
+              key={img.id}
+              type="button"
+              className="ub-ph"
+              aria-current={i === current ? "true" : undefined}
+              aria-label={`${alt} ${i + 1}`}
+              onClick={() => setCurrent(i)}
+              style={{ padding: 0, overflow: "hidden", cursor: "pointer" }}
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={img.url} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/templates/storefront/src/modules/ub/product-card.tsx

@@ -0,0 +1,66 @@
+import Link from "next/link"
+import { t } from "@lib/boutique/i18n"
+import { getProductPrice } from "@lib/util/get-product-price"
+import { HttpTypes } from "@medusajs/types"
+import { Icon } from "./icons"
+
+/** Carte produit des maquettes. Prix calculés par Medusa pour la région de la boutique. */
+export default function ProductCard({ product }: { product: HttpTypes.StoreProduct }) {
+  const { cheapestPrice: price } = getProductPrice({ product })
+  const onSale = price?.price_type === "sale"
+  const href = `/products/${product.handle}`
+  const image = product.thumbnail ?? product.images?.[0]?.url
+  const category = product.categories?.[0]?.name ?? product.collection?.title
+
+  return (
+    <article className="ub-card" data-testid="product-wrapper">
+      {onSale && price?.percentage_diff && (
+        <span className="ub-badge ub-badge--sale">{t("card.sale", { percent: price.percentage_diff })}</span>
+      )}
+      <Link
+        className={`ub-card__media${image ? "" : " ub-ph"}`}
+        href={href}
+        aria-label={t("card.view", { name: product.title ?? "" })}
+      >
+        {image && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img src={image} alt="" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+        )}
+      </Link>
+      <div className="ub-card__body">
+        {category && <p className="ub-card__cat">{category}</p>}
+        <h3 className="ub-card__name">
+          <Link href={href} data-testid="product-title">
+            {product.title}
+          </Link>
+        </h3>
+        <div className="ub-card__foot">
+          {price && (
+            <div className={`ub-price${onSale ? " ub-price--sale" : ""}`}>
+              <span className="ub-price__now">{price.calculated_price}</span>
+              {onSale && <span className="ub-price__was">{price.original_price}</span>}
+            </div>
+          )}
+          <Link className="ub-card__cart" href={href} aria-label={t("card.addToCart")}>
+            <span className="ub-cart-ic">
+              <Icon name="cart" />
+            </span>
+            <span className="ub-arrow">
+              <Icon name="arrowUpRight" />
+            </span>
+          </Link>
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export function ProductGrid({ products }: { products: HttpTypes.StoreProduct[] }) {
+  return (
+    <div className="ub-grid">
+      {products.map((p) => (
+        <ProductCard key={p.id} product={p} />
+      ))}
+    </div>
+  )
+}

package/templates/storefront/src/modules/ub/top-bar.tsx

@@ -0,0 +1,20 @@
+import { Icon, type IconName } from "./icons"
+
+const ICONS: IconName[] = ["truck", "tag", "lock"]
+
+export default function TopBar({ messages }: { messages: string[] }) {
+  if (!messages.length) return null
+
+  return (
+    <div className="ub-topbar">
+      <div className="ub-wrap">
+        {messages.slice(0, 3).map((m, i) => (
+          <span key={i}>
+            <Icon name={ICONS[i]} />
+            <span>{m}</span>
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/modules/ub/track-form.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import { useActionState } from "react"
+import { useT } from "@lib/boutique/i18n-client"
+import { trackOrder, type TrackState } from "@lib/data/order-lookup"
+import { convertToLocale } from "@lib/util/money"
+
+const STEPS = ["placed", "shipped", "delivered"] as const
+
+/** Formulaire de suivi (n° de commande + e-mail) et résultat : étapes, articles, liens de suivi. */
+export default function TrackForm() {
+  const t = useT()
+  const [state, action, pending] = useActionState<TrackState, FormData>(trackOrder, {})
+  const order = state.order
+  const date = (iso?: string | null) =>
+    iso ? new Date(iso).toLocaleDateString(document.documentElement.lang, { dateStyle: "long" }) : ""
+
+  return (
+    <div style={{ display: "grid", gap: 24 }}>
+      <form action={action} style={{ display: "grid", gap: 12, maxWidth: 420 }}>
+        <label className="ub-field ub-field--full">
+          {t("track.number")}
+          <input className="ub-input" name="number" inputMode="numeric" required placeholder="1042" />
+        </label>
+        <label className="ub-field ub-field--full">
+          {t("track.email")}
+          <input className="ub-input" name="email" type="email" required autoComplete="email" />
+        </label>
+        <button className="ub-btn ub-btn--primary" type="submit" disabled={pending}>
+          {pending ? t("track.searching") : t("track.submit")}
+        </button>
+        {state.error && (
+          <p role="alert" style={{ color: "var(--sale)" }}>
+            {t(`track.error.${state.error}`)}
+          </p>
+        )}
+      </form>
+
+      {order && (
+        <section aria-live="polite" style={{ display: "grid", gap: 16 }}>
+          <h2 className="ub-head" style={{ fontSize: 22 }}>
+            {t("track.order", { number: order.number })} · {date(order.created_at)}
+          </h2>
+
+          {order.step === "canceled" ? (
+            <p>{t("track.step.canceled")}</p>
+          ) : (
+            <ol style={{ display: "flex", gap: 8, listStyle: "none", padding: 0, flexWrap: "wrap" }}>
+              {STEPS.map((s, i) => {
+                const done = STEPS.indexOf(order.step as (typeof STEPS)[number]) >= i
+                return (
+                  <li
+                    key={s}
+                    className="ub-tag"
+                    aria-current={order.step === s ? "step" : undefined}
+                    style={{ padding: "6px 12px", background: done ? "var(--primary)" : "var(--surface)", color: done ? "var(--on-primary)" : "var(--ink-muted)" }}
+                  >
+                    {t(`track.step.${s}`)}
+                  </li>
+                )
+              })}
+            </ol>
+          )}
+
+          <ul style={{ display: "grid", gap: 4 }}>
+            {order.items.map((i, k) => (
+              <li key={k}>
+                {i.quantity} × {i.title}
+                {i.variant ? ` — ${i.variant}` : ""}
+              </li>
+            ))}
+          </ul>
+          <p>
+            <b>{t("cart.total")} : </b>
+            {convertToLocale({ amount: order.total, currency_code: order.currency_code })}
+          </p>
+
+          {order.shipments.flatMap((s) => s.tracking).filter((tr) => tr.number).map((tr, k) => (
+            <p key={k}>
+              {t("track.tracking")} : <b>{tr.number}</b>{" "}
+              {tr.url && /^https?:\/\//.test(tr.url) && (
+                <a href={tr.url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "underline" }}>
+                  {t("track.follow")}
+                </a>
+              )}
+            </p>
+          ))}
+        </section>
+      )}
+    </div>
+  )
+}