@hook-sdk/template 0.28.8 → 0.28.10

package/dist/index.d.cts

@@ -61,6 +61,13 @@ type PaywallConfig = {
     };
     checkoutMethods: CheckoutMethod[];
     requiresCpf: boolean;
+    /**
+     * When true, CheckoutPageDefault coleta CEP + número do endereço (card-path)
+     * e envia ambos como `cardHolderInfo.postalCode`/`addressNumber`.
+     * Default false → ship placeholder `01001000`/`100` (legacy behavior).
+     * Apps que precisam de NF-e ou antifraude refinada devem ativar.
+     */
+    collectCep?: boolean;
     cancelWindowDays?: number;
     errorMessages: 'default' | 'custom';
 };
@@ -500,6 +507,10 @@ interface UseCheckoutFormResult {
     setPhone: (v: string) => void;
     cpf: string;
     setCpf: (v: string) => void;
+    postalCode: string;
+    setPostalCode: (v: string) => void;
+    addressNumber: string;
+    setAddressNumber: (v: string) => void;
     method: CheckoutFormMethod;
     setMethod: (m: CheckoutFormMethod) => void;
     cycle: CheckoutFormCycle;
@@ -511,11 +522,15 @@ interface UseCheckoutFormResult {
     emailConfirmError: string | null;
     phoneError: string | null;
     cpfError: string | null;
+    postalCodeError: string | null;
+    addressNumberError: string | null;
     markNameTouched: () => void;
     markEmailTouched: () => void;
     markEmailConfirmTouched: () => void;
     markPhoneTouched: () => void;
     markCpfTouched: () => void;
+    markPostalCodeTouched: () => void;
+    markAddressNumberTouched: () => void;
     /**
      * Result of the debounced server-side email-exists check, used to swap
      * the CTA into "Email já cadastrado · Entrar" on the checkout form.
@@ -539,8 +554,15 @@ interface UseCheckoutFormResult {
 interface UseCheckoutFormArgs {
     defaultMethod: CheckoutFormMethod;
     defaultCycle: CheckoutFormCycle;
+    /**
+     * Quando true, o submit envia postalCode + addressNumber reais coletados
+     * via setPostalCode/setAddressNumber. Quando false (default), envia
+     * placeholder `01001000`/`100`. CheckoutPageDefault liga via config
+     * `paywall.collectCep`.
+     */
+    collectCep?: boolean;
 }
-declare function useCheckoutForm(args: UseCheckoutFormArgs): UseCheckoutFormResult;
+declare function useCheckoutForm(hookArgs: UseCheckoutFormArgs): UseCheckoutFormResult;
 
 type SubscriptionStatus = 'active' | 'trialing' | 'expired' | 'canceled' | 'past_due' | 'pending' | 'none';
 type PaymentMethod = CheckoutMethod$1;
@@ -1082,6 +1104,7 @@ declare const AppConfigSchema: z.ZodObject<{
             "pix-once": "pix-once";
         }>>;
         requiresCpf: z.ZodBoolean;
+        collectCep: z.ZodOptional<z.ZodBoolean>;
         cancelWindowDays: z.ZodOptional<z.ZodNumber>;
         errorMessages: z.ZodEnum<{
             default: "default";

package/dist/index.d.ts

@@ -61,6 +61,13 @@ type PaywallConfig = {
     };
     checkoutMethods: CheckoutMethod[];
     requiresCpf: boolean;
+    /**
+     * When true, CheckoutPageDefault coleta CEP + número do endereço (card-path)
+     * e envia ambos como `cardHolderInfo.postalCode`/`addressNumber`.
+     * Default false → ship placeholder `01001000`/`100` (legacy behavior).
+     * Apps que precisam de NF-e ou antifraude refinada devem ativar.
+     */
+    collectCep?: boolean;
     cancelWindowDays?: number;
     errorMessages: 'default' | 'custom';
 };
@@ -500,6 +507,10 @@ interface UseCheckoutFormResult {
     setPhone: (v: string) => void;
     cpf: string;
     setCpf: (v: string) => void;
+    postalCode: string;
+    setPostalCode: (v: string) => void;
+    addressNumber: string;
+    setAddressNumber: (v: string) => void;
     method: CheckoutFormMethod;
     setMethod: (m: CheckoutFormMethod) => void;
     cycle: CheckoutFormCycle;
@@ -511,11 +522,15 @@ interface UseCheckoutFormResult {
     emailConfirmError: string | null;
     phoneError: string | null;
     cpfError: string | null;
+    postalCodeError: string | null;
+    addressNumberError: string | null;
     markNameTouched: () => void;
     markEmailTouched: () => void;
     markEmailConfirmTouched: () => void;
     markPhoneTouched: () => void;
     markCpfTouched: () => void;
+    markPostalCodeTouched: () => void;
+    markAddressNumberTouched: () => void;
     /**
      * Result of the debounced server-side email-exists check, used to swap
      * the CTA into "Email já cadastrado · Entrar" on the checkout form.
@@ -539,8 +554,15 @@ interface UseCheckoutFormResult {
 interface UseCheckoutFormArgs {
     defaultMethod: CheckoutFormMethod;
     defaultCycle: CheckoutFormCycle;
+    /**
+     * Quando true, o submit envia postalCode + addressNumber reais coletados
+     * via setPostalCode/setAddressNumber. Quando false (default), envia
+     * placeholder `01001000`/`100`. CheckoutPageDefault liga via config
+     * `paywall.collectCep`.
+     */
+    collectCep?: boolean;
 }
-declare function useCheckoutForm(args: UseCheckoutFormArgs): UseCheckoutFormResult;
+declare function useCheckoutForm(hookArgs: UseCheckoutFormArgs): UseCheckoutFormResult;
 
 type SubscriptionStatus = 'active' | 'trialing' | 'expired' | 'canceled' | 'past_due' | 'pending' | 'none';
 type PaymentMethod = CheckoutMethod$1;
@@ -1082,6 +1104,7 @@ declare const AppConfigSchema: z.ZodObject<{
             "pix-once": "pix-once";
         }>>;
         requiresCpf: z.ZodBoolean;
+        collectCep: z.ZodOptional<z.ZodBoolean>;
         cancelWindowDays: z.ZodOptional<z.ZodNumber>;
         errorMessages: z.ZodEnum<{
             default: "default";

package/dist/index.js

@@ -58,6 +58,7 @@ var PaywallNonFreeSchema = z.object({
   }).optional(),
   checkoutMethods: z.array(z.enum(["card", "pix-auto", "pix-once"])).min(1),
   requiresCpf: z.boolean(),
+  collectCep: z.boolean().optional(),
   cancelWindowDays: z.number().int().nonnegative().optional(),
   errorMessages: z.enum(["default", "custom"])
 });
@@ -2004,33 +2005,47 @@ function SessionExpiredBanner() {
     localStorage.setItem(DISMISS_KEY, String(Date.now() + DISMISS_TTL_MS));
     setShow(false);
   }
-  return /* @__PURE__ */ jsxs11("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__ */ jsxs11("span", { children: [
-      /* @__PURE__ */ jsx17("strong", { children: "Sua sess\xE3o expirou." }),
-      " Fa\xE7a login novamente para continuar."
-    ] }),
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx17(
-        "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__ */ jsx17(
-        "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__ */ jsxs11(
+    "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__ */ jsxs11("span", { children: [
+          /* @__PURE__ */ jsx17("strong", { className: "font-bold", children: "Sua sess\xE3o expirou." }),
+          " Fa\xE7a login novamente para continuar."
+        ] }),
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx17(
+            "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__ */ jsx17(
+            "button",
+            {
+              type: "button",
+              onClick: dismiss,
+              "aria-label": "Fechar",
+              className: "px-2 py-1 text-xs",
+              style: { color: "#ffffff" },
+              children: "Fechar"
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 // src/internal/EmailVerifyBanner.tsx
@@ -2850,15 +2865,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 } = useHook10();
   const [name, setName] = useState9("");
   const [email, setEmail] = useState9("");
   const [emailConfirm, setEmailConfirm] = useState9("");
   const [phone, setPhone] = useState9("");
   const [cpf, setCpf] = useState9("");
-  const [method, setMethod] = useState9(args.defaultMethod);
-  const [cycle, setCycle] = useState9(args.defaultCycle);
+  const [postalCode, setPostalCode] = useState9("");
+  const [addressNumber, setAddressNumber] = useState9("");
+  const [method, setMethod] = useState9(hookArgs.defaultMethod);
+  const [cycle, setCycle] = useState9(hookArgs.defaultCycle);
   const [card, setCardState] = useState9({
     number: "",
     expiryMonth: "",
@@ -2874,6 +2891,8 @@ function useCheckoutForm(args) {
   const [touchedEmailConfirm, setTouchedEmailConfirm] = useState9(false);
   const [touchedPhone, setTouchedPhone] = useState9(false);
   const [touchedCpf, setTouchedCpf] = useState9(false);
+  const [touchedPostalCode, setTouchedPostalCode] = useState9(false);
+  const [touchedAddressNumber, setTouchedAddressNumber] = useState9(false);
   const [formSubmitAttempted, setFormSubmitAttempted] = useState9(false);
   const [submitting, setSubmitting] = useState9(false);
   const [error, setError] = useState9(null);
@@ -2927,13 +2946,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 = useMemo4(() => {
+    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 = useMemo4(() => {
+    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 = useCallback6(async () => {
     setFormSubmitAttempted(true);
     setError(null);
@@ -2942,9 +2977,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,
@@ -2963,21 +2998,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,
@@ -2987,7 +3018,7 @@ function useCheckoutForm(args) {
           cycle
         };
       }
-      const result = await auth.subscribeAnonymous(args2);
+      const result = await auth.subscribeAnonymous(args);
       return result;
     } catch (err) {
       if (err instanceof EmailTakenError) {
@@ -3013,6 +3044,10 @@ function useCheckoutForm(args) {
     setPhone,
     cpf,
     setCpf,
+    postalCode,
+    setPostalCode,
+    addressNumber,
+    setAddressNumber,
     method,
     setMethod,
     cycle,
@@ -3024,11 +3059,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,
@@ -3855,10 +3894,12 @@ function detectCardBrand(num) {
 function CheckoutPageDefault() {
   const navigate = useNavigate2();
   const plan = usePlan();
+  const config = useAppConfig();
   const intent = useMemo6(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] = useState11("");
   useEffect13(() => {
     const { month, year } = parseExpiryMmAa(expiryMmAa);
@@ -4042,6 +4083,45 @@ function CheckoutPageDefault() {
               }
             ),
             !form.phoneError && /* @__PURE__ */ jsx48(FieldHint, { children: "Usado pra confirmar pagamento e tratar disputas." })
+          ] }) : null,
+          collectCep && form.method === "card" ? /* @__PURE__ */ jsxs29(Fragment7, { children: [
+            /* @__PURE__ */ jsxs29("div", { children: [
+              /* @__PURE__ */ jsx48(FieldLabel, { children: "CEP" }),
+              /* @__PURE__ */ jsx48(
+                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__ */ jsxs29("div", { children: [
+              /* @__PURE__ */ jsx48(FieldLabel, { children: "N\xFAmero" }),
+              /* @__PURE__ */ jsx48(
+                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
         ] })
       ] }),