@hook-sdk/template 0.8.1 → 0.9.1

package/dist/index.cjs

@@ -62,7 +62,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/AppRoot.tsx
 var import_react15 = require("react");
-var import_sdk9 = require("@hook-sdk/sdk");
+var import_sdk10 = require("@hook-sdk/sdk");
 
 // src/internal/TemplateConfigContext.tsx
 var import_react = require("react");
@@ -157,50 +157,66 @@ function AuthGate({ Login, Signup, Forgot, Reset, children }) {
 var import_react3 = require("react");
 var import_sdk2 = require("@hook-sdk/sdk");
 function usePaywallState() {
-  const { subscription } = (0, import_sdk2.useHook)();
+  const { subscription, plan } = (0, import_sdk2.useHook)();
   const [opening, setOpening] = (0, import_react3.useState)(false);
   const [error, setError] = (0, import_react3.useState)(null);
   const [pixPending, setPixPending] = (0, import_react3.useState)(null);
   const status = subscription.status();
   const daysLeftInTrial = subscription.daysLeftInTrial();
   const initialLoadComplete = subscription.initialLoadComplete;
+  const availableMethods = (0, import_react3.useMemo)(
+    () => ["card", "pix-auto"],
+    []
+  );
+  const priceCents = plan.data?.priceCents ?? 0;
+  const yearlyPriceCents = plan.data?.yearlyPriceCents ?? null;
+  const monthlyEquivalent = (0, import_react3.useCallback)(
+    (cycle) => {
+      if (cycle === "YEARLY" && yearlyPriceCents) {
+        return Math.round(yearlyPriceCents / 12);
+      }
+      return priceCents;
+    },
+    [priceCents, yearlyPriceCents]
+  );
   const checkout = (0, import_react3.useCallback)(
     async (args) => {
       setOpening(true);
       setError(null);
       setPixPending(null);
-      const method = args.method ?? "card";
-      const cycle = args.cycle ?? "MONTHLY";
       try {
-        if (method === "card") {
-          const result = await subscription.checkoutCard({ cpf: args.cpf, cycle });
-          window.location.href = result.invoiceUrl;
-          return;
-        }
-        if (method === "pix-auto") {
-          const result = await subscription.checkoutPixAuto({ cpf: args.cpf, cycle });
-          setPixPending({
-            method: "pix-auto",
-            qrCodePayload: result.qrCodePayload,
-            qrCodeBase64: result.qrCodeBase64,
-            expiresAt: null,
-            paid: false
+        if (args.method === "card") {
+          if (!args.card || !args.holderInfo) {
+            throw new Error('card and holderInfo are required when method is "card"');
+          }
+          await subscription.checkout({
+            method: "card",
+            cycle: args.cycle,
+            cpf: args.cpf,
+            card: args.card,
+            holderInfo: args.holderInfo,
+            ...args.remoteIp ? { remoteIp: args.remoteIp } : {}
           });
+          await subscription.refresh();
           setOpening(false);
           return;
         }
-        if (method === "pix-once") {
-          const result = await subscription.checkoutPixOnce({ cpf: args.cpf, cycle });
-          setPixPending({
-            method: "pix-once",
-            qrCodePayload: result.qrCodePayload,
-            qrCodeBase64: result.qrCodeBase64,
-            expiresAt: result.expiresAt,
-            paid: false
-          });
-          setOpening(false);
-          return;
+        const result = await subscription.checkout({
+          method: "pix-auto",
+          cycle: args.cycle,
+          cpf: args.cpf
+        });
+        if (result.method !== "pix-auto") {
+          throw new Error(`unexpected checkout result method: ${result.method}`);
         }
+        setPixPending({
+          method: "pix-auto",
+          qrCodePayload: result.qrCodePayload,
+          qrCodeBase64: result.qrCodeBase64,
+          expiresAt: null,
+          paid: false
+        });
+        setOpening(false);
       } catch (err) {
         setError(err);
         setOpening(false);
@@ -253,7 +269,9 @@ function usePaywallState() {
     opening,
     error,
     pixPending,
-    dismissPix
+    dismissPix,
+    availableMethods,
+    monthlyEquivalent
   };
 }
 
@@ -2198,43 +2216,485 @@ function DefaultResetScreen({ onNavigate }) {
 
 // src/defaults/DefaultPaywall.tsx
 var import_react14 = require("react");
+
+// src/hooks/usePlan.ts
+var import_sdk9 = require("@hook-sdk/sdk");
+function usePlan() {
+  const { plan } = (0, import_sdk9.useHook)();
+  return plan;
+}
+
+// src/utils/price.ts
+function formatBRL(cents) {
+  if (cents === null || cents === void 0) return "";
+  const reais = cents / 100;
+  return new Intl.NumberFormat("pt-BR", {
+    style: "currency",
+    currency: "BRL"
+  }).format(reais);
+}
+function monthlyFromYearly(yearlyCents) {
+  if (yearlyCents === null || yearlyCents === void 0) return 0;
+  return Math.round(yearlyCents / 12);
+}
+function dailyFromYearly(yearlyCents) {
+  if (yearlyCents === null || yearlyCents === void 0) return 0;
+  return Math.round(yearlyCents / 365);
+}
+function computeAnchorCents(baseCents, multiplier) {
+  if (multiplier === null || multiplier === void 0) return null;
+  if (!Number.isFinite(multiplier)) return null;
+  if (multiplier <= 1) return null;
+  return Math.round(baseCents * multiplier);
+}
+function discountPercent(anchorCents, realCents) {
+  if (anchorCents <= realCents) return 0;
+  return Math.floor((anchorCents - realCents) / anchorCents * 100);
+}
+
+// src/defaults/DefaultPaywall.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function DefaultPaywall() {
   const config = useTemplateConfig();
-  const { checkout, opening, error } = usePaywallState();
+  const plan = usePlan();
+  const {
+    checkout,
+    opening,
+    error,
+    availableMethods,
+    monthlyEquivalent,
+    pixPending,
+    dismissPix
+  } = usePaywallState();
   const p = config.subscription.paywall_config;
+  const paywallCfg = plan.data?.paywallConfig ?? {};
+  const anchorMultiplier = paywallCfg.anchorMultiplier ?? p.anchorMultiplier;
+  const anchorPriceCents = paywallCfg.anchorPriceCents ?? p.anchorPriceCents;
+  const [cycle, setCycle] = (0, import_react14.useState)("MONTHLY");
+  const [method, setMethod] = (0, import_react14.useState)("card");
   const [cpf, setCpf] = (0, import_react14.useState)("");
+  const [cardNumber, setCardNumber] = (0, import_react14.useState)("");
+  const [cardHolderName, setCardHolderName] = (0, import_react14.useState)("");
+  const [cardExpiryMonth, setCardExpiryMonth] = (0, import_react14.useState)("");
+  const [cardExpiryYear, setCardExpiryYear] = (0, import_react14.useState)("");
+  const [cardCcv, setCardCcv] = (0, import_react14.useState)("");
+  const [holderName, setHolderName] = (0, import_react14.useState)("");
+  const [holderEmail, setHolderEmail] = (0, import_react14.useState)("");
+  const [holderPostalCode, setHolderPostalCode] = (0, import_react14.useState)("");
+  const [holderAddressNumber, setHolderAddressNumber] = (0, import_react14.useState)("");
+  const [holderPhone, setHolderPhone] = (0, import_react14.useState)("");
+  const trialDays = plan.data?.trialDays ?? 0;
+  const monthlyCents = plan.data?.priceCents ?? 0;
+  const yearlyCents = plan.data?.yearlyPriceCents ?? null;
+  const activeCents = cycle === "YEARLY" && yearlyCents ? monthlyEquivalent("YEARLY") : monthlyCents;
+  const cycleValueCents = cycle === "YEARLY" && yearlyCents ? yearlyCents : monthlyCents;
+  const cycleLabel = cycle === "YEARLY" ? "por ano" : "por m\xEAs";
+  const pct = (0, import_react14.useMemo)(() => {
+    if (!yearlyCents || !monthlyCents) return 0;
+    const derived = Math.round((1 - yearlyCents / 12 / monthlyCents) * 100);
+    return Math.max(0, derived);
+  }, [monthlyCents, yearlyCents]);
+  const anchorBaseCents = cycle === "YEARLY" && yearlyCents ? monthlyFromYearly(yearlyCents) : monthlyCents;
+  const anchorCents = computeAnchorCents(anchorBaseCents, anchorMultiplier) ?? (anchorPriceCents && anchorPriceCents > anchorBaseCents ? anchorPriceCents : null);
+  const anchorDiscount = anchorCents ? discountPercent(anchorCents, activeCents) : 0;
   const cpfDigits = cpf.replace(/\D/g, "");
-  const canCheckout = cpfDigits.length === 11 && !opening;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("main", { style: { padding: 24, maxWidth: 440, margin: "0 auto", textAlign: "center" }, children: [
+  const cardFieldsFilled = cardNumber.replace(/\s/g, "").length >= 13 && cardHolderName.trim().length > 0 && cardExpiryMonth.length === 2 && cardExpiryYear.length >= 2 && cardCcv.length >= 3 && holderName.trim().length > 0 && /.+@.+\..+/.test(holderEmail) && holderPostalCode.replace(/\D/g, "").length === 8 && holderAddressNumber.trim().length > 0;
+  const canCheckout = cpfDigits.length === 11 && !opening && (method === "pix-auto" || cardFieldsFilled);
+  const ctaLabel = (0, import_react14.useMemo)(() => {
+    if (opening) return "Abrindo\u2026";
+    if (trialDays > 0) return `Comece trial de ${trialDays} dias gr\xE1tis`;
+    return p.cta ?? "Assinar agora";
+  }, [opening, trialDays, p.cta]);
+  const footer = (0, import_react14.useMemo)(() => {
+    if (trialDays > 0) {
+      return `Sem cobran\xE7a agora. Cobran\xE7a autom\xE1tica em ${trialDays} dias. Cancele quando quiser.`;
+    }
+    return "Cobran\xE7a imediata. Cancele quando quiser.";
+  }, [trialDays]);
+  const yearSuffix = cardExpiryYear.length === 2 ? `20${cardExpiryYear}` : cardExpiryYear;
+  const phoneDigits = holderPhone.replace(/\D/g, "");
+  const postalDigits = holderPostalCode.replace(/\D/g, "");
+  const submit = () => {
+    if (method === "card") {
+      void checkout({
+        cpf: cpfDigits,
+        cycle,
+        method: "card",
+        card: {
+          number: cardNumber.replace(/\s/g, ""),
+          holderName: cardHolderName.trim(),
+          expiryMonth: cardExpiryMonth,
+          expiryYear: yearSuffix,
+          ccv: cardCcv
+        },
+        holderInfo: {
+          name: holderName.trim(),
+          email: holderEmail.trim(),
+          cpfCnpj: cpfDigits,
+          postalCode: postalDigits,
+          addressNumber: holderAddressNumber.trim(),
+          ...phoneDigits ? { phone: phoneDigits } : {}
+        }
+      });
+      return;
+    }
+    void checkout({ cpf: cpfDigits, cycle, method: "pix-auto" });
+  };
+  const inputStyle = {
+    width: "100%",
+    padding: 10,
+    fontSize: 14,
+    borderRadius: 8,
+    border: "1px solid #ccc",
+    boxSizing: "border-box"
+  };
+  const labelStyle = { display: "block", fontSize: 13, opacity: 0.75, marginBottom: 4 };
+  const fieldGroup = { marginBottom: 10, textAlign: "left" };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("main", { style: { padding: 24, maxWidth: 480, margin: "0 auto", textAlign: "center" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h1", { style: { marginBottom: 8 }, children: p.title }),
     p.subtitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { style: { opacity: 0.7, marginBottom: 24 }, children: p.subtitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { style: { listStyle: "none", padding: 0, textAlign: "left", marginBottom: 24 }, children: p.benefits.map((b) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { style: { padding: "8px 0", display: "flex", alignItems: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "div",
+      {
+        role: "group",
+        "aria-label": "Per\xEDodo de cobran\xE7a",
+        style: { display: "flex", gap: 8, marginBottom: 16 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": cycle === "MONTHLY",
+              onClick: () => setCycle("MONTHLY"),
+              style: {
+                flex: 1,
+                padding: 12,
+                borderRadius: 8,
+                border: cycle === "MONTHLY" ? "2px solid var(--hook-color-primary)" : "1px solid #ccc",
+                background: cycle === "MONTHLY" ? "var(--hook-color-primary-soft, #eef)" : "white",
+                cursor: "pointer"
+              },
+              children: "Mensal"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": cycle === "YEARLY",
+              onClick: () => setCycle("YEARLY"),
+              disabled: !yearlyCents,
+              style: {
+                flex: 1,
+                padding: 12,
+                borderRadius: 8,
+                border: cycle === "YEARLY" ? "2px solid var(--hook-color-primary)" : "1px solid #ccc",
+                background: cycle === "YEARLY" ? "var(--hook-color-primary-soft, #eef)" : "white",
+                cursor: yearlyCents ? "pointer" : "not-allowed",
+                opacity: yearlyCents ? 1 : 0.5
+              },
+              children: [
+                "Anual",
+                pct > 0 ? ` \u2212${pct}%` : ""
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { marginBottom: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { fontSize: 32, fontWeight: 700, lineHeight: 1 }, children: [
+        formatBRL(activeCents),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { fontSize: 16, fontWeight: 400, opacity: 0.7 }, children: "/m\xEAs" })
+      ] }),
+      anchorCents && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { fontSize: 14, opacity: 0.6, marginTop: 4 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { textDecoration: "line-through" }, children: formatBRL(anchorCents) }),
+        anchorDiscount > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { style: { marginLeft: 6 }, children: [
+          "\u2212",
+          anchorDiscount,
+          "%"
+        ] })
+      ] }),
+      cycle === "YEARLY" && yearlyCents && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { fontSize: 12, opacity: 0.6, marginTop: 4 }, children: [
+        "Cobrado ",
+        formatBRL(yearlyCents),
+        " por ano"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { style: { listStyle: "none", padding: 0, textAlign: "left", margin: "24px 0" }, children: p.benefits.map((b) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { style: { padding: "8px 0", display: "flex", alignItems: "center" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": true, style: { marginRight: 8 }, children: "\u2713" }),
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: b })
     ] }, b)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { textAlign: "left", marginBottom: 16 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { style: { display: "block", fontSize: 14, opacity: 0.7, marginBottom: 4 }, children: "Seu CPF (pra emiss\xE3o de recibo)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { role: "tablist", "aria-label": "M\xE9todo de pagamento", style: { display: "flex", gap: 8, marginBottom: 16 }, children: availableMethods.map((m) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": method === m,
+        onClick: () => setMethod(m),
+        style: {
+          flex: 1,
+          padding: 10,
+          borderRadius: 8,
+          border: method === m ? "2px solid var(--hook-color-primary)" : "1px solid #ccc",
+          background: method === m ? "var(--hook-color-primary-soft, #eef)" : "white",
+          cursor: "pointer"
+        },
+        children: m === "card" ? "\u{1F4B3} Cart\xE3o" : "\u{1F4F1} Pix Autom\xE1tico"
+      },
+      m
+    )) }),
+    method === "card" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "fieldset",
+      {
+        "data-testid": "paywall-card-form",
+        style: { border: "none", padding: 0, marginBottom: 16 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("legend", { style: { fontSize: 13, opacity: 0.75, marginBottom: 8 }, children: "Dados do cart\xE3o" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: fieldGroup, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: "pw-card-number", style: labelStyle, children: "N\xFAmero do cart\xE3o" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "input",
+              {
+                id: "pw-card-number",
+                "data-testid": "pw-card-number",
+                type: "text",
+                inputMode: "numeric",
+                autoComplete: "cc-number",
+                placeholder: "0000 0000 0000 0000",
+                value: cardNumber,
+                onChange: (e) => setCardNumber(e.target.value),
+                style: inputStyle
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: fieldGroup, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: "pw-card-holder", style: labelStyle, children: "Nome impresso no cart\xE3o" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "input",
+              {
+                id: "pw-card-holder",
+                "data-testid": "pw-card-holder",
+                type: "text",
+                autoComplete: "cc-name",
+                placeholder: "NOME SOBRENOME",
+                value: cardHolderName,
+                onChange: (e) => setCardHolderName(e.target.value),
+                style: inputStyle
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", gap: 8, marginBottom: 10 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { flex: 1, textAlign: "left" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: "pw-card-exp-m", style: labelStyle, children: "M\xEAs" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                "input",
+                {
+                  id: "pw-card-exp-m",
+                  "data-testid": "pw-card-exp-m",
+                  type: "text",
+                  inputMode: "numeric",
+                  autoComplete: "cc-exp-month",
+                  placeholder: "MM",
+                  maxLength: 2,
+                  value: cardExpiryMonth,
+                  onChange: (e) => setCardExpiryMonth(e.target.value.replace(/\D/g, "")),
+                  style: inputStyle
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { flex: 1, textAlign: "left" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: "pw-card-exp-y", style: labelStyle, children: "Ano" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                "input",
+                {
+                  id: "pw-card-exp-y",
+                  "data-testid": "pw-card-exp-y",
+                  type: "text",
+                  inputMode: "numeric",
+                  autoComplete: "cc-exp-year",
+                  placeholder: "AA",
+                  maxLength: 4,
+                  value: cardExpiryYear,
+                  onChange: (e) => setCardExpiryYear(e.target.value.replace(/\D/g, "")),
+                  style: inputStyle
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { flex: 1, textAlign: "left" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: "pw-card-cvv", style: labelStyle, children: "CVV" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                "input",
+                {
+                  id: "pw-card-cvv",
+                  "data-testid": "pw-card-cvv",
+                  type: "text",
+                  inputMode: "numeric",
+                  autoComplete: "cc-csc",
+                  placeholder: "123",
+                  maxLength: 4,
+                  value: cardCcv,
+                  onChange: (e) => setCardCcv(e.target.value.replace(/\D/g, "")),
+                  style: inputStyle
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("legend", { style: { fontSize: 13, opacity: 0.75, marginBottom: 8, marginTop: 8 }, children: "Dados do titular" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: fieldGroup, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: "pw-holder-name", style: labelStyle, children: "Nome completo" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "input",
+              {
+                id: "pw-holder-name",
+                "data-testid": "pw-holder-name",
+                type: "text",
+                autoComplete: "name",
+                placeholder: "Nome Sobrenome",
+                value: holderName,
+                onChange: (e) => setHolderName(e.target.value),
+                style: inputStyle
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: fieldGroup, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: "pw-holder-email", style: labelStyle, children: "E-mail" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "input",
+              {
+                id: "pw-holder-email",
+                "data-testid": "pw-holder-email",
+                type: "email",
+                autoComplete: "email",
+                placeholder: "voce@email.com",
+                value: holderEmail,
+                onChange: (e) => setHolderEmail(e.target.value),
+                style: inputStyle
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", gap: 8, marginBottom: 10 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { flex: 1, textAlign: "left" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: "pw-holder-cep", style: labelStyle, children: "CEP" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                "input",
+                {
+                  id: "pw-holder-cep",
+                  "data-testid": "pw-holder-cep",
+                  type: "text",
+                  inputMode: "numeric",
+                  autoComplete: "postal-code",
+                  placeholder: "00000-000",
+                  value: holderPostalCode,
+                  onChange: (e) => setHolderPostalCode(e.target.value),
+                  style: inputStyle
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { flex: 1, textAlign: "left" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: "pw-holder-addr-n", style: labelStyle, children: "N\xFAmero" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                "input",
+                {
+                  id: "pw-holder-addr-n",
+                  "data-testid": "pw-holder-addr-n",
+                  type: "text",
+                  inputMode: "numeric",
+                  placeholder: "123",
+                  value: holderAddressNumber,
+                  onChange: (e) => setHolderAddressNumber(e.target.value),
+                  style: inputStyle
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: fieldGroup, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: "pw-holder-phone", style: labelStyle, children: "Telefone (opcional)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "input",
+              {
+                id: "pw-holder-phone",
+                "data-testid": "pw-holder-phone",
+                type: "tel",
+                inputMode: "tel",
+                autoComplete: "tel",
+                placeholder: "(11) 99999-9999",
+                value: holderPhone,
+                onChange: (e) => setHolderPhone(e.target.value),
+                style: inputStyle
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: fieldGroup, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: "pw-cpf", style: labelStyle, children: "Seu CPF" }),
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "input",
         {
+          id: "pw-cpf",
           "data-testid": "paywall-cpf",
           type: "text",
           inputMode: "numeric",
           placeholder: "000.000.000-00",
           value: cpf,
           onChange: (e) => setCpf(e.target.value),
-          style: { width: "100%", padding: 10, fontSize: 14, borderRadius: 8, border: "1px solid #ccc" }
+          style: inputStyle
         }
       )
     ] }),
     error && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { role: "alert", style: { color: "#c00", marginBottom: 12 }, children: error.message }),
+    method === "pix-auto" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "div",
+      {
+        "data-testid": "paywall-pix-callout",
+        style: {
+          background: "rgba(0,0,0,0.04)",
+          borderLeft: "3px solid var(--hook-color-primary)",
+          padding: "10px 12px",
+          marginBottom: 12,
+          borderRadius: 4,
+          fontSize: 12,
+          lineHeight: 1.45,
+          textAlign: "left"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("strong", { children: "Como funciona:" }),
+          " no app do seu banco vai aparecer uma cobran\xE7a de",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("strong", { children: "R$ 0,01" }),
+          " \u2014 \xE9 simb\xF3lica, s\xF3 pra ativar o PIX Autom\xE1tico.",
+          trialDays > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+            " ",
+            "Depois, ",
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("strong", { children: [
+              trialDays,
+              " dias gr\xE1tis"
+            ] }),
+            "; a cobran\xE7a de",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("strong", { children: formatBRL(cycleValueCents) }),
+            " ",
+            cycleLabel,
+            " s\xF3 come\xE7a depois."
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+            " ",
+            "A cobran\xE7a de ",
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("strong", { children: formatBRL(cycleValueCents) }),
+            " ",
+            cycleLabel,
+            " vem em seguida."
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "button",
       {
         "data-testid": "paywall-cta",
         type: "button",
-        onClick: () => void checkout({ cpf: cpfDigits }),
+        onClick: submit,
         disabled: !canCheckout,
         style: {
           width: "100%",
@@ -2245,13 +2705,125 @@ function DefaultPaywall() {
           borderRadius: 8,
           opacity: canCheckout ? 1 : 0.5,
           fontSize: 16,
-          fontWeight: 600
+          fontWeight: 600,
+          cursor: canCheckout ? "pointer" : "not-allowed"
         },
-        children: opening ? "Abrindo..." : p.cta
+        children: ctaLabel
       }
     ),
-    p.priceHint && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { style: { opacity: 0.6, marginTop: 12 }, children: p.priceHint }),
-    p.footerNote && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { style: { opacity: 0.5, marginTop: 16, fontSize: 12 }, children: p.footerNote })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { style: { opacity: 0.55, marginTop: 16, fontSize: 12 }, children: footer }),
+    p.priceHint && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { style: { opacity: 0.6, marginTop: 8, fontSize: 12 }, children: p.priceHint }),
+    p.footerNote && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { style: { opacity: 0.5, marginTop: 8, fontSize: 12 }, children: p.footerNote }),
+    pixPending && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "div",
+      {
+        "data-testid": "paywall-pix-modal",
+        role: "dialog",
+        "aria-label": "Pagamento Pix pendente",
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.6)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 24,
+          zIndex: 1e3
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: {
+          background: "#fff",
+          borderRadius: 12,
+          padding: 24,
+          maxWidth: 360,
+          width: "100%",
+          textAlign: "center"
+        }, children: [
+          pixPending.paid ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { style: { marginTop: 0 }, children: "Pagamento confirmado!" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { style: { opacity: 0.7 }, children: "Liberando acesso\u2026" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { style: { marginTop: 0, fontSize: 18 }, children: "Pague com Pix Autom\xE1tico" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { style: { fontSize: 13, opacity: 0.75 }, children: "Escaneie o QR Code no app do seu banco pra autorizar o d\xE9bito recorrente." }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+              "p",
+              {
+                "data-testid": "pix-modal-explain",
+                style: { fontSize: 12, opacity: 0.65, marginTop: 8, lineHeight: 1.4 },
+                children: [
+                  "Seu banco vai mostrar uma cobran\xE7a de ",
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("strong", { children: "R$ 0,01" }),
+                  " \u2014 \xE9 simb\xF3lica, s\xF3 pra ativar o PIX Autom\xE1tico.",
+                  trialDays > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+                    " ",
+                    "A cobran\xE7a de ",
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("strong", { children: formatBRL(cycleValueCents) }),
+                    " ",
+                    cycleLabel,
+                    " come\xE7a depois dos ",
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("strong", { children: [
+                      trialDays,
+                      " dias gr\xE1tis"
+                    ] }),
+                    ", automaticamente."
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+                    " ",
+                    "A cobran\xE7a de ",
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("strong", { children: formatBRL(cycleValueCents) }),
+                    " ",
+                    cycleLabel,
+                    " vem logo em seguida."
+                  ] })
+                ]
+              }
+            ),
+            pixPending.qrCodeBase64 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "img",
+              {
+                "data-testid": "pix-qr-image",
+                alt: "QR Code Pix",
+                src: `data:image/png;base64,${pixPending.qrCodeBase64}`,
+                style: { width: "100%", maxWidth: 240, margin: "12px auto", display: "block" }
+              }
+            ),
+            pixPending.qrCodePayload && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "textarea",
+              {
+                "data-testid": "pix-qr-payload",
+                readOnly: true,
+                value: pixPending.qrCodePayload,
+                style: {
+                  width: "100%",
+                  minHeight: 72,
+                  padding: 8,
+                  fontSize: 11,
+                  fontFamily: "monospace",
+                  borderRadius: 6,
+                  border: "1px solid #ccc",
+                  resize: "none"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { style: { fontSize: 11, opacity: 0.55, marginTop: 12 }, children: "Aguardando confirma\xE7\xE3o do banco\u2026 Pode levar alguns segundos." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: dismissPix,
+              style: {
+                marginTop: 16,
+                padding: "8px 16px",
+                border: "1px solid #ccc",
+                borderRadius: 6,
+                background: "white",
+                cursor: "pointer"
+              },
+              children: "Fechar"
+            }
+          )
+        ] })
+      }
+    )
   ] });
 }
 
@@ -2259,7 +2831,7 @@ function DefaultPaywall() {
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var BACKOFF_MS = [2e3, 5e3, 1e4, 2e4, 4e4];
 function PaymentReturnHandler({ children }) {
-  const { subscription } = (0, import_sdk9.useHook)();
+  const { subscription } = (0, import_sdk10.useHook)();
   const subRef = (0, import_react15.useRef)(subscription);
   subRef.current = subscription;
   const runIdRef = (0, import_react15.useRef)(0);
@@ -2368,7 +2940,7 @@ function AppRoot({
 
 // src/hooks/usePush.ts
 var import_react16 = require("react");
-var import_sdk10 = require("@hook-sdk/sdk");
+var import_sdk11 = require("@hook-sdk/sdk");
 function detectIosNeedsInstall() {
   if (typeof navigator === "undefined" || typeof window === "undefined") return false;
   const ua = navigator.userAgent || "";
@@ -2394,7 +2966,7 @@ function deriveState(push) {
   return { kind: "prompt" };
 }
 function usePush() {
-  const { push } = (0, import_sdk10.useHook)();
+  const { push } = (0, import_sdk11.useHook)();
   const [state, setState] = (0, import_react16.useState)(() => deriveState(push));
   (0, import_react16.useEffect)(() => {
     setState(deriveState(push));
@@ -2476,41 +3048,6 @@ function EmptyState({ title, description, action }) {
   ] });
 }
 
-// src/hooks/usePlan.ts
-var import_sdk11 = require("@hook-sdk/sdk");
-function usePlan() {
-  const { plan } = (0, import_sdk11.useHook)();
-  return plan;
-}
-
-// src/utils/price.ts
-function formatBRL(cents) {
-  if (cents === null || cents === void 0) return "";
-  const reais = cents / 100;
-  return new Intl.NumberFormat("pt-BR", {
-    style: "currency",
-    currency: "BRL"
-  }).format(reais);
-}
-function monthlyFromYearly(yearlyCents) {
-  if (yearlyCents === null || yearlyCents === void 0) return 0;
-  return Math.round(yearlyCents / 12);
-}
-function dailyFromYearly(yearlyCents) {
-  if (yearlyCents === null || yearlyCents === void 0) return 0;
-  return Math.round(yearlyCents / 365);
-}
-function computeAnchorCents(baseCents, multiplier) {
-  if (multiplier === null || multiplier === void 0) return null;
-  if (!Number.isFinite(multiplier)) return null;
-  if (multiplier <= 1) return null;
-  return Math.round(baseCents * multiplier);
-}
-function discountPercent(anchorCents, realCents) {
-  if (anchorCents <= realCents) return 0;
-  return Math.floor((anchorCents - realCents) / anchorCents * 100);
-}
-
 // src/hooks/useAuthPrimitives.ts
 var import_react17 = require("react");
 var import_sdk12 = require("@hook-sdk/sdk");