@unbox-plus/cli 0.20.4

package/template/app/opengraph-image.tsx

@@ -0,0 +1,35 @@
+import { ImageResponse } from "next/og";
+
+// Imagem de compartilhamento (Open Graph / Twitter) gerada na hora: nome da loja sobre a cor
+// primária. Existe para NENHUM compartilhamento sair sem imagem — antes saía. Quando a marca
+// tiver uma imagem própria (1200×630), troque por um arquivo public/brand/og.png e aponte
+// `openGraph.images` no layout; até lá, esta serve e nunca é placeholder de outra loja.
+export const runtime = "edge";
+export const alt = "Minha Loja";
+export const size = { width: 1200, height: 630 };
+export const contentType = "image/png";
+
+const SITE_NAME = "Minha Loja";
+// Hex literal é obrigatório aqui: o satori (ImageResponse) não lê variável de CSS. O CLI
+// reescreve estas duas linhas com a cor da marca no scaffold (src/theme.js). Se o medidor de
+// sistema acusar estes dois hex, é exceção declarada, não vazamento.
+const PRIMARY = "#18181B";
+const PRIMARY_FG = "#FFFFFF";
+
+export default function OgImage() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%", height: "100%", display: "flex", flexDirection: "column",
+          alignItems: "flex-start", justifyContent: "flex-end", padding: 72,
+          background: PRIMARY, color: PRIMARY_FG, fontFamily: "system-ui, sans-serif",
+        }}
+      >
+        <div style={{ fontSize: 84, fontWeight: 800, letterSpacing: -2, lineHeight: 1.05 }}>{SITE_NAME}</div>
+        <div style={{ marginTop: 18, fontSize: 30, opacity: 0.8 }}>Loja online</div>
+      </div>
+    ),
+    size,
+  );
+}

package/template/app/robots.ts

@@ -0,0 +1,31 @@
+import type { MetadataRoute } from "next";
+
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000";
+
+// Áreas privadas/transacionais não indexáveis (doc 10).
+// EXPORTADA de propósito: é a MESMA lista que decide quais páginas o editor da Unbox oferece ao
+// lojista (ver lib/rotas-editaveis.ts). Uma lista só, mantida por quem cuida de SEO: bloquear uma
+// área aqui a tira do editor junto, e não existe segunda lista para alguém esquecer.
+export const DISALLOW = ["/conta", "/carrinho", "/checkout", "/pedido", "/api"];
+
+// Agentes de IA explicitamente bem-vindos (descoberta de agentes): conteúdo público —
+// catálogo (/produto/, /categoria/, /produtos) — liberado para indexação e respostas.
+const AI_AGENTS = [
+  "GPTBot", "OAI-SearchBot", "ChatGPT-User",
+  "ClaudeBot", "Claude-Web", "anthropic-ai",
+  "PerplexityBot", "Perplexity-User",
+  "Google-Extended", "Applebot-Extended",
+  "Amazonbot", "meta-externalagent", "CCBot",
+];
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      { userAgent: "*", allow: "/", disallow: DISALLOW },
+      // mesma política para os agentes de IA — público liberado, privado bloqueado
+      { userAgent: AI_AGENTS, allow: ["/", "/produto/", "/categoria/", "/produtos"], disallow: DISALLOW },
+    ],
+    sitemap: `${siteUrl}/sitemap.xml`,
+    host: siteUrl,
+  };
+}

package/template/app/sitemap.ts

@@ -0,0 +1,42 @@
+import type { MetadataRoute } from "next";
+import { loadAllCatalogItems } from "@/lib/dataloader";
+import { getTopTags } from "@/lib/queries";
+
+export const revalidate = 3600;
+
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000";
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const base: MetadataRoute.Sitemap = [
+    { url: siteUrl, changeFrequency: "daily", priority: 1 },
+    { url: `${siteUrl}/produtos`, changeFrequency: "daily", priority: 0.9 },
+  ];
+
+  // produtos (paginado por offset até hasNextPage===false; só os visíveis — doc 10)
+  let products: MetadataRoute.Sitemap = [];
+  try {
+    const items = await loadAllCatalogItems();
+    products = items
+      .map((n: any) => n.product)
+      .filter((p: any) => p && p.isVisible !== false && p.slug)
+      .map((p: any) => ({
+        url: `${siteUrl}/produto/${encodeURIComponent(p.slug)}`,
+        changeFrequency: "weekly" as const,
+        priority: 0.8,
+      }));
+  } catch {
+    /* falha de rede não deve quebrar o sitemap inteiro */
+  }
+
+  let categories: MetadataRoute.Sitemap = [];
+  try {
+    const tags = await getTopTags();
+    categories = (tags as any[])
+      .filter((t) => t.isVisible !== false && t.slug)
+      .map((t) => ({ url: `${siteUrl}/categoria/${encodeURIComponent(t.slug)}`, changeFrequency: "weekly" as const, priority: 0.6 }));
+  } catch {
+    /* idem */
+  }
+
+  return [...base, ...categories, ...products];
+}

package/template/bootstrap.sh

@@ -0,0 +1,87 @@
+#!/bin/bash
+set -e
+
+echo ""
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo "  Unbox Storefront — Bootstrap"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo ""
+
+# ── 1. Credenciais ───────────────────────────────────────────────────────────
+echo "Você já tem as credenciais da loja Unbox?"
+echo "(UNBOX_API_KEY, UNBOX_USER, UNBOX_PASS)"
+read -rp "  [s/N] " HAS_CREDS
+echo ""
+
+# ── 2. CRO Package ───────────────────────────────────────────────────────────
+echo "Gostaria de ativar o Unbox AI CRO Package?"
+echo ""
+echo "  Módulos disponíveis:"
+echo "  [1] Prova Social no PDP           — badge de vendas + avaliações"
+echo "  [2] Urgência de Estoque           — 'Restam X unidades'"
+echo "  [3] Countdown Flash Sale          — banner com temporizador"
+echo "  [4] Barra de Frete Grátis         — progress bar no carrinho"
+echo "  [5] Upsell Pós-Checkout           — recomendações na confirmação"
+echo "  [6] Recently Viewed               — produtos vistos (localStorage)"
+echo "  [7] Sticky CTA Mobile             — botão fixo no scroll do PDP"
+echo "  [8] Trust Strip Customizável      — ícones de confiança"
+echo "  [9] Kits & Combos com Cross-sell  — seção de kits na home"
+echo " [10] Brindes (Gift with Purchase)  — brinde ao atingir valor mínimo"
+echo ""
+echo "  ⚠️  Módulos 4 e 10 precisam de configuração no painel Unbox antes do lançamento."
+echo ""
+echo "  Digite 'all', números separados por vírgula (ex: 1,4,7), ou Enter para pular."
+read -rp "  CRO modules: " CRO_CHOICE
+echo ""
+
+# Salva escolha para o agente 13-cro usar depois
+if [ -n "$CRO_CHOICE" ] && [ "$CRO_CHOICE" != "none" ]; then
+  echo "$CRO_CHOICE" > .cro-modules
+  echo "  ✓ Escolha salva em .cro-modules"
+  echo "  Execute o agente 13-cro após o setup para implementar os módulos."
+  echo "  (agents/definitions/13-cro.md)"
+else
+  echo "  CRO Package pulado. Você pode ativar depois com o agente 13-cro."
+fi
+echo ""
+
+# ── 3. Node 22 LTS ───────────────────────────────────────────────────────────
+echo "→ Garantindo Node 22 LTS..."
+nvm install 22 --silent && nvm use 22 --silent
+
+# ── 4. Remove lock file global que conflita com npm ──────────────────────────
+rm -f ~/package-lock.json
+
+# ── 5. Dependências ──────────────────────────────────────────────────────────
+echo "→ Instalando dependências (pode demorar ~2 min)..."
+npm install --silent
+
+# ── 6. .env.local ────────────────────────────────────────────────────────────
+if [ ! -f .env.local ]; then
+  cp .env.example .env.local
+fi
+
+# ── 7. Modo com ou sem credenciais ───────────────────────────────────────────
+if [[ "$HAS_CREDS" =~ ^[Ss]$ ]]; then
+  echo ""
+  echo "  Preencha .env.local com as credenciais antes de continuar:"
+  echo "  UNBOX_API_KEY, UNBOX_USER, UNBOX_PASS, SESSION_SECRET, NEXT_PUBLIC_SITE_URL"
+  echo ""
+  read -rp "  Pressione Enter quando .env.local estiver preenchido..."
+  echo ""
+  echo "→ Testando conexão com a API Unbox..."
+  npm run unbox:test
+  echo ""
+  echo "  Conectado. Rodando em modo completo."
+else
+  echo "  MODO MOCKUP — o layout vai abrir mas páginas que dependem"
+  echo "  da API (catálogo, produto, checkout) vão mostrar erro."
+  echo "  Preencha .env.local e rode 'npm run unbox:test' antes do QA."
+  echo ""
+fi
+
+echo ""
+echo "→ Iniciando dev server..."
+echo "  (primeira compilação demora ~3 min — aguarde o 'Ready' aparecer)"
+echo ""
+npm run dev

package/template/components/account/account-shell.tsx

@@ -0,0 +1,47 @@
+import Link from "next/link";
+import { House, Package, Gear, CaretRight } from "@phosphor-icons/react/dist/ssr";
+import { SignOutButton } from "@/components/account/signout-button";
+
+// Menu enxuto por decisão de produto: Assinaturas e Endereços saíram da navegação
+// (as rotas /conta/assinaturas e /conta/enderecos continuam existindo pra deep links,
+// ex.: e-mail de assinatura). Pra reexibir, basta recolocar os itens aqui.
+const NAV = [
+  { href: "/conta", label: "Visão geral", icon: House },
+  { href: "/conta/pedidos", label: "Pedidos", icon: Package },
+  { href: "/conta/preferencias", label: "Preferências", icon: Gear },
+];
+
+export function AccountShell({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="store-layout full-bleed bg-white text-[var(--store-ink)]">
+      <div className="mx-auto max-w-[1240px] px-4 py-7 sm:px-6">
+        {/* breadcrumb */}
+        <div className="flex items-center gap-2 text-[13px] font-medium text-[var(--store-muted)]">
+          <Link href="/" className="no-underline hover:text-[var(--store-ink)]">Início</Link>
+          <CaretRight className="text-[11px]" />
+          <span className="font-semibold text-[var(--store-ink)]">Minha conta</span>
+        </div>
+
+        <div className="mt-6 grid items-start gap-7 md:grid-cols-[248px_1fr]">
+          <aside className="h-fit rounded-xl border border-[var(--store-line)] bg-white p-3 md:sticky md:top-6">
+            <nav className="flex flex-col gap-1">
+              {NAV.map(({ href, label, icon: Icon }) => (
+                <Link key={href} href={href} className="flex items-center gap-2.5 rounded-xl px-3.5 py-2.5 text-[14px] 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-[18px] text-[var(--store-primary,#18181B)]" /> {label}
+                </Link>
+              ))}
+              <div className="mt-1.5 border-t border-[var(--store-surface-2)] pt-1.5">
+                <SignOutButton />
+              </div>
+            </nav>
+          </aside>
+
+          <section>
+            <h1 className="font-display mb-5 text-[27px] font-extrabold leading-[1.12]">{title}</h1>
+            {children}
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/components/account/address-book.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { Plus, PencilSimple, Trash, CircleNotch } from "@phosphor-icons/react/dist/ssr";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { AddressFields, emptyAddress, type AddressValue } from "@/components/address-fields";
+import { EmptyState } from "@/components/empty-state";
+
+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)]";
+
+interface AddressBookItem {
+  _id: string;
+  alias?: string;
+  fullName?: string;
+  postal?: string;
+  address1?: string;
+  number?: string;
+  neighborhood?: string;
+  city?: string;
+  region?: string;
+  isShippingDefault?: boolean;
+  isBillingDefault?: boolean;
+}
+
+export function AddressBook({ initial }: { initial: AddressBookItem[] }) {
+  const router = useRouter();
+  const [open, setOpen] = React.useState(false);
+  const [editingId, setEditingId] = React.useState<string | undefined>();
+  const [value, setValue] = React.useState<AddressValue>(emptyAddress);
+  const [busy, setBusy] = React.useState(false);
+
+  const openNew = () => {
+    setEditingId(undefined);
+    setValue(emptyAddress);
+    setOpen(true);
+  };
+  const openEdit = (a: AddressBookItem) => {
+    setEditingId(a._id);
+    setValue({
+      ...emptyAddress,
+      fullName: a.fullName ?? "",
+      postal: a.postal ?? "",
+      address1: a.address1 ?? "",
+      number: a.number ?? "",
+      neighborhood: a.neighborhood ?? "",
+      city: a.city ?? "",
+      region: a.region ?? "",
+    });
+    setOpen(true);
+  };
+
+  async function save() {
+    setBusy(true);
+    try {
+      const res = await fetch("/api/account/addresses", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ address: { ...value, _id: editingId } }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data?.error || "Erro ao salvar.");
+      toast.success("Endereço salvo.");
+      setOpen(false);
+      router.refresh();
+    } catch (e: any) {
+      toast.error(e.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function remove(id: string) {
+    try {
+      const res = await fetch("/api/account/addresses", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids: [id] }),
+      });
+      if (!res.ok) throw new Error((await res.json().catch(() => ({})))?.error || "Erro ao remover.");
+      toast.success("Endereço removido.");
+      router.refresh();
+    } catch (e: any) {
+      toast.error(e.message);
+    }
+  }
+
+  return (
+    <div>
+      <div className="mb-4 flex justify-end">
+        <button type="button" onClick={openNew} className={BTN_PRIMARY}><Plus weight="bold" /> Novo endereço</button>
+      </div>
+
+      {initial.length === 0 ? (
+        <EmptyState title="Nenhum endereço salvo" description="Adicione um endereço para agilizar suas compras." />
+      ) : (
+        <ul className="grid gap-3 sm:grid-cols-2">
+          {initial.map((a) => (
+            <li key={a._id} className="flex flex-col rounded-lg border border-[var(--store-line)] bg-white p-4">
+              <div className="text-sm">
+                <p className="font-display text-[15px] font-bold text-[var(--store-ink)]">{a.alias || a.fullName}</p>
+                <p className="mt-0.5 text-[var(--store-ink-2)]">{a.address1}, {a.number} · {a.neighborhood}</p>
+                <p className="text-[var(--store-muted)]">{a.city}/{a.region} · {a.postal}</p>
+                {(a.isShippingDefault || a.isBillingDefault) && (
+                  <div className="mt-2.5 flex flex-wrap gap-1.5">
+                    {a.isShippingDefault && <Tag>Entrega padrão</Tag>}
+                    {a.isBillingDefault && <Tag>Cobrança padrão</Tag>}
+                  </div>
+                )}
+              </div>
+              <div className="mt-3.5 flex gap-2 border-t border-[var(--store-surface-2)] pt-3">
+                <button type="button" onClick={() => openEdit(a)} className="inline-flex cursor-pointer items-center gap-1.5 text-[13px] font-bold text-[var(--store-primary,#18181B)]"><PencilSimple weight="bold" /> Editar</button>
+                <button type="button" onClick={() => remove(a._id)} className="inline-flex cursor-pointer items-center gap-1.5 text-[13px] font-bold text-[var(--store-muted)] transition-colors hover:text-[var(--store-sale)]"><Trash weight="bold" /> Remover</button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{editingId ? "Editar endereço" : "Novo endereço"}</DialogTitle>
+            <DialogDescription>Preencha os dados de entrega.</DialogDescription>
+          </DialogHeader>
+          <AddressFields value={value} onChange={setValue} />
+          <DialogFooter>
+            <button type="button" onClick={() => setOpen(false)} className={BTN_OUTLINE}>Cancelar</button>
+            <button type="button" onClick={save} disabled={busy} className={BTN_PRIMARY}>
+              {busy ? <CircleNotch className="animate-spin" /> : null} Salvar
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function Tag({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="inline-flex items-center rounded-full border border-[var(--store-primary-soft)] bg-[var(--store-primary-soft,#F1F1F3)] px-2.5 py-0.5 text-[11.5px] font-bold text-[var(--store-primary,#18181B)]">{children}</span>
+  );
+}

package/template/components/account/preferences-form.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import * as React from "react";
+import { toast } from "sonner";
+
+export function PreferencesForm({
+  initial,
+}: {
+  initial: { receiveNewOrderEmail: boolean; reuseDataBetweenShops: boolean };
+}) {
+  const [state, setState] = React.useState(initial);
+  const [saving, setSaving] = React.useState(false);
+
+  async function update(patch: Partial<typeof state>) {
+    const prev = state;
+    const next = { ...state, ...patch };
+    setState(next);
+    setSaving(true);
+    try {
+      const res = await fetch("/api/account/preferences", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(patch),
+      });
+      if (!res.ok) throw new Error((await res.json().catch(() => ({})))?.error || "Erro ao salvar.");
+      toast.success("Preferências atualizadas.");
+    } catch (e: any) {
+      toast.error(e.message);
+      setState(prev); // reverte
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col divide-y divide-[var(--store-surface-2)] rounded-xl border border-[var(--store-line)] bg-white px-5">
+      <Row
+        label="Receber e-mail a cada novo pedido"
+        desc="Avisamos quando um pedido é criado."
+        checked={state.receiveNewOrderEmail}
+        disabled={saving}
+        onChange={(v) => update({ receiveNewOrderEmail: v })}
+      />
+      <Row
+        label="Reutilizar meus dados entre lojas Unbox"
+        desc="Agiliza o checkout em outras lojas da rede."
+        checked={state.reuseDataBetweenShops}
+        disabled={saving}
+        onChange={(v) => update({ reuseDataBetweenShops: v })}
+      />
+    </div>
+  );
+}
+
+function Row({ label, desc, checked, onChange, disabled }: {
+  label: string; desc: string; checked: boolean; onChange: (v: boolean) => void; disabled?: boolean;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-4 py-4">
+      <div>
+        <div className="text-[14.5px] font-bold text-[var(--store-ink)]">{label}</div>
+        <div className="mt-0.5 text-[13px] text-[var(--store-muted)]">{desc}</div>
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => onChange(!checked)}
+        className="relative h-[26px] w-[46px] shrink-0 cursor-pointer rounded-full transition-colors disabled:opacity-60"
+        style={{ background: checked ? "var(--store-primary,#18181B)" : "var(--store-line-2)" }}
+      >
+        <span className="absolute top-[3px] h-[20px] w-[20px] rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,.2)] transition-all" style={{ left: checked ? 23 : 3 }} />
+      </button>
+    </div>
+  );
+}

package/template/components/account/reorder-button.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+import { ArrowsClockwise, Spinner } from "@phosphor-icons/react/dist/ssr";
+import { useCart } from "@/components/cart/cart-provider";
+
+export interface ReorderItem {
+  productId: string;
+  variantId: string;
+  price: number;
+  quantity: number;
+  title?: string;
+  thumbnail?: string;
+}
+
+export function ReorderButton({ items }: { items: ReorderItem[] }) {
+  const { add, setOpen } = useCart();
+  const [busy, setBusy] = React.useState(false);
+
+  if (items.length === 0) return null;
+
+  async function reorder() {
+    setBusy(true);
+    try {
+      for (const it of items) {
+        await add(
+          { productId: it.productId, variantId: it.variantId, price: it.price, quantity: it.quantity, title: it.title, thumbnail: it.thumbnail },
+          { silent: true },
+        );
+      }
+      setOpen(true);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={reorder}
+      disabled={busy}
+      className="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"
+    >
+      {busy ? <Spinner className="animate-spin" /> : <ArrowsClockwise weight="bold" />} Refazer pedido
+    </button>
+  );
+}

package/template/components/account/signout-button.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { SignOut } from "@phosphor-icons/react/dist/ssr";
+
+export function SignOutButton() {
+  return (
+    <button
+      type="button"
+      onClick={async () => {
+        await fetch("/api/account/signout", { method: "POST" });
+        // Documento inteiro (não router.push): garante que nenhum payload RSC logado
+        // sobreviva ao fim da sessão — mesma classe de bug do pós-login.
+        window.location.assign("/");
+      }}
+      className="flex w-full cursor-pointer items-center gap-2.5 rounded-xl px-3.5 py-2.5 text-[14px] font-semibold text-[var(--store-muted)] transition-colors hover:bg-[var(--store-sale-soft)] hover:text-[var(--store-sale)]"
+    >
+      <SignOut weight="bold" className="text-[18px]" /> Sair
+    </button>
+  );
+}