@unbox-plus/cli 0.20.4

package/template/components/account/subscription-actions.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { Pause, Play, SkipForward, XCircle, MapPin, CreditCard, ListChecks, CircleNotch } from "@phosphor-icons/react/dist/ssr";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
+  AlertDialogFooter, AlertDialogAction, AlertDialogCancel,
+} from "@/components/ui/alert-dialog";
+import { AddressFields, emptyAddress, type AddressValue } from "@/components/address-fields";
+import { QuantityStepper } from "@/components/quantity-stepper";
+
+const BTN_PRIMARY = "font-display inline-flex h-11 cursor-pointer items-center justify-center gap-2 rounded-xl bg-[var(--store-primary,#18181B)] px-5 text-[14px] font-bold text-white transition-colors hover:bg-[var(--store-primary-dark,#09090B)] disabled:opacity-60";
+const BTN_OUTLINE = "inline-flex h-11 cursor-pointer items-center justify-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)] transition-colors hover:border-[var(--store-primary,#18181B)] hover:text-[var(--store-primary,#18181B)]";
+const CHIP = "inline-flex h-10 cursor-pointer items-center gap-2 rounded-xl border-[1.5px] border-[var(--store-line-2)] bg-white px-3.5 text-[13.5px] font-bold text-[var(--store-ink-2)] transition-colors hover:border-[var(--store-primary,#18181B)] hover:text-[var(--store-primary,#18181B)] disabled:opacity-60";
+const CHIP_DANGER = "inline-flex h-10 cursor-pointer items-center gap-2 rounded-xl border-[1.5px] border-[var(--store-sale-soft)] bg-white px-3.5 text-[13.5px] font-bold text-[var(--store-sale)] transition-colors hover:border-[var(--store-sale)] hover:bg-[var(--store-sale-soft)]";
+const INPUT = "h-11 w-full rounded-xl border-[1.5px] border-[var(--store-line-2)] bg-white px-3.5 text-[14px] font-medium text-[var(--store-ink)] outline-none transition-colors focus:border-[var(--store-primary,#18181B)]";
+
+interface Actions {
+  canPause?: boolean; canSkipCycle?: boolean; canChangeAddress?: boolean;
+  canChangeProductQuantity?: boolean; canAddProducts?: boolean; canRemoveProducts?: boolean;
+}
+interface Item { productId: string; variantId: string; quantity: number }
+
+export function SubscriptionActions({
+  recurringOrderId,
+  status,
+  actions,
+  items,
+}: {
+  recurringOrderId: string;
+  status: string;
+  actions: Actions;
+  items: Item[];
+}) {
+  const router = useRouter();
+  const [busy, setBusy] = React.useState<string | null>(null);
+  const [cancelOpen, setCancelOpen] = React.useState(false);
+  const [addrOpen, setAddrOpen] = React.useState(false);
+  const [cardOpen, setCardOpen] = React.useState(false);
+  const [itemsOpen, setItemsOpen] = React.useState(false);
+
+  const [addr, setAddr] = React.useState<AddressValue>(emptyAddress);
+  const [card, setCard] = React.useState({ cardHolder: "", cardNumber: "", expirationMonth: "", expirationYear: "", securityCode: "" });
+  const [editItems, setEditItems] = React.useState<Item[]>(items);
+
+  const canceled = status === "CANCELED";
+  const paused = status === "PAUSED";
+
+  async function run(action: string, payload: Record<string, any> = {}, label = "Pronto") {
+    setBusy(action);
+    try {
+      const res = await fetch(`/api/subscriptions/${recurringOrderId}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action, ...payload }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data?.error || "Erro inesperado.");
+      toast.success(label);
+      router.refresh();
+      return true;
+    } catch (e: any) {
+      toast.error(e.message);
+      return false;
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  if (canceled) {
+    return <p className="mt-4 text-sm text-[var(--store-muted)]">Esta assinatura está cancelada.</p>;
+  }
+
+  return (
+    <div className="mt-6">
+      <h2 className="font-display mb-3 text-[16px] font-bold text-[var(--store-ink)]">Gerenciar assinatura</h2>
+      <div className="flex flex-wrap gap-2">
+        {actions.canPause && (
+          <button type="button" className={CHIP} disabled={!!busy} onClick={() => run("pause", {}, paused ? "Assinatura retomada." : "Assinatura pausada.")}>
+            {busy === "pause" ? <CircleNotch className="animate-spin" /> : paused ? <Play weight="fill" /> : <Pause weight="bold" />} {paused ? "Retomar" : "Pausar"}
+          </button>
+        )}
+        {actions.canSkipCycle && (
+          <button type="button" className={CHIP} disabled={!!busy} onClick={() => run("skip", {}, "Próximo ciclo adiado.")}>
+            {busy === "skip" ? <CircleNotch className="animate-spin" /> : <SkipForward weight="bold" />} Pular próximo ciclo
+          </button>
+        )}
+        {actions.canChangeAddress && (
+          <button type="button" className={CHIP} onClick={() => setAddrOpen(true)}><MapPin weight="bold" /> Trocar endereço</button>
+        )}
+        <button type="button" className={CHIP} onClick={() => setCardOpen(true)}><CreditCard weight="bold" /> Trocar cartão</button>
+        {(actions.canChangeProductQuantity || actions.canAddProducts || actions.canRemoveProducts) && (
+          <button type="button" className={CHIP} onClick={() => { setEditItems(items); setItemsOpen(true); }}>
+            <ListChecks weight="bold" /> Alterar itens
+          </button>
+        )}
+        <button type="button" className={CHIP_DANGER} onClick={() => setCancelOpen(true)}><XCircle weight="bold" /> Cancelar</button>
+      </div>
+
+      {/* Cancelar */}
+      <AlertDialog open={cancelOpen} onOpenChange={setCancelOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Cancelar assinatura?</AlertDialogTitle>
+            <AlertDialogDescription>Você deixará de receber os próximos ciclos. Esta ação não pode ser desfeita.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel className={BTN_OUTLINE}>Voltar</AlertDialogCancel>
+            <AlertDialogAction
+              className="font-display inline-flex h-11 cursor-pointer items-center justify-center gap-2 rounded-xl bg-[var(--store-sale)] px-5 text-[14px] font-bold text-white transition-colors hover:bg-[var(--store-sale)]"
+              onClick={() => run("cancel", {}, "Assinatura cancelada.").then((ok) => ok && setCancelOpen(false))}
+            >
+              Cancelar assinatura
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Endereço */}
+      <Dialog open={addrOpen} onOpenChange={setAddrOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Trocar endereço de entrega</DialogTitle>
+            <DialogDescription>O novo endereço valerá para os próximos ciclos.</DialogDescription>
+          </DialogHeader>
+          <AddressFields value={addr} onChange={setAddr} />
+          <DialogFooter>
+            <button type="button" className={BTN_OUTLINE} onClick={() => setAddrOpen(false)}>Voltar</button>
+            <button type="button" className={BTN_PRIMARY} disabled={busy === "address"} onClick={() => run("address", { address: addr }, "Endereço atualizado.").then((ok) => ok && setAddrOpen(false))}>
+              {busy === "address" ? <CircleNotch className="animate-spin" /> : null} Salvar
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Cartão */}
+      <Dialog open={cardOpen} onOpenChange={setCardOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Trocar cartão</DialogTitle>
+            <DialogDescription>O novo cartão será usado nas próximas cobranças.</DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-3">
+            <Field id="s-ch" label="Nome no cartão" value={card.cardHolder} onChange={(v) => setCard({ ...card, cardHolder: v })} />
+            <Field id="s-cn" label="Número" inputMode="numeric" value={card.cardNumber} onChange={(v) => setCard({ ...card, cardNumber: v })} />
+            <div className="grid grid-cols-3 gap-2">
+              <Field id="s-mm" label="Mês" inputMode="numeric" value={card.expirationMonth} onChange={(v) => setCard({ ...card, expirationMonth: v })} />
+              <Field id="s-yy" label="Ano" inputMode="numeric" value={card.expirationYear} onChange={(v) => setCard({ ...card, expirationYear: v })} />
+              <Field id="s-cvv" label="CVV" inputMode="numeric" value={card.securityCode} onChange={(v) => setCard({ ...card, securityCode: v })} />
+            </div>
+          </div>
+          <DialogFooter>
+            <button type="button" className={BTN_OUTLINE} onClick={() => setCardOpen(false)}>Voltar</button>
+            <button type="button" className={BTN_PRIMARY} disabled={busy === "card"} onClick={() => run("card", { card }, "Cartão atualizado.").then((ok) => ok && setCardOpen(false))}>
+              {busy === "card" ? <CircleNotch className="animate-spin" /> : null} Salvar
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Itens */}
+      <Dialog open={itemsOpen} onOpenChange={setItemsOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Alterar itens</DialogTitle>
+            <DialogDescription>Ajuste as quantidades dos próximos ciclos.</DialogDescription>
+          </DialogHeader>
+          <ul className="flex flex-col gap-3">
+            {editItems.map((it, i) => (
+              <li key={i} className="flex items-center justify-between gap-3 text-sm">
+                <span className="truncate font-medium text-[var(--store-ink-2)]">{it.productId}</span>
+                <QuantityStepper
+                  value={it.quantity}
+                  min={0}
+                  onChange={(q) => setEditItems((arr) => arr.map((x, j) => (j === i ? { ...x, quantity: q } : x)))}
+                />
+              </li>
+            ))}
+          </ul>
+          <DialogFooter>
+            <button type="button" className={BTN_OUTLINE} onClick={() => setItemsOpen(false)}>Voltar</button>
+            <button type="button" className={BTN_PRIMARY} disabled={busy === "items"} onClick={() => run("items", { items: editItems }, "Itens atualizados.").then((ok) => ok && setItemsOpen(false))}>
+              {busy === "items" ? <CircleNotch className="animate-spin" /> : null} Salvar
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function Field({ id, label, value, onChange, ...rest }: { id: string; label: string; value: string; onChange: (v: string) => void } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "id">) {
+  return (
+    <label htmlFor={id} className="flex flex-col gap-1.5">
+      <span className="text-[13px] font-bold text-[var(--store-ink-2)]">{label}</span>
+      <input id={id} value={value} onChange={(e) => onChange(e.target.value)} className={INPUT} {...rest} />
+    </label>
+  );
+}

package/template/components/account-nav.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+// Link de conta no header. Mantém o layout estático (ISR): busca o nome do cliente no client.
+// Logado → primeiro nome com uma pimentinha; senão → "Entrar".
+import * as React from "react";
+import Link from "next/link";
+import { User, UserCircle } from "@phosphor-icons/react/dist/ssr";
+
+export function AccountNav({
+  /** "ink" = sobre fundo claro (padrão). "chrome" = sobre a cor de chrome (header sobreposto). */
+  tone = "ink",
+  /** Só o ícone, sem o rótulo — pra headers que alinham 3 ações em ícone. */
+  iconOnly = false,
+}: { tone?: "ink" | "chrome"; iconOnly?: boolean } = {}) {
+  const cor = tone === "chrome" ? "text-[var(--store-chrome-text,#ffffff)]" : "text-[var(--store-ink)]";
+  const [firstName, setFirstName] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let alive = true;
+    fetch("/api/account/me")
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d) => { if (alive && d?.firstName) setFirstName(d.firstName); })
+      .catch(() => {});
+    return () => { alive = false; };
+  }, []);
+
+  if (firstName) {
+    return (
+      <Link href="/conta" aria-label={`Conta de ${firstName}`} className={`flex min-h-11 min-w-11 shrink-0 items-center justify-center gap-2 text-[15px] font-semibold ${cor}`}>
+        <UserCircle weight="fill" className={tone === "chrome" ? "text-[22px]" : "text-[22px] text-[var(--store-primary,#18181B)]"} />
+        {!iconOnly && firstName}
+      </Link>
+    );
+  }
+  return (
+    <Link href="/conta" aria-label="Entrar na minha conta" className={`flex min-h-11 min-w-11 shrink-0 items-center justify-center gap-2 text-[15px] font-medium ${cor}`}>
+      <User className="text-[22px]" />
+      {!iconOnly && "Entrar"}
+    </Link>
+  );
+}

package/template/components/address-fields.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import * as React from "react";
+import { Loader2 } from "@/lib/icons";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { maskCep, onlyDigits } from "@/lib/format";
+
+export interface AddressValue {
+  fullName: string;
+  taxPayerId: string;
+  postal: string;
+  address1: string;
+  number: string;
+  address2?: string;
+  neighborhood: string;
+  city: string;
+  region: string;
+  phone: string;
+}
+
+export const emptyAddress: AddressValue = {
+  fullName: "", taxPayerId: "", postal: "", address1: "", number: "",
+  address2: "", neighborhood: "", city: "", region: "", phone: "",
+};
+
+// Campos de endereço com autofill por CEP (/api/cep/[code]). a11y: cada input tem <Label> + autocomplete.
+export function AddressFields({
+  value,
+  onChange,
+}: {
+  value: AddressValue;
+  onChange: (v: AddressValue) => void;
+}) {
+  const [cepLoading, setCepLoading] = React.useState(false);
+  const set = (patch: Partial<AddressValue>) => onChange({ ...value, ...patch });
+
+  const onCepBlur = async () => {
+    const cep = onlyDigits(value.postal);
+    if (cep.length !== 8) return;
+    setCepLoading(true);
+    try {
+      const res = await fetch(`/api/cep/${cep}`);
+      const data = await res.json();
+      if (res.ok && data.address) {
+        set({
+          address1: data.address.address1 || value.address1,
+          neighborhood: data.address.neighborhood || value.neighborhood,
+          city: data.address.city || value.city,
+          region: data.address.region || value.region,
+        });
+      }
+    } finally {
+      setCepLoading(false);
+    }
+  };
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2">
+      <Field className="sm:col-span-2" id="fullName" label="Nome completo" autoComplete="name"
+        value={value.fullName} onChange={(v) => set({ fullName: v })} />
+      <Field id="taxPayerId" label="CPF" inputMode="numeric" autoComplete="off"
+        value={value.taxPayerId} onChange={(v) => set({ taxPayerId: v })} />
+      <Field id="phone" label="Telefone (com DDD)" inputMode="tel" autoComplete="tel"
+        value={value.phone} onChange={(v) => set({ phone: v })} />
+
+      <div className="grid gap-1.5">
+        <Label htmlFor="postal">CEP</Label>
+        <div className="relative">
+          <Input id="postal" inputMode="numeric" autoComplete="postal-code" value={value.postal}
+            onChange={(e) => set({ postal: maskCep(e.target.value) })} onBlur={onCepBlur} />
+          {cepLoading && <Loader2 className="absolute right-2 top-1/2 size-4 -translate-y-1/2 animate-spin text-muted-foreground" />}
+        </div>
+      </div>
+      <Field id="region" label="UF" autoComplete="address-level1" maxLength={2}
+        value={value.region} onChange={(v) => set({ region: v.toUpperCase().slice(0, 2) })} />
+
+      <Field className="sm:col-span-2" id="address1" label="Endereço" autoComplete="address-line1"
+        value={value.address1} onChange={(v) => set({ address1: v })} />
+      <Field id="number" label="Número" autoComplete="off" value={value.number} onChange={(v) => set({ number: v })} />
+      <Field id="address2" label="Complemento (opcional)" autoComplete="address-line2"
+        value={value.address2 ?? ""} onChange={(v) => set({ address2: v })} />
+      <Field id="neighborhood" label="Bairro" autoComplete="address-level3"
+        value={value.neighborhood} onChange={(v) => set({ neighborhood: v })} />
+      <Field id="city" label="Cidade" autoComplete="address-level2"
+        value={value.city} onChange={(v) => set({ city: v })} />
+    </div>
+  );
+}
+
+function Field({
+  id, label, value, onChange, className, ...rest
+}: {
+  id: string; label: string; value: string; onChange: (v: string) => void; className?: string;
+} & Omit<React.ComponentProps<typeof Input>, "value" | "onChange" | "id">) {
+  return (
+    <div className={`grid gap-1.5 ${className ?? ""}`}>
+      <Label htmlFor={id}>{label}</Label>
+      <Input id={id} value={value} onChange={(e) => onChange(e.target.value)} {...rest} />
+    </div>
+  );
+}

package/template/components/analytics/data-layer-ready.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+// Emite `dataLayerReady { pageType, products[] }` uma vez por carregamento. É o evento que o
+// container central da Unbox usa para tipo de página e remarketing do Google Ads; sem ele, a
+// loja gerada pelo CLI é invisível para esses gatilhos. Não renderiza nada.
+import * as React from "react";
+import { trackPageType, type PageType, type TrackItem } from "@/lib/analytics";
+
+export function DataLayerReady({ pageType, products = [] }: { pageType: PageType; products?: TrackItem[] }) {
+  const key = pageType + "|" + products.map((p) => p.id).join(",");
+  React.useEffect(() => {
+    trackPageType(pageType, products);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+  return null;
+}

package/template/components/analytics/purchase-tracker.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+// Dispara purchase / Purchase quando o pedido está PAGO (página /pedido/[ref]). Dedupe por
+// transactionId (localStorage) em trackPurchase → não conta duas vezes se o cliente também viu
+// a confirmação inline do Pix. Pix pendente NUNCA dispara: `paid` decide. Não renderiza nada.
+import * as React from "react";
+import { trackPurchase, type TrackItem, type TrackUser } from "@/lib/analytics";
+
+export function PurchaseTracker({
+  transactionId,
+  paid,
+  value,
+  items,
+  shipping,
+  coupon,
+  user,
+}: {
+  transactionId: string;
+  paid: boolean;
+  value?: number;
+  items: TrackItem[];
+  shipping?: number;
+  coupon?: string;
+  user?: TrackUser;
+}) {
+  React.useEffect(() => {
+    if (!paid || !transactionId) return;
+    trackPurchase({ transactionId, value, items, shipping, coupon, user });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paid, transactionId]);
+  return null;
+}

package/template/components/brand-search.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr";
+
+export function BrandSearch({ className }: { className?: string }) {
+  const router = useRouter();
+  const [q, setQ] = React.useState("");
+  return (
+    <form
+      role="search"
+      className={`flex h-[50px] items-center overflow-hidden rounded-full border border-[var(--store-line-2)] bg-[var(--store-surface)] pl-1 ${className ?? ""}`}
+      onSubmit={(e) => {
+        e.preventDefault();
+        const term = q.trim();
+        router.push(term ? `/busca?q=${encodeURIComponent(term)}` : "/produtos");
+      }}
+    >
+      <input
+        type="search"
+        name="q"
+        value={q}
+        onChange={(e) => setQ(e.target.value)}
+        placeholder="Buscar produtos..."
+        aria-label="Buscar produtos"
+        className="min-w-0 flex-1 border-none bg-transparent px-4 text-[15px] text-[var(--store-ink)] outline-none"
+      />
+      <button type="submit" aria-label="Buscar" className="flex h-[50px] w-[62px] shrink-0 items-center justify-center rounded-full bg-[var(--store-primary,#18181B)] text-white transition-colors hover:bg-[var(--store-primary-dark,#09090B)]">
+        <MagnifyingGlass weight="bold" className="text-[19px]" />
+      </button>
+    </form>
+  );
+}