@hook-sdk/template 0.13.0 → 0.14.0

package/dist/index.cjs

@@ -1919,14 +1919,18 @@ var import_react11 = require("react");
 var import_sdk4 = require("@hook-sdk/sdk");
 var import_jsx_runtime18 = require("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 } = (0, import_sdk4.useHook)();
   const subRef = (0, import_react11.useRef)(subscription);
   subRef.current = subscription;
   const runIdRef = (0, import_react11.useRef)(0);
+  const cyclesRef = (0, import_react11.useRef)(0);
   const [state, setState] = (0, import_react11.useState)("idle");
   const runPoll = (0, import_react11.useCallback)(() => {
     const runId = ++runIdRef.current;
+    cyclesRef.current += 1;
     setState("confirming");
     let attempts = 0;
     const tick = async () => {
@@ -1942,12 +1946,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);
@@ -1958,11 +1967,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 = (0, import_react11.useCallback)(() => {
+    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__ */ (0, import_jsx_runtime18.jsx)("div", { role: "status", "aria-live": "polite", style: overlayStyle2, children: "Confirmando pagamento\u2026" });
   }
@@ -1972,6 +1988,45 @@ function PaymentReturnHandler({ children }) {
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", onClick: runPoll, style: buttonStyle, children: "Atualizar" })
     ] }) });
   }
+  if (state === "timeout") {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { role: "alert", "aria-live": "assertive", style: overlayStyle2, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { maxWidth: 360, textAlign: "center", lineHeight: 1.5 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              cyclesRef.current = 0;
+              runPoll();
+            },
+            style: buttonStyle,
+            "data-testid": "payment-timeout-retry",
+            children: "Tentar de novo"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: goHome,
+            style: secondaryButtonStyle,
+            "data-testid": "payment-timeout-home",
+            children: "Voltar pro app"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "a",
+          {
+            href: SUPPORT_MAILTO,
+            style: linkStyle,
+            "data-testid": "payment-timeout-support",
+            children: "Falar com suporte"
+          }
+        )
+      ] })
+    ] }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
 }
 var overlayStyle2 = {
@@ -1996,6 +2051,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
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -2332,18 +2400,24 @@ function useLoginForm() {
   const [password, setPassword] = (0, import_react14.useState)("");
   const [submitting, setSubmitting] = (0, import_react14.useState)(false);
   const [error, setError] = (0, import_react14.useState)(null);
-  const emailError = (0, import_react14.useMemo)(() => {
+  const [touchedEmail, setTouchedEmail] = (0, import_react14.useState)(false);
+  const [touchedPassword, setTouchedPassword] = (0, import_react14.useState)(false);
+  const [formSubmitAttempted, setFormSubmitAttempted] = (0, import_react14.useState)(false);
+  const validateEmail = (0, import_react14.useMemo)(() => {
     if (email.length === 0) return null;
     if (!EMAIL_RE.test(email)) return "Formato de e-mail inv\xE1lido.";
     return null;
   }, [email]);
-  const passwordError = (0, import_react14.useMemo)(() => {
+  const validatePassword = (0, import_react14.useMemo)(() => {
     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 = (0, import_react14.useCallback)(async () => {
+    setFormSubmitAttempted(true);
     if (!canSubmit) return false;
     setSubmitting(true);
     setError(null);
@@ -2361,9 +2435,12 @@ function useLoginForm() {
     email,
     setEmail,
     emailError,
+    markEmailTouched: () => setTouchedEmail(true),
     password,
     setPassword,
     passwordError,
+    markPasswordTouched: () => setTouchedPassword(true),
+    formSubmitAttempted,
     submit,
     submitting,
     canSubmit,
@@ -2384,23 +2461,31 @@ function useSignupForm() {
   const [password, setPassword] = (0, import_react15.useState)("");
   const [submitting, setSubmitting] = (0, import_react15.useState)(false);
   const [error, setError] = (0, import_react15.useState)(null);
-  const nameError = (0, import_react15.useMemo)(() => {
+  const [touchedName, setTouchedName] = (0, import_react15.useState)(false);
+  const [touchedEmail, setTouchedEmail] = (0, import_react15.useState)(false);
+  const [touchedPassword, setTouchedPassword] = (0, import_react15.useState)(false);
+  const [formSubmitAttempted, setFormSubmitAttempted] = (0, import_react15.useState)(false);
+  const validateName = (0, import_react15.useMemo)(() => {
     if (name.length === 0) return null;
     if (name.trim().length < 2) return "Nome muito curto.";
     return null;
   }, [name]);
-  const emailError = (0, import_react15.useMemo)(() => {
+  const validateEmail = (0, import_react15.useMemo)(() => {
     if (email.length === 0) return null;
     if (!EMAIL_RE2.test(email)) return "Formato de e-mail inv\xE1lido.";
     return null;
   }, [email]);
-  const passwordError = (0, import_react15.useMemo)(() => {
+  const validatePassword = (0, import_react15.useMemo)(() => {
     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 = (0, import_react15.useCallback)(async () => {
+    setFormSubmitAttempted(true);
     if (!canSubmit) return false;
     setSubmitting(true);
     setError(null);
@@ -2418,12 +2503,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,
@@ -2442,13 +2531,17 @@ function useForgotForm() {
   const [submitting, setSubmitting] = (0, import_react16.useState)(false);
   const [sent, setSent] = (0, import_react16.useState)(false);
   const [error, setError] = (0, import_react16.useState)(null);
-  const emailError = (0, import_react16.useMemo)(() => {
+  const [touchedEmail, setTouchedEmail] = (0, import_react16.useState)(false);
+  const [formSubmitAttempted, setFormSubmitAttempted] = (0, import_react16.useState)(false);
+  const validateEmail = (0, import_react16.useMemo)(() => {
     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 = (0, import_react16.useCallback)(async () => {
+    setFormSubmitAttempted(true);
     if (!canSubmit) return false;
     setSubmitting(true);
     setError(null);
@@ -2467,6 +2560,8 @@ function useForgotForm() {
     email,
     setEmail,
     emailError,
+    markEmailTouched: () => setTouchedEmail(true),
+    formSubmitAttempted,
     submit,
     submitting,
     canSubmit,
@@ -2487,24 +2582,30 @@ function useResetForm() {
   const [submitting, setSubmitting] = (0, import_react17.useState)(false);
   const [done, setDone] = (0, import_react17.useState)(false);
   const [error, setError] = (0, import_react17.useState)(null);
+  const [touchedPassword, setTouchedPassword] = (0, import_react17.useState)(false);
+  const [touchedConfirm, setTouchedConfirm] = (0, import_react17.useState)(false);
+  const [formSubmitAttempted, setFormSubmitAttempted] = (0, import_react17.useState)(false);
   (0, import_react17.useEffect)(() => {
     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 = (0, import_react17.useMemo)(() => {
+  const validatePassword = (0, import_react17.useMemo)(() => {
     if (password.length === 0) return null;
     if (password.length < MIN_PASSWORD3) return `M\xEDnimo de ${MIN_PASSWORD3} caracteres.`;
     return null;
   }, [password]);
-  const confirmError = (0, import_react17.useMemo)(() => {
+  const validateConfirm = (0, import_react17.useMemo)(() => {
     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 = (0, import_react17.useCallback)(async () => {
+    setFormSubmitAttempted(true);
     if (!canSubmit || token === null) return;
     setSubmitting(true);
     setError(null);
@@ -2528,9 +2629,12 @@ function useResetForm() {
     password,
     setPassword,
     passwordError,
+    markPasswordTouched: () => setTouchedPassword(true),
     confirm,
     setConfirm,
     confirmError,
+    markConfirmTouched: () => setTouchedConfirm(true),
+    formSubmitAttempted,
     submit,
     submitting,
     canSubmit,