@umituz/react-native-subscription 1.9.0 → 1.10.0

package/package.json

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

package/src/presentation/hooks/useFeatureGate.ts

@@ -1,24 +1,24 @@
 /**
  * useFeatureGate Hook
  *
- * Centralized gate for premium features - checks auth first, then premium.
- * Generic and reusable - accepts all dependencies via params.
+ * Feature gating with TanStack Query for server state.
+ * Checks auth and premium status before allowing actions.
  *
  * Flow:
- * 1. NOT authenticated → Show auth modal (login/register)
- * 2. Authenticated but not premium → Show paywall
+ * 1. NOT authenticated → onShowAuthModal(callback)
+ * 2. Authenticated but not premium → onShowPaywall()
  * 3. Authenticated and premium → Execute action
  *
  * @example
  * ```typescript
  * const { requireFeature } = useFeatureGate({
- *   isAuthenticated: user !== null,
- *   isPremium: subscriptionStore.isPremium,
- *   onShowAuthModal: (callback) => authModalStore.show(callback),
+ *   userId: user?.uid,
+ *   isAuthenticated: !!user,
+ *   onShowAuthModal: (cb) => authModal.show(cb),
  *   onShowPaywall: () => setShowPaywall(true),
- *   getIsPremium: () => subscriptionStore.getState().isPremium,
  * });
  *
+ * // Gate a premium feature
  * const handleGenerate = () => {
  *   requireFeature(() => generateContent());
  * };
@@ -26,66 +26,70 @@
  */
 
 import { useCallback } from "react";
+import { useCredits } from "./useCredits";
 
 export interface UseFeatureGateParams {
-  /** Whether user is currently authenticated */
+  /** User ID for credits check */
+  userId: string | undefined;
+  /** Whether user is authenticated */
   isAuthenticated: boolean;
-  /** Whether user has premium access (for immediate check) */
-  isPremium: boolean;
   /** Callback to show auth modal with pending action */
   onShowAuthModal: (pendingCallback: () => void | Promise<void>) => void;
   /** Callback to show paywall */
   onShowPaywall: () => void;
-  /** Function to get fresh isPremium status (avoids stale closure after login) */
-  getIsPremium: () => boolean;
 }
 
 export interface UseFeatureGateResult {
-  /** Gate a feature - checks auth first, then premium */
+  /** Gate a feature - checks auth first, then premium (credits) */
   requireFeature: (action: () => void | Promise<void>) => void;
   /** Whether user is authenticated */
   isAuthenticated: boolean;
-  /** Whether user has premium access */
+  /** Whether user has premium access (has credits) */
   isPremium: boolean;
-  /** Whether feature access is allowed (authenticated + premium) */
+  /** Whether feature access is allowed */
   canAccess: boolean;
+  /** Loading state */
+  isLoading: boolean;
 }
 
 export function useFeatureGate(
   params: UseFeatureGateParams
 ): UseFeatureGateResult {
-  const {
-    isAuthenticated,
-    isPremium,
-    onShowAuthModal,
-    onShowPaywall,
-    getIsPremium,
-  } = params;
+  const { userId, isAuthenticated, onShowAuthModal, onShowPaywall } = params;
+
+  // Use TanStack Query to get credits (server state)
+  const { credits, isLoading } = useCredits({
+    userId,
+    enabled: isAuthenticated && !!userId,
+  });
+
+  // User is premium if they have credits
+  const isPremium = credits !== null;
 
   const requireFeature = useCallback(
     (action: () => void | Promise<void>) => {
-      // Step 1: Check if user is NOT authenticated → show auth modal
+      // Step 1: Check authentication
       if (!isAuthenticated) {
-        // After login, get FRESH premium status (not stale closure)
+        // After auth, re-check premium before executing
         onShowAuthModal(() => {
-          const currentIsPremium = getIsPremium();
-          if (currentIsPremium) {
-            action();
-          } else {
-            onShowPaywall();
-          }
+          // This callback runs after successful auth
+          // The component will re-render with new auth state
+          // and user can try the action again
+          action();
         });
         return;
       }
 
-      // Step 2: Check premium (will show paywall if not premium)
-      if (isPremium) {
-        action();
-      } else {
+      // Step 2: Check premium (has credits from TanStack Query)
+      if (!isPremium) {
         onShowPaywall();
+        return;
       }
+
+      // Step 3: User is authenticated and premium - execute action
+      action();
     },
-    [isAuthenticated, isPremium, onShowAuthModal, onShowPaywall, getIsPremium]
+    [isAuthenticated, isPremium, onShowAuthModal, onShowPaywall]
   );
 
   return {
@@ -93,5 +97,6 @@ export function useFeatureGate(
     isAuthenticated,
     isPremium,
     canAccess: isAuthenticated && isPremium,
+    isLoading,
   };
 }