@umituz/react-native-subscription 2.37.15 → 2.37.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.37.15",
+  "version": "2.37.16",
   "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/domains/subscription/application/initializer/BackgroundInitializer.ts

@@ -91,6 +91,7 @@ export async function startBackgroundInitialization(config: SubscriptionInitConf
   // This prevents a Firestore permission-denied error from querying with an anonymous ID.
   if (initialRevenueCatUserId) {
     await initializeInBackground(initialRevenueCatUserId);
+    lastInitSucceeded = true;
   } else if (typeof __DEV__ !== 'undefined' && __DEV__) {
     console.log('[BackgroundInitializer] Skipping anonymous init, waiting for auth state');
   }

package/src/domains/subscription/infrastructure/hooks/useSubscriptionPackages.ts

@@ -5,12 +5,13 @@
  */
 
 import { useQuery, useQueryClient } from "@umituz/react-native-design-system";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useSyncExternalStore } from "react";
 import {
   useAuthStore,
   selectUserId,
 } from "@umituz/react-native-auth";
 import { SubscriptionManager } from '../../infrastructure/managers/SubscriptionManager';
+import { initializationState } from "../../infrastructure/state/initializationState";
 import {
   SUBSCRIPTION_QUERY_KEYS,
 } from "./subscriptionQueryKeys";
@@ -26,10 +27,18 @@ export const useSubscriptionPackages = () => {
   const queryClient = useQueryClient();
   const prevUserIdRef = useRef(userId);
 
-  // Check if initialized (BackgroundInitializer handles initialization)
+  // Reactive initialization state - triggers re-render when BackgroundInitializer completes
+  const initState = useSyncExternalStore(
+    initializationState.subscribe,
+    initializationState.getSnapshot,
+    initializationState.getSnapshot,
+  );
+
+  // For authenticated users: check reactive state matches current userId
+  // For anonymous users: check if initialized at all (reactive state or manager state)
   const isInitialized = userId
-    ? SubscriptionManager.isInitializedForUser(userId)
-    : SubscriptionManager.isInitialized();
+    ? initState.initialized && initState.userId === userId
+    : initState.initialized || SubscriptionManager.isInitialized();
 
   const query = useQuery({
     queryKey: [...SUBSCRIPTION_QUERY_KEYS.packages, userId ?? "anonymous"] as const,

package/src/domains/subscription/infrastructure/managers/SubscriptionManager.ts

@@ -8,6 +8,7 @@ import { createPackageHandler } from "./packageHandlerFactory";
 import { checkPremiumStatusFromService } from "./premiumStatusChecker";
 import { getPackagesOperation, purchasePackageOperation, restoreOperation } from "./managerOperations";
 import { performServiceInitialization } from "./initializationHandler";
+import { initializationState } from "../state/initializationState";
 
 class SubscriptionManagerImpl {
   private managerConfig: SubscriptionManagerConfig | null = null;
@@ -52,6 +53,9 @@ class SubscriptionManagerImpl {
       return existingPromise;
     }
 
+    // Mark pending so React components know to wait
+    initializationState.markPending();
+
     const promise = this.performInitialization(actualUserId);
     this.state.initCache.setPromise(promise, cacheKey);
     return promise;
@@ -70,6 +74,12 @@ class SubscriptionManagerImpl {
     this.serviceInstance = service ?? null;
     this.ensurePackageHandlerInitialized();
 
+    if (success) {
+      // Notify reactive state so React components re-render and enable their queries
+      const notifyUserId = (userId && userId.length > 0) ? userId : null;
+      initializationState.markInitialized(notifyUserId);
+    }
+
     if (typeof __DEV__ !== 'undefined' && __DEV__) {
       console.log('[SubscriptionManager] Initialization completed:', { success });
     }
@@ -111,6 +121,7 @@ class SubscriptionManagerImpl {
     this.state.reset();
     this.serviceInstance = null;
     this.packageHandler = null;
+    initializationState.reset();
   }
 
   isConfigured = (): boolean => this.managerConfig !== null;

package/src/domains/subscription/infrastructure/state/initializationState.ts

@@ -0,0 +1,66 @@
+/**
+ * Reactive Initialization State
+ * Uses useSyncExternalStore pattern to make SubscriptionManager
+ * initialization state reactive for React components.
+ *
+ * Problem: SubscriptionManager.isInitializedForUser() is a plain method call.
+ * When BackgroundInitializer completes (500ms+ after auth), React components
+ * don't re-render because there's no reactive state change.
+ *
+ * Solution: This module provides a subscribe/getSnapshot interface that
+ * React's useSyncExternalStore can use to trigger re-renders when
+ * initialization completes.
+ */
+
+type Listener = () => void;
+
+interface InitState {
+  initialized: boolean;
+  userId: string | null;
+}
+
+let state: InitState = { initialized: false, userId: null };
+const listeners = new Set<Listener>();
+
+const notifyListeners = (): void => {
+  listeners.forEach((listener) => listener());
+};
+
+export const initializationState = {
+  subscribe: (listener: Listener): (() => void) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  },
+
+  getSnapshot: (): InitState => state,
+
+  /**
+   * Called by SubscriptionManager after successful initialization.
+   * Triggers re-render in all subscribed React components.
+   */
+  markInitialized: (userId: string | null): void => {
+    state = { initialized: true, userId };
+    notifyListeners();
+  },
+
+  /**
+   * Called when initialization starts for a new user (e.g., user switch).
+   * Resets the state so queries know they need to wait.
+   */
+  markPending: (): void => {
+    state = { initialized: false, userId: null };
+    notifyListeners();
+  },
+
+  /**
+   * Check if initialized for a specific user.
+   */
+  isInitializedForUser: (userId: string | null): boolean => {
+    return state.initialized && state.userId === userId;
+  },
+
+  reset: (): void => {
+    state = { initialized: false, userId: null };
+    notifyListeners();
+  },
+};

package/src/domains/subscription/presentation/useSubscriptionStatus.ts

@@ -1,7 +1,8 @@
 import { useQuery, useQueryClient } from "@umituz/react-native-design-system";
-import { useEffect } from "react";
+import { useEffect, useSyncExternalStore } from "react";
 import { useAuthStore, selectUserId } from "@umituz/react-native-auth";
 import { SubscriptionManager } from "../infrastructure/managers/SubscriptionManager";
+import { initializationState } from "../infrastructure/state/initializationState";
 import { subscriptionEventBus, SUBSCRIPTION_EVENTS } from "../../../shared/infrastructure/SubscriptionEventBus";
 import { SubscriptionStatusResult } from "./useSubscriptionStatus.types";
 import { isAuthenticated } from "../utils/authGuards";
@@ -19,8 +20,18 @@ export const useSubscriptionStatus = (): SubscriptionStatusResult => {
   const queryClient = useQueryClient();
   const isConfigured = SubscriptionManager.isConfigured();
 
-  // Check if initialized (BackgroundInitializer handles initialization)
-  const isInitialized = userId ? SubscriptionManager.isInitializedForUser(userId) : false;
+  // Reactive initialization state - triggers re-render when BackgroundInitializer completes
+  const initState = useSyncExternalStore(
+    initializationState.subscribe,
+    initializationState.getSnapshot,
+    initializationState.getSnapshot,
+  );
+
+  // Check if initialized for this specific user (reactive)
+  const isInitialized = userId
+    ? initState.initialized && initState.userId === userId
+    : false;
+
   const queryEnabled = isAuthenticated(userId) && isConfigured && isInitialized;
 
   const { data, status, error, refetch } = useQuery({
@@ -84,7 +95,3 @@ export const useSubscriptionStatus = (): SubscriptionStatusResult => {
     refetch,
   };
 };
-
-
-
-