@hook-sdk/template 0.13.0 → 0.14.0

package/dist/index.d.cts

@@ -200,9 +200,15 @@ interface UseLoginFormResult {
     email: string;
     setEmail: (v: string) => void;
     emailError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markEmailTouched: () => void;
     password: string;
     setPassword: (v: string) => void;
     passwordError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markPasswordTouched: () => void;
+    /** True after the user has attempted submit at least once. */
+    formSubmitAttempted: boolean;
     /**
      * Submete o form. Retorna true se o login deu OK (cookies setados), false
      * se validação falhou, credenciais inválidas, rate-limit ou erro de rede.
@@ -225,12 +231,20 @@ interface UseSignupFormResult {
     name: string;
     setName: (v: string) => void;
     nameError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markNameTouched: () => void;
     email: string;
     setEmail: (v: string) => void;
     emailError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markEmailTouched: () => void;
     password: string;
     setPassword: (v: string) => void;
     passwordError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markPasswordTouched: () => void;
+    /** True after the user has attempted submit at least once. */
+    formSubmitAttempted: boolean;
     /**
      * Submete o form. Retorna true se o signup deu OK (backend respondeu 2xx),
      * false se validação falhou, houve erro de rede/servidor, ou email já em uso.
@@ -254,6 +268,10 @@ interface UseForgotFormResult {
     email: string;
     setEmail: (v: string) => void;
     emailError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markEmailTouched: () => void;
+    /** True after the user has attempted submit at least once. */
+    formSubmitAttempted: boolean;
     /**
      * Submete o form. Retorna true se o backend aceitou a requisição (email
      * de reset foi enfileirado — sem leak de "existe esse email" por design),
@@ -274,9 +292,15 @@ interface UseResetFormResult {
     password: string;
     setPassword: (v: string) => void;
     passwordError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markPasswordTouched: () => void;
     confirm: string;
     setConfirm: (v: string) => void;
     confirmError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markConfirmTouched: () => void;
+    /** True after the user has attempted submit at least once. */
+    formSubmitAttempted: boolean;
     submit: () => Promise<void>;
     submitting: boolean;
     canSubmit: boolean;

package/dist/index.d.ts

@@ -200,9 +200,15 @@ interface UseLoginFormResult {
     email: string;
     setEmail: (v: string) => void;
     emailError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markEmailTouched: () => void;
     password: string;
     setPassword: (v: string) => void;
     passwordError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markPasswordTouched: () => void;
+    /** True after the user has attempted submit at least once. */
+    formSubmitAttempted: boolean;
     /**
      * Submete o form. Retorna true se o login deu OK (cookies setados), false
      * se validação falhou, credenciais inválidas, rate-limit ou erro de rede.
@@ -225,12 +231,20 @@ interface UseSignupFormResult {
     name: string;
     setName: (v: string) => void;
     nameError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markNameTouched: () => void;
     email: string;
     setEmail: (v: string) => void;
     emailError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markEmailTouched: () => void;
     password: string;
     setPassword: (v: string) => void;
     passwordError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markPasswordTouched: () => void;
+    /** True after the user has attempted submit at least once. */
+    formSubmitAttempted: boolean;
     /**
      * Submete o form. Retorna true se o signup deu OK (backend respondeu 2xx),
      * false se validação falhou, houve erro de rede/servidor, ou email já em uso.
@@ -254,6 +268,10 @@ interface UseForgotFormResult {
     email: string;
     setEmail: (v: string) => void;
     emailError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markEmailTouched: () => void;
+    /** True after the user has attempted submit at least once. */
+    formSubmitAttempted: boolean;
     /**
      * Submete o form. Retorna true se o backend aceitou a requisição (email
      * de reset foi enfileirado — sem leak de "existe esse email" por design),
@@ -274,9 +292,15 @@ interface UseResetFormResult {
     password: string;
     setPassword: (v: string) => void;
     passwordError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markPasswordTouched: () => void;
     confirm: string;
     setConfirm: (v: string) => void;
     confirmError: string | null;
+    /** Wave 5 #42: call on input blur so the error becomes visible. */
+    markConfirmTouched: () => void;
+    /** True after the user has attempted submit at least once. */
+    formSubmitAttempted: boolean;
     submit: () => Promise<void>;
     submitting: boolean;
     canSubmit: boolean;

package/dist/index.js

@@ -1849,14 +1849,18 @@ import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef3
 import { useHook as useHook4 } from "@hook-sdk/sdk";
 import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var BACKOFF_MS = [2e3, 5e3, 1e4, 2e4, 4e4];
+var MAX_CYCLES = 3;
+var SUPPORT_MAILTO = "mailto:suporte@usehook.net?subject=Pagamento%20pendente";
 function PaymentReturnHandler({ children }) {
   const { subscription } = useHook4();
   const subRef = useRef3(subscription);
   subRef.current = subscription;
   const runIdRef = useRef3(0);
+  const cyclesRef = useRef3(0);
   const [state, setState] = useState5("idle");
   const runPoll = useCallback3(() => {
     const runId = ++runIdRef.current;
+    cyclesRef.current += 1;
     setState("confirming");
     let attempts = 0;
     const tick = async () => {
@@ -1872,12 +1876,17 @@ function PaymentReturnHandler({ children }) {
         const cleanUrl = new URL(window.location.href);
         cleanUrl.searchParams.delete("paymentReturn");
         window.history.replaceState({}, "", cleanUrl.toString());
+        cyclesRef.current = 0;
         setState("idle");
         return;
       }
       const delay = BACKOFF_MS[attempts - 1];
       if (delay === void 0) {
-        setState("waiting");
+        if (cyclesRef.current >= MAX_CYCLES) {
+          setState("timeout");
+        } else {
+          setState("waiting");
+        }
         return;
       }
       setTimeout(tick, delay);
@@ -1888,11 +1897,18 @@ function PaymentReturnHandler({ children }) {
     if (typeof window === "undefined") return;
     const url = new URL(window.location.href);
     if (url.searchParams.get("paymentReturn") !== "1") return;
+    cyclesRef.current = 0;
     runPoll();
     return () => {
       runIdRef.current++;
     };
   }, [runPoll]);
+  const goHome = useCallback3(() => {
+    const cleanUrl = new URL(window.location.href);
+    cleanUrl.searchParams.delete("paymentReturn");
+    cleanUrl.pathname = "/app/home";
+    window.location.href = cleanUrl.toString();
+  }, []);
   if (state === "confirming") {
     return /* @__PURE__ */ jsx18("div", { role: "status", "aria-live": "polite", style: overlayStyle2, children: "Confirmando pagamento\u2026" });
   }
@@ -1902,6 +1918,45 @@ function PaymentReturnHandler({ children }) {
       /* @__PURE__ */ jsx18("button", { type: "button", onClick: runPoll, style: buttonStyle, children: "Atualizar" })
     ] }) });
   }
+  if (state === "timeout") {
+    return /* @__PURE__ */ jsx18("div", { role: "alert", "aria-live": "assertive", style: overlayStyle2, children: /* @__PURE__ */ jsxs13("div", { style: { maxWidth: 360, textAlign: "center", lineHeight: 1.5 }, children: [
+      /* @__PURE__ */ jsx18("div", { style: { marginBottom: 16 }, children: "Ainda n\xE3o conseguimos confirmar seu pagamento com o banco. Voc\xEA pode tentar de novo, voltar pro app, ou falar com a gente." }),
+      /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+        /* @__PURE__ */ jsx18(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              cyclesRef.current = 0;
+              runPoll();
+            },
+            style: buttonStyle,
+            "data-testid": "payment-timeout-retry",
+            children: "Tentar de novo"
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          "button",
+          {
+            type: "button",
+            onClick: goHome,
+            style: secondaryButtonStyle,
+            "data-testid": "payment-timeout-home",
+            children: "Voltar pro app"
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          "a",
+          {
+            href: SUPPORT_MAILTO,
+            style: linkStyle,
+            "data-testid": "payment-timeout-support",
+            children: "Falar com suporte"
+          }
+        )
+      ] })
+    ] }) });
+  }
   return /* @__PURE__ */ jsx18(Fragment5, { children });
 }
 var overlayStyle2 = {
@@ -1926,6 +1981,19 @@ var buttonStyle = {
   fontWeight: 600,
   cursor: "pointer"
 };
+var secondaryButtonStyle = {
+  ...buttonStyle,
+  background: "transparent",
+  color: "white",
+  border: "1px solid rgba(255,255,255,0.5)"
+};
+var linkStyle = {
+  color: "white",
+  textDecoration: "underline",
+  fontSize: "0.9rem",
+  marginTop: 4,
+  textAlign: "center"
+};
 
 // src/AppRoot.tsx
 import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -2262,18 +2330,24 @@ function useLoginForm() {
   const [password, setPassword] = useState7("");
   const [submitting, setSubmitting] = useState7(false);
   const [error, setError] = useState7(null);
-  const emailError = useMemo4(() => {
+  const [touchedEmail, setTouchedEmail] = useState7(false);
+  const [touchedPassword, setTouchedPassword] = useState7(false);
+  const [formSubmitAttempted, setFormSubmitAttempted] = useState7(false);
+  const validateEmail = useMemo4(() => {
     if (email.length === 0) return null;
     if (!EMAIL_RE.test(email)) return "Formato de e-mail inv\xE1lido.";
     return null;
   }, [email]);
-  const passwordError = useMemo4(() => {
+  const validatePassword = useMemo4(() => {
     if (password.length === 0) return null;
     if (password.length < MIN_PASSWORD) return `M\xEDnimo de ${MIN_PASSWORD} caracteres.`;
     return null;
   }, [password]);
-  const canSubmit = email.length > 0 && password.length >= MIN_PASSWORD && emailError === null && passwordError === null && !submitting;
+  const emailError = touchedEmail || formSubmitAttempted ? validateEmail : null;
+  const passwordError = touchedPassword || formSubmitAttempted ? validatePassword : null;
+  const canSubmit = email.length > 0 && password.length >= MIN_PASSWORD && validateEmail === null && validatePassword === null && !submitting;
   const submit = useCallback5(async () => {
+    setFormSubmitAttempted(true);
     if (!canSubmit) return false;
     setSubmitting(true);
     setError(null);
@@ -2291,9 +2365,12 @@ function useLoginForm() {
     email,
     setEmail,
     emailError,
+    markEmailTouched: () => setTouchedEmail(true),
     password,
     setPassword,
     passwordError,
+    markPasswordTouched: () => setTouchedPassword(true),
+    formSubmitAttempted,
     submit,
     submitting,
     canSubmit,
@@ -2314,23 +2391,31 @@ function useSignupForm() {
   const [password, setPassword] = useState8("");
   const [submitting, setSubmitting] = useState8(false);
   const [error, setError] = useState8(null);
-  const nameError = useMemo5(() => {
+  const [touchedName, setTouchedName] = useState8(false);
+  const [touchedEmail, setTouchedEmail] = useState8(false);
+  const [touchedPassword, setTouchedPassword] = useState8(false);
+  const [formSubmitAttempted, setFormSubmitAttempted] = useState8(false);
+  const validateName = useMemo5(() => {
     if (name.length === 0) return null;
     if (name.trim().length < 2) return "Nome muito curto.";
     return null;
   }, [name]);
-  const emailError = useMemo5(() => {
+  const validateEmail = useMemo5(() => {
     if (email.length === 0) return null;
     if (!EMAIL_RE2.test(email)) return "Formato de e-mail inv\xE1lido.";
     return null;
   }, [email]);
-  const passwordError = useMemo5(() => {
+  const validatePassword = useMemo5(() => {
     if (password.length === 0) return null;
     if (password.length < MIN_PASSWORD2) return `M\xEDnimo de ${MIN_PASSWORD2} caracteres.`;
     return null;
   }, [password]);
-  const canSubmit = name.trim().length >= 2 && email.length > 0 && password.length >= MIN_PASSWORD2 && nameError === null && emailError === null && passwordError === null && !submitting;
+  const nameError = touchedName || formSubmitAttempted ? validateName : null;
+  const emailError = touchedEmail || formSubmitAttempted ? validateEmail : null;
+  const passwordError = touchedPassword || formSubmitAttempted ? validatePassword : null;
+  const canSubmit = name.trim().length >= 2 && email.length > 0 && password.length >= MIN_PASSWORD2 && validateName === null && validateEmail === null && validatePassword === null && !submitting;
   const submit = useCallback6(async () => {
+    setFormSubmitAttempted(true);
     if (!canSubmit) return false;
     setSubmitting(true);
     setError(null);
@@ -2348,12 +2433,16 @@ function useSignupForm() {
     name,
     setName,
     nameError,
+    markNameTouched: () => setTouchedName(true),
     email,
     setEmail,
     emailError,
+    markEmailTouched: () => setTouchedEmail(true),
     password,
     setPassword,
     passwordError,
+    markPasswordTouched: () => setTouchedPassword(true),
+    formSubmitAttempted,
     submit,
     submitting,
     canSubmit,
@@ -2372,13 +2461,17 @@ function useForgotForm() {
   const [submitting, setSubmitting] = useState9(false);
   const [sent, setSent] = useState9(false);
   const [error, setError] = useState9(null);
-  const emailError = useMemo6(() => {
+  const [touchedEmail, setTouchedEmail] = useState9(false);
+  const [formSubmitAttempted, setFormSubmitAttempted] = useState9(false);
+  const validateEmail = useMemo6(() => {
     if (email.length === 0) return null;
     if (!EMAIL_RE3.test(email)) return "Formato de e-mail inv\xE1lido.";
     return null;
   }, [email]);
-  const canSubmit = email.length > 0 && emailError === null && !submitting;
+  const emailError = touchedEmail || formSubmitAttempted ? validateEmail : null;
+  const canSubmit = email.length > 0 && validateEmail === null && !submitting;
   const submit = useCallback7(async () => {
+    setFormSubmitAttempted(true);
     if (!canSubmit) return false;
     setSubmitting(true);
     setError(null);
@@ -2397,6 +2490,8 @@ function useForgotForm() {
     email,
     setEmail,
     emailError,
+    markEmailTouched: () => setTouchedEmail(true),
+    formSubmitAttempted,
     submit,
     submitting,
     canSubmit,
@@ -2417,24 +2512,30 @@ function useResetForm() {
   const [submitting, setSubmitting] = useState10(false);
   const [done, setDone] = useState10(false);
   const [error, setError] = useState10(null);
+  const [touchedPassword, setTouchedPassword] = useState10(false);
+  const [touchedConfirm, setTouchedConfirm] = useState10(false);
+  const [formSubmitAttempted, setFormSubmitAttempted] = useState10(false);
   useEffect8(() => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams(window.location.search);
     const t = params.get("token");
     setToken(t && t.length > 0 ? t : null);
   }, []);
-  const passwordError = useMemo7(() => {
+  const validatePassword = useMemo7(() => {
     if (password.length === 0) return null;
     if (password.length < MIN_PASSWORD3) return `M\xEDnimo de ${MIN_PASSWORD3} caracteres.`;
     return null;
   }, [password]);
-  const confirmError = useMemo7(() => {
+  const validateConfirm = useMemo7(() => {
     if (confirm.length === 0) return null;
     if (confirm !== password) return "Senhas n\xE3o coincidem.";
     return null;
   }, [confirm, password]);
-  const canSubmit = token !== null && password.length >= MIN_PASSWORD3 && confirm === password && passwordError === null && confirmError === null && !submitting && !done;
+  const passwordError = touchedPassword || formSubmitAttempted ? validatePassword : null;
+  const confirmError = touchedConfirm || formSubmitAttempted ? validateConfirm : null;
+  const canSubmit = token !== null && password.length >= MIN_PASSWORD3 && confirm === password && validatePassword === null && validateConfirm === null && !submitting && !done;
   const submit = useCallback8(async () => {
+    setFormSubmitAttempted(true);
     if (!canSubmit || token === null) return;
     setSubmitting(true);
     setError(null);
@@ -2458,9 +2559,12 @@ function useResetForm() {
     password,
     setPassword,
     passwordError,
+    markPasswordTouched: () => setTouchedPassword(true),
     confirm,
     setConfirm,
     confirmError,
+    markConfirmTouched: () => setTouchedConfirm(true),
+    formSubmitAttempted,
     submit,
     submitting,
     canSubmit,