@hook-sdk/template 0.8.0 → 0.9.0

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/AppRoot.tsx
 import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef3, useState as useState12 } from "react";
-import { useHook as useHook8 } from "@hook-sdk/sdk";
+import { useHook as useHook9 } from "@hook-sdk/sdk";
 
 // src/internal/TemplateConfigContext.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -92,53 +92,69 @@ function AuthGate({ Login, Signup, Forgot, Reset, children }) {
 }
 
 // src/hooks/usePaywallState.ts
-import { useCallback, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
 import { useHook as useHook2 } from "@hook-sdk/sdk";
 function usePaywallState() {
-  const { subscription } = useHook2();
+  const { subscription, plan } = useHook2();
   const [opening, setOpening] = useState2(false);
   const [error, setError] = useState2(null);
   const [pixPending, setPixPending] = useState2(null);
   const status = subscription.status();
   const daysLeftInTrial = subscription.daysLeftInTrial();
   const initialLoadComplete = subscription.initialLoadComplete;
+  const availableMethods = useMemo2(
+    () => ["card", "pix-auto"],
+    []
+  );
+  const priceCents = plan.data?.priceCents ?? 0;
+  const yearlyPriceCents = plan.data?.yearlyPriceCents ?? null;
+  const monthlyEquivalent = useCallback(
+    (cycle) => {
+      if (cycle === "YEARLY" && yearlyPriceCents) {
+        return Math.round(yearlyPriceCents / 12);
+      }
+      return priceCents;
+    },
+    [priceCents, yearlyPriceCents]
+  );
   const checkout = 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);
@@ -191,7 +207,9 @@ function usePaywallState() {
     opening,
     error,
     pixPending,
-    dismissPix
+    dismissPix,
+    availableMethods,
+    monthlyEquivalent
   };
 }
 
@@ -1487,9 +1505,10 @@ function InstallGate({ children }) {
   if (!enabled) return /* @__PURE__ */ jsx16(Fragment4, { children });
   if (installState.isInstalled) return /* @__PURE__ */ jsx16(Fragment4, { children });
   if (installState.variant === "desktop") {
+    const showBanner = !installState.isDismissedSession && !installState.isDismissedPermanent;
     return /* @__PURE__ */ jsxs10(Fragment4, { children: [
       children,
-      /* @__PURE__ */ jsx16(DesktopVariant, { state: installState, actions: installState })
+      showBanner && /* @__PURE__ */ jsx16(DesktopVariant, { state: installState, actions: installState })
     ] });
   }
   if (!shouldBlock) return /* @__PURE__ */ jsx16(Fragment4, { children });
@@ -1533,7 +1552,7 @@ var ErrorBoundary = class extends Component {
 };
 
 // src/hooks/useLoginForm.ts
-import { useCallback as useCallback3, useMemo as useMemo2, useState as useState6 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo3, useState as useState6 } from "react";
 import { useHook as useHook4 } from "@hook-sdk/sdk";
 
 // src/errors.ts
@@ -1574,12 +1593,12 @@ function useLoginForm() {
   const [password, setPassword] = useState6("");
   const [submitting, setSubmitting] = useState6(false);
   const [error, setError] = useState6(null);
-  const emailError = useMemo2(() => {
+  const emailError = useMemo3(() => {
     if (email.length === 0) return null;
     if (!EMAIL_RE.test(email)) return "Formato de e-mail inv\xE1lido.";
     return null;
   }, [email]);
-  const passwordError = useMemo2(() => {
+  const passwordError = useMemo3(() => {
     if (password.length === 0) return null;
     if (password.length < MIN_PASSWORD) return `M\xEDnimo de ${MIN_PASSWORD} caracteres.`;
     return null;
@@ -1839,7 +1858,7 @@ function DefaultLoginScreen({ onNavigate }) {
 }
 
 // src/hooks/useSignupForm.ts
-import { useCallback as useCallback4, useMemo as useMemo3, useState as useState8 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo4, useState as useState8 } from "react";
 import { useHook as useHook5 } from "@hook-sdk/sdk";
 var EMAIL_RE2 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var MIN_PASSWORD2 = 8;
@@ -1850,17 +1869,17 @@ function useSignupForm() {
   const [password, setPassword] = useState8("");
   const [submitting, setSubmitting] = useState8(false);
   const [error, setError] = useState8(null);
-  const nameError = useMemo3(() => {
+  const nameError = useMemo4(() => {
     if (name.length === 0) return null;
     if (name.trim().length < 2) return "Nome muito curto.";
     return null;
   }, [name]);
-  const emailError = useMemo3(() => {
+  const emailError = useMemo4(() => {
     if (email.length === 0) return null;
     if (!EMAIL_RE2.test(email)) return "Formato de e-mail inv\xE1lido.";
     return null;
   }, [email]);
-  const passwordError = useMemo3(() => {
+  const passwordError = useMemo4(() => {
     if (password.length === 0) return null;
     if (password.length < MIN_PASSWORD2) return `M\xEDnimo de ${MIN_PASSWORD2} caracteres.`;
     return null;
@@ -1954,7 +1973,7 @@ function DefaultSignupScreen({ onNavigate }) {
 }
 
 // src/hooks/useForgotForm.ts
-import { useCallback as useCallback5, useMemo as useMemo4, useState as useState9 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo5, useState as useState9 } from "react";
 import { useHook as useHook6 } from "@hook-sdk/sdk";
 var EMAIL_RE3 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 function useForgotForm() {
@@ -1963,7 +1982,7 @@ function useForgotForm() {
   const [submitting, setSubmitting] = useState9(false);
   const [sent, setSent] = useState9(false);
   const [error, setError] = useState9(null);
-  const emailError = useMemo4(() => {
+  const emailError = useMemo5(() => {
     if (email.length === 0) return null;
     if (!EMAIL_RE3.test(email)) return "Formato de e-mail inv\xE1lido.";
     return null;
@@ -2028,7 +2047,7 @@ function DefaultForgotScreen({ onNavigate }) {
 }
 
 // src/hooks/useResetForm.ts
-import { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo5, useState as useState10 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo6, useState as useState10 } from "react";
 import { useHook as useHook7 } from "@hook-sdk/sdk";
 var MIN_PASSWORD3 = 12;
 function useResetForm() {
@@ -2045,12 +2064,12 @@ function useResetForm() {
     const t = params.get("token");
     setToken(t && t.length > 0 ? t : null);
   }, []);
-  const passwordError = useMemo5(() => {
+  const passwordError = useMemo6(() => {
     if (password.length === 0) return null;
     if (password.length < MIN_PASSWORD3) return `M\xEDnimo de ${MIN_PASSWORD3} caracteres.`;
     return null;
   }, [password]);
-  const confirmError = useMemo5(() => {
+  const confirmError = useMemo6(() => {
     if (confirm.length === 0) return null;
     if (confirm !== password) return "Senhas n\xE3o coincidem.";
     return null;
@@ -2134,34 +2153,430 @@ function DefaultResetScreen({ onNavigate }) {
 }
 
 // src/defaults/DefaultPaywall.tsx
-import { useState as useState11 } from "react";
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useMemo as useMemo7, useState as useState11 } from "react";
+
+// src/hooks/usePlan.ts
+import { useHook as useHook8 } from "@hook-sdk/sdk";
+function usePlan() {
+  const { plan } = useHook8();
+  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
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "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] = useState11("MONTHLY");
+  const [method, setMethod] = useState11("card");
   const [cpf, setCpf] = useState11("");
+  const [cardNumber, setCardNumber] = useState11("");
+  const [cardHolderName, setCardHolderName] = useState11("");
+  const [cardExpiryMonth, setCardExpiryMonth] = useState11("");
+  const [cardExpiryYear, setCardExpiryYear] = useState11("");
+  const [cardCcv, setCardCcv] = useState11("");
+  const [holderName, setHolderName] = useState11("");
+  const [holderEmail, setHolderEmail] = useState11("");
+  const [holderPostalCode, setHolderPostalCode] = useState11("");
+  const [holderAddressNumber, setHolderAddressNumber] = useState11("");
+  const [holderPhone, setHolderPhone] = useState11("");
+  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 pct = useMemo7(() => {
+    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__ */ jsxs18("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 = useMemo7(() => {
+    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 = useMemo7(() => {
+    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__ */ jsxs18("main", { style: { padding: 24, maxWidth: 480, margin: "0 auto", textAlign: "center" }, children: [
     /* @__PURE__ */ jsx24("h1", { style: { marginBottom: 8 }, children: p.title }),
     p.subtitle && /* @__PURE__ */ jsx24("p", { style: { opacity: 0.7, marginBottom: 24 }, children: p.subtitle }),
-    /* @__PURE__ */ jsx24("ul", { style: { listStyle: "none", padding: 0, textAlign: "left", marginBottom: 24 }, children: p.benefits.map((b) => /* @__PURE__ */ jsxs18("li", { style: { padding: "8px 0", display: "flex", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        role: "group",
+        "aria-label": "Per\xEDodo de cobran\xE7a",
+        style: { display: "flex", gap: 8, marginBottom: 16 },
+        children: [
+          /* @__PURE__ */ jsx24(
+            "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__ */ jsxs18(
+            "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__ */ jsxs18("div", { style: { marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsxs18("div", { style: { fontSize: 32, fontWeight: 700, lineHeight: 1 }, children: [
+        formatBRL(activeCents),
+        /* @__PURE__ */ jsx24("span", { style: { fontSize: 16, fontWeight: 400, opacity: 0.7 }, children: "/m\xEAs" })
+      ] }),
+      anchorCents && /* @__PURE__ */ jsxs18("div", { style: { fontSize: 14, opacity: 0.6, marginTop: 4 }, children: [
+        /* @__PURE__ */ jsx24("span", { style: { textDecoration: "line-through" }, children: formatBRL(anchorCents) }),
+        anchorDiscount > 0 && /* @__PURE__ */ jsxs18("span", { style: { marginLeft: 6 }, children: [
+          "\u2212",
+          anchorDiscount,
+          "%"
+        ] })
+      ] }),
+      cycle === "YEARLY" && yearlyCents && /* @__PURE__ */ jsxs18("div", { style: { fontSize: 12, opacity: 0.6, marginTop: 4 }, children: [
+        "Cobrado ",
+        formatBRL(yearlyCents),
+        " por ano"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx24("ul", { style: { listStyle: "none", padding: 0, textAlign: "left", margin: "24px 0" }, children: p.benefits.map((b) => /* @__PURE__ */ jsxs18("li", { style: { padding: "8px 0", display: "flex", alignItems: "center" }, children: [
       /* @__PURE__ */ jsx24("span", { "aria-hidden": true, style: { marginRight: 8 }, children: "\u2713" }),
       /* @__PURE__ */ jsx24("span", { children: b })
     ] }, b)) }),
-    /* @__PURE__ */ jsxs18("div", { style: { textAlign: "left", marginBottom: 16 }, children: [
-      /* @__PURE__ */ jsx24("label", { style: { display: "block", fontSize: 14, opacity: 0.7, marginBottom: 4 }, children: "Seu CPF (pra emiss\xE3o de recibo)" }),
+    /* @__PURE__ */ jsx24("div", { role: "tablist", "aria-label": "M\xE9todo de pagamento", style: { display: "flex", gap: 8, marginBottom: 16 }, children: availableMethods.map((m) => /* @__PURE__ */ jsx24(
+      "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__ */ jsxs18(
+      "fieldset",
+      {
+        "data-testid": "paywall-card-form",
+        style: { border: "none", padding: 0, marginBottom: 16 },
+        children: [
+          /* @__PURE__ */ jsx24("legend", { style: { fontSize: 13, opacity: 0.75, marginBottom: 8 }, children: "Dados do cart\xE3o" }),
+          /* @__PURE__ */ jsxs18("div", { style: fieldGroup, children: [
+            /* @__PURE__ */ jsx24("label", { htmlFor: "pw-card-number", style: labelStyle, children: "N\xFAmero do cart\xE3o" }),
+            /* @__PURE__ */ jsx24(
+              "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__ */ jsxs18("div", { style: fieldGroup, children: [
+            /* @__PURE__ */ jsx24("label", { htmlFor: "pw-card-holder", style: labelStyle, children: "Nome impresso no cart\xE3o" }),
+            /* @__PURE__ */ jsx24(
+              "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__ */ jsxs18("div", { style: { display: "flex", gap: 8, marginBottom: 10 }, children: [
+            /* @__PURE__ */ jsxs18("div", { style: { flex: 1, textAlign: "left" }, children: [
+              /* @__PURE__ */ jsx24("label", { htmlFor: "pw-card-exp-m", style: labelStyle, children: "M\xEAs" }),
+              /* @__PURE__ */ jsx24(
+                "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__ */ jsxs18("div", { style: { flex: 1, textAlign: "left" }, children: [
+              /* @__PURE__ */ jsx24("label", { htmlFor: "pw-card-exp-y", style: labelStyle, children: "Ano" }),
+              /* @__PURE__ */ jsx24(
+                "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__ */ jsxs18("div", { style: { flex: 1, textAlign: "left" }, children: [
+              /* @__PURE__ */ jsx24("label", { htmlFor: "pw-card-cvv", style: labelStyle, children: "CVV" }),
+              /* @__PURE__ */ jsx24(
+                "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__ */ jsx24("legend", { style: { fontSize: 13, opacity: 0.75, marginBottom: 8, marginTop: 8 }, children: "Dados do titular" }),
+          /* @__PURE__ */ jsxs18("div", { style: fieldGroup, children: [
+            /* @__PURE__ */ jsx24("label", { htmlFor: "pw-holder-name", style: labelStyle, children: "Nome completo" }),
+            /* @__PURE__ */ jsx24(
+              "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__ */ jsxs18("div", { style: fieldGroup, children: [
+            /* @__PURE__ */ jsx24("label", { htmlFor: "pw-holder-email", style: labelStyle, children: "E-mail" }),
+            /* @__PURE__ */ jsx24(
+              "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__ */ jsxs18("div", { style: { display: "flex", gap: 8, marginBottom: 10 }, children: [
+            /* @__PURE__ */ jsxs18("div", { style: { flex: 1, textAlign: "left" }, children: [
+              /* @__PURE__ */ jsx24("label", { htmlFor: "pw-holder-cep", style: labelStyle, children: "CEP" }),
+              /* @__PURE__ */ jsx24(
+                "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__ */ jsxs18("div", { style: { flex: 1, textAlign: "left" }, children: [
+              /* @__PURE__ */ jsx24("label", { htmlFor: "pw-holder-addr-n", style: labelStyle, children: "N\xFAmero" }),
+              /* @__PURE__ */ jsx24(
+                "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__ */ jsxs18("div", { style: fieldGroup, children: [
+            /* @__PURE__ */ jsx24("label", { htmlFor: "pw-holder-phone", style: labelStyle, children: "Telefone (opcional)" }),
+            /* @__PURE__ */ jsx24(
+              "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__ */ jsxs18("div", { style: fieldGroup, children: [
+      /* @__PURE__ */ jsx24("label", { htmlFor: "pw-cpf", style: labelStyle, children: "Seu CPF" }),
       /* @__PURE__ */ jsx24(
         "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
         }
       )
     ] }),
@@ -2171,7 +2586,7 @@ function DefaultPaywall() {
       {
         "data-testid": "paywall-cta",
         type: "button",
-        onClick: () => void checkout({ cpf: cpfDigits }),
+        onClick: submit,
         disabled: !canCheckout,
         style: {
           width: "100%",
@@ -2182,21 +2597,101 @@ 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__ */ jsx24("p", { style: { opacity: 0.6, marginTop: 12 }, children: p.priceHint }),
-    p.footerNote && /* @__PURE__ */ jsx24("p", { style: { opacity: 0.5, marginTop: 16, fontSize: 12 }, children: p.footerNote })
+    /* @__PURE__ */ jsx24("p", { style: { opacity: 0.55, marginTop: 16, fontSize: 12 }, children: footer }),
+    p.priceHint && /* @__PURE__ */ jsx24("p", { style: { opacity: 0.6, marginTop: 8, fontSize: 12 }, children: p.priceHint }),
+    p.footerNote && /* @__PURE__ */ jsx24("p", { style: { opacity: 0.5, marginTop: 8, fontSize: 12 }, children: p.footerNote }),
+    pixPending && /* @__PURE__ */ jsx24(
+      "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__ */ jsxs18("div", { style: {
+          background: "#fff",
+          borderRadius: 12,
+          padding: 24,
+          maxWidth: 360,
+          width: "100%",
+          textAlign: "center"
+        }, children: [
+          pixPending.paid ? /* @__PURE__ */ jsxs18(Fragment6, { children: [
+            /* @__PURE__ */ jsx24("h2", { style: { marginTop: 0 }, children: "Pagamento confirmado!" }),
+            /* @__PURE__ */ jsx24("p", { style: { opacity: 0.7 }, children: "Liberando acesso\u2026" })
+          ] }) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
+            /* @__PURE__ */ jsx24("h2", { style: { marginTop: 0, fontSize: 18 }, children: "Pague com Pix Autom\xE1tico" }),
+            /* @__PURE__ */ jsx24("p", { style: { fontSize: 13, opacity: 0.75 }, children: "Escaneie o QR Code no app do seu banco pra autorizar o d\xE9bito recorrente." }),
+            pixPending.qrCodeBase64 && /* @__PURE__ */ jsx24(
+              "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__ */ jsx24(
+              "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__ */ jsx24("p", { style: { fontSize: 11, opacity: 0.55, marginTop: 12 }, children: "Aguardando confirma\xE7\xE3o do banco\u2026 Pode levar alguns segundos." })
+          ] }),
+          /* @__PURE__ */ jsx24(
+            "button",
+            {
+              type: "button",
+              onClick: dismissPix,
+              style: {
+                marginTop: 16,
+                padding: "8px 16px",
+                border: "1px solid #ccc",
+                borderRadius: 6,
+                background: "white",
+                cursor: "pointer"
+              },
+              children: "Fechar"
+            }
+          )
+        ] })
+      }
+    )
   ] });
 }
 
 // src/AppRoot.tsx
-import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var BACKOFF_MS = [2e3, 5e3, 1e4, 2e4, 4e4];
 function PaymentReturnHandler({ children }) {
-  const { subscription } = useHook8();
+  const { subscription } = useHook9();
   const subRef = useRef3(subscription);
   subRef.current = subscription;
   const runIdRef = useRef3(0);
@@ -2264,7 +2759,7 @@ function PaymentReturnHandler({ children }) {
       )
     ] }) });
   }
-  return /* @__PURE__ */ jsx25(Fragment6, { children });
+  return /* @__PURE__ */ jsx25(Fragment7, { children });
 }
 var overlayStyle2 = {
   position: "fixed",
@@ -2305,7 +2800,7 @@ function AppRoot({
 
 // src/hooks/usePush.ts
 import { useCallback as useCallback8, useEffect as useEffect9, useState as useState13 } from "react";
-import { useHook as useHook9 } from "@hook-sdk/sdk";
+import { useHook as useHook10 } from "@hook-sdk/sdk";
 function detectIosNeedsInstall() {
   if (typeof navigator === "undefined" || typeof window === "undefined") return false;
   const ua = navigator.userAgent || "";
@@ -2331,7 +2826,7 @@ function deriveState(push) {
   return { kind: "prompt" };
 }
 function usePush() {
-  const { push } = useHook9();
+  const { push } = useHook10();
   const [state, setState] = useState13(() => deriveState(push));
   useEffect9(() => {
     setState(deriveState(push));
@@ -2413,41 +2908,6 @@ function EmptyState({ title, description, action }) {
   ] });
 }
 
-// src/hooks/usePlan.ts
-import { useHook as useHook10 } from "@hook-sdk/sdk";
-function usePlan() {
-  const { plan } = useHook10();
-  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
 import { useEffect as useEffect10 } from "react";
 import { useHook as useHook11 } from "@hook-sdk/sdk";