@unbox-plus/cli 0.20.4

package/template/app/(loja)/checkout/page.tsx

@@ -0,0 +1,80 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { getCatalog, getPaymentMethods, getShopData } from "@/lib/queries";
+import { getCartRef, getRecurFreq } from "@/lib/session";
+import { resolveProductPrice } from "@/lib/format";
+import { CheckoutClient, type UpsellOffer } from "@/components/checkout/checkout-client";
+import { DataLayerReady } from "@/components/analytics/data-layer-ready";
+import { mockupOr } from "@/lib/mockup";
+
+export const metadata: Metadata = { title: "Checkout", robots: { index: false } };
+
+export default async function CheckoutPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  // GARANTIA: a URL do checkout SEMPRE carrega ?id=&token= do carrinho (contrato do link de
+  // recuperação — igual ao checkout hospedado da Unbox). Quem chega sem os params (refresh,
+  // link direto, navegação antiga) é redirecionado pra URL enriquecida, lida do cookie.
+  // Sem isso, CRM que captura a URL navegada (pixel/GTM) não tem como montar a recuperação.
+  const sp = await searchParams;
+  if (!sp.id || !sp.token) {
+    const ref = await getCartRef();
+    if (ref) {
+      const q = new URLSearchParams();
+      // preserva params existentes (ex.: step) antes de anexar o ponteiro do carrinho
+      for (const [k, v] of Object.entries(sp)) {
+        if (typeof v === "string" && k !== "id" && k !== "token") q.set(k, v);
+      }
+      q.set("id", ref.cartId);
+      q.set("token", ref.cartToken);
+      const freq = await getRecurFreq();
+      if (freq && !q.has("freq")) q.set("freq", freq);
+      redirect(`/checkout?${q.toString()}`);
+    }
+  }
+  const [methods, shop, catalog] = await Promise.all([
+    mockupOr(getPaymentMethods(), [], "checkout/getPaymentMethods"), // sem métodos não há checkout: falha com credenciais tem que aparecer
+    getShopData().catch(() => null),
+    getCatalog({ first: 12 }).catch(() => ({ nodes: [] as any[] })),
+  ]);
+
+  // Ofertas reais para o passo de upsell (produtos do catálogo + quick-add real).
+  const upsells: UpsellOffer[] = (catalog.nodes ?? [])
+    .map((n: any) => n.product ?? n)
+    // só em estoque (não esgotado) e com preço válido
+    .filter((rp: any) => rp?.slug && !rp.isSoldOut && rp.variants?.[0]?.pricing?.[0]?.price != null)
+    .slice(0, 4)
+    .map((rp: any): UpsellOffer => {
+      const rprice = resolveProductPrice(rp);
+      const rv0 = rp.variants?.[0];
+      const price = rv0?.pricing?.[0]?.price ?? 0;
+      const compareAt = rv0?.pricing?.[0]?.compareAtPrice?.amount ?? null;
+      return {
+        productId: rp.productId,
+        variantId: rv0?._id ?? "",
+        name: rp.title,
+        weight: rv0?.title ?? "",
+        desc: rp.shortDescription ?? "Combina com o que você já escolheu.",
+        imageUrl: rp.imageUrls?.[0] ?? null,
+        price,
+        displayPrice: rprice.displayPrice,
+        oldPrice: compareAt && compareAt > price ? compareAt : null,
+      };
+    });
+
+  return (
+    <>
+    <DataLayerReady pageType="checkout" />
+    <h1 className="sr-only">Finalizar compra</h1>
+    <CheckoutClient
+      methods={methods as any}
+      maxInstallments={shop?.settings?.maxInstallments ?? 12}
+      acceptsCard={shop?.acceptsCreditCard ?? true}
+      upsells={upsells}
+      shopName={shop?.name ?? "Minha Loja"}
+    />
+    </>
+  );
+}

package/template/app/(loja)/checkout/pix/[ref]/page.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { useParams } from "next/navigation";
+import QRCode from "qrcode";
+import { Copy, Check, Loader2, CheckCircle2, RefreshCw } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+
+export default function PixPage() {
+  const params = useParams<{ ref: string }>();
+  const ref = params.ref;
+  const [emv, setEmv] = React.useState<string | null>(null);
+  const [qrDataUrl, setQrDataUrl] = React.useState<string | null>(null);
+  const [copied, setCopied] = React.useState(false);
+  const [status, setStatus] = React.useState<{ paid: boolean; statusLabel: string } | null>(null);
+  const [expired, setExpired] = React.useState(false);
+
+  // recupera o copia-e-cola do sessionStorage (setado no checkout)
+  React.useEffect(() => {
+    try {
+      const v = sessionStorage.getItem(`unbox_pix:${ref}`);
+      if (v) {
+        setEmv(v);
+        QRCode.toDataURL(v, { width: 240, margin: 1 }).then(setQrDataUrl).catch(() => {});
+      }
+    } catch {}
+  }, [ref]);
+
+  // polling de status (doc 11): fallback à confirmação por webhook
+  React.useEffect(() => {
+    let stop = false;
+    const start = Date.now();
+    const tick = async () => {
+      if (stop) return;
+      try {
+        const res = await fetch(`/api/order/${ref}`, { cache: "no-store" });
+        const data = await res.json();
+        if (res.ok && data.order) {
+          setStatus({ paid: data.order.paid, statusLabel: data.order.statusLabel });
+          if (data.order.paid) return; // para o polling
+          if (["CANCELED", "FAILED"].includes(data.order.status)) {
+            setExpired(true);
+            return;
+          }
+        }
+      } catch {}
+      if (Date.now() - start > 10 * 60 * 1000) {
+        setExpired(true);
+        return;
+      }
+      if (!stop) setTimeout(tick, 5000);
+    };
+    const t = setTimeout(tick, 3000);
+    return () => {
+      stop = true;
+      clearTimeout(t);
+    };
+  }, [ref]);
+
+  const copy = async () => {
+    if (!emv) return;
+    await navigator.clipboard.writeText(emv);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  if (status?.paid) {
+    return (
+      <div className="mx-auto max-w-md py-10 text-center">
+        <CheckCircle2 className="mx-auto size-14 text-primary" />
+        <h1 className="mt-4 text-2xl font-bold">Pagamento confirmado!</h1>
+        <p className="mt-2 text-muted-foreground">Recebemos seu Pix. Já estamos preparando seu pedido.</p>
+        <div className="mt-6 flex justify-center gap-2">
+          <Button nativeButton={false} render={<Link href={`/pedido/${ref}`} />}>Ver pedido</Button>
+          <Button variant="outline" nativeButton={false} render={<Link href="/produtos" />}>Continuar comprando</Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-md py-6">
+      <h1 className="text-2xl font-bold">Pague com Pix</h1>
+      <p className="mt-1 text-sm text-muted-foreground">Pedido #{ref}</p>
+
+      {expired ? (
+        <Alert variant="destructive" className="mt-6">
+          <AlertTitle>Pix expirado</AlertTitle>
+          <AlertDescription>
+            O tempo para pagamento terminou. Refaça o pedido para gerar um novo Pix.
+          </AlertDescription>
+        </Alert>
+      ) : (
+        <div className="mt-6 rounded-xl border p-6 text-center">
+          {qrDataUrl ? (
+            <Image src={qrDataUrl} alt="QR Code Pix" width={240} height={240} className="mx-auto rounded-lg" unoptimized />
+          ) : (
+            <div className="mx-auto flex h-[240px] w-[240px] items-center justify-center rounded-lg bg-muted text-sm text-muted-foreground">
+              {emv ? "gerando QR..." : "Abra o app do banco e use o código abaixo"}
+            </div>
+          )}
+
+          {emv && (
+            <div className="mt-4">
+              <p className="mb-1 text-xs text-muted-foreground">Pix copia e cola</p>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 truncate rounded-md bg-muted px-2 py-2 text-left text-xs">{emv}</code>
+                <Button type="button" variant="outline" size="icon" onClick={copy} aria-label="Copiar código Pix">
+                  {copied ? <Check /> : <Copy />}
+                </Button>
+              </div>
+            </div>
+          )}
+
+          <p className="mt-5 flex items-center justify-center gap-2 text-sm text-muted-foreground">
+            <Loader2 className="size-4 animate-spin" /> Aguardando confirmação do pagamento…
+          </p>
+          {status && <p className="mt-1 text-xs text-muted-foreground">Status atual: {status.statusLabel}</p>}
+        </div>
+      )}
+
+      <div className="mt-4 flex justify-center gap-2">
+        <Button variant="outline" nativeButton={false} render={<Link href="/checkout" />}>
+          <RefreshCw /> Gerar novo Pix
+        </Button>
+        <Button variant="ghost" nativeButton={false} render={<Link href={`/pedido/${ref}`} />}>Ver pedido</Button>
+      </div>
+    </div>
+  );
+}

package/template/app/(loja)/conta/assinaturas/[referenceId]/page.tsx

@@ -0,0 +1,112 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { ArrowLeft } from "@phosphor-icons/react/dist/ssr";
+import { getCustomerClient } from "@/lib/customer-session";
+import { getShopData } from "@/lib/queries";
+import { subscriptionStatusLabel } from "@/lib/unbox/customer";
+import { AccountShell } from "@/components/account/account-shell";
+import { EmptyState } from "@/components/empty-state";
+import { StatusBadge } from "@/components/order-status";
+import { SubscriptionActions } from "@/components/account/subscription-actions";
+
+export const metadata: Metadata = { title: "Assinatura", robots: { index: false } };
+
+export default async function AssinaturaDetalhePage({ params }: { params: Promise<{ referenceId: string }> }) {
+  const me = await getCustomerClient();
+  if (!me) redirect("/conta/entrar");
+  const { referenceId } = await params;
+
+  const [sub, shop] = await Promise.all([
+    me.subscription(referenceId).catch(() => null),
+    getShopData().catch(() => null),
+  ]);
+
+  if (!sub) {
+    return (
+      <AccountShell title="Assinatura">
+        <EmptyState title="Assinatura não encontrada" />
+      </AccountShell>
+    );
+  }
+
+  const cycles = await me.subscriptionCycles(sub._id, 12).catch(() => ({ nodes: [] }));
+  const actions = shop?.recurringOrdersPolicy?.customerActions ?? {};
+  const status = sub.status?.value ?? "ACTIVE";
+  const card = sub.unboxPayCustomerCreditCard;
+  const addr = sub.shippingAddressBook;
+  const tone = status === "CANCELED" ? "bad" : status === "PAUSED" ? "warn" : "ok";
+
+  return (
+    <AccountShell title={`Assinatura #${sub.referenceId}`}>
+      <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)]">Frequência</p>
+            <p className="font-display text-[18px] font-extrabold text-[var(--store-ink)]">{sub.frequency?.title ?? "—"}</p>
+          </div>
+          <StatusBadge label={subscriptionStatusLabel(status)} tone={tone} />
+        </div>
+
+        <div className="my-4 border-t border-[var(--store-surface-2)]" />
+        <dl className="grid gap-3 text-sm sm:grid-cols-2">
+          {sub.totalAmount?.displayAmount && <Info label="Valor por ciclo" value={sub.totalAmount.displayAmount} />}
+          {sub.cyclesInformation?.nextCycleDate && (
+            <Info label="Próxima cobrança" value={new Date(sub.cyclesInformation.nextCycleDate).toLocaleDateString("pt-BR")} />
+          )}
+          {card && <Info label="Cartão" value={`•••• ${card.last4Digits} (${card.expirationMonth}/${card.expirationYear})`} />}
+          {addr && <Info label="Entrega" value={`${addr.address1}, ${addr.number ?? ""} · ${addr.city}/${addr.region}`} />}
+          {sub.pricingPolicy?.type === "PERCENTAGE_OFF" && <Info label="Desconto" value={`${sub.pricingPolicy.value}%`} />}
+        </dl>
+
+        {sub.items?.length > 0 && (
+          <>
+            <div className="my-4 border-t border-[var(--store-surface-2)]" />
+            <p className="mb-2 text-[13px] font-bold text-[var(--store-ink-2)]">Itens</p>
+            <ul className="flex flex-col gap-1 text-sm text-[var(--store-muted)]">
+              {sub.items.map((it: any, i: number) => (
+                <li key={i}><span className="font-bold text-[var(--store-primary,#18181B)]">{it.quantity}×</span> {it.productERPCode ?? it.productId}</li>
+              ))}
+            </ul>
+          </>
+        )}
+      </div>
+
+      <SubscriptionActions
+        recurringOrderId={sub._id}
+        status={status}
+        actions={actions}
+        items={(sub.items ?? []).map((it: any) => ({ productId: it.productId, variantId: it.variantId, quantity: it.quantity }))}
+      />
+
+      {cycles.nodes?.length > 0 && (
+        <div className="mt-6">
+          <h2 className="font-display mb-2.5 text-[16px] font-bold text-[var(--store-ink)]">Histórico de ciclos</h2>
+          <ul className="flex flex-col divide-y divide-[var(--store-surface-2)] rounded-lg border border-[var(--store-line)] bg-white text-sm">
+            {cycles.nodes.map((c: any) => (
+              <li key={c._id} className="flex items-center justify-between p-3.5">
+                <span className="font-semibold text-[var(--store-ink-2)]">Ciclo #{c.cycleIndex}</span>
+                <span className="text-[var(--store-muted)]">
+                  {c.skipped ? "Pulado" : c.completedAt ? `Concluído em ${new Date(c.completedAt).toLocaleDateString("pt-BR")}` : "Pendente"}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <Link href="/conta/assinaturas" className="mt-6 inline-flex h-11 items-center gap-2 rounded-xl border-[1.5px] border-[var(--store-line-2)] bg-white px-4 text-[14px] font-bold text-[var(--store-ink-2)] no-underline transition-colors hover:border-[var(--store-primary,#18181B)] hover:text-[var(--store-primary,#18181B)]">
+        <ArrowLeft weight="bold" /> Voltar
+      </Link>
+    </AccountShell>
+  );
+}
+
+function Info({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <dt className="text-[var(--store-muted)]">{label}</dt>
+      <dd className="font-semibold text-[var(--store-ink)]">{value}</dd>
+    </div>
+  );
+}

package/template/app/(loja)/conta/assinaturas/page.tsx

@@ -0,0 +1,51 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { CaretRight, ArrowsClockwise } from "@phosphor-icons/react/dist/ssr";
+import { getCustomerClient } from "@/lib/customer-session";
+import { AccountShell } from "@/components/account/account-shell";
+import { EmptyState } from "@/components/empty-state";
+
+export const metadata: Metadata = { title: "Minhas assinaturas", robots: { index: false } };
+
+export default async function AssinaturasPage() {
+  const me = await getCustomerClient();
+  if (!me) redirect("/conta/entrar");
+  const subs = await me.subscriptions({ first: 20 }).catch(() => ({ nodes: [], totalCount: 0 }));
+  const nodes: any[] = subs.nodes ?? [];
+
+  return (
+    <AccountShell title="Minhas assinaturas">
+      {nodes.length === 0 ? (
+        <EmptyState title="Você não tem assinaturas" description="Assine um produto e receba periodicamente com desconto.">
+          <Link href="/produtos" className="font-display inline-flex h-11 items-center rounded-xl bg-[var(--store-primary,#18181B)] px-5 text-[14px] font-bold text-white no-underline transition-colors hover:bg-[var(--store-primary-dark,#09090B)]">
+            Ver produtos
+          </Link>
+        </EmptyState>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {nodes.map((s) => (
+            <Link
+              key={s._id}
+              href={`/conta/assinaturas/${s.referenceId}`}
+              className="group flex items-center justify-between gap-3 rounded-lg border border-[var(--store-line)] bg-white p-4 no-underline transition-all hover:border-[var(--store-primary,#18181B)] hover:shadow-[0_8px_22px_rgba(24,24,27,.08)]"
+            >
+              <div className="flex items-center gap-3">
+                <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--store-primary-soft,#F1F1F3)] text-[var(--store-primary,#18181B)]">
+                  <ArrowsClockwise weight="bold" className="text-[18px]" />
+                </span>
+                <div>
+                  <p className="font-display text-[15.5px] font-bold text-[var(--store-ink)]">Assinatura #{s.referenceId}</p>
+                  <p className="mt-0.5 text-[12.5px] text-[var(--store-muted)]">
+                    {s.createdAt ? `desde ${new Date(s.createdAt).toLocaleDateString("pt-BR")}` : ""}
+                  </p>
+                </div>
+              </div>
+              <CaretRight weight="bold" className="text-[var(--store-faint)] transition-transform group-hover:translate-x-0.5 group-hover:text-[var(--store-primary,#18181B)]" />
+            </Link>
+          ))}
+        </div>
+      )}
+    </AccountShell>
+  );
+}

package/template/app/(loja)/conta/enderecos/page.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { getCustomerClient } from "@/lib/customer-session";
+import { AccountShell } from "@/components/account/account-shell";
+import { AddressBook } from "@/components/account/address-book";
+
+export const metadata: Metadata = { title: "Meus endereços", robots: { index: false } };
+
+export default async function EnderecosPage() {
+  const me = await getCustomerClient();
+  if (!me) redirect("/conta/entrar");
+  const account = await me.me().catch(() => null);
+  const addresses = account?.addressBooks ?? [];
+
+  return (
+    <AccountShell title="Meus endereços">
+      <AddressBook initial={addresses} />
+    </AccountShell>
+  );
+}

package/template/app/(loja)/conta/entrar/page.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import * as React from "react";
+import {
+  EnvelopeSimple, Key, ArrowLeft, Warning, CircleNotch, ShieldCheck,
+} from "@phosphor-icons/react/dist/ssr";
+
+export default function EntrarPage() {
+  const [phase, setPhase] = React.useState<"email" | "otp">("email");
+  const [email, setEmail] = React.useState("");
+  const [otp, setOtp] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [info, setInfo] = React.useState<string | null>(null);
+
+  async function call(url: string, body: any) {
+    const res = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(data?.error || "Erro inesperado.");
+    return data;
+  }
+
+  async function requestOtp(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      await call("/api/account/otp", { email: email.trim() });
+      setInfo("Enviamos um código de 6 dígitos para o seu e-mail.");
+      setPhase("otp");
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function verify(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      await call("/api/account/signin", { email: email.trim(), otp: otp.trim() });
+      // Navegação de DOCUMENTO inteiro, não router.push(): o App Router pode reusar o payload
+      // RSC de /conta cacheado ANTES do cookie de sessão existir (que era um redirect de volta
+      // pra cá) — sintoma "digitei a senha e não entrou; recarreguei e foi" (caso real em produção).
+      window.location.assign("/conta");
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="store-layout full-bleed flex min-h-[78vh] items-center justify-center bg-white px-4 py-12 text-[var(--store-ink)]">
+      <div className="w-full max-w-[440px]">
+        <div className="rounded-xl border border-[var(--store-line)] bg-white p-7 shadow-[0_12px_40px_rgba(24,24,27,.08)] sm:p-9">
+          <div className="text-xs font-extrabold tracking-[1.5px] text-[var(--store-primary,#18181B)]">MINHA CONTA</div>
+          <h1 className="font-display mt-2 text-[28px] font-extrabold leading-[1.12]">Entrar</h1>
+          <p className="mt-1.5 text-[14.5px] leading-[1.5] text-[var(--store-muted)]">
+            Acesse com seu e-mail: sem senha, por código de verificação.
+          </p>
+
+          {error && (
+            <div className="mt-5 flex items-start gap-2.5 rounded-xl border border-[var(--store-sale-soft)] bg-[var(--store-sale-soft)] px-4 py-3 text-[13.5px] font-semibold text-[var(--store-sale)]" role="alert">
+              <Warning weight="fill" className="mt-px shrink-0 text-[17px] text-[var(--store-sale)]" />
+              <span>{error}</span>
+            </div>
+          )}
+          {info && phase === "otp" && (
+            <div className="mt-5 flex items-start gap-2.5 rounded-xl border border-[var(--store-primary-soft)] bg-[var(--store-primary-soft,#F1F1F3)] px-4 py-3 text-[13.5px] font-semibold text-[var(--store-primary,#18181B)]">
+              <ShieldCheck weight="fill" className="mt-px shrink-0 text-[17px]" />
+              <span>{info}</span>
+            </div>
+          )}
+
+          {phase === "email" ? (
+            <form onSubmit={requestOtp} className="mt-6 flex flex-col gap-4">
+              <label className="flex flex-col gap-1.5">
+                <span className="text-[13px] font-bold text-[var(--store-ink-2)]">E-mail</span>
+                <input
+                  type="email" autoComplete="email" required value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="voce@email.com"
+                  className="h-12 w-full rounded-xl border-[1.5px] border-[var(--store-line-2)] bg-white px-4 text-[15px] font-medium text-[var(--store-ink)] outline-none transition-colors focus:border-[var(--store-primary,#18181B)]"
+                />
+              </label>
+              <button type="submit" disabled={loading || !email.trim()} className="font-display mt-1 flex h-[52px] w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-[var(--store-primary,#18181B)] text-[15px] font-bold tracking-[0.3px] text-white transition-colors hover:bg-[var(--store-primary-dark,#09090B)] disabled:opacity-60">
+                {loading ? <CircleNotch className="animate-spin text-lg" /> : <EnvelopeSimple weight="bold" className="text-lg" />}
+                Enviar código
+              </button>
+            </form>
+          ) : (
+            <form onSubmit={verify} className="mt-6 flex flex-col gap-4">
+              <label className="flex flex-col gap-1.5">
+                <span className="text-[13px] font-bold text-[var(--store-ink-2)]">Código recebido</span>
+                <input
+                  inputMode="numeric" autoComplete="one-time-code" maxLength={6} required
+                  value={otp} onChange={(e) => setOtp(e.target.value.replace(/\D/g, "").slice(0, 6))}
+                  placeholder="000000" autoFocus
+                  className="h-[58px] w-full rounded-xl border-[1.5px] border-[var(--store-line-2)] bg-white text-center font-display text-[26px] font-extrabold tracking-[14px] text-[var(--store-ink)] outline-none transition-colors focus:border-[var(--store-primary,#18181B)]"
+                />
+                <span className="text-[12px] text-[var(--store-muted)]">Enviado para <b className="text-[var(--store-ink-2)]">{email}</b></span>
+              </label>
+              <button type="submit" disabled={loading || otp.length < 4} className="font-display mt-1 flex h-[52px] w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-[var(--store-primary,#18181B)] text-[15px] font-bold tracking-[0.3px] text-white transition-colors hover:bg-[var(--store-primary-dark,#09090B)] disabled:opacity-60">
+                {loading ? <CircleNotch className="animate-spin text-lg" /> : <Key weight="bold" className="text-lg" />}
+                Entrar
+              </button>
+              <button type="button" onClick={() => { setPhase("email"); setOtp(""); setError(null); }} className="flex cursor-pointer items-center justify-center gap-1.5 text-[13.5px] font-bold text-[var(--store-primary,#18181B)]">
+                <ArrowLeft weight="bold" /> Usar outro e-mail
+              </button>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/app/(loja)/conta/page.tsx

@@ -0,0 +1,45 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { Package, Gear, CaretRight } from "@phosphor-icons/react/dist/ssr";
+import { getCustomerClient } from "@/lib/customer-session";
+import { AccountShell } from "@/components/account/account-shell";
+
+export const metadata: Metadata = { title: "Minha conta", robots: { index: false } };
+
+// Cards enxutos (Assinaturas e Endereços saíram da navegação da conta — ver account-shell.tsx)
+const CARDS = [
+  { href: "/conta/pedidos", label: "Meus pedidos", desc: "Acompanhe status e rastreio", icon: Package },
+  { href: "/conta/preferencias", label: "Preferências", desc: "Notificações e dados da conta", icon: Gear },
+];
+
+export default async function ContaPage() {
+  const me = await getCustomerClient();
+  if (!me) redirect("/conta/entrar");
+
+  const account = await me.me().catch(() => null);
+
+  return (
+    <AccountShell title="Minha conta">
+      <p className="mb-6 text-[15px] text-[var(--store-ink-2)]">
+        {account?.email ? <>Olá, <span className="font-bold text-[var(--store-ink)]">{account.email}</span>.</> : "Bem-vindo(a)."}
+        {account?.isFirstAccess && " Este é o seu primeiro acesso, confira seus dados."}
+      </p>
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        {CARDS.map(({ href, label, desc, icon: Icon }) => (
+          <Link key={href} href={href} className="group flex flex-col rounded-xl border border-[var(--store-line)] bg-white p-5 no-underline transition-all hover:-translate-y-0.5 hover:border-[var(--store-primary,#18181B)] hover:shadow-[0_10px_28px_rgba(24,24,27,.10)]">
+            <span className="flex h-11 w-11 items-center justify-center rounded-xl bg-[var(--store-primary-soft,#F1F1F3)] text-[var(--store-primary,#18181B)]">
+              <Icon weight="bold" className="text-[22px]" />
+            </span>
+            <div className="mt-3.5 font-display text-[16px] font-bold text-[var(--store-ink)]">{label}</div>
+            <div className="mt-0.5 text-[13px] text-[var(--store-muted)]">{desc}</div>
+            <span className="mt-3 inline-flex items-center gap-1 text-[13px] font-bold text-[var(--store-primary,#18181B)]">
+              Acessar <CaretRight weight="bold" className="text-[11px] transition-transform group-hover:translate-x-0.5" />
+            </span>
+          </Link>
+        ))}
+      </div>
+    </AccountShell>
+  );
+}

package/template/app/(loja)/conta/pedidos/[referenceId]/page.tsx

@@ -0,0 +1,49 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { ArrowLeft } from "@phosphor-icons/react/dist/ssr";
+import { getCustomerClient } from "@/lib/customer-session";
+import { getOwnedOrder } from "@/lib/orders";
+import { AccountShell } from "@/components/account/account-shell";
+import { OrderStatusCard } from "@/components/order-status";
+import { EmptyState } from "@/components/empty-state";
+import { ReorderButton, type ReorderItem } from "@/components/account/reorder-button";
+import { mockupOr } from "@/lib/mockup";
+
+export const metadata: Metadata = { title: "Detalhe do pedido", robots: { index: false } };
+
+export default async function PedidoDetalhePage({ params }: { params: Promise<{ referenceId: string }> }) {
+  const me = await getCustomerClient();
+  if (!me) redirect("/conta/entrar");
+  const { referenceId } = await params;
+  const order = await mockupOr(getOwnedOrder(referenceId), null, "pedido/getOwnedOrder");
+
+  return (
+    <AccountShell title={`Pedido #${referenceId}`}>
+      {!order ? (
+        <EmptyState title="Pedido não encontrado" />
+      ) : (
+        <>
+          <OrderStatusCard order={order} />
+          <div className="mt-4 flex flex-wrap gap-2.5">
+            <ReorderButton
+              items={order.items
+                .filter((it) => it.productId && it.variantId && it.price != null)
+                .map((it): ReorderItem => ({
+                  productId: it.productId!,
+                  variantId: it.variantId!,
+                  price: it.price!,
+                  quantity: it.quantity,
+                  title: it.title,
+                  thumbnail: it.thumbnail,
+                }))}
+            />
+            <Link href="/conta/pedidos" className="inline-flex h-11 items-center gap-2 rounded-xl border-[1.5px] border-[var(--store-line-2)] bg-white px-4 text-[14px] font-bold text-[var(--store-ink-2)] no-underline transition-colors hover:border-[var(--store-primary,#18181B)] hover:text-[var(--store-primary,#18181B)]">
+              <ArrowLeft weight="bold" /> Voltar aos pedidos
+            </Link>
+          </div>
+        </>
+      )}
+    </AccountShell>
+  );
+}