@unbox-plus/cli 0.20.4

package/template/components/landing/product-picker.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+// Passo 2 do funil (/carrinho/oferta) — tela split no padrão das lojas Unbox de produção:
+// imagem da marca à esquerda (desktop), à direita logo + confiança, escolha de produtos
+// com stepper, frequência de envio (assinatura REAL da política da loja vs compra única)
+// e CTA que só libera quando a quantidade alvo fecha. Envia tudo num único POST /api/cart
+// → /checkout. Tela .checkout-root (o CSS global esconde o chrome do site).
+import * as React from "react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { CaretLeft, Minus, Plus, CheckCircle, ShieldCheck, Truck, LockSimple } from "@phosphor-icons/react/dist/ssr";
+import { formatBRL } from "@/lib/format";
+import { goToCheckout } from "@/lib/checkout-nav";
+import { PoweredByUnbox } from "@/components/powered-by-unbox";
+import type { CatalogProductItem } from "@/components/catalog/catalog-client";
+
+export interface PickerSubscription {
+  percentOff: number | null;
+  frequencies: { id: string; title: string; note?: string }[];
+}
+
+export function ProductPicker({
+  products,
+  shopName,
+  subscription,
+  recurrableIds = [],
+  sideImage = "/brand/hero-desktop.svg",
+  tagline = "escolha o que combina com você",
+}: {
+  products: CatalogProductItem[];
+  shopName: string;
+  subscription: PickerSubscription | null;
+  recurrableIds?: string[];
+  sideImage?: string;
+  tagline?: string;
+}) {
+  const router = useRouter();
+  const params = useSearchParams();
+  const target = Math.max(1, Math.min(12, Number(params.get("quantity")) || 1));
+  const [qty, setQty] = React.useState<Record<string, number>>(() =>
+    products[0]?.variantId ? { [products[0].variantId]: target } : {},
+  );
+  const [mode, setMode] = React.useState<"assinatura" | "unica">(subscription ? "assinatura" : "unica");
+  const [freqId, setFreqId] = React.useState(subscription?.frequencies[0]?.id ?? "");
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const picked = Object.values(qty).reduce((a, b) => a + b, 0);
+  const remaining = target - picked;
+  // assinatura só vale pros produtos que a permitem; o desconto REAL vem da política da loja
+  const pct = subscription?.percentOff ?? 0;
+  const factor = mode === "assinatura" && pct ? 1 - pct / 100 : 1;
+  const isRecurrable = (p: CatalogProductItem) => recurrableIds.includes(p.productId ?? "");
+  const totalFull = products.reduce((acc, p) => acc + (qty[p.variantId ?? ""] ?? 0) * p.price, 0);
+  const total = products.reduce((acc, p) => {
+    const n = qty[p.variantId ?? ""] ?? 0;
+    const f = mode === "assinatura" && pct && isRecurrable(p) ? 1 - pct / 100 : 1;
+    return acc + n * p.price * f;
+  }, 0);
+  const perUnit = picked > 0 ? total / picked : products[0]?.price ?? 0;
+
+  function bump(p: CatalogProductItem, d: number) {
+    if (!p.variantId || p.soldOut) return;
+    setQty((q) => {
+      const cur = q[p.variantId!] ?? 0;
+      if (d > 0 && picked >= target) return q;
+      return { ...q, [p.variantId!]: Math.max(0, cur + d) };
+    });
+  }
+
+  async function checkout() {
+    setBusy(true);
+    setError(null);
+    try {
+      const assinatura = mode === "assinatura" && !!subscription;
+      const items = products
+        .filter((p) => (qty[p.variantId ?? ""] ?? 0) > 0 && p.productId && p.variantId)
+        .map((p) => ({
+          productId: p.productId,
+          productVariantId: p.variantId,
+          price: p.price,
+          quantity: qty[p.variantId!],
+          thumbnail: p.imageUrl ?? "",
+          isRecurring: assinatura && isRecurrable(p),
+        }));
+      const body: Record<string, unknown> = { items };
+      if (assinatura && freqId && items.some((it) => it.isRecurring)) body.recurringItemsFrequencyId = freqId;
+      const res = await fetch("/api/cart", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) throw new Error((await res.json().catch(() => ({})))?.error || "Não foi possível montar o carrinho.");
+      // goToCheckout: o SERVIDOR decide o destino (interno ou hosted) e monta a URL com
+      // ?id=&token= do carrinho — contrato da recuperação. push("/checkout") cru perderia
+      // os params e quebraria no modo hosted (rota removida).
+      await goToCheckout(router);
+    } catch (e: any) {
+      setError(e.message);
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="checkout-root store-layout min-h-screen bg-[var(--store-surface)]">
+      {/* progresso full-width */}
+      <div className="sticky top-0 z-10 border-b border-[var(--store-line)] bg-[var(--store-surface)]/95 backdrop-blur">
+        <div className="mx-auto flex max-w-[var(--container-max,1240px)] items-center justify-center gap-2.5 px-4 py-3.5 text-[13px] font-bold">
+          <span className="flex items-center gap-1.5 text-[var(--store-ink)]"><span className="flex h-6 w-6 items-center justify-center rounded-full bg-[var(--store-cta,#D97706)] text-[12px] text-[var(--store-cta-fg,#1C1207)]">1</span> quantidade</span>
+          <span className="h-[2px] w-10 rounded bg-[var(--store-cta,#D97706)]" />
+          <span className="flex items-center gap-1.5 text-[var(--store-ink)]"><span className="flex h-6 w-6 items-center justify-center rounded-full bg-[var(--store-cta,#D97706)] text-[12px] text-[var(--store-cta-fg,#1C1207)]">2</span> escolha</span>
+          <span className="h-[2px] w-10 rounded bg-[var(--store-line-2)]" />
+          <span className="flex items-center gap-1.5 text-[var(--store-faint)]"><span className="flex h-6 w-6 items-center justify-center rounded-full border border-[var(--store-faint)] text-[12px]">✓</span> pagamento</span>
+        </div>
+      </div>
+
+      <div className="grid lg:grid-cols-[1fr_1.1fr]">
+        {/* painel visual (desktop) */}
+        <div className="relative hidden min-h-[calc(100vh-49px)] lg:block">
+          <img src={sideImage} alt="" className="absolute inset-0 h-full w-full object-cover" />
+        </div>
+
+        {/* conteúdo */}
+        <div className="mx-auto w-full max-w-[680px] px-4 py-7 sm:px-8">
+          <button type="button" onClick={() => router.back()} className="flex items-center gap-1.5 text-[13px] font-semibold text-[var(--store-muted)] hover:text-[var(--store-ink)]"><CaretLeft weight="bold" />voltar</button>
+
+          <div className="mt-4 flex items-center gap-3.5">
+            <img src="/brand/logo.svg" alt={shopName} className="h-10 w-auto" />
+            <div>
+              <div className="font-display text-[15px] font-extrabold leading-tight">{tagline}</div>
+              <div className="mt-1 flex flex-wrap gap-x-3.5 gap-y-1 text-[11.5px] font-semibold text-[var(--store-muted)]">
+                <span className="flex items-center gap-1"><ShieldCheck weight="fill" className="text-[var(--store-primary,#18181B)]" />Compra segura</span>
+                <span className="flex items-center gap-1"><Truck weight="fill" className="text-[var(--store-primary,#18181B)]" />Entrega em todo o Brasil</span>
+                <span className="flex items-center gap-1"><LockSimple weight="fill" className="text-[var(--store-primary,#18181B)]" />Checkout seguro</span>
+              </div>
+            </div>
+          </div>
+
+          <h1 className="font-display mt-6 text-[19px] font-extrabold">2. Selecione os produtos</h1>
+          <p className="mt-0.5 text-[13.5px] text-[var(--store-muted)]">
+            {remaining > 0 ? `Escolha mais ${remaining} ${remaining === 1 ? "item" : "itens"} pra completar seu pedido.` : "Tudo escolhido! Revise abaixo e siga pro pagamento."}
+          </p>
+
+          <div className="mt-4 flex flex-col gap-3">
+            {products.map((p) => {
+              const n = qty[p.variantId ?? ""] ?? 0;
+              return (
+                <div key={p.slug} className={`relative flex items-center gap-3.5 rounded-2xl border-2 bg-white p-3.5 ${n > 0 ? "border-[var(--store-cta,#D97706)]" : "border-[var(--store-line-2)]"} ${p.soldOut ? "opacity-50" : ""}`}>
+                  {p.badge && <span className="absolute -top-2.5 right-4 rounded-full px-2.5 py-0.5 text-[10px] font-extrabold uppercase tracking-[0.4px]" style={{ background: p.badge.bg, color: p.badge.fg }}>{p.badge.label}</span>}
+                  <div className="flex h-[62px] w-[62px] flex-none items-center justify-center overflow-hidden rounded-xl bg-[var(--store-surface-2)]">
+                    {p.imageUrl ? <img src={p.imageUrl} alt="" className="h-full w-full object-contain p-1" /> : <span className="font-display text-[20px] font-extrabold text-[var(--store-primary,#18181B)]/30">{p.title[0]}</span>}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    {p.weight && <div className="text-[11.5px] text-[var(--store-muted)]">{p.weight}</div>}
+                    <div className="font-display truncate text-[15px] font-extrabold">{p.title}</div>
+                    <Link href={`/produto/${encodeURIComponent(p.slug)}`} className="text-[12px] font-semibold text-[var(--store-muted)] underline underline-offset-2">ver produto</Link>
+                  </div>
+                  {n > 0 ? (
+                    <div className="flex items-center gap-2">
+                      <button type="button" onClick={() => bump(p, -1)} aria-label={`Tirar ${p.title}`} className="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--store-chrome-bg,#18181B)] text-[var(--store-chrome-text,#ffffff)]"><Minus weight="bold" /></button>
+                      <span className="font-display w-6 text-center text-[16px] font-extrabold">{n}</span>
+                      <button type="button" onClick={() => bump(p, 1)} disabled={remaining <= 0} aria-label={`Adicionar ${p.title}`} className="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--store-chrome-bg,#18181B)] text-[var(--store-chrome-text,#ffffff)] disabled:opacity-40"><Plus weight="bold" /></button>
+                    </div>
+                  ) : (
+                    <button type="button" onClick={() => bump(p, 1)} disabled={p.soldOut || remaining <= 0} className="font-display rounded-full bg-[var(--store-chrome-bg,#18181B)] px-5 py-2.5 text-[13px] font-extrabold text-[var(--store-chrome-text,#ffffff)] disabled:opacity-40">Adicionar +</button>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+
+          {/* frequência de envio — só com política de assinatura REAL na loja */}
+          {subscription && (
+            <>
+              <h2 className="font-display mt-7 text-[19px] font-extrabold">3. Selecione a frequência de envio</h2>
+              <div className="mt-3 flex flex-col gap-3">
+                <button type="button" onClick={() => setMode("assinatura")} className={`rounded-2xl border-2 px-5 py-4 text-left ${mode === "assinatura" ? "border-[var(--store-chrome-bg,#18181B)] bg-white" : "border-[var(--store-line-2)] bg-white"}`}>
+                  <span className="flex items-center justify-between">
+                    <span className="flex items-center gap-2.5">
+                      <span className={`flex h-5 w-5 items-center justify-center rounded-full border-2 ${mode === "assinatura" ? "border-[var(--store-chrome-bg,#18181B)]" : "border-[var(--store-faint)]"}`}>{mode === "assinatura" && <span className="h-2.5 w-2.5 rounded-full bg-[var(--store-chrome-bg,#18181B)]" />}</span>
+                      <span className="font-display text-[16px] font-extrabold">Assinatura {subscription.frequencies.length === 1 ? subscription.frequencies[0].title : ""}</span>
+                    </span>
+                    {pct ? <span className="font-display text-[15px] font-extrabold text-[var(--store-ink)]">{formatBRL((products[0]?.price ?? 0) * (1 - pct / 100))}<span className="text-[12px] font-semibold text-[var(--store-muted)]">/unidade</span></span> : null}
+                  </span>
+                  {mode === "assinatura" && (
+                    <span className="mt-2.5 flex flex-col gap-1.5 text-[13px] font-semibold text-[var(--store-ink-2)]">
+                      {pct ? <span className="flex items-center gap-1.5"><CheckCircle weight="fill" className="text-[var(--store-primary,#18181B)]" />Economize {formatBRL(totalFull - total)} <span className="rounded-full bg-[var(--store-cta-soft,#FDF0DC)] px-2 py-0.5 text-[11px] font-extrabold text-[var(--store-cta-fg,#1C1207)]">{pct}% OFF</span></span> : null}
+                      <span className="flex items-center gap-1.5"><CheckCircle weight="fill" className="text-[var(--store-primary,#18181B)]" />Escolha quando quer receber</span>
+                      <span className="flex items-center gap-1.5"><CheckCircle weight="fill" className="text-[var(--store-primary,#18181B)]" />Pause ou modifique quando quiser</span>
+                      {subscription.frequencies.length > 1 && (
+                        <span className="mt-1 block text-[11.5px] font-medium leading-[1.4] text-[var(--store-muted)]">A frequência vale para todos os itens assinados deste pedido.</span>
+                      )}
+                      {subscription.frequencies.length > 1 && (
+                        <span className="mt-1 flex flex-wrap gap-2">
+                          {subscription.frequencies.map((f) => (
+                            <button key={f.id} type="button" onClick={(e) => { e.stopPropagation(); setFreqId(f.id); }} className={`rounded-full border px-3.5 py-1.5 text-[12.5px] font-bold ${freqId === f.id ? "border-[var(--store-chrome-bg,#18181B)] bg-[var(--store-chrome-bg,#18181B)] text-[var(--store-chrome-text,#ffffff)]" : "border-[var(--store-line-2)] bg-white text-[var(--store-ink-2)]"}`}>{f.title}</button>
+                          ))}
+                        </span>
+                      )}
+                    </span>
+                  )}
+                </button>
+                <button type="button" onClick={() => setMode("unica")} className={`flex items-center justify-between rounded-2xl border-2 px-5 py-4 text-left ${mode === "unica" ? "border-[var(--store-chrome-bg,#18181B)] bg-white" : "border-[var(--store-line-2)] bg-white"}`}>
+                  <span className="flex items-center gap-2.5">
+                    <span className={`flex h-5 w-5 items-center justify-center rounded-full border-2 ${mode === "unica" ? "border-[var(--store-chrome-bg,#18181B)]" : "border-[var(--store-faint)]"}`}>{mode === "unica" && <span className="h-2.5 w-2.5 rounded-full bg-[var(--store-chrome-bg,#18181B)]" />}</span>
+                    <span className="font-display text-[16px] font-extrabold">Compra Única</span>
+                  </span>
+                  <span className="font-display text-[15px] font-extrabold">{formatBRL(products[0]?.price ?? 0)}<span className="text-[12px] font-semibold text-[var(--store-muted)]">/unidade</span></span>
+                </button>
+              </div>
+            </>
+          )}
+
+          {error && <p className="mt-4 rounded-xl bg-[var(--store-sale-soft)] px-4 py-3 text-[13.5px] font-semibold text-[var(--store-sale)]">{error}</p>}
+
+          <div className="mt-5 flex flex-wrap items-center justify-between gap-2">
+            <span className="flex items-center gap-2">
+              {picked > 0 && <span className="rounded-full bg-[var(--store-primary-soft,#F1F1F3)] px-3 py-1 text-[12px] font-bold text-[var(--store-primary,#18181B)]">{formatBRL(perUnit)}/unidade</span>}
+              {mode === "assinatura" && pct > 0 && <span className="rounded-full bg-[var(--store-cta-soft,#FDF0DC)] px-3 py-1 text-[12px] font-extrabold text-[var(--store-cta-fg,#1C1207)]">{pct}%OFF</span>}
+            </span>
+            <span className="text-right">
+              {total < totalFull && <span className="mr-2 text-[12.5px] text-[var(--store-faint)] line-through">De {formatBRL(totalFull)}</span>}
+              <span className="font-display text-[20px] font-extrabold">{formatBRL(total)}</span>
+            </span>
+          </div>
+
+          <button type="button" onClick={checkout} disabled={busy || remaining > 0 || picked === 0}
+            className="font-display mt-4 w-full rounded-full bg-[var(--store-cta,#D97706)] py-4 text-[15.5px] font-extrabold tracking-[0.3px] text-[var(--store-cta-fg,#1C1207)] transition-colors hover:bg-[var(--store-cta-dark,#B45309)] disabled:bg-[var(--store-faint)] disabled:text-white">
+            {busy ? "Preparando o pagamento..." : remaining > 0 ? `Selecione mais ${remaining} ${remaining === 1 ? "pacote" : "pacotes"} →` : "Ir pro pagamento →"}
+          </button>
+
+          <div className="mt-4 mb-8 flex items-start gap-3.5 rounded-2xl border-2 border-dashed border-[var(--store-cta,#D97706)]/60 bg-white px-5 py-4">
+            <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--store-primary-soft,#F1F1F3)] text-[var(--store-primary,#18181B)]"><ShieldCheck weight="fill" className="text-[22px]" /></span>
+            <div className="text-[13px] leading-[1.5] text-[var(--store-muted)]">
+              <span className="block text-[11.5px]">Seu pedido está protegido por</span>
+              <span className="font-display block text-[15px] font-extrabold text-[var(--store-ink)]">Compra segura e troca fácil</span>
+              Arrependimento em até 7 dias após o recebimento (CDC).
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* mini rodapé da marca */}
+      <footer className="bg-[var(--store-chrome-bg,#18181B)]">
+        <div className="mx-auto flex max-w-[var(--container-max,1240px)] flex-wrap items-center justify-between gap-3 px-6 py-5 text-[12.5px] font-semibold text-[var(--store-chrome-muted)]">
+          <span className="font-display text-[15px] font-extrabold text-[var(--store-chrome-text,#ffffff)]">{shopName}</span>
+          <span className="flex items-center gap-5">
+            <Link href="/privacidade" className="no-underline hover:text-[var(--store-chrome-text,#ffffff)]">Política de Privacidade</Link>
+            <Link href="/termos" className="no-underline hover:text-[var(--store-chrome-text,#ffffff)]">Termos de Uso</Link>
+            {/* obrigatório (contrato Unbox) — não remova */}
+            <PoweredByUnbox />
+          </span>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/template/components/mobile-nav.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { List, Storefront, Tag, Package, User, CaretRight } from "@phosphor-icons/react/dist/ssr";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+
+export interface NavCategory { id: string; name: string; slug: string }
+
+export function MobileNav({
+  categories,
+  shopName,
+  /** Classes do BOTÃO que abre o menu. O default é o comportamento histórico (só mobile);
+   *  variantes de header que usam drawer também no desktop passam o seu (ver
+   *  components/chrome/headers/). O painel em si é igual em qualquer largura. */
+  triggerClassName = "text-[var(--store-ink)] md:hidden",
+}: {
+  categories: NavCategory[];
+  shopName: string;
+  triggerClassName?: string;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const close = () => setOpen(false);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger
+        render={
+          <button type="button" aria-label="Abrir menu" className={`flex h-10 w-10 items-center justify-center rounded-xl ${triggerClassName}`}>
+            <List weight="bold" className="text-[24px]" />
+          </button>
+        }
+      />
+      <SheetContent side="left" showCloseButton className="store-layout w-[86vw] max-w-[340px] gap-0 bg-white p-0 text-[var(--store-ink)]">
+        <SheetHeader className="border-b border-[var(--store-surface-2)] px-5 py-4">
+          <SheetTitle className="text-left">
+            {/* eslint-disable-next-line @next/next/no-img-element -- logo do chrome: SVG de poucos KB. O next/image marcaria lazy num elemento que aparece em toda página (o preload scanner perde o recurso) e o reencode come o traço fino do lettering. Otimizar poucos KB não paga essas duas contas. */}
+            <img src="/brand/logo.svg" alt={shopName} className="h-9 w-auto" />
+          </SheetTitle>
+        </SheetHeader>
+
+        <div className="flex flex-col gap-1 overflow-y-auto p-3">
+          <Row href="/produtos" icon={Storefront} label="Todos os produtos" onClick={close} />
+
+          <div className="mt-2 px-3 pb-1 text-[11px] font-extrabold uppercase tracking-[1px] text-[var(--store-faint)]">Categorias</div>
+          {categories.map((c) => (
+            <Row key={c.id} href={`/categoria/${encodeURIComponent(c.slug)}`} icon={Tag} label={c.name} onClick={close} />
+          ))}
+
+          <div className="my-2 border-t border-[var(--store-surface-2)]" />
+          <Row href="/conta/entrar" icon={Package} label="Acompanhar pedido" onClick={close} />
+          <Row href="/conta" icon={User} label="Minha conta" onClick={close} />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function Row({ href, icon: Icon, label, onClick }: { href: string; icon: React.ComponentType<any>; label: string; onClick: () => void }) {
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-[14.5px] font-semibold text-[var(--store-ink-2)] no-underline transition-colors hover:bg-[var(--store-primary-soft,#F1F1F3)] hover:text-[var(--store-primary,#18181B)]"
+    >
+      <Icon weight="bold" className="text-[19px] text-[var(--store-primary,#18181B)]" />
+      <span className="flex-1">{label}</span>
+      <CaretRight weight="bold" className="text-[12px] text-[var(--store-faint)]" />
+    </Link>
+  );
+}

package/template/components/order-status.tsx

@@ -0,0 +1,163 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Truck, Receipt, Package, CheckCircle, MapPin } from "@phosphor-icons/react/dist/ssr";
+import type { ShapedOrder } from "@/lib/orders";
+
+type Tone = "ok" | "bad" | "warn" | "muted";
+
+const TONES: Record<Tone, { bg: string; fg: string; bd: string }> = {
+  ok: { bg: "var(--store-primary-soft,#F1F1F3)", fg: "var(--store-primary,#18181B)", bd: "var(--store-primary-soft)" },
+  bad: { bg: "var(--store-sale-soft)", fg: "var(--store-sale)", bd: "var(--store-sale-soft)" },
+  warn: { bg: "var(--store-cta-soft)", fg: "var(--store-cta-fg)", bd: "var(--store-cta-soft)" },
+  muted: { bg: "var(--store-surface)", fg: "var(--store-ink-2)", bd: "var(--store-line-2)" },
+};
+
+/** Tom (cor) a partir do status cru do pedido. */
+export function statusTone(status?: string): Tone {
+  switch (status) {
+    case "COMPLETED":
+    case "PROCESSING":
+      return "ok";
+    case "CANCELED":
+    case "FAILED":
+      return "bad";
+    case "REFUNDED":
+      return "muted";
+    default:
+      return "warn"; // PENDING e afins
+  }
+}
+
+/** Badge de status. */
+export function StatusBadge({ label, tone = "muted" }: { label: string; tone?: Tone }) {
+  const t = TONES[tone];
+  return (
+    <span
+      className="inline-flex items-center rounded-full px-3 py-1 text-[12px] font-extrabold tracking-[0.2px]"
+      style={{ background: t.bg, color: t.fg, border: `1px solid ${t.bd}` }}
+    >
+      {label}
+    </span>
+  );
+}
+
+export function OrderStatusCard({ order }: { order: ShapedOrder }) {
+  return (
+    <div className="rounded-xl border border-[var(--store-line)] bg-white p-6">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <p className="text-[12.5px] font-semibold text-[var(--store-muted)]">Pedido</p>
+          <p className="font-display text-[20px] font-extrabold text-[var(--store-ink)]">#{order.referenceId}</p>
+        </div>
+        <StatusBadge label={order.statusLabel} tone={statusTone(order.status)} />
+      </div>
+
+      <div className="my-4 border-t border-[var(--store-surface-2)]" />
+
+      <dl className="flex flex-col gap-2.5 text-sm">
+        {order.total && (
+          <div className="flex justify-between gap-6">
+            <dt className="text-[var(--store-muted)]">Total</dt>
+            <dd className="font-display text-[15px] font-extrabold text-[var(--store-primary,#18181B)]">{order.total}</dd>
+          </div>
+        )}
+        {order.payment && (
+          <div className="flex justify-between gap-6">
+            <dt className="text-[var(--store-muted)]">Pagamento</dt>
+            <dd className="text-right font-semibold text-[var(--store-ink)]">
+              {order.payment.displayName ?? "—"}
+              {order.payment.cardBrand ? ` · ${order.payment.cardBrand}` : ""}
+              {order.payment.statusLabel ? ` · ${order.payment.statusLabel}` : ""}
+            </dd>
+          </div>
+        )}
+        {order.payment?.errorMessage && (
+          <p className="rounded-lg bg-[var(--store-sale-soft)] px-3 py-2 text-[13px] font-semibold text-[var(--store-sale)]">{order.payment.errorMessage}</p>
+        )}
+      </dl>
+
+      {order.items.length > 0 && (
+        <>
+          <div className="my-4 border-t border-[var(--store-surface-2)]" />
+          <p className="mb-2.5 text-[13px] font-bold text-[var(--store-ink-2)]">Itens do pedido</p>
+          <ul className="flex flex-col gap-2.5">
+            {order.items.map((it, i) => {
+              const row = (
+                <>
+                  <span className="relative flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-md border border-[var(--store-line)] bg-[var(--store-surface)]">
+                    {it.thumbnail ? <Image src={it.thumbnail} alt={it.title} fill sizes="48px" className="object-contain p-1" /> : <Package className="text-[var(--store-faint)]" />}
+                  </span>
+                  <div className="min-w-0 flex-1">
+                    <div className="text-[14px] font-bold leading-[1.25] text-[var(--store-ink)] line-clamp-2">{it.title}</div>
+                    <div className="mt-0.5 text-[12.5px] text-[var(--store-muted)]">
+                      {it.quantity}× {it.displayPrice ? `· ${it.displayPrice}` : ""}
+                    </div>
+                  </div>
+                  {it.displaySubtotal && <span className="shrink-0 text-[14px] font-extrabold text-[var(--store-primary,#18181B)]">{it.displaySubtotal}</span>}
+                </>
+              );
+              return it.slug ? (
+                <li key={i}>
+                  <Link href={`/produto/${encodeURIComponent(it.slug)}`} className="flex items-center gap-3 rounded-md border border-[var(--store-line)] bg-white p-2.5 no-underline transition-colors hover:border-[var(--store-primary,#18181B)]">{row}</Link>
+                </li>
+              ) : (
+                <li key={i} className="flex items-center gap-3 rounded-md border border-[var(--store-line)] bg-white p-2.5">{row}</li>
+              );
+            })}
+          </ul>
+        </>
+      )}
+
+      {order.address && (order.address.line || order.address.cityRegion) && (
+        <>
+          <div className="my-4 border-t border-[var(--store-surface-2)]" />
+          <div className="flex items-start gap-2 text-sm">
+            <MapPin weight="fill" className="mt-0.5 shrink-0 text-[var(--store-primary,#18181B)]" />
+            <div>
+              <p className="font-bold text-[var(--store-ink-2)]">Endereço de entrega</p>
+              <p className="mt-0.5 text-[var(--store-ink-2)]">
+                {order.address.fullName && <span className="font-semibold text-[var(--store-ink)]">{order.address.fullName}<br /></span>}
+                {[order.address.line, order.address.cityRegion].filter(Boolean).join(" · ")}
+              </p>
+            </div>
+          </div>
+        </>
+      )}
+
+      {order.fulfillment.length > 0 && (
+        <>
+          <div className="my-4 border-t border-[var(--store-surface-2)]" />
+          <div className="flex flex-col gap-2.5 text-sm">
+            <p className="flex items-center gap-2 font-bold text-[var(--store-ink-2)]"><Truck weight="bold" className="text-[var(--store-primary,#18181B)]" />Entrega</p>
+            {order.fulfillment.map((f, i) => (
+              <div key={i} className="flex items-center justify-between gap-4">
+                <span className="text-[var(--store-muted)]">{f.type ?? "Envio"}{f.status ? ` · ${f.status}` : ""}</span>
+                {f.trackingCode ? (
+                  <span className="rounded-md bg-[var(--store-surface)] px-2 py-0.5 font-mono text-xs text-[var(--store-ink-2)]">Rastreio: {f.trackingCode}</span>
+                ) : (
+                  <span className="text-[12.5px] text-[var(--store-faint)]">Sem rastreio ainda</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+
+      {(order.invoiceIssued || order.dispatched || order.delivered) && (
+        <div className="mt-4 flex flex-wrap gap-2">
+          {order.invoiceIssued && <PillIcon icon={Receipt} label="Nota fiscal emitida" />}
+          {order.dispatched && <PillIcon icon={Package} label="Despachado" />}
+          {order.delivered && <PillIcon icon={CheckCircle} label="Entregue" />}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PillIcon({ icon: Icon, label }: { icon: React.ComponentType<any>; label: string }) {
+  return (
+    <span className="inline-flex items-center gap-1.5 rounded-full border border-[var(--store-line-2)] bg-[var(--store-surface)] px-3 py-1 text-[12px] font-semibold text-[var(--store-ink-2)]">
+      <Icon weight="fill" className="text-[var(--store-primary,#18181B)]" />{label}
+    </span>
+  );
+}

package/template/components/powered-by-unbox.tsx

@@ -0,0 +1,27 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// POWERED BY UNBOX — OBRIGATÓRIO EM TODA LOJA (parte do contrato com a Unbox).
+// NÃO remova este componente do rodapé nem o asset /unbox/powered-by.png.
+// O build FALHA sem ele (scripts/check-unbox-brand.mjs, rodado no prebuild) —
+// ou seja, o site não deploya sem o selo. Restyle é permitido (tamanho/opacity),
+// remoção não.
+// ═══════════════════════════════════════════════════════════════════════════
+
+export function PoweredByUnbox({ className = "" }: { className?: string }) {
+  return (
+    <a
+      href="https://www.unbox.com.br?utm_source=storefront&utm_medium=powered-by"
+      target="_blank"
+      rel="noopener"
+      className={`inline-flex items-center gap-2 no-underline opacity-80 transition-opacity hover:opacity-100 ${className}`}
+    >
+      <span className="text-[11px] font-semibold tracking-[0.3px]">Powered by</span>
+      {/* REGRA DAS VARIANTES (definida pela Unbox): /unbox/powered-by.png é o arquivo ATIVO.
+          Rodapé ESCURO → copie powered-by-transparente.png (logo neon transparente) por cima.
+          Rodapé CLARO  → copie powered-by-fundo-preto.png (logo sobre fundo preto) por cima.
+          O CLI já escolhe a variante certa pelo chrome do preset; se você mudar a cor do
+          rodapé depois, troque o arquivo ativo pela variante correspondente. */}
+      {/* eslint-disable-next-line @next/next/no-img-element -- selo fixo de 67x23 px, servido do próprio domínio. */}
+      <img src="/unbox/powered-by.png" alt="Unbox" width={67} height={23} loading="lazy" decoding="async" className="h-[23px] w-auto" />
+    </a>
+  );
+}