@umituz/react-native-subscription 2.27.3 → 2.27.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.27.3",
+  "version": "2.27.6",
   "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.
- * Auto-initializes free credits for registered users only.
+ * Fetches user credits with TanStack Query best practices.
+ * Uses status-based state management for reliable loading detection.
+ * Free credits initialization is delegated to useFreeCreditsInit hook.
  */
 
 import { useQuery } from "@umituz/react-native-design-system";
-import { useCallback, useMemo, useEffect, useState } from "react";
+import { useCallback, useMemo } from "react";
 import {
   useAuthStore,
   selectUserId,
@@ -19,6 +19,7 @@ import {
   getCreditsConfig,
   isCreditsRepositoryConfigured,
 } from "../../infrastructure/repositories/CreditsRepositoryProvider";
+import { useFreeCreditsInit } from "./useFreeCreditsInit";
 
 declare const __DEV__: boolean;
 
@@ -27,12 +28,13 @@ export const creditsQueryKeys = {
   user: (userId: string) => ["credits", userId] as const,
 };
 
-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;
@@ -40,25 +42,35 @@ 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");
       }
@@ -82,72 +94,45 @@ export const useCredits = (): UseCreditsResult => {
   });
 
   const credits = data ?? null;
-
-  const freeCredits = config.freeCredits ?? 0;
-  const autoInit = config.autoInitializeFreeCredits !== false && freeCredits > 0;
-
-  useEffect(() => {
-    if (
-      isFetched &&
-      userId &&
-      isRegisteredUser &&
-      isConfigured &&
-      !credits &&
-      autoInit &&
-      !freeCreditsInitAttempted.has(userId)
-    ) {
-      freeCreditsInitAttempted.add(userId);
-      setIsInitializingFreeCredits(true);
-
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[useCredits] Initializing free credits for registered user:", 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 (isFetched && 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]);
+  const querySuccess = status === "success";
+  const hasCreditsData = (credits?.credits ?? 0) > 0;
+
+  // Delegate free credits initialization to dedicated hook
+  const { isInitializing, needsInit } = useFreeCreditsInit({
+    userId,
+    isRegisteredUser,
+    isAnonymous,
+    hasCredits: hasCreditsData,
+    querySuccess,
+    onInitComplete: 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 isCreditsLoaded = isFetched && !isLoading && !isInitializingFreeCredits;
+  // Include needsInit in initializing state for accurate loading detection
+  const loadStatus = deriveLoadStatus(
+    status,
+    isInitializing || needsInit,
+    queryEnabled
+  );
+  const isCreditsLoaded = loadStatus === "ready";
+  const isLoading = loadStatus === "loading" || loadStatus === "initializing";
 
   return {
     credits,
     isLoading,
     isCreditsLoaded,
-    error: error as Error | null,
+    loadStatus,
+    error: error instanceof Error ? error : null,
     hasCredits: derivedValues.hasCredits,
     creditsPercent: derivedValues.creditsPercent,
     refetch,

package/src/presentation/hooks/useFreeCreditsInit.ts

@@ -0,0 +1,87 @@
+/**
+ * useFreeCreditsInit Hook
+ *
+ * Handles free credits initialization for newly registered users.
+ * Separated from useCredits for better maintainability and testability.
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import {
+  getCreditsRepository,
+  getCreditsConfig,
+  isCreditsRepositoryConfigured,
+} from "../../infrastructure/repositories/CreditsRepositoryProvider";
+
+declare const __DEV__: boolean;
+
+const freeCreditsInitAttempted = new Set<string>();
+
+export interface UseFreeCreditsInitParams {
+  userId: string | null | undefined;
+  isRegisteredUser: boolean;
+  isAnonymous: boolean;
+  hasCredits: boolean;
+  querySuccess: boolean;
+  onInitComplete: () => void;
+}
+
+export interface UseFreeCreditsInitResult {
+  isInitializing: boolean;
+  needsInit: boolean;
+}
+
+export function useFreeCreditsInit(params: UseFreeCreditsInitParams): UseFreeCreditsInitResult {
+  const { userId, isRegisteredUser, isAnonymous, hasCredits, querySuccess, onInitComplete } = params;
+  const [isInitializing, setIsInitializing] = useState(false);
+
+  const isConfigured = isCreditsRepositoryConfigured();
+  const config = getCreditsConfig();
+  const freeCredits = config.freeCredits ?? 0;
+  const autoInit = config.autoInitializeFreeCredits !== false && freeCredits > 0;
+
+  const needsInit =
+    querySuccess &&
+    !!userId &&
+    isRegisteredUser &&
+    isConfigured &&
+    !hasCredits &&
+    autoInit &&
+    !freeCreditsInitAttempted.has(userId);
+
+  const initializeFreeCredits = useCallback(async (uid: string) => {
+    freeCreditsInitAttempted.add(uid);
+    setIsInitializing(true);
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[useFreeCreditsInit] Initializing free credits:", uid.slice(0, 8));
+    }
+
+    const repository = getCreditsRepository();
+    const result = await repository.initializeFreeCredits(uid);
+    setIsInitializing(false);
+
+    if (result.success) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[useFreeCreditsInit] Free credits initialized:", result.data?.credits);
+      }
+      onInitComplete();
+    } else if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.warn("[useFreeCreditsInit] Free credits init failed:", result.error?.message);
+    }
+  }, [onInitComplete]);
+
+  useEffect(() => {
+    if (needsInit && userId) {
+      initializeFreeCredits(userId);
+    } else if (querySuccess && userId && isAnonymous && !hasCredits && autoInit) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[useFreeCreditsInit] Skipping - anonymous user must register first");
+      }
+    }
+  }, [needsInit, userId, querySuccess, isAnonymous, hasCredits, autoInit, initializeFreeCredits]);
+
+  return {
+    isInitializing,
+    needsInit,
+  };
+}