@umituz/react-native-subscription 2.41.0 → 2.41.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.41.0",
+  "version": "2.41.3",
   "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/paywall/components/PaywallScreen.tsx

@@ -51,12 +51,6 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
-  // Defensive check for translations to prevent crashes
-  if (!translations) {
-    if (__DEV__) console.warn("[PaywallScreen] Translations prop is missing");
-    return null;
-  }
-
   const { 
     selectedPlanId, 
     setSelectedPlanId, 
@@ -125,6 +119,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
   }, [features, packages]);
 
   const renderItem: ListRenderItem<PaywallListItem> = useCallback(({ item }) => {
+    if (!translations) return null;
     switch (item.type) {
       case 'HEADER':
         return (
@@ -200,6 +195,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     }
   }, [heroImage, translations, tokens, selectedPlanId, bestValueIdentifier, creditAmounts, creditsLabel, setSelectedPlanId]);
 
+
   // Performance Optimization: getItemLayout for FlatList
   const getItemLayout = useCallback((_data: any, index: number) => {
     return calculatePaywallItemLayout(flatData, index);
@@ -211,6 +207,12 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     return `${item.type}-${index}`;
   }, []);
 
+  // Defensive check for translations moved to the end of hooks
+  if (!translations) {
+    if (__DEV__) console.warn("[PaywallScreen] Translations prop is missing");
+    return null;
+  }
+
   if (isLoadingPackages) {
     return (
       <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary, paddingTop: insets.top }]}>

package/src/domains/subscription/application/SubscriptionSyncProcessor.ts

@@ -4,6 +4,7 @@ import { getCreditsRepository } from "../../credits/infrastructure/CreditsReposi
 import { extractRevenueCatData } from "./SubscriptionSyncUtils";
 import { generatePurchaseId, generateRenewalId } from "./syncIdGenerators";
 import { subscriptionEventBus, SUBSCRIPTION_EVENTS } from "../../../shared/infrastructure/SubscriptionEventBus";
+import { useSubscriptionFlowStore, SyncStatus } from "../presentation/useSubscriptionFlow";
 
 /**
  * Central processor for all subscription sync operations.
@@ -26,6 +27,9 @@ export class SubscriptionSyncProcessor {
   // ─── Public API (replaces SubscriptionSyncService) ────────────────
 
   async handlePurchase(event: PurchaseCompletedEvent): Promise<void> {
+    const store = useSubscriptionFlowStore.getState();
+    store.setSyncStatus(SyncStatus.SYNCING);
+    
     if (typeof __DEV__ !== "undefined" && __DEV__) {
       console.log('[SubscriptionSyncProcessor] 🔵 PURCHASE START', {
         userId: event.userId,
@@ -41,6 +45,7 @@ export class SubscriptionSyncProcessor {
         userId: event.userId,
         productId: event.productId,
       });
+      store.setSyncStatus(SyncStatus.SUCCESS);
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         console.log('[SubscriptionSyncProcessor] 🟢 PURCHASE SUCCESS', {
           userId: event.userId,
@@ -49,10 +54,12 @@ export class SubscriptionSyncProcessor {
         });
       }
     } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      store.setSyncStatus(SyncStatus.ERROR, errorMsg);
       console.error('[SubscriptionSyncProcessor] 🔴 PURCHASE FAILED', {
         userId: event.userId,
         productId: event.productId,
-        error: error instanceof Error ? error.message : String(error),
+        error: errorMsg,
         timestamp: new Date().toISOString(),
       });
       throw error;
@@ -60,6 +67,9 @@ export class SubscriptionSyncProcessor {
   }
 
   async handleRenewal(event: RenewalDetectedEvent): Promise<void> {
+    const store = useSubscriptionFlowStore.getState();
+    store.setSyncStatus(SyncStatus.SYNCING);
+
     if (typeof __DEV__ !== "undefined" && __DEV__) {
       console.log('[SubscriptionSyncProcessor] 🔵 RENEWAL START', {
         userId: event.userId,
@@ -74,6 +84,7 @@ export class SubscriptionSyncProcessor {
         userId: event.userId,
         productId: event.productId,
       });
+      store.setSyncStatus(SyncStatus.SUCCESS);
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         console.log('[SubscriptionSyncProcessor] 🟢 RENEWAL SUCCESS', {
           userId: event.userId,
@@ -82,10 +93,12 @@ export class SubscriptionSyncProcessor {
         });
       }
     } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      store.setSyncStatus(SyncStatus.ERROR, errorMsg);
       console.error('[SubscriptionSyncProcessor] 🔴 RENEWAL FAILED', {
         userId: event.userId,
         productId: event.productId,
-        error: error instanceof Error ? error.message : String(error),
+        error: errorMsg,
         timestamp: new Date().toISOString(),
       });
       throw error;
@@ -118,14 +131,16 @@ export class SubscriptionSyncProcessor {
         });
       }
     } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error);
       console.error('[SubscriptionSyncProcessor] 🔴 STATUS CHANGE FAILED', {
         userId: event.userId,
         isPremium: event.isPremium,
         productId: event.productId,
-        error: error instanceof Error ? error.message : String(error),
+        error: errorMsg,
         timestamp: new Date().toISOString(),
       });
-      throw error;
+      // We don't set global sync error here for passive status changes to avoid UI noise
+      // throw error; 
     }
   }
 

package/src/domains/subscription/presentation/components/ManagedSubscriptionFlow.tsx

@@ -70,7 +70,13 @@ export interface ManagedSubscriptionFlowProps {
  * 
  * Use this to reduce AppNavigator boilerplate to nearly zero.
  */
-export const ManagedSubscriptionFlow: React.FC<ManagedSubscriptionFlowProps> = ({
+import { 
+  SubscriptionFlowProvider, 
+  useSubscriptionFlowStatus 
+} from "../providers/SubscriptionFlowProvider";
+import { SubscriptionFlowStatus } from "../useSubscriptionFlow";
+
+const ManagedSubscriptionFlowInner: React.FC<ManagedSubscriptionFlowProps> = ({
   children,
   navigation,
   islocalizationReady,
@@ -81,6 +87,7 @@ export const ManagedSubscriptionFlow: React.FC<ManagedSubscriptionFlowProps> = (
   offline,
 }) => {
   const tokens = useAppDesignTokens();
+  const status = useSubscriptionFlowStatus();
   const { isInitialized: isSplashComplete } = useSplashFlow({
     duration: splash?.duration || 0,
   });
@@ -123,24 +130,38 @@ export const ManagedSubscriptionFlow: React.FC<ManagedSubscriptionFlowProps> = (
     }
   };
 
-  // 1. Loading / Splash State
-  if (splash && (!isSplashComplete || !flowState.isInitialized || !islocalizationReady)) {
+  // 1. Loading / Initialization View
+  if (status === SubscriptionFlowStatus.INITIALIZING || !islocalizationReady) {
+    if (__DEV__) {
+       console.log('[ManagedSubscriptionFlow] ⏳ Rendering Initialization state', {
+         status,
+         islocalizationReady,
+         hasSplashConfig: !!splash,
+         isSplashComplete
+       });
+    }
+
+    // Even if no splash config provided, we should show a basic splash to avoid white screen
     return (
       <SplashScreen
-        appName={splash.appName}
-        tagline={splash.tagline}
+        appName={splash?.appName || "Loading..."}
+        tagline={splash?.tagline || "Please wait while we set things up"}
         colors={tokens.colors}
       />
     );
   }
 
-  // If no splash and not ready, show minimal loading
-  if (!splash && (!flowState.isInitialized || !islocalizationReady)) {
-    return null;
+  if (__DEV__) {
+    console.log('[ManagedSubscriptionFlow] 🔄 Rendering Main state', {
+      status,
+      isSplashComplete,
+      islocalizationReady,
+      showFeedback: flowState.showFeedback
+    });
   }
 
-  // 2. Onboarding State
-  if (!flowState.isOnboardingComplete) {
+  // 2. Onboarding View
+  if (status === SubscriptionFlowStatus.ONBOARDING) {
     return (
       <OnboardingScreen
         slides={onboarding.slides}
@@ -154,7 +175,7 @@ export const ManagedSubscriptionFlow: React.FC<ManagedSubscriptionFlowProps> = (
     );
   }
 
-  // 3. Main Application State
+  // 3. Application Content + Overlays
   return (
     <>
       {children}
@@ -178,3 +199,11 @@ export const ManagedSubscriptionFlow: React.FC<ManagedSubscriptionFlowProps> = (
     </>
   );
 };
+
+export const ManagedSubscriptionFlow: React.FC<ManagedSubscriptionFlowProps> = (props) => {
+  return (
+    <SubscriptionFlowProvider>
+      <ManagedSubscriptionFlowInner {...props} />
+    </SubscriptionFlowProvider>
+  );
+};

package/src/domains/subscription/presentation/providers/SubscriptionFlowProvider.tsx

@@ -0,0 +1,85 @@
+import React, { createContext, useContext, useEffect } from "react";
+import { useSubscriptionFlowStore, SubscriptionFlowStatus } from "../useSubscriptionFlow";
+import { initializationState } from "../../infrastructure/state/initializationState";
+
+interface SubscriptionFlowContextType {
+  status: SubscriptionFlowStatus;
+}
+
+const SubscriptionFlowContext = createContext<SubscriptionFlowContextType | undefined>(undefined);
+
+export const SubscriptionFlowProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const store = useSubscriptionFlowStore();
+
+  useEffect(() => {
+    // 1. Listen to background initialization state
+    const unsubscribe = initializationState.subscribe(() => {
+      const { initialized } = initializationState.getSnapshot();
+      if (__DEV__) {
+        console.log('[SubscriptionFlowProvider] 🔄 Initialization state updated:', { initialized });
+      }
+      if (initialized && !store.isInitialized) {
+        store.setInitialized(true);
+      }
+    });
+
+    // Check initial state
+    const { initialized } = initializationState.getSnapshot();
+    if (initialized && !store.isInitialized) {
+      if (__DEV__) console.log('[SubscriptionFlowProvider] ✅ Already initialized on mount');
+      store.setInitialized(true);
+    }
+
+    return () => unsubscribe();
+  }, [store.isInitialized, store.setInitialized]);
+
+  useEffect(() => {
+    // This effect manages the overall flow status transition
+    if (__DEV__) {
+       console.log('[SubscriptionFlowProvider] 🧠 Calculating Status Transition', {
+         isInitialized: store.isInitialized,
+         isOnboardingComplete: store.isOnboardingComplete,
+         showPostOnboardingPaywall: store.showPostOnboardingPaywall,
+         currentStatus: store.status
+       });
+    }
+
+    if (!store.isInitialized) {
+      store.setStatus(SubscriptionFlowStatus.INITIALIZING);
+      return;
+    }
+
+    if (!store.isOnboardingComplete) {
+      store.setStatus(SubscriptionFlowStatus.ONBOARDING);
+      return;
+    }
+
+    if (store.showPostOnboardingPaywall) {
+      store.setStatus(SubscriptionFlowStatus.POST_ONBOARDING_PAYWALL);
+      return;
+    }
+
+    if (__DEV__) console.log('[SubscriptionFlowProvider] 🏆 Flow is READY');
+    store.setStatus(SubscriptionFlowStatus.READY);
+  }, [
+    store.isInitialized,
+    store.isOnboardingComplete,
+    store.showPostOnboardingPaywall,
+    store.paywallShown,
+    store
+  ]);
+
+  return (
+    <SubscriptionFlowContext.Provider value={{ status: store.status }}>
+      {children}
+    </SubscriptionFlowContext.Provider>
+  );
+};
+
+export const useSubscriptionFlowStatus = () => {
+  const context = useContext(SubscriptionFlowContext);
+  if (context === undefined) {
+    throw new Error("useSubscriptionFlowStatus must be used within a SubscriptionFlowProvider");
+  }
+  return context.status;
+};

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

@@ -7,7 +7,25 @@
 import { DeviceEventEmitter } from "react-native";
 import { createStore } from "@umituz/react-native-design-system/storage";
 
+export enum SubscriptionFlowStatus {
+  INITIALIZING = "INITIALIZING",
+  ONBOARDING = "ONBOARDING",
+  PAYWALL = "PAYWALL",
+  READY = "READY",
+  POST_ONBOARDING_PAYWALL = "POST_ONBOARDING_PAYWALL",
+}
+
+export enum SyncStatus {
+  IDLE = "IDLE",
+  SYNCING = "SYNCING",
+  SUCCESS = "SUCCESS",
+  ERROR = "ERROR",
+}
+
 export interface SubscriptionFlowState {
+  status: SubscriptionFlowStatus;
+  syncStatus: SyncStatus;
+  syncError: string | null;
   isInitialized: boolean;
   isOnboardingComplete: boolean;
   showPostOnboardingPaywall: boolean;
@@ -25,11 +43,16 @@ export interface SubscriptionFlowActions {
   setShowFeedback: (show: boolean) => void;
   resetFlow: () => Promise<void>;
   setInitialized: (initialized: boolean) => void;
+  setStatus: (status: SubscriptionFlowStatus) => void;
+  setSyncStatus: (status: SyncStatus, error?: string | null) => void;
 }
 
 export type SubscriptionFlowStore = SubscriptionFlowState & SubscriptionFlowActions;
 
 const initialState: SubscriptionFlowState = {
+  status: SubscriptionFlowStatus.INITIALIZING,
+  syncStatus: SyncStatus.IDLE,
+  syncError: null,
   isInitialized: false,
   isOnboardingComplete: false,
   showPostOnboardingPaywall: false,
@@ -55,6 +78,7 @@ export const useSubscriptionFlowStore = createStore<SubscriptionFlowState, Subsc
       set({
         isOnboardingComplete: true,
         showPostOnboardingPaywall: true,
+        status: SubscriptionFlowStatus.POST_ONBOARDING_PAYWALL,
       });
       DeviceEventEmitter.emit("onboarding-complete");
     },
@@ -62,6 +86,7 @@ export const useSubscriptionFlowStore = createStore<SubscriptionFlowState, Subsc
       set({
         showPostOnboardingPaywall: false,
         paywallShown: true,
+        status: SubscriptionFlowStatus.READY,
       });
     },
     closeFeedback: () => set({ showFeedback: false }),
@@ -69,8 +94,14 @@ export const useSubscriptionFlowStore = createStore<SubscriptionFlowState, Subsc
     setShowFeedback: (show: boolean) => set({ showFeedback: show }),
     markPaywallShown: async () => set({ paywallShown: true }),
     setInitialized: (initialized: boolean) => set({ isInitialized: initialized }),
+    setStatus: (status: SubscriptionFlowStatus) => set({ status }),
+    setSyncStatus: (syncStatus: SyncStatus, syncError: string | null = null) => 
+      set({ syncStatus, syncError }),
     resetFlow: async () => {
       set({
+        status: SubscriptionFlowStatus.INITIALIZING,
+        syncStatus: SyncStatus.IDLE,
+        syncError: null,
         isOnboardingComplete: false,
         showPostOnboardingPaywall: false,
         showFeedback: false,

package/src/index.ts

@@ -97,6 +97,8 @@ export { createPaywallTranslations, createFeedbackTranslations } from "./domains
 // Root Flow Components
 export { ManagedSubscriptionFlow } from "./domains/subscription/presentation/components/ManagedSubscriptionFlow";
 export type { ManagedSubscriptionFlowProps } from "./domains/subscription/presentation/components/ManagedSubscriptionFlow";
+export { SubscriptionFlowStatus } from "./domains/subscription/presentation/useSubscriptionFlow";
+export { SubscriptionFlowProvider, useSubscriptionFlowStatus } from "./domains/subscription/presentation/providers/SubscriptionFlowProvider";
 
 // Purchase Loading Overlay
 export { PurchaseLoadingOverlay } from "./domains/subscription/presentation/components/overlay/PurchaseLoadingOverlay";