@hook-sdk/template 0.28.8 → 0.28.10

package/dist/index.cjs

@@ -169,6 +169,7 @@ var PaywallNonFreeSchema = import_zod.z.object({
   }).optional(),
   checkoutMethods: import_zod.z.array(import_zod.z.enum(["card", "pix-auto", "pix-once"])).min(1),
   requiresCpf: import_zod.z.boolean(),
+  collectCep: import_zod.z.boolean().optional(),
   cancelWindowDays: import_zod.z.number().int().nonnegative().optional(),
   errorMessages: import_zod.z.enum(["default", "custom"])
 });
@@ -2115,33 +2116,47 @@ function SessionExpiredBanner() {
     localStorage.setItem(DISMISS_KEY, String(Date.now() + DISMISS_TTL_MS));
     setShow(false);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { role: "alert", className: "fixed top-0 inset-x-0 bg-red-600 text-white px-4 py-2 flex items-center justify-between gap-3 text-sm shadow", style: { zIndex: 10001 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: "Sua sess\xE3o expirou." }),
-      " Fa\xE7a login novamente para continuar."
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: dismiss,
-          className: "px-3 py-1 bg-white text-red-700 rounded text-xs font-medium hover:bg-red-50",
-          children: "Fazer login"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: dismiss,
-          "aria-label": "Fechar",
-          className: "px-2 py-1 text-white/80 hover:text-white text-xs",
-          children: "Fechar"
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      role: "alert",
+      className: "fixed top-0 inset-x-0 px-4 py-3 flex items-center justify-between gap-3 text-sm font-medium shadow-lg",
+      style: {
+        zIndex: 10001,
+        backgroundColor: "#991b1b",
+        color: "#ffffff"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { className: "font-bold", children: "Sua sess\xE3o expirou." }),
+          " Fa\xE7a login novamente para continuar."
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: dismiss,
+              className: "px-3 py-1.5 rounded text-xs font-semibold",
+              style: { backgroundColor: "#ffffff", color: "#991b1b" },
+              children: "Fazer login"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: dismiss,
+              "aria-label": "Fechar",
+              className: "px-2 py-1 text-xs",
+              style: { color: "#ffffff" },
+              children: "Fechar"
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 // src/internal/EmailVerifyBanner.tsx
@@ -2958,15 +2973,17 @@ function mapSdkError(err) {
 var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var PHONE_RE = /^[0-9()+\-\s]{8,20}$/;
 var CHECK_DEBOUNCE_MS = 400;
-function useCheckoutForm(args) {
+function useCheckoutForm(hookArgs) {
   const { auth } = (0, import_sdk13.useHook)();
   const [name, setName] = (0, import_react18.useState)("");
   const [email, setEmail] = (0, import_react18.useState)("");
   const [emailConfirm, setEmailConfirm] = (0, import_react18.useState)("");
   const [phone, setPhone] = (0, import_react18.useState)("");
   const [cpf, setCpf] = (0, import_react18.useState)("");
-  const [method, setMethod] = (0, import_react18.useState)(args.defaultMethod);
-  const [cycle, setCycle] = (0, import_react18.useState)(args.defaultCycle);
+  const [postalCode, setPostalCode] = (0, import_react18.useState)("");
+  const [addressNumber, setAddressNumber] = (0, import_react18.useState)("");
+  const [method, setMethod] = (0, import_react18.useState)(hookArgs.defaultMethod);
+  const [cycle, setCycle] = (0, import_react18.useState)(hookArgs.defaultCycle);
   const [card, setCardState] = (0, import_react18.useState)({
     number: "",
     expiryMonth: "",
@@ -2982,6 +2999,8 @@ function useCheckoutForm(args) {
   const [touchedEmailConfirm, setTouchedEmailConfirm] = (0, import_react18.useState)(false);
   const [touchedPhone, setTouchedPhone] = (0, import_react18.useState)(false);
   const [touchedCpf, setTouchedCpf] = (0, import_react18.useState)(false);
+  const [touchedPostalCode, setTouchedPostalCode] = (0, import_react18.useState)(false);
+  const [touchedAddressNumber, setTouchedAddressNumber] = (0, import_react18.useState)(false);
   const [formSubmitAttempted, setFormSubmitAttempted] = (0, import_react18.useState)(false);
   const [submitting, setSubmitting] = (0, import_react18.useState)(false);
   const [error, setError] = (0, import_react18.useState)(null);
@@ -3035,13 +3054,29 @@ function useCheckoutForm(args) {
     const ok = mod11(digits, 9) === digits[9] && mod11(digits, 10) === digits[10];
     return ok ? null : "CPF inv\xE1lido.";
   }, [cpf]);
+  const validatePostalCode = (0, import_react18.useMemo)(() => {
+    if (!hookArgs.collectCep) return null;
+    if (postalCode.length === 0) return null;
+    const digits = postalCode.replace(/\D/g, "");
+    if (digits.length !== 8) return "CEP deve ter 8 d\xEDgitos.";
+    return null;
+  }, [hookArgs.collectCep, postalCode]);
+  const validateAddressNumber = (0, import_react18.useMemo)(() => {
+    if (!hookArgs.collectCep) return null;
+    if (addressNumber.length === 0) return null;
+    if (addressNumber.trim().length === 0) return "N\xFAmero obrigat\xF3rio.";
+    return null;
+  }, [hookArgs.collectCep, addressNumber]);
   const nameError = touchedName || formSubmitAttempted ? validateName : null;
   const emailError = touchedEmail || formSubmitAttempted ? validateEmail : null;
   const emailConfirmError = touchedEmailConfirm || formSubmitAttempted ? validateEmailConfirm : null;
   const phoneError = touchedPhone || formSubmitAttempted ? validatePhone : null;
   const cpfError = touchedCpf || formSubmitAttempted ? validateCpf : null;
+  const postalCodeError = touchedPostalCode || formSubmitAttempted ? validatePostalCode : null;
+  const addressNumberError = touchedAddressNumber || formSubmitAttempted ? validateAddressNumber : null;
   const phoneOk = method === "pix-auto" ? phone === "" || PHONE_RE.test(phone) : PHONE_RE.test(phone);
-  const canSubmit = name.trim().length >= 2 && EMAIL_RE.test(email) && (emailConfirm === "" || emailConfirm === email) && phoneOk && validateCpf === null && cpf.replace(/\D/g, "").length === 11 && emailStatus !== "exists" && !submitting && (method !== "card" || card.number.length >= 12 && card.ccv.length >= 3 && card.expiryMonth.length >= 1 && card.expiryYear.length >= 2 && card.holderName.length >= 1);
+  const cepGateOk = !hookArgs.collectCep || method !== "card" || postalCode.replace(/\D/g, "").length === 8 && addressNumber.trim().length > 0;
+  const canSubmit = name.trim().length >= 2 && EMAIL_RE.test(email) && (emailConfirm === "" || emailConfirm === email) && phoneOk && validateCpf === null && cpf.replace(/\D/g, "").length === 11 && emailStatus !== "exists" && !submitting && cepGateOk && (method !== "card" || card.number.length >= 12 && card.ccv.length >= 3 && card.expiryMonth.length >= 1 && card.expiryYear.length >= 2 && card.holderName.length >= 1);
   const submit = (0, import_react18.useCallback)(async () => {
     setFormSubmitAttempted(true);
     setError(null);
@@ -3050,9 +3085,9 @@ function useCheckoutForm(args) {
     if (!canSubmit) return null;
     setSubmitting(true);
     try {
-      let args2;
+      let args;
       if (method === "card") {
-        args2 = {
+        args = {
           method: "card",
           name: name.trim(),
           email,
@@ -3071,21 +3106,17 @@ function useCheckoutForm(args) {
             name: card.holderName || name.trim(),
             email,
             cpfCnpj: cpf.replace(/\D/g, ""),
-            // Plan-V 0.28.4 — Asaas's `creditCardHolderInfo.postalCode`
-            // rejects all-zeros with `tokenize_failed:invalid_holderInfo`
-            // ("O CEP informado é inválido."). The default CheckoutPage
-            // doesn't collect CEP from the user (reference design skipped
-            // it), so ship a known-valid placeholder. Apps that need real
-            // customer addresses must override CheckoutPageDefault and
-            // collect CEP — see personalburn's PaywallStepPagamento for
-            // the pattern.
-            postalCode: "01001000",
-            addressNumber: "100",
+            // collectCep=true → CEP/número reais do form. Senão placeholder
+            // válido (Asaas rejeita all-zeros, então shipping 01001000/100
+            // que são válidos mas anonimizam). Apps com NF-e ou antifraude
+            // refinada devem setar paywall.collectCep no app.config.json.
+            postalCode: hookArgs.collectCep ? postalCode.replace(/\D/g, "") : "01001000",
+            addressNumber: hookArgs.collectCep ? addressNumber.trim() : "100",
             phone
           }
         };
       } else {
-        args2 = {
+        args = {
           method: "pix-auto",
           name: name.trim(),
           email,
@@ -3095,7 +3126,7 @@ function useCheckoutForm(args) {
           cycle
         };
       }
-      const result = await auth.subscribeAnonymous(args2);
+      const result = await auth.subscribeAnonymous(args);
       return result;
     } catch (err) {
       if (err instanceof import_sdk13.EmailTakenError) {
@@ -3121,6 +3152,10 @@ function useCheckoutForm(args) {
     setPhone,
     cpf,
     setCpf,
+    postalCode,
+    setPostalCode,
+    addressNumber,
+    setAddressNumber,
     method,
     setMethod,
     cycle,
@@ -3132,11 +3167,15 @@ function useCheckoutForm(args) {
     emailConfirmError,
     phoneError,
     cpfError,
+    postalCodeError,
+    addressNumberError,
     markNameTouched: () => setTouchedName(true),
     markEmailTouched: () => setTouchedEmail(true),
     markEmailConfirmTouched: () => setTouchedEmailConfirm(true),
     markPhoneTouched: () => setTouchedPhone(true),
     markCpfTouched: () => setTouchedCpf(true),
+    markPostalCodeTouched: () => setTouchedPostalCode(true),
+    markAddressNumberTouched: () => setTouchedAddressNumber(true),
     emailStatus,
     submit,
     submitting,
@@ -3963,10 +4002,12 @@ function detectCardBrand(num) {
 function CheckoutPageDefault() {
   const navigate = (0, import_react_router_dom3.useNavigate)();
   const plan = usePlan();
+  const config = useAppConfig();
   const intent = (0, import_react23.useMemo)(readIntent, []);
   const defaultMethod = intent.method === "pix-auto" ? "pix-auto" : "card";
   const defaultCycle = intent.cycle === "MONTHLY" ? "MONTHLY" : "YEARLY";
-  const form = useCheckoutForm({ defaultMethod, defaultCycle });
+  const collectCep = config.paywall.mode !== "free" && config.paywall.collectCep === true;
+  const form = useCheckoutForm({ defaultMethod, defaultCycle, collectCep });
   const [expiryMmAa, setExpiryMmAa] = (0, import_react23.useState)("");
   (0, import_react23.useEffect)(() => {
     const { month, year } = parseExpiryMmAa(expiryMmAa);
@@ -4150,6 +4191,45 @@ function CheckoutPageDefault() {
               }
             ),
             !form.phoneError && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldHint, { children: "Usado pra confirmar pagamento e tratar disputas." })
+          ] }) : null,
+          collectCep && form.method === "card" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "CEP" }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                FieldInput,
+                {
+                  type: "text",
+                  inputMode: "numeric",
+                  autoComplete: "postal-code",
+                  placeholder: "00000-000",
+                  value: form.postalCode,
+                  onChange: (v) => {
+                    const digits = v.replace(/\D/g, "").slice(0, 8);
+                    const formatted = digits.length > 5 ? `${digits.slice(0, 5)}-${digits.slice(5)}` : digits;
+                    form.setPostalCode(formatted);
+                  },
+                  onBlur: form.markPostalCodeTouched,
+                  error: form.postalCodeError,
+                  valid: !!form.postalCode && !form.postalCodeError
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "N\xFAmero" }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                FieldInput,
+                {
+                  type: "text",
+                  inputMode: "numeric",
+                  placeholder: "100",
+                  value: form.addressNumber,
+                  onChange: form.setAddressNumber,
+                  onBlur: form.markAddressNumberTouched,
+                  error: form.addressNumberError,
+                  valid: !!form.addressNumber && !form.addressNumberError
+                }
+              )
+            ] })
           ] }) : null
         ] })
       ] }),