@unbox-plus/cli 0.20.4

package/template/components/cart/cart-provider.tsx

@@ -0,0 +1,340 @@
+"use client";
+
+// Estado de carrinho no client. Conversa SÓ com o BFF (/api/cart*), nunca com a Unbox.
+// Hidrata via GET /api/cart no mount; cada mutação atualiza o estado com o cart normalizado
+// devolvido pelo BFF e exibe toasts para cartEvents (brinde/cupom) e avisos de quantidade.
+import * as React from "react";
+import { toast } from "sonner";
+import type { UiCart } from "@/lib/cart-normalize";
+import { cartEventLabel } from "@/lib/unbox/errors";
+import { formatBRL } from "@/lib/format";
+import { trackAddToCart, trackRemoveFromCart, trackViewCart } from "@/lib/analytics";
+
+export interface AddItemArgs {
+  productId: string;
+  variantId: string;
+  price: number;
+  quantity?: number;
+  thumbnail?: string;
+  isRecurring?: boolean;
+  recurringItemsFrequencyId?: string;
+  title?: string;
+}
+
+export interface AppliedCoupon { code: string; discountId: string | null }
+
+interface CartCtx {
+  cart: UiCart | null;
+  count: number;
+  loading: boolean;
+  /** true enquanto monta/restaura o carrinho a partir de um link (?produtos=/?cupom= ou ?id=&token=) */
+  linkBuilding: boolean;
+  /**
+   * Incrementa a cada restauração bem-sucedida via ?id=&token= (link de recuperação de
+   * carrinho). O checkout usa isso pra saber quando o e-mail/endereço do `cart` deve
+   * SOBRESCREVER o que está no localStorage do dispositivo — "quem tem o link, manda".
+   */
+  linkRestoredAt: number;
+  open: boolean;
+  appliedCoupon: AppliedCoupon | null;
+  setOpen: (v: boolean) => void;
+  add: (item: AddItemArgs, opts?: { silent?: boolean }) => Promise<boolean>;
+  updateQty: (cartItemId: string, quantity: number) => Promise<void>;
+  remove: (cartItemId: string) => Promise<void>;
+  applyCoupon: (code: string) => Promise<boolean>;
+  removeCoupon: () => Promise<void>;
+  refresh: () => Promise<void>;
+  clear: () => Promise<void>;
+}
+
+const Ctx = React.createContext<CartCtx | null>(null);
+
+function showEvents(cart: UiCart | null) {
+  for (const ev of cart?.cartEvents ?? []) toast.info(cartEventLabel(ev.type));
+}
+
+// Recalcula o resumo na hora (preço unitário × qtd) p/ subtotal/total atualizarem instantâneo ao
+// mexer na quantidade/remover. Não estima o "total" quando há cupom (mantém o do servidor até reconciliar).
+function estimateSummary(c: UiCart, items: UiCart["items"]): UiCart["summary"] {
+  const amt = items.reduce((s, it) => s + it.unitPrice * it.quantity, 0);
+  const hasDiscount = (c.discounts?.length ?? 0) > 0 || !!c.summary.discountTotal;
+  return { ...c.summary, totalAmount: amt, itemTotal: formatBRL(amt), ...(hasDiscount ? {} : { total: formatBRL(amt) }) };
+}
+
+async function call(url: string, init?: RequestInit) {
+  const res = await fetch(url, { headers: { "Content-Type": "application/json" }, ...init });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data?.error || "Erro inesperado.");
+  return data;
+}
+
+export function CartProvider({ children }: { children: React.ReactNode }) {
+  const [cart, setCart] = React.useState<UiCart | null>(null);
+  const [loading, setLoading] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const [appliedCoupon, setAppliedCoupon] = React.useState<AppliedCoupon | null>(null);
+  // Espelho do carrinho para os handlers lerem o item ANTES da atualização otimista removê-lo
+  // (remove_from_cart precisa do nome/preço do que saiu).
+  const cartRef = React.useRef<UiCart | null>(null);
+  cartRef.current = cart;
+
+  // view_cart — toda vez que o mini-carrinho abre com item dentro.
+  React.useEffect(() => {
+    if (!open || !cart?.items?.length) return;
+    trackViewCart(
+      cart.items.filter((i) => !i.isBonus).map((i) => ({ id: i.productId, name: i.title, variant: i.variantTitle, price: i.unitPrice, quantity: i.quantity })),
+      cart.summary.totalAmount,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  // add/updateQty/remove/applyCoupon/removeCoupon/refresh cada um faz sua própria atualização
+  // otimista + chamada de rede + setCart(d.cart), sem coordenação entre eles. Se duas mutações
+  // se sobrepõem (remover um item enquanto ajusta a quantidade de outro, duplo-clique em
+  // remover), a resposta que chega POR ÚLTIMO vencia mesmo tendo sido emitida antes e já
+  // desatualizada — o item removido "voltava". mutationSeq resolve na raiz: cada mutação só
+  // aplica sua resposta (ou o refresh() de recuperação de erro) se ainda for a mais recente em
+  // curso; senão descarta em silêncio, confiando que a mutação mais nova reconcilia sozinha.
+  const mutationSeq = React.useRef(0);
+
+  const refresh = React.useCallback(async () => {
+    const seq = ++mutationSeq.current;
+    try {
+      const d = await call("/api/cart");
+      if (seq === mutationSeq.current) setCart(d.cart);
+    } catch {
+      /* silencioso na hidratação */
+    }
+  }, []);
+
+  React.useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  // Link de carrinho: ?produtos=SKU:qtd&cupom=CODE em QUALQUER URL (inclui /checkout, que fica
+  // compartilhável). Monta o carrinho via API, MANTÉM os parâmetros na URL e abre o drawer (exceto
+  // no checkout). Constrói uma vez por assinatura/sessão para não sobrescrever edições ao recarregar.
+  const [linkBuilding, setLinkBuilding] = React.useState(false);
+  const cartLinkRef = React.useRef(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || cartLinkRef.current) return;
+    const u = new URL(window.location.href);
+    const produtos = u.searchParams.get("produtos");
+    const cupom = u.searchParams.get("cupom");
+    if (!produtos && !cupom) return;
+    cartLinkRef.current = true;
+    const sig = `${produtos ?? ""}|${cupom ?? ""}`;
+    try { if (sessionStorage.getItem("cartlink") === sig) return; } catch { /* ignora */ }
+    setLinkBuilding(true);
+    (async () => {
+      try {
+        await call("/api/cart/link?" + u.searchParams.toString(), { method: "POST" });
+        try { sessionStorage.setItem("cartlink", sig); } catch { /* ignora */ }
+        await refresh();
+        if (!u.pathname.startsWith("/checkout")) setOpen(true);
+      } catch { /* ignora — não trava a navegação */ } finally {
+        setLinkBuilding(false);
+      }
+    })();
+  }, [refresh]);
+
+  // Link de RECUPERAÇÃO de carrinho: ?id=<cartId>&token=<cartToken> em QUALQUER URL (o checkout
+  // é o destino típico, mas o provider roda em toda página). Valida no BFF antes de gravar o
+  // cookie (rota recusa e não mexe no carrinho atual se o par for inválido/expirado — doc 12).
+  const [linkRestoredAt, setLinkRestoredAt] = React.useState(0);
+  const cartRestoreRef = React.useRef(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || cartRestoreRef.current) return;
+    const u = new URL(window.location.href);
+    const id = u.searchParams.get("id");
+    const token = u.searchParams.get("token");
+    const freq = u.searchParams.get("freq");
+    if (!id || !token) return;
+    cartRestoreRef.current = true;
+    const sig = `${id}|${token}`;
+    try { if (sessionStorage.getItem("cartlink-restore") === sig) return; } catch { /* ignora */ }
+    setLinkBuilding(true);
+    const seq = ++mutationSeq.current;
+    (async () => {
+      try {
+        let linkUrl = `/api/cart/link?id=${encodeURIComponent(id)}&token=${encodeURIComponent(token)}`;
+        if (freq) linkUrl += `&freq=${encodeURIComponent(freq)}`;
+        const d = await call(linkUrl, { method: "POST" });
+        if (seq === mutationSeq.current) {
+          setCart(d.cart);
+          setLinkRestoredAt(Date.now());
+          if (!u.pathname.startsWith("/checkout")) setOpen(true);
+        }
+        try { sessionStorage.setItem("cartlink-restore", sig); } catch { /* ignora */ }
+      } catch { /* link inválido/expirado — mantém o carrinho atual, sem toast alarmante */ } finally {
+        if (seq === mutationSeq.current) setLinkBuilding(false);
+      }
+    })();
+  }, []);
+
+  const add = React.useCallback(async (item: AddItemArgs, opts?: { silent?: boolean }) => {
+    const qty = item.quantity ?? 1;
+    // OTIMISTA: reflete no carrinho imediatamente (badge + drawer), sem esperar o back.
+    const tmpItem = {
+      id: `tmp-${item.variantId}-${item.price}`,
+      productId: item.productId, variantId: item.variantId,
+      title: item.title ?? "Produto", quantity: qty,
+      unitPrice: item.price, displayUnitPrice: formatBRL(item.price),
+      thumbnail: item.thumbnail, isRecurring: item.isRecurring, isBonus: false,
+    };
+    setCart((c) => {
+      // Primeiro item (carrinho ainda não carregado): cria um carrinho otimista p/ aparecer na hora.
+      if (!c) {
+        const amt = item.price * qty;
+        return {
+          cartId: "tmp", totalItemQuantity: qty, hasRecurring: !!item.isRecurring,
+          items: [tmpItem], discounts: [], fulfillmentGroupIds: [], cartEvents: [],
+          summary: { totalAmount: amt, itemTotal: formatBRL(amt), total: formatBRL(amt) },
+        };
+      }
+      const items = [...c.items];
+      const i = items.findIndex((it) => it.variantId === item.variantId && !it.isBonus && !it.isRecurring === !item.isRecurring);
+      if (i >= 0) items[i] = { ...items[i], quantity: items[i].quantity + qty };
+      else items.push(tmpItem);
+      return { ...c, items, totalItemQuantity: (c.totalItemQuantity ?? 0) + qty };
+    });
+    if (!opts?.silent) setOpen(true); // abre o drawer na hora
+    setLoading(true);
+    const seq = ++mutationSeq.current;
+    try {
+      const d = await call("/api/cart", {
+        method: "POST",
+        body: JSON.stringify({
+          items: [
+            {
+              productId: item.productId,
+              productVariantId: item.variantId,
+              price: item.price,
+              quantity: qty,
+              thumbnail: item.thumbnail,
+              isRecurring: item.isRecurring,
+            },
+          ],
+          recurringItemsFrequencyId: item.recurringItemsFrequencyId,
+        }),
+      });
+      if (seq === mutationSeq.current) {
+        setCart(d.cart); // reconcilia com o servidor (autoritativo) — só se ainda for a mais recente
+        showEvents(d.cart);
+        for (const w of d.warnings ?? []) toast.warning(w);
+      }
+      toast.success(item.title ? `“${item.title}” adicionado ao carrinho` : "Adicionado ao carrinho"); // confirma
+      trackAddToCart({ id: item.productId, name: item.title ?? "Produto", price: item.price, quantity: qty });
+      return true;
+    } catch (e: any) {
+      toast.error(e.message);
+      if (seq === mutationSeq.current) await refresh(); // reverte ao estado real do servidor
+      return false;
+    } finally {
+      if (seq === mutationSeq.current) setLoading(false);
+    }
+  }, [refresh]);
+
+  const updateQty = React.useCallback(async (cartItemId: string, quantity: number) => {
+    const cur = cartRef.current?.items.find((i) => i.id === cartItemId);
+    if (cur && !cur.isBonus && quantity !== cur.quantity) {
+      const delta = quantity - cur.quantity;
+      const it = { id: cur.productId, name: cur.title, variant: cur.variantTitle, price: cur.unitPrice, quantity: Math.abs(delta) };
+      if (delta > 0) trackAddToCart(it); else trackRemoveFromCart(it);
+    }
+    // OTIMISTA: atualiza quantidade E subtotal/total na hora; o servidor reconcilia em seguida.
+    setCart((c) => {
+      if (!c) return c;
+      const items = c.items.map((it) => it.id === cartItemId ? { ...it, quantity } : it);
+      return { ...c, items, totalItemQuantity: items.reduce((s, it) => s + it.quantity, 0), summary: estimateSummary(c, items) };
+    });
+    setLoading(true);
+    const seq = ++mutationSeq.current;
+    try {
+      const d = await call("/api/cart/items", { method: "PATCH", body: JSON.stringify({ cartItemId, quantity }) });
+      if (seq === mutationSeq.current) { setCart(d.cart); showEvents(d.cart); }
+    } catch (e: any) {
+      toast.error(e.message);
+      if (seq === mutationSeq.current) await refresh();
+    } finally {
+      if (seq === mutationSeq.current) setLoading(false);
+    }
+  }, [refresh]);
+
+  const remove = React.useCallback(async (cartItemId: string) => {
+    const gone = cartRef.current?.items.find((i) => i.id === cartItemId);
+    if (gone && !gone.isBonus) trackRemoveFromCart({ id: gone.productId, name: gone.title, variant: gone.variantTitle, price: gone.unitPrice, quantity: gone.quantity });
+    // OTIMISTA: remove o item E atualiza subtotal/total na hora; o servidor reconcilia depois.
+    setCart((c) => {
+      if (!c) return c;
+      const items = c.items.filter((it) => it.id !== cartItemId);
+      return { ...c, items, totalItemQuantity: items.reduce((s, it) => s + it.quantity, 0), summary: estimateSummary(c, items) };
+    });
+    setLoading(true);
+    const seq = ++mutationSeq.current;
+    try {
+      const d = await call("/api/cart/items", { method: "DELETE", body: JSON.stringify({ cartItemIds: [cartItemId] }) });
+      if (seq === mutationSeq.current) { setCart(d.cart); showEvents(d.cart); }
+    } catch (e: any) {
+      toast.error(e.message);
+      if (seq === mutationSeq.current) await refresh();
+    } finally {
+      if (seq === mutationSeq.current) setLoading(false);
+    }
+  }, [refresh]);
+
+  const applyCoupon = React.useCallback(async (code: string) => {
+    setLoading(true);
+    const seq = ++mutationSeq.current;
+    try {
+      const d = await call("/api/cart/coupon", { method: "POST", body: JSON.stringify({ code }) });
+      if (seq === mutationSeq.current) {
+        setCart(d.cart);
+        if (d.coupon) setAppliedCoupon(d.coupon);
+        showEvents(d.cart);
+      }
+      toast.success("Cupom aplicado.");
+      return true;
+    } catch (e: any) {
+      toast.error(e.message);
+      return false;
+    } finally {
+      if (seq === mutationSeq.current) setLoading(false);
+    }
+  }, []);
+
+  const removeCoupon = React.useCallback(async () => {
+    if (!appliedCoupon?.discountId) {
+      toast.error("Não foi possível identificar o cupom para remover.");
+      return;
+    }
+    setLoading(true);
+    const seq = ++mutationSeq.current;
+    try {
+      const d = await call("/api/cart/coupon", { method: "DELETE", body: JSON.stringify({ discountId: appliedCoupon.discountId }) });
+      if (seq === mutationSeq.current) { setCart(d.cart); setAppliedCoupon(null); }
+    } catch (e: any) {
+      toast.error(e.message);
+    } finally {
+      if (seq === mutationSeq.current) setLoading(false);
+    }
+  }, [appliedCoupon]);
+
+  const clear = React.useCallback(async () => {
+    ++mutationSeq.current; // invalida qualquer mutação em voo — não pode "reviver" item após o clear
+    await call("/api/cart", { method: "DELETE" });
+    setCart(null);
+    setAppliedCoupon(null);
+  }, []);
+
+  const count = cart?.items?.reduce((s, i) => s + i.quantity, 0) ?? 0;
+
+  const value: CartCtx = { cart, count, loading, linkBuilding, linkRestoredAt, open, appliedCoupon, setOpen, add, updateQty, remove, applyCoupon, removeCoupon, refresh, clear };
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+}
+
+export function useCart() {
+  const c = React.useContext(Ctx);
+  if (!c) throw new Error("useCart deve ser usado dentro de <CartProvider>");
+  return c;
+}

package/template/components/cart/mini-cart.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import * as React from "react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import {
+  X, Trash, ShoppingCartSimple, Repeat, Gift, LockSimple, SealCheck, Truck, CheckCircle,
+} from "@phosphor-icons/react/dist/ssr";
+import { Sheet, SheetContent, SheetTitle, SheetDescription, SheetClose } from "@/components/ui/sheet";
+import { useCart } from "@/components/cart/cart-provider";
+import { formatBRL, parseBRL } from "@/lib/format";
+import { FREE_SHIPPING_THRESHOLD, GIFT_TIERS, PIX_DISCOUNT_PCT } from "@/lib/store-config";
+import { goToCheckout } from "@/lib/checkout-nav";
+
+// null/vazio = promoção não existe → o bloco correspondente NÃO renderiza (ver store-config).
+const FREE_SHIP = FREE_SHIPPING_THRESHOLD;
+const LADDER_MAX = GIFT_TIERS.length > 0 ? Math.max(...GIFT_TIERS.map((t) => t.threshold)) : null;
+
+export function MiniCart() {
+  const router = useRouter();
+  const { cart, open, setOpen, updateQty, remove, count, appliedCoupon, applyCoupon, removeCoupon, loading } = useCart();
+  const items = cart?.items ?? [];
+  const hasItems = items.length > 0;
+  // Base do progresso e do total = SUBTOTAL de produtos (não o total do servidor, que pode incluir
+  // frete). O frete é decidido no checkout — no carrinho mostramos só produtos (− desconto).
+  const net = parseBRL(cart?.summary.itemTotal) ?? cart?.summary.totalAmount ?? 0;
+  const discountAmount = parseBRL(cart?.summary.discountTotal) ?? 0;
+  // Desconto Pix (5%): mesma regra do checkout (Pix é o pagamento padrão; indisponível p/ assinatura).
+  // Calculado sobre o subtotal de produtos, consistente com a PDP/checkout.
+  const pixEligible = !cart?.hasRecurring;
+  const pixDiscount = pixEligible ? Math.round(net * PIX_DISCOUNT_PCT) / 100 : 0;
+  const drawerTotal = formatBRL(Math.max(0, net - discountAmount - pixDiscount));
+
+  const [code, setCode] = React.useState("");
+  const remaining = FREE_SHIP != null ? Math.max(0, FREE_SHIP - net) : 0;
+  const shipPct = FREE_SHIP != null ? Math.min(100, Math.round((net / FREE_SHIP) * 100)) : 0;
+  const ladderPct = LADDER_MAX != null ? Math.min(100, Math.round((net / LADDER_MAX) * 100)) : 0;
+  const reached = GIFT_TIERS.filter((t) => net >= t.threshold);
+  const current = reached.length ? reached[reached.length - 1] : null;
+  const next = GIFT_TIERS.find((t) => net < t.threshold) ?? null;
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetContent side="right" showCloseButton={false} className="store-layout w-screen max-w-full gap-0 bg-[var(--store-surface)] p-0 sm:w-[440px] sm:max-w-[440px]">
+        {/* header */}
+        <div className="flex shrink-0 items-center justify-between px-[22px] pb-3 pt-[18px]">
+          <SheetTitle className="font-display text-[21px] font-extrabold text-[var(--store-ink)]">
+            Seu Carrinho {count > 0 && <span className="text-sm font-semibold text-[var(--store-muted)]">({count})</span>}
+          </SheetTitle>
+          <SheetClose
+            render={<button aria-label="Fechar" className="flex h-[34px] w-[34px] items-center justify-center rounded-full border border-[var(--store-line)] bg-white" />}
+          >
+            <X weight="bold" className="text-base text-[var(--store-ink)]" />
+          </SheetClose>
+        </div>
+        <SheetDescription className="sr-only">Itens no seu carrinho</SheetDescription>
+
+        {/* body */}
+        <div className="flex-1 overflow-y-auto px-[22px] pb-4">
+          {!hasItems ? (
+            <div className="px-5 py-16 text-center text-[var(--store-muted)]">
+              <ShoppingCartSimple className="mx-auto text-5xl text-[var(--store-faint)]" />
+              <div className="mt-3.5 text-base font-bold text-[var(--store-ink-2)]">Seu carrinho está vazio</div>
+              <div className="mt-1 text-[13.5px]">Adicione produtos para continuar.</div>
+            </div>
+          ) : (
+            <div className="overflow-hidden rounded-2xl border border-[var(--store-line)] bg-white">
+              {items.map((it) => (
+                <div key={it.id} className="flex gap-3.5 border-b border-[var(--store-surface-2)] p-4">
+                  <div className="relative h-20 w-[72px] shrink-0 overflow-hidden rounded-md border border-[var(--store-line)] bg-[var(--store-line)]">
+                    {it.thumbnail && <Image src={it.thumbnail} alt={it.title} fill sizes="72px" className="object-cover" />}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex justify-between gap-2.5">
+                      <div>
+                        <div className="text-[14.5px] font-bold leading-tight text-[var(--store-ink)]">{it.title}</div>
+                        {it.variantTitle && <div className="mt-0.5 text-xs text-[var(--store-muted)]">{it.variantTitle}</div>}
+                        {it.isRecurring && (
+                          <span className="mt-1.5 inline-flex items-center gap-1 rounded-full bg-[var(--store-primary-soft,#F1F1F3)] px-2 py-[3px] text-[10px] font-extrabold tracking-[0.3px] text-[var(--store-primary,#18181B)]">
+                            <Repeat weight="fill" />ASSINATURA{cart?.recurringFrequencyTitle ? ` · ${cart.recurringFrequencyTitle}` : ""}
+                          </span>
+                        )}
+                      </div>
+                      <div className="font-display whitespace-nowrap text-base font-extrabold text-[var(--store-ink)]">
+                        {it.isBonus ? "GRÁTIS" : formatBRL(it.unitPrice)}
+                      </div>
+                    </div>
+                    <div className="mt-3 flex items-center justify-between">
+                      {it.isBonus ? (
+                        <span className="inline-flex items-center gap-1.5 rounded-full bg-[var(--store-primary-soft,#F1F1F3)] px-2.5 py-1 text-[11px] font-extrabold text-[var(--store-primary,#18181B)]"><Gift weight="fill" />Brinde</span>
+                      ) : (
+                        <div className="flex items-center overflow-hidden rounded-sm border-[1.5px] border-[var(--store-line-2)]">
+                          <button type="button" disabled={loading} onClick={() => updateQty(it.id, Math.max(1, it.quantity - 1))} className="h-[34px] w-[34px] cursor-pointer border-none bg-transparent text-[17px] text-[var(--store-ink-2)] disabled:cursor-not-allowed disabled:opacity-50">−</button>
+                          <span className="w-[30px] text-center text-sm font-extrabold">{it.quantity}</span>
+                          <button type="button" disabled={loading} onClick={() => updateQty(it.id, it.quantity + 1)} className="h-[34px] w-[34px] cursor-pointer border-none bg-transparent text-[17px] text-[var(--store-ink-2)] disabled:cursor-not-allowed disabled:opacity-50">+</button>
+                        </div>
+                      )}
+                      {!it.isBonus && (
+                        <button type="button" disabled={loading} onClick={() => remove(it.id)} aria-label="Remover" className="flex cursor-pointer items-center border-none bg-transparent p-1.5 text-[var(--store-muted)] disabled:cursor-not-allowed disabled:opacity-50">
+                          <Trash className="text-lg" />
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+
+              {/* gift ladder — só com promoção de brinde REAL configurada (GIFT_TIERS) */}
+              {GIFT_TIERS.length > 0 && LADDER_MAX != null && (
+              <div className="bg-[var(--store-surface)] p-4">
+                <div className="mb-4 flex items-center justify-between">
+                  <span className="flex items-center gap-1.5 text-[13.5px] font-extrabold text-[var(--store-ink)]"><Gift weight="fill" className="text-[17px] text-[var(--store-primary,#18181B)]" />Brinde do pedido</span>
+                  <span className="text-[11.5px] font-bold text-[var(--store-muted)]">1 brinde por pedido</span>
+                </div>
+                <div className="relative mx-1.5 mb-7 h-2 rounded-full bg-[var(--store-surface-2)]">
+                  <div className="h-full rounded-full bg-gradient-to-r from-[var(--store-primary,#18181B)] to-[var(--store-primary)] transition-all" style={{ width: `${ladderPct}%` }} />
+                  {GIFT_TIERS.map((t) => {
+                    const on = net >= t.threshold;
+                    return (
+                      <div key={t.threshold} className="absolute top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center" style={{ left: `${(t.threshold / LADDER_MAX) * 100}%` }}>
+                        <span className="h-4 w-4 rounded-full border-2 border-white shadow-[0_0_0_1px_var(--store-line-2)]" style={{ background: on ? "var(--store-primary,#18181B)" : "var(--store-line-2)" }} />
+                        <span className="absolute top-5 whitespace-nowrap text-[10.5px] font-extrabold" style={{ color: on ? "var(--store-primary,#18181B)" : "var(--store-muted)" }}>R$ {t.threshold}</span>
+                      </div>
+                    );
+                  })}
+                </div>
+                {current ? (
+                  <div className="flex items-center gap-2.5 rounded-md border border-[var(--store-primary-soft)] bg-white px-3 py-2.5">
+                    <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-sm bg-[var(--store-primary-soft,#F1F1F3)]"><Gift weight="fill" className="text-xl text-[var(--store-primary,#18181B)]" /></span>
+                    <div className="min-w-0 flex-1">
+                      <div className="text-[13px] font-extrabold text-[var(--store-primary,#18181B)]">{current.name}</div>
+                      <div className="text-[11.5px] text-[var(--store-ink-2)]">Seu brinde atual · liberado em R$ {current.threshold}</div>
+                    </div>
+                    <span className="flex items-center gap-1 whitespace-nowrap text-[11.5px] font-extrabold text-[var(--store-primary,#18181B)]"><CheckCircle weight="fill" />GRÁTIS</span>
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2.5 rounded-md border border-dashed border-[var(--store-line-2)] bg-white px-3 py-2.5">
+                    <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-sm bg-[var(--store-surface-2)]"><Gift className="text-xl text-[var(--store-faint)]" /></span>
+                    <div className="min-w-0 flex-1 text-[12.5px] text-[var(--store-muted)]">Nenhum brinde ainda. Continue para desbloquear o primeiro.</div>
+                  </div>
+                )}
+                {next && (
+                  <div className="mt-2.5 flex items-center gap-2.5 rounded-md border border-dashed border-[var(--store-line-2)] bg-[var(--store-surface)] px-3 py-2.5">
+                    <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-sm bg-[var(--store-surface-2)]"><LockSimple className="text-lg text-[var(--store-faint)]" /></span>
+                    <div className="min-w-0 flex-1">
+                      <div className="text-[13px] font-bold text-[var(--store-ink-2)]">Próximo brinde</div>
+                      <div className="text-[11.5px] text-[var(--store-muted)]">Adicione mais <b className="text-[var(--store-sale)]">{formatBRL(next.threshold - net)}</b> para desbloquear</div>
+                    </div>
+                    <span className="whitespace-nowrap text-[11px] font-extrabold text-[var(--store-faint)]">R$ {next.threshold}</span>
+                  </div>
+                )}
+              </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* footer */}
+        {hasItems && (
+          <div className="shrink-0 border-t border-[var(--store-line)] bg-white px-[22px] pb-[max(16px,env(safe-area-inset-bottom))] pt-3.5">
+            {/* coupon */}
+            {appliedCoupon ? (
+              <div className="mb-3 flex items-center justify-between gap-2.5 rounded-md border border-[var(--store-primary-soft)] bg-[var(--store-primary-soft,#F1F1F3)] px-3.5 py-2.5">
+                <span className="flex min-w-0 items-center gap-2.5">
+                  <SealCheck weight="fill" className="shrink-0 text-lg text-[var(--store-primary,#18181B)]" />
+                  <span className="min-w-0">
+                    <span className="block text-[13.5px] font-extrabold text-[var(--store-primary,#18181B)]">Cupom {appliedCoupon.code?.toUpperCase()} aplicado</span>
+                    {cart?.summary.discountTotal && <span className="block text-xs text-[var(--store-ink-2)]">Você economizou {cart.summary.discountTotal}</span>}
+                  </span>
+                </span>
+                <button type="button" onClick={() => removeCoupon()} className="flex shrink-0 cursor-pointer items-center gap-1 border-none bg-transparent text-[12.5px] font-bold text-[var(--store-sale)]"><Trash className="text-[15px]" />Remover</button>
+              </div>
+            ) : (
+              <div className="mb-3 flex gap-2.5">
+                <input
+                  value={code}
+                  onChange={(e) => setCode(e.target.value)}
+                  placeholder="Tem um cupom de desconto?"
+                  className="h-[46px] min-w-0 flex-1 rounded-md border border-[var(--store-line-2)] bg-white px-4 text-sm outline-none"
+                />
+                <button type="button" disabled={loading || !code.trim()} onClick={() => applyCoupon(code.trim())} className="font-display h-[46px] shrink-0 cursor-pointer rounded-md bg-[var(--store-chrome-bg)] px-6 text-sm font-bold text-white disabled:opacity-60">Aplicar</button>
+              </div>
+            )}
+
+            {/* summary */}
+            <div className="mb-3.5 flex flex-col gap-2 text-sm text-[var(--store-ink-2)]">
+              <div className="flex justify-between"><span>Subtotal ({count})</span><span className="font-semibold text-[var(--store-ink)]">{cart?.summary.itemTotal ?? cart?.summary.total ?? "—"}</span></div>
+              {cart?.summary.discountTotal && (
+                <div className="flex justify-between"><span>Desconto</span><span className="font-bold text-[var(--store-primary,#18181B)]">- {cart.summary.discountTotal}</span></div>
+              )}
+              {pixDiscount > 0 && (
+                <div className="flex justify-between"><span>Desconto Pix ({PIX_DISCOUNT_PCT}%)</span><span className="font-bold text-[var(--store-primary,#18181B)]">- {formatBRL(pixDiscount)}</span></div>
+              )}
+              {/* régua de frete grátis — só com FREE_SHIPPING_THRESHOLD real configurado */}
+              {FREE_SHIP != null && (
+              <div>
+                <div className="flex items-center justify-between gap-2">
+                  <span>Frete</span>
+                  <span className="text-xs font-bold text-[var(--store-primary,#18181B)]">{remaining > 0 ? `Faltam ${formatBRL(remaining)} para Frete Grátis` : "Você ganhou Frete Grátis!"}</span>
+                </div>
+                <div className="mt-1.5 h-[7px] overflow-hidden rounded-full bg-[var(--store-surface-2)]"><div className="h-full rounded-full bg-gradient-to-r from-[var(--store-primary,#18181B)] to-[var(--store-primary)] transition-all" style={{ width: `${shipPct}%` }} /></div>
+              </div>
+              )}
+              <div className="my-0.5 h-px bg-[var(--store-line)]" />
+              <div className="flex items-center justify-between">
+                <span className="font-display text-lg font-extrabold text-[var(--store-ink)]">Total</span>
+                <div className="text-right">
+                  <span className="font-display text-xl font-extrabold text-[var(--store-primary,#18181B)]">{drawerTotal}</span>
+                  {pixDiscount > 0 && <div className="text-[11px] font-semibold text-[var(--store-muted)]">no Pix · economia de {formatBRL(pixDiscount)}</div>}
+                </div>
+              </div>
+              <div className="text-[11px] text-[var(--store-muted)]">Frete calculado no checkout</div>
+            </div>
+
+            <button type="button" onClick={() => { setOpen(false); void goToCheckout(router); }} className="font-display flex h-[54px] w-full cursor-pointer items-center justify-center gap-2.5 rounded-xl border-none bg-[var(--store-cta,#D97706)] text-base font-extrabold tracking-[0.4px] text-[var(--store-cta-fg,#1C1207)] transition-colors hover:bg-[var(--store-cta-dark,#B45309)]">
+              <LockSimple weight="fill" className="text-lg" />FINALIZAR COMPRA
+            </button>
+            <div className="mt-3.5 flex justify-between gap-2">
+              <span className="flex items-center gap-1.5 text-[11px] font-extrabold text-[var(--store-ink)]"><LockSimple className="text-[15px] text-[var(--store-primary,#18181B)]" />100% Segura</span>
+              <span className="flex items-center gap-1.5 text-[11px] font-extrabold text-[var(--store-ink)]"><SealCheck className="text-[15px] text-[var(--store-primary,#18181B)]" />CDC</span>
+              <span className="flex items-center gap-1.5 text-[11px] font-extrabold text-[var(--store-ink)]"><Truck className="text-[15px] text-[var(--store-primary,#18181B)]" />Troca em 7 dias</span>
+            </div>
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}

package/template/components/cart-button.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { ShoppingCartSimple } from "@phosphor-icons/react/dist/ssr";
+import { useCart } from "@/components/cart/cart-provider";
+
+export function CartButton({
+  withLabel = false,
+  /** "ink" = sobre fundo claro (padrão). "chrome" = sobre a cor de chrome (header sobreposto). */
+  tone = "ink",
+}: {
+  withLabel?: boolean;
+  tone?: "ink" | "chrome";
+}) {
+  const { count, setOpen } = useCart();
+  return (
+    <button
+      type="button"
+      onClick={() => setOpen(true)}
+      aria-label="Abrir carrinho"
+      className={`relative flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center gap-2 border-none bg-transparent text-[15px] font-medium ${
+        tone === "chrome" ? "text-[var(--store-chrome-text,#ffffff)]" : "text-[var(--store-ink)]"
+      }`}
+    >
+      <span className="relative flex">
+        <ShoppingCartSimple className={withLabel ? "text-[23px]" : "text-[25px]"} />
+        {count > 0 && (
+          <span className="absolute -right-2 -top-2 flex h-[19px] min-w-[19px] items-center justify-center rounded-full border-2 border-white bg-[var(--store-sale)] px-1 text-[11px] font-extrabold text-white">
+            {count}
+          </span>
+        )}
+      </span>
+      {withLabel && <span className="max-md:hidden">Carrinho</span>}
+    </button>
+  );
+}