@hook-sdk/template 0.14.1 → 0.16.0

package/dist/index.d.cts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import { ReactNode, ComponentType, Component } from 'react';
 import * as _hook_sdk_sdk from '@hook-sdk/sdk';
 import { CheckoutMethod as CheckoutMethod$1, CheckoutCycle, CheckoutResult, CheckoutCardData, CheckoutHolderInfo, PlanState, ReminderSlot } from '@hook-sdk/sdk';
-export { PlanInfo, PlanState } from '@hook-sdk/sdk';
+export { PlanInfo, PlanState, useTrackOnboardingStep } from '@hook-sdk/sdk';
 import { z } from 'zod';
 
 type Cycle = 'MONTHLY' | 'YEARLY';

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import { ReactNode, ComponentType, Component } from 'react';
 import * as _hook_sdk_sdk from '@hook-sdk/sdk';
 import { CheckoutMethod as CheckoutMethod$1, CheckoutCycle, CheckoutResult, CheckoutCardData, CheckoutHolderInfo, PlanState, ReminderSlot } from '@hook-sdk/sdk';
-export { PlanInfo, PlanState } from '@hook-sdk/sdk';
+export { PlanInfo, PlanState, useTrackOnboardingStep } from '@hook-sdk/sdk';
 import { z } from 'zod';
 
 type Cycle = 'MONTHLY' | 'YEARLY';

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/AppRoot.tsx
 import { useMemo as useMemo3 } from "react";
 import { BrowserRouter, MemoryRouter, Navigate, Route, Routes } from "react-router-dom";
-import { useHook as useHook5 } from "@hook-sdk/sdk";
+import { useHook as useHook6 } from "@hook-sdk/sdk";
 
 // src/config/AppConfigContext.tsx
 import { createContext, useContext } from "react";
@@ -179,7 +179,7 @@ function ThemeProvider({ children }) {
 
 // src/hooks/usePaywallState.ts
 import { useCallback, useContext as useContext3, useMemo as useMemo2, useState } from "react";
-import { useHook as useHook2 } from "@hook-sdk/sdk";
+import { useHook as useHook3 } from "@hook-sdk/sdk";
 
 // src/errors/asaas-pt-br.ts
 var MAP = {
@@ -200,6 +200,35 @@ function asaasErrorMessage(code) {
   return MAP[code] ?? "Ocorreu um erro inesperado. Tente novamente em instantes.";
 }
 
+// src/hooks/usePaywallTracker.ts
+import { useEffect as useEffect3, useRef } from "react";
+import { useHook as useHook2 } from "@hook-sdk/sdk";
+function deriveStep(s) {
+  if (s.pixPaid) return "success";
+  if (s.hasError) return "error";
+  if (s.pixPendingShown) return "pix_qr_shown";
+  if (s.selectedMethod === "card" && s.cpfValid) return "card_form";
+  if (s.cpfRequired && !s.cpfValid) return "cpf_input";
+  if (s.selectedMethod) return "method_select";
+  return "plan_select";
+}
+function usePaywallTracker(snapshot) {
+  const ctx = useHook2();
+  const track2 = typeof ctx.track === "function" ? ctx.track : void 0;
+  const lastStepRef = useRef(null);
+  const step = deriveStep(snapshot);
+  useEffect3(() => {
+    if (lastStepRef.current === step) return;
+    lastStepRef.current = step;
+    if (!track2) return;
+    track2("paywall_step_viewed", {
+      step,
+      method: snapshot.selectedMethod,
+      cycle: snapshot.cycle
+    });
+  }, [step]);
+}
+
 // src/hooks/usePaywallState.ts
 function isCheckoutFailure(r) {
   return "ok" in r && r.ok === false;
@@ -214,7 +243,7 @@ var FALLBACK_PAYWALL = {
 };
 var isMethodAvailable = (availability, method) => availability[method] !== false;
 function usePaywallState() {
-  const { subscription, plan } = useHook2();
+  const { subscription, plan } = useHook3();
   const configFromCtx = useContext3(AppConfigContext);
   const paywall = configFromCtx?.paywall ?? FALLBACK_PAYWALL;
   const isFree = paywall.mode === "free";
@@ -443,6 +472,16 @@ function usePaywallState() {
     () => ({ required: cpfRequired, value: cpf, set: setCpf, valid: cpfValid }),
     [cpfRequired, cpf, cpfValid]
   );
+  usePaywallTracker({
+    selectedMethod,
+    cycle,
+    cpfRequired,
+    cpfValid,
+    pixPendingShown: pixPending !== null,
+    pixPaid: pixPending?.paid === true,
+    hasError: error !== null,
+    submitting
+  });
   return {
     // Subscription status (reactive, proxied from SDK)
     status,
@@ -497,10 +536,10 @@ function SubscriptionGate({ Paywall, children }) {
 }
 
 // src/components/InstallGate/InstallGate.tsx
-import { useEffect as useEffect4, useRef } from "react";
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
 
 // src/hooks/useInstallPrompt.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useState as useState2 } from "react";
 var ANDROID_PROMPT_WAIT_MS = 3e3;
 var IOS_RE = /iPad|iPhone|iPod/;
 var IOS_NON_SAFARI_RE = /CriOS|FxiOS|EdgiOS/;
@@ -650,12 +689,12 @@ function useInstallPrompt(slug) {
     if (typeof window === "undefined") return true;
     return window.__pwaInstallPrompt != null;
   });
-  useEffect3(() => {
+  useEffect4(() => {
     if (promptWaitElapsed) return;
     const id = setTimeout(() => setPromptWaitElapsed(true), ANDROID_PROMPT_WAIT_MS);
     return () => clearTimeout(id);
   }, [promptWaitElapsed]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (typeof window === "undefined") return;
     if (window.__pwaInstallPrompt) {
       setIsInstallable(true);
@@ -679,7 +718,7 @@ function useInstallPrompt(slug) {
       window.removeEventListener("appinstalled", onInstalled);
     };
   }, [slug]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (typeof window === "undefined") return;
     const mq = window.matchMedia?.("(display-mode: standalone)");
     if (!mq) return;
@@ -1763,8 +1802,8 @@ function InstallGate({ children }) {
   const enabled = features_enabled.includes("install_prompt");
   const installState = useInstallPrompt(slug);
   const shouldBlock = enabled && shouldBlockInstall(installState);
-  const trackedRef = useRef(null);
-  useEffect4(() => {
+  const trackedRef = useRef2(null);
+  useEffect5(() => {
     if (!shouldBlock) return;
     if (typeof window === "undefined") return;
     const variantKey = `${slug}:${installState.variant}`;
@@ -1813,16 +1852,16 @@ function PushPrompt() {
 }
 
 // src/internal/SessionExpiredBanner.tsx
-import { useEffect as useEffect5, useRef as useRef2, useState as useState4 } from "react";
-import { useHook as useHook3 } from "@hook-sdk/sdk";
+import { useEffect as useEffect6, useRef as useRef3, useState as useState4 } from "react";
+import { useHook as useHook4 } from "@hook-sdk/sdk";
 import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var DISMISS_KEY = "hook:session-expired-dismissed-until";
 var DISMISS_TTL_MS = 60 * 60 * 1e3;
 function SessionExpiredBanner() {
-  const { authStatus } = useHook3();
-  const wasAuthRef = useRef2(false);
+  const { authStatus } = useHook4();
+  const wasAuthRef = useRef3(false);
   const [show, setShow] = useState4(false);
-  useEffect5(() => {
+  useEffect6(() => {
     if (authStatus === "authenticated") {
       wasAuthRef.current = true;
       setShow(false);
@@ -1901,18 +1940,18 @@ var ErrorBoundary = class extends Component {
 };
 
 // src/internal/PaymentReturnHandler.tsx
-import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef3, useState as useState5 } from "react";
-import { useHook as useHook4 } from "@hook-sdk/sdk";
+import { useCallback as useCallback3, useEffect as useEffect7, useRef as useRef4, useState as useState5 } from "react";
+import { useHook as useHook5 } from "@hook-sdk/sdk";
 import { Fragment as Fragment5, jsx as jsx19, 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);
+  const { subscription } = useHook5();
+  const subRef = useRef4(subscription);
   subRef.current = subscription;
-  const runIdRef = useRef3(0);
-  const cyclesRef = useRef3(0);
+  const runIdRef = useRef4(0);
+  const cyclesRef = useRef4(0);
   const [state, setState] = useState5("idle");
   const runPoll = useCallback3(() => {
     const runId = ++runIdRef.current;
@@ -1949,7 +1988,7 @@ function PaymentReturnHandler({ children }) {
     };
     void tick();
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (typeof window === "undefined") return;
     const url = new URL(window.location.href);
     if (url.searchParams.get("paymentReturn") !== "1") return;
@@ -2162,7 +2201,7 @@ function AuthGated({
   EmailVerify,
   PreAuthFlow
 }) {
-  const { authStatus } = useHook5();
+  const { authStatus } = useHook6();
   if (authStatus === "loading") return null;
   if (authStatus !== "authenticated") {
     if (config.onboarding?.trigger === "pre_signup_custom" && PreAuthFlow) {
@@ -2191,8 +2230,8 @@ function FallbackPaywall() {
 }
 
 // src/hooks/usePush.ts
-import { useCallback as useCallback4, useEffect as useEffect7, useState as useState6 } from "react";
-import { useHook as useHook6 } from "@hook-sdk/sdk";
+import { useCallback as useCallback4, useEffect as useEffect8, useState as useState6 } from "react";
+import { useHook as useHook7 } from "@hook-sdk/sdk";
 var DISMISS_STORAGE_KEY = "push:dismissed-until";
 var DISMISS_TTL_MS2 = 7 * 24 * 60 * 60 * 1e3;
 function detectIosNeedsInstall() {
@@ -2236,9 +2275,9 @@ function deriveState(push) {
   return { kind: "prompt" };
 }
 function usePush() {
-  const { push } = useHook6();
+  const { push } = useHook7();
   const [state, setState] = useState6(() => deriveState(push));
-  useEffect7(() => {
+  useEffect8(() => {
     setState(deriveState(push));
   }, [push]);
   const subscribe = useCallback4(async () => {
@@ -2355,7 +2394,7 @@ function EmptyState({ title, description, action }) {
 
 // src/hooks/useLoginForm.ts
 import { useCallback as useCallback5, useMemo as useMemo4, useState as useState7 } from "react";
-import { useHook as useHook7 } from "@hook-sdk/sdk";
+import { useHook as useHook8 } from "@hook-sdk/sdk";
 
 // src/errors.ts
 import { SdkError, SdkAuthError, SdkRateLimitError } from "@hook-sdk/sdk";
@@ -2390,7 +2429,7 @@ function mapSdkError(err) {
 var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var MIN_PASSWORD = 8;
 function useLoginForm() {
-  const { auth } = useHook7();
+  const { auth } = useHook8();
   const [email, setEmail] = useState7("");
   const [password, setPassword] = useState7("");
   const [submitting, setSubmitting] = useState7(false);
@@ -2446,11 +2485,11 @@ function useLoginForm() {
 
 // src/hooks/useSignupForm.ts
 import { useCallback as useCallback6, useMemo as useMemo5, useState as useState8 } from "react";
-import { useHook as useHook8 } from "@hook-sdk/sdk";
+import { useHook as useHook9 } from "@hook-sdk/sdk";
 var EMAIL_RE2 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var MIN_PASSWORD2 = 8;
 function useSignupForm() {
-  const { auth } = useHook8();
+  const { auth } = useHook9();
   const [name, setName] = useState8("");
   const [email, setEmail] = useState8("");
   const [password, setPassword] = useState8("");
@@ -2518,10 +2557,10 @@ function useSignupForm() {
 
 // src/hooks/useForgotForm.ts
 import { useCallback as useCallback7, useMemo as useMemo6, useState as useState9 } from "react";
-import { useHook as useHook9 } from "@hook-sdk/sdk";
+import { useHook as useHook10 } from "@hook-sdk/sdk";
 var EMAIL_RE3 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 function useForgotForm() {
-  const { auth } = useHook9();
+  const { auth } = useHook10();
   const [email, setEmail] = useState9("");
   const [submitting, setSubmitting] = useState9(false);
   const [sent, setSent] = useState9(false);
@@ -2566,11 +2605,11 @@ function useForgotForm() {
 }
 
 // src/hooks/useResetForm.ts
-import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo7, useState as useState10 } from "react";
-import { useHook as useHook10 } from "@hook-sdk/sdk";
+import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo7, useState as useState10 } from "react";
+import { useHook as useHook11 } from "@hook-sdk/sdk";
 var MIN_PASSWORD3 = 12;
 function useResetForm() {
-  const { auth } = useHook10();
+  const { auth } = useHook11();
   const [token, setToken] = useState10(null);
   const [password, setPassword] = useState10("");
   const [confirm, setConfirm] = useState10("");
@@ -2580,7 +2619,7 @@ function useResetForm() {
   const [touchedPassword, setTouchedPassword] = useState10(false);
   const [touchedConfirm, setTouchedConfirm] = useState10(false);
   const [formSubmitAttempted, setFormSubmitAttempted] = useState10(false);
-  useEffect8(() => {
+  useEffect9(() => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams(window.location.search);
     const t = params.get("token");
@@ -2639,9 +2678,9 @@ function useResetForm() {
 }
 
 // src/hooks/usePlan.ts
-import { useHook as useHook11 } from "@hook-sdk/sdk";
+import { useHook as useHook12 } from "@hook-sdk/sdk";
 function usePlan() {
-  const { plan } = useHook11();
+  const { plan } = useHook12();
   return plan;
 }
 
@@ -2674,12 +2713,12 @@ function discountPercent(anchorCents, realCents) {
 }
 
 // src/hooks/useAuthPrimitives.ts
-import { useEffect as useEffect9 } from "react";
-import { useHook as useHook12 } from "@hook-sdk/sdk";
+import { useEffect as useEffect10 } from "react";
+import { useHook as useHook13 } from "@hook-sdk/sdk";
 var warned = false;
 function useAuthPrimitives() {
-  const { auth } = useHook12();
-  useEffect9(() => {
+  const { auth } = useHook13();
+  useEffect10(() => {
     if (!warned && process.env.NODE_ENV !== "production") {
       warned = true;
       console.warn(
@@ -2701,9 +2740,9 @@ function useAuthPrimitives() {
 }
 
 // src/hooks/useAuth.ts
-import { useHook as useHook13 } from "@hook-sdk/sdk";
+import { useHook as useHook14 } from "@hook-sdk/sdk";
 function useAuth() {
-  const { user, authStatus, auth } = useHook13();
+  const { user, authStatus, auth } = useHook14();
   return {
     user,
     authStatus,
@@ -2711,20 +2750,23 @@ function useAuth() {
   };
 }
 
+// src/index.ts
+import { useTrackOnboardingStep } from "@hook-sdk/sdk";
+
 // src/hooks/useSubscription.ts
-import { useHook as useHook14 } from "@hook-sdk/sdk";
+import { useHook as useHook15 } from "@hook-sdk/sdk";
 function useSubscription() {
-  const { subscription } = useHook14();
+  const { subscription } = useHook15();
   return {
     status: subscription.status()
   };
 }
 
 // src/hooks/useReminders.ts
-import { useCallback as useCallback9, useEffect as useEffect10, useState as useState11 } from "react";
-import { useHook as useHook15 } from "@hook-sdk/sdk";
+import { useCallback as useCallback9, useEffect as useEffect11, useState as useState11 } from "react";
+import { useHook as useHook16 } from "@hook-sdk/sdk";
 function useReminders() {
-  const { push } = useHook15();
+  const { push } = useHook16();
   const r = push.reminders;
   const [reminders, setReminders] = useState11([]);
   const [loading, setLoading] = useState11(true);
@@ -2737,7 +2779,7 @@ function useReminders() {
       setLoading(false);
     }
   }, [r]);
-  useEffect10(() => {
+  useEffect11(() => {
     void reload();
   }, [reload]);
   const setReminder = useCallback9(async (input) => {
@@ -2803,8 +2845,8 @@ function PreAuthShell({
 }
 
 // src/OnboardingFlow.tsx
-import { useCallback as useCallback11, useMemo as useMemo8, useRef as useRef4 } from "react";
-import { usePersistedState } from "@hook-sdk/sdk";
+import { useCallback as useCallback11, useEffect as useEffect12, useMemo as useMemo8, useRef as useRef5 } from "react";
+import { usePersistedState, useHook as useHook17 } from "@hook-sdk/sdk";
 
 // src/hooks/useOnboardingStep.ts
 import { createContext as createContext3, useContext as useContext4 } from "react";
@@ -2834,7 +2876,7 @@ function OnboardingFlow({
   persistKey
 }) {
   const [draft, setDraft, status] = usePersistedState(persistKey, {});
-  const draftRef = useRef4(draft);
+  const draftRef = useRef5(draft);
   draftRef.current = draft;
   const idx = readPersistedStepIdx(draft);
   const clampedIdx = Math.min(Math.max(idx, 0), Math.max(steps.length - 1, 0));
@@ -2856,6 +2898,18 @@ function OnboardingFlow({
     [setDraft]
   );
   const step = steps[clampedIdx];
+  const hookCtx = useHook17();
+  const track2 = typeof hookCtx.track === "function" ? hookCtx.track : void 0;
+  useEffect12(() => {
+    if (status.loading) return;
+    if (!step) return;
+    if (!track2) return;
+    track2("onboarding_step_viewed", {
+      step: step.id,
+      step_index: clampedIdx,
+      total_steps: steps.length
+    });
+  }, [step?.id, clampedIdx, steps.length, status.loading, track2]);
   const valid = useMemo8(
     () => step ? (step.validates ?? []).every((field) => isFilled(draft[field])) : false,
     [draft, step]
@@ -2951,6 +3005,7 @@ export {
   useResetForm,
   useSignupForm,
   useSubscription,
-  useToast
+  useToast,
+  useTrackOnboardingStep
 };
 //# sourceMappingURL=index.js.map