@umituz/react-native-subscription 2.40.14 → 2.40.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.40.14",
+  "version": "2.40.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/presentation/useSubscriptionFlow.ts

@@ -1,15 +1,11 @@
 /**
- * Subscription Flow Hook
+ * Subscription Flow Store
  * Manages the high-level application flow: Splash -> Onboarding -> Paywall -> Main App.
- * Centralizing this in the library allows for minimal boilerplate in the main application's navigator.
+ * Uses @umituz/react-native-design-system's storage utility for standardized persistence.
  */
 
-import { useState, useEffect, useCallback } from "react";
 import { DeviceEventEmitter } from "react-native";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-
-const PAYWALL_SHOWN_KEY = "post_onboarding_paywall_shown";
-const ONBOARDING_KEY = "onboarding_complete";
+import { createStore } from "@umituz/react-native-design-system/storage";
 
 export interface SubscriptionFlowState {
   isInitialized: boolean;
@@ -20,8 +16,7 @@ export interface SubscriptionFlowState {
   isAuthModalOpen: boolean;
 }
 
-export interface UseSubscriptionFlowResult {
-  state: SubscriptionFlowState;
+export interface SubscriptionFlowActions {
   completeOnboarding: () => Promise<void>;
   closePostOnboardingPaywall: () => Promise<void>;
   closeFeedback: () => void;
@@ -29,128 +24,78 @@ export interface UseSubscriptionFlowResult {
   markPaywallShown: () => Promise<void>;
   setShowFeedback: (show: boolean) => void;
   resetFlow: () => Promise<void>;
+  setInitialized: (initialized: boolean) => void;
 }
 
-export function useSubscriptionFlow(userId?: string): UseSubscriptionFlowResult {
-  const [state, setState] = useState<SubscriptionFlowState>({
-    isInitialized: false,
-    isOnboardingComplete: false,
-    showPostOnboardingPaywall: false,
-    showFeedback: false,
-    paywallShown: false,
-    isAuthModalOpen: false,
-  });
-
-  // Initialization: Load persisted state
-  useEffect(() => {
-    const init = async () => {
-      try {
-        const [onboardingValue, paywallValue] = await Promise.all([
-          AsyncStorage.getItem(ONBOARDING_KEY),
-          AsyncStorage.getItem(PAYWALL_SHOWN_KEY),
-        ]);
-
-        setState((prev) => ({
-          ...prev,
-          isInitialized: true,
-          isOnboardingComplete: onboardingValue === "true",
-          paywallShown: paywallValue === "true",
-        }));
-      } catch (error) {
-        console.error("[useSubscriptionFlow] Initialization failed:", error);
-        setState((prev) => ({ ...prev, isInitialized: true }));
-      }
-    };
-
-    init();
-
-    // Listen for global onboarding completion events (e.g. from standalone onboarding components)
-    const subscription = DeviceEventEmitter.addListener(
-      "onboarding-complete",
-      () => {
-        setState((prev) => ({ ...prev, isOnboardingComplete: true }));
-        AsyncStorage.setItem(ONBOARDING_KEY, "true");
-      }
-    );
-
-    return () => subscription.remove();
-  }, []);
-
-  const completeOnboarding = useCallback(async () => {
-    try {
-      await AsyncStorage.setItem(ONBOARDING_KEY, "true");
-      setState((prev) => ({
-        ...prev,
+export type SubscriptionFlowStore = SubscriptionFlowState & SubscriptionFlowActions;
+
+const initialState: SubscriptionFlowState = {
+  isInitialized: false,
+  isOnboardingComplete: false,
+  showPostOnboardingPaywall: false,
+  showFeedback: false,
+  paywallShown: false,
+  isAuthModalOpen: false,
+};
+
+export const useSubscriptionFlowStore = createStore<SubscriptionFlowState, SubscriptionFlowActions>({
+  name: "subscription-flow-storage",
+  initialState,
+  persist: true,
+  // Only persist onboarding and paywall status, other states are transient
+  partialize: (state) => ({
+    isOnboardingComplete: state.isOnboardingComplete,
+    paywallShown: state.paywallShown,
+  }),
+  onRehydrate: (state) => {
+    state.setInitialized(true);
+  },
+  actions: (set) => ({
+    completeOnboarding: async () => {
+      set({
         isOnboardingComplete: true,
         showPostOnboardingPaywall: true,
-      }));
+      });
       DeviceEventEmitter.emit("onboarding-complete");
-    } catch (e) {
-      console.error("[useSubscriptionFlow] Failed to complete onboarding:", e);
-    }
-  }, []);
-
-  const closePostOnboardingPaywall = useCallback(async () => {
-    try {
-      await AsyncStorage.setItem(PAYWALL_SHOWN_KEY, "true");
-      setState((prev) => ({
-        ...prev,
+    },
+    closePostOnboardingPaywall: async () => {
+      set({
         showPostOnboardingPaywall: false,
         paywallShown: true,
-      }));
-    } catch (e) {
-      console.error("[useSubscriptionFlow] Failed to close paywall:", e);
-    }
-  }, []);
-
-  const closeFeedback = useCallback(() => {
-    setState((prev) => ({ ...prev, showFeedback: false }));
-  }, []);
-
-  const setAuthModalOpen = useCallback((open: boolean) => {
-    setState((prev) => ({ ...prev, isAuthModalOpen: open }));
-  }, []);
-
-  const setShowFeedback = useCallback((show: boolean) => {
-    setState((prev) => ({ ...prev, showFeedback: show }));
-  }, []);
-
-  const markPaywallShown = useCallback(async () => {
-    try {
-      await AsyncStorage.setItem(PAYWALL_SHOWN_KEY, "true");
-      setState((prev) => ({ ...prev, paywallShown: true }));
-    } catch (e) {
-       console.error("[useSubscriptionFlow] Failed to mark paywall shown:", e);
-    }
-  }, []);
-
-  const resetFlow = useCallback(async () => {
-    try {
-      await Promise.all([
-        AsyncStorage.removeItem(ONBOARDING_KEY),
-        AsyncStorage.removeItem(PAYWALL_SHOWN_KEY),
-      ]);
-      setState({
-        isInitialized: true,
+      });
+    },
+    closeFeedback: () => set({ showFeedback: false }),
+    setAuthModalOpen: (open: boolean) => set({ isAuthModalOpen: open }),
+    setShowFeedback: (show: boolean) => set({ showFeedback: show }),
+    markPaywallShown: async () => set({ paywallShown: true }),
+    setInitialized: (initialized: boolean) => set({ isInitialized: initialized }),
+    resetFlow: async () => {
+      set({
         isOnboardingComplete: false,
         showPostOnboardingPaywall: false,
         showFeedback: false,
         paywallShown: false,
         isAuthModalOpen: false,
       });
-    } catch (e) {
-      console.error("[useSubscriptionFlow] Failed to reset flow:", e);
-    }
-  }, []);
+    },
+  }),
+});
 
+/**
+ * Hook for backward compatibility and easier consumption.
+ * Provides a unified object structure matching the previous implementation.
+ */
+export function useSubscriptionFlow(_userId?: string) {
+  const store = useSubscriptionFlowStore();
+  
   return {
-    state,
-    completeOnboarding,
-    closePostOnboardingPaywall,
-    closeFeedback,
-    setAuthModalOpen,
-    markPaywallShown,
-    setShowFeedback,
-    resetFlow,
+    state: store,
+    completeOnboarding: store.completeOnboarding,
+    closePostOnboardingPaywall: store.closePostOnboardingPaywall,
+    closeFeedback: store.closeFeedback,
+    setAuthModalOpen: store.setAuthModalOpen,
+    markPaywallShown: store.markPaywallShown,
+    setShowFeedback: store.setShowFeedback,
+    resetFlow: store.resetFlow,
   };
 }

package/src/index.ts

@@ -45,8 +45,8 @@ export { useDeductCredit } from "./domains/credits/presentation/deduct-credit/us
 export { useFeatureGate } from "./domains/subscription/presentation/useFeatureGate";
 export { usePaywallVisibility, paywallControl } from "./domains/subscription/presentation/usePaywallVisibility";
 export { usePremium } from "./domains/subscription/presentation/usePremium";
-export { useSubscriptionFlow } from "./domains/subscription/presentation/useSubscriptionFlow";
-export type { SubscriptionFlowState, UseSubscriptionFlowResult } from "./domains/subscription/presentation/useSubscriptionFlow";
+export { useSubscriptionFlow, useSubscriptionFlowStore } from "./domains/subscription/presentation/useSubscriptionFlow";
+export type { SubscriptionFlowState, SubscriptionFlowActions, SubscriptionFlowStore } from "./domains/subscription/presentation/useSubscriptionFlow";
 export { useSubscriptionStatus } from "./domains/subscription/presentation/useSubscriptionStatus";
 export * from "./domains/subscription/presentation/useSubscriptionStatus.types";
 export * from "./presentation/hooks/feedback/usePaywallFeedback";