@umituz/react-native-subscription 2.27.2 → 2.27.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.27.2",
+  "version": "2.27.4",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/hooks/useCredits.ts

@@ -1,13 +1,13 @@
 /**
  * useCredits Hook
  *
- * Fetches user credits - NO CACHE, always fresh data.
- * Auth info automatically read from @umituz/react-native-auth.
+ * Fetches user credits with TanStack Query best practices.
+ * Uses status-based state management for reliable loading detection.
  * Auto-initializes free credits for registered users only.
  */
 
 import { useQuery } from "@umituz/react-native-design-system";
-import { useCallback, useMemo, useEffect } from "react";
+import { useCallback, useMemo, useEffect, useState } from "react";
 import {
   useAuthStore,
   selectUserId,
@@ -29,9 +29,13 @@ export const creditsQueryKeys = {
 
 const freeCreditsInitAttempted = new Set<string>();
 
+export type CreditsLoadStatus = "idle" | "loading" | "initializing" | "ready" | "error";
+
 export interface UseCreditsResult {
   credits: UserCredits | null;
   isLoading: boolean;
+  isCreditsLoaded: boolean;
+  loadStatus: CreditsLoadStatus;
   error: Error | null;
   hasCredits: boolean;
   creditsPercent: number;
@@ -39,24 +43,36 @@ export interface UseCreditsResult {
   canAfford: (cost: number) => boolean;
 }
 
+function deriveLoadStatus(
+  queryStatus: "pending" | "error" | "success",
+  isInitializing: boolean,
+  queryEnabled: boolean
+): CreditsLoadStatus {
+  if (!queryEnabled) return "idle";
+  if (queryStatus === "pending") return "loading";
+  if (queryStatus === "error") return "error";
+  if (isInitializing) return "initializing";
+  return "ready";
+}
+
 export const useCredits = (): UseCreditsResult => {
   const userId = useAuthStore(selectUserId);
   const isAnonymous = useAuthStore(selectIsAnonymous);
   const isRegisteredUser = !!userId && !isAnonymous;
+  const [isInitializingFreeCredits, setIsInitializingFreeCredits] = useState(false);
 
   const isConfigured = isCreditsRepositoryConfigured();
   const config = getCreditsConfig();
-
   const queryEnabled = !!userId && isConfigured;
 
-  const { data, isLoading, error, refetch, isFetched } = useQuery({
+  const { data, status, error, refetch } = useQuery({
     queryKey: creditsQueryKeys.user(userId ?? ""),
     queryFn: async () => {
-      if (!userId || !isConfigured) {
-        return null;
-      }
+      if (!userId || !isConfigured) return null;
+
       const repository = getCreditsRepository();
       const result = await repository.getCredits(userId);
+
       if (!result.success) {
         throw new Error(result.error?.message || "Failed to fetch credits");
       }
@@ -80,67 +96,69 @@ export const useCredits = (): UseCreditsResult => {
   });
 
   const credits = data ?? null;
-
   const freeCredits = config.freeCredits ?? 0;
   const autoInit = config.autoInitializeFreeCredits !== false && freeCredits > 0;
+  const querySuccess = status === "success";
 
   useEffect(() => {
-    if (
-      isFetched &&
+    const shouldInitFreeCredits =
+      querySuccess &&
       userId &&
       isRegisteredUser &&
       isConfigured &&
       !credits &&
       autoInit &&
-      !freeCreditsInitAttempted.has(userId)
-    ) {
+      !freeCreditsInitAttempted.has(userId);
+
+    if (shouldInitFreeCredits) {
       freeCreditsInitAttempted.add(userId);
+      setIsInitializingFreeCredits(true);
 
       if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[useCredits] Initializing free credits for registered user:", userId.slice(0, 8));
+        console.log("[useCredits] Initializing free credits:", userId.slice(0, 8));
       }
 
       const repository = getCreditsRepository();
       repository.initializeFreeCredits(userId).then((result) => {
+        setIsInitializingFreeCredits(false);
+
         if (result.success) {
           if (typeof __DEV__ !== "undefined" && __DEV__) {
             console.log("[useCredits] Free credits initialized:", result.data?.credits);
           }
           refetch();
-        } else {
-          if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.warn("[useCredits] Free credits init failed:", result.error?.message);
-          }
+        } else if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.warn("[useCredits] Free credits init failed:", result.error?.message);
         }
       });
-    } else if (isFetched && userId && isAnonymous && !credits && autoInit) {
+    } else if (querySuccess && userId && isAnonymous && !credits && autoInit) {
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         console.log("[useCredits] Skipping free credits - anonymous user must register first");
       }
     }
-  }, [isFetched, userId, isRegisteredUser, isAnonymous, isConfigured, credits, autoInit, refetch]);
+  }, [querySuccess, userId, isRegisteredUser, isAnonymous, isConfigured, credits, autoInit, refetch]);
 
   const derivedValues = useMemo(() => {
     const has = (credits?.credits ?? 0) > 0;
-    const percent = credits
-      ? Math.round((credits.credits / config.creditLimit) * 100)
-      : 0;
-
+    const percent = credits ? Math.round((credits.credits / config.creditLimit) * 100) : 0;
     return { hasCredits: has, creditsPercent: percent };
   }, [credits, config.creditLimit]);
 
   const canAfford = useCallback(
-    (cost: number): boolean => {
-      if (!credits) return false;
-      return credits.credits >= cost;
-    },
+    (cost: number): boolean => (credits?.credits ?? 0) >= cost,
     [credits]
   );
 
+  const loadStatus = deriveLoadStatus(status, isInitializingFreeCredits, queryEnabled);
+  const isCreditsLoaded = loadStatus === "ready";
+  const isLoading = loadStatus === "loading" || loadStatus === "initializing";
+
   return {
     credits,
     isLoading,
-    error: error as Error | null,
+    isCreditsLoaded,
+    loadStatus,
+    error: error instanceof Error ? error : null,
     hasCredits: derivedValues.hasCredits,
     creditsPercent: derivedValues.creditsPercent,
     refetch,

package/src/presentation/hooks/useFeatureGate.ts

@@ -2,6 +2,7 @@
  * useFeatureGate Hook
  * Unified feature gate: Auth → Subscription → Credits
  * Uses ref pattern to avoid stale closure issues.
+ * Event-driven approach - no polling, no waiting.
  */
 
 import { useCallback, useRef, useEffect } from "react";
@@ -15,6 +16,7 @@ export interface UseFeatureGateParams {
   readonly creditBalance: number;
   readonly requiredCredits?: number;
   readonly onShowPaywall: (requiredCredits?: number) => void;
+  readonly isCreditsLoaded?: boolean;
 }
 
 export interface UseFeatureGateResult {
@@ -34,15 +36,18 @@ export function useFeatureGate(params: UseFeatureGateParams): UseFeatureGateResu
     creditBalance,
     requiredCredits = 1,
     onShowPaywall,
+    isCreditsLoaded = true,
   } = params;
 
   const pendingActionRef = useRef<(() => void | Promise<void>) | null>(null);
   const prevCreditBalanceRef = useRef(creditBalance);
   const isWaitingForPurchaseRef = useRef(false);
+  const isWaitingForAuthCreditsRef = useRef(false);
 
   const creditBalanceRef = useRef(creditBalance);
   const hasSubscriptionRef = useRef(hasSubscription);
   const onShowPaywallRef = useRef(onShowPaywall);
+  const requiredCreditsRef = useRef(requiredCredits);
 
   useEffect(() => {
     creditBalanceRef.current = creditBalance;
@@ -56,6 +61,48 @@ export function useFeatureGate(params: UseFeatureGateParams): UseFeatureGateResu
     onShowPaywallRef.current = onShowPaywall;
   }, [onShowPaywall]);
 
+  useEffect(() => {
+    requiredCreditsRef.current = requiredCredits;
+  }, [requiredCredits]);
+
+  useEffect(() => {
+    if (!isWaitingForAuthCreditsRef.current || !isCreditsLoaded || !pendingActionRef.current) {
+      return;
+    }
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[useFeatureGate] Credits loaded after auth", {
+        credits: creditBalance,
+        hasSubscription,
+        isCreditsLoaded,
+      });
+    }
+
+    isWaitingForAuthCreditsRef.current = false;
+
+    if (hasSubscription || creditBalance >= requiredCredits) {
+      const action = pendingActionRef.current;
+      pendingActionRef.current = null;
+
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[useFeatureGate] Proceeding with action after auth", {
+          credits: creditBalance,
+          hasSubscription,
+        });
+      }
+      action();
+      return;
+    }
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[useFeatureGate] No credits after auth, showing paywall", {
+        credits: creditBalance,
+      });
+    }
+    isWaitingForPurchaseRef.current = true;
+    onShowPaywall(requiredCredits);
+  }, [isCreditsLoaded, creditBalance, hasSubscription, requiredCredits, onShowPaywall]);
+
   useEffect(() => {
     const prevBalance = prevCreditBalanceRef.current ?? 0;
     const creditsIncreased = creditBalance > prevBalance;
@@ -82,57 +129,18 @@ export function useFeatureGate(params: UseFeatureGateParams): UseFeatureGateResu
           hasSubscription,
           creditBalance: creditBalanceRef.current,
           requiredCredits,
+          isCreditsLoaded,
         });
       }
 
       if (!isAuthenticated) {
-        const postAuthAction = async () => {
-          // Wait for free credits to initialize after registration (max 3 seconds)
-          const maxWaitTime = 3000;
-          const checkInterval = 100;
-          let waited = 0;
-
-          while (waited < maxWaitTime) {
-            await new Promise((resolve) => setTimeout(resolve, checkInterval));
-            waited += checkInterval;
-
-            if (creditBalanceRef.current > 0 || hasSubscriptionRef.current) {
-              if (typeof __DEV__ !== "undefined" && __DEV__) {
-                console.log("[useFeatureGate] Credits/subscription detected after auth", {
-                  credits: creditBalanceRef.current,
-                  hasSubscription: hasSubscriptionRef.current,
-                  waitedMs: waited,
-                });
-              }
-              break;
-            }
-          }
-
-          if (hasSubscriptionRef.current) {
-            action();
-            return;
-          }
-
-          const currentBalance = creditBalanceRef.current;
-          if (currentBalance < requiredCredits) {
-            if (typeof __DEV__ !== "undefined" && __DEV__) {
-              console.log("[useFeatureGate] No credits after waiting, showing paywall", {
-                credits: currentBalance,
-                waitedMs: waited,
-              });
-            }
-            pendingActionRef.current = action;
-            isWaitingForPurchaseRef.current = true;
-            onShowPaywallRef.current(requiredCredits);
-            return;
-          }
+        const postAuthAction = () => {
+          pendingActionRef.current = action;
+          isWaitingForAuthCreditsRef.current = true;
 
           if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.log("[useFeatureGate] Proceeding with action after auth", {
-              credits: currentBalance,
-            });
+            console.log("[useFeatureGate] Auth completed, waiting for credits to load");
           }
-          action();
         };
         onShowAuthModal(postAuthAction);
         return;
@@ -156,7 +164,7 @@ export function useFeatureGate(params: UseFeatureGateParams): UseFeatureGateResu
 
       action();
     },
-    [isAuthenticated, hasSubscription, requiredCredits, onShowAuthModal, onShowPaywall]
+    [isAuthenticated, hasSubscription, requiredCredits, onShowAuthModal, onShowPaywall, isCreditsLoaded]
   );
 
   const hasCredits = creditBalance >= requiredCredits;