@hook-sdk/template 0.28.9 → 0.28.11

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"])
 });
@@ -2972,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: "",
@@ -2996,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);
@@ -3049,13 +3054,46 @@ 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 cardExpiryError = (0, import_react18.useMemo)(() => {
+    if (method !== "card") return null;
+    const mm = card.expiryMonth.replace(/\D/g, "");
+    const yy = card.expiryYear.replace(/\D/g, "");
+    if (mm.length < 2 || yy.length < 2) return null;
+    const monthNum = parseInt(mm, 10);
+    if (monthNum < 1 || monthNum > 12) return "M\xEAs inv\xE1lido (use 01-12).";
+    const yearNum = 2e3 + parseInt(yy, 10);
+    const now = /* @__PURE__ */ new Date();
+    const currentMonth = now.getMonth() + 1;
+    const currentYear = now.getFullYear();
+    if (yearNum < currentYear || yearNum === currentYear && monthNum < currentMonth) {
+      return "Cart\xE3o vencido.";
+    }
+    if (yearNum > currentYear + 20) return "Ano muito distante.";
+    return null;
+  }, [method, card.expiryMonth, card.expiryYear]);
   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 && cardExpiryError === null);
   const submit = (0, import_react18.useCallback)(async () => {
     setFormSubmitAttempted(true);
     setError(null);
@@ -3064,9 +3102,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,
@@ -3085,21 +3123,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,
@@ -3109,7 +3143,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) {
@@ -3135,6 +3169,10 @@ function useCheckoutForm(args) {
     setPhone,
     cpf,
     setCpf,
+    postalCode,
+    setPostalCode,
+    addressNumber,
+    setAddressNumber,
     method,
     setMethod,
     cycle,
@@ -3146,11 +3184,16 @@ function useCheckoutForm(args) {
     emailConfirmError,
     phoneError,
     cpfError,
+    postalCodeError,
+    addressNumberError,
+    cardExpiryError,
     markNameTouched: () => setTouchedName(true),
     markEmailTouched: () => setTouchedEmail(true),
     markEmailConfirmTouched: () => setTouchedEmailConfirm(true),
     markPhoneTouched: () => setTouchedPhone(true),
     markCpfTouched: () => setTouchedCpf(true),
+    markPostalCodeTouched: () => setTouchedPostalCode(true),
+    markAddressNumberTouched: () => setTouchedAddressNumber(true),
     emailStatus,
     submit,
     submitting,
@@ -3977,10 +4020,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);
@@ -4109,11 +4154,11 @@ function CheckoutPageDefault() {
                 value: form.email,
                 onChange: form.setEmail,
                 onBlur: form.markEmailTouched,
-                error: form.emailError,
+                error: form.emailError ?? (form.emailStatus === "exists" ? "Este email j\xE1 tem conta. Faz login pra continuar." : null),
                 valid: form.emailStatus === "available"
               }
             ),
-            !form.emailError && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldHint, { children: form.emailStatus === "checking" ? "Verificando\u2026" : form.emailStatus === "available" ? "\u2713 Dispon\xEDvel" : "Voc\xEA vai usar este email para entrar no app" })
+            !form.emailError && form.emailStatus !== "exists" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldHint, { children: form.emailStatus === "checking" ? "Verificando\u2026" : form.emailStatus === "available" ? "\u2713 Dispon\xEDvel" : "Voc\xEA vai usar este email para entrar no app" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "Nome completo" }),
@@ -4164,6 +4209,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
         ] })
       ] }),
@@ -4225,7 +4309,8 @@ function CheckoutPageDefault() {
                   autoComplete: "cc-exp",
                   placeholder: "MM/AA",
                   value: expiryMmAa,
-                  onChange: (v) => setExpiryMmAa(formatExpiryMmAa(v))
+                  onChange: (v) => setExpiryMmAa(formatExpiryMmAa(v)),
+                  error: form.cardExpiryError
                 }
               )
             ] }),