@umituz/react-native-subscription 2.43.21 → 2.44.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.43.21",
+  "version": "2.44.1",
   "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.renderItem.tsx

@@ -0,0 +1,115 @@
+/**
+ * PaywallScreen Render Item Component
+ * Separated for better maintainability
+ */
+
+import React from "react";
+import { View, ListRenderItem } from "react-native";
+import type { ImageSourcePropType } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { Image } from "expo-image";
+import { PlanCard } from "./PlanCard";
+import type { PaywallListItem } from "../utils/paywallLayoutUtils";
+import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
+
+interface PaywallRenderItemProps {
+  item: PaywallListItem;
+  tokens: any;
+  translations: any;
+  heroImage?: ImageSourcePropType;
+  selectedPlanId?: string;
+  bestValueIdentifier?: string;
+  creditAmounts?: Record<string, number>;
+  creditsLabel?: string;
+  onSelectPlan?: (planId: string) => void;
+}
+
+export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
+  item,
+  tokens,
+  translations,
+  heroImage,
+  selectedPlanId,
+  bestValueIdentifier,
+  creditAmounts,
+  creditsLabel,
+  onSelectPlan,
+}) => {
+  if (!translations) return null;
+
+  switch (item.type) {
+    case 'HEADER':
+      return (
+        <View key="header">
+          {/* Hero Image */}
+          {heroImage && (
+            <View style={styles.heroContainer}>
+              <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={200} />
+            </View>
+          )}
+
+          {/* Header Text */}
+          <View style={styles.header}>
+            <AtomicText type="headlineLarge" style={[styles.title, { color: tokens.colors.textPrimary }]}>
+              {translations.title}
+            </AtomicText>
+            {translations.subtitle && (
+              <AtomicText type="bodyMedium" style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>
+                {translations.subtitle}
+              </AtomicText>
+            )}
+          </View>
+        </View>
+      );
+
+    case 'FEATURE_HEADER':
+      return (
+        <View key="feat-header" style={styles.sectionHeader}>
+          <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
+            {translations.featuresTitle || "WHAT'S INCLUDED"}
+          </AtomicText>
+        </View>
+      );
+
+    case 'FEATURE':
+      return (
+        <View key={`feat-${item.feature.text}`} style={[styles.featureRow, { marginHorizontal: 24, marginBottom: 16 }]}>
+          <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primary }]}>
+            <AtomicIcon name={item.feature.icon} customSize={16} customColor={tokens.colors.onPrimary} />
+          </View>
+          <AtomicText type="bodyMedium" style={[styles.featureText, { color: tokens.colors.textPrimary }]}>
+            {item.feature.text}
+          </AtomicText>
+        </View>
+      );
+
+    case 'PLAN_HEADER':
+      return (
+        <View key="plan-header" style={styles.sectionHeader}>
+          <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
+            {translations.plansTitle || "CHOOSE YOUR PLAN"}
+          </AtomicText>
+        </View>
+      );
+
+    case 'PLAN': {
+      const pid = item.pkg.product.identifier;
+      return (
+        <PlanCard
+          key={pid}
+          pkg={item.pkg}
+          isSelected={selectedPlanId === pid}
+          badge={bestValueIdentifier === pid ? translations.bestValueBadgeText : undefined}
+          creditAmount={creditAmounts?.[pid]}
+          creditsLabel={creditsLabel}
+          onSelect={() => onSelectPlan?.(pid)}
+        />
+      );
+    }
+
+    default:
+      return null;
+  }
+});
+
+PaywallRenderItem.displayName = "PaywallRenderItem";

package/src/domains/paywall/components/PaywallScreen.tsx

@@ -2,6 +2,7 @@
  * Paywall Screen Component
  *
  * Full-screen paywall with optimized FlatList for performance and modern design.
+ * Render logic separated to PaywallScreen.renderItem.tsx for better maintainability.
  */
 
 import React, { useCallback, useEffect, useMemo } from "react";
@@ -14,11 +15,9 @@ import {
   StatusBar,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
-import { AtomicText, AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
+import { AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
 import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { Image } from "expo-image";
-import { PlanCard } from "./PlanCard";
 import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
 import { PaywallFooter } from "./PaywallFooter";
 import { usePaywallActions } from "../hooks/usePaywallActions";
@@ -28,6 +27,7 @@ import {
   type PaywallListItem
 } from "../utils/paywallLayoutUtils";
 import { hasItems } from "../../../shared/utils/arrayUtils";
+import { PaywallRenderItem } from "./PaywallScreen.renderItem";
 
 export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) => {
   const navigation = useNavigation();
@@ -115,7 +115,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
   // Prepare flat data for the list
   const flatData = useMemo(() => {
     const data: PaywallListItem[] = [];
-    
+
     // 1. Header (Hero, Title, Subtitle)
     data.push({ type: 'HEADER' });
 
@@ -139,82 +139,20 @@ 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 (
-          <View key="header">
-            {/* Hero Image */}
-            {heroImage && (
-              <View style={styles.heroContainer}>
-                <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={200} />
-              </View>
-            )}
-
-            {/* Header Text */}
-            <View style={styles.header}>
-              <AtomicText type="headlineLarge" style={[styles.title, { color: tokens.colors.textPrimary }]}>
-                {translations.title}
-              </AtomicText>
-              {translations.subtitle && (
-                <AtomicText type="bodyMedium" style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>
-                  {translations.subtitle}
-                </AtomicText>
-              )}
-            </View>
-          </View>
-        );
-
-      case 'FEATURE_HEADER':
-        return (
-          <View key="feat-header" style={styles.sectionHeader}>
-            <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
-              {translations.featuresTitle || "WHAT'S INCLUDED"}
-            </AtomicText>
-          </View>
-        );
-
-      case 'FEATURE':
-        return (
-          <View key={`feat-${item.feature.text}`} style={[styles.featureRow, { marginHorizontal: 24, marginBottom: 16 }]}>
-            <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primary }]}>
-              <AtomicIcon name={item.feature.icon} customSize={16} customColor={tokens.colors.onPrimary} />
-            </View>
-            <AtomicText type="bodyMedium" style={[styles.featureText, { color: tokens.colors.textPrimary }]}>
-              {item.feature.text}
-            </AtomicText>
-          </View>
-        );
-
-      case 'PLAN_HEADER':
-        return (
-          <View key="plan-header" style={styles.sectionHeader}>
-            <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
-              {translations.plansTitle || "CHOOSE YOUR PLAN"}
-            </AtomicText>
-          </View>
-        );
-
-      case 'PLAN': {
-        const pid = item.pkg.product.identifier;
-        return (
-          <PlanCard
-            key={pid}
-            pkg={item.pkg}
-            isSelected={selectedPlanId === pid}
-            badge={bestValueIdentifier === pid ? translations.bestValueBadgeText : undefined}
-            creditAmount={creditAmounts?.[pid]}
-            creditsLabel={creditsLabel}
-            onSelect={() => setSelectedPlanId(pid)}
-          />
-        );
-      }
-
-      default:
-        return null;
-    }
-  }, [heroImage, translations, tokens, selectedPlanId, bestValueIdentifier, creditAmounts, creditsLabel, setSelectedPlanId]);
-
+    return (
+      <PaywallRenderItem
+        item={item}
+        tokens={tokens}
+        translations={translations}
+        heroImage={heroImage}
+        selectedPlanId={selectedPlanId}
+        bestValueIdentifier={bestValueIdentifier}
+        creditAmounts={creditAmounts}
+        creditsLabel={creditsLabel}
+        onSelectPlan={setSelectedPlanId}
+      />
+    );
+  }, [tokens, translations, heroImage, selectedPlanId, bestValueIdentifier, creditAmounts, creditsLabel, setSelectedPlanId]);
 
   // Performance Optimization: getItemLayout for FlatList
   const getItemLayout = useCallback((_data: ArrayLike<PaywallListItem> | null, index: number) => {
@@ -227,12 +165,13 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     return `${item.type}-${index}`;
   }, []);
 
-  // Defensive check for translations moved to the end of hooks
+  // Defensive check for translations
   if (!translations) {
     if (__DEV__) console.warn("[PaywallScreen] Translations prop is missing");
     return null;
   }
 
+  // Loading state
   if (isSyncing) {
     return (
       <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary, paddingTop: insets.top }]}>
@@ -246,12 +185,12 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
       <StatusBar barStyle="light-content" />
-      
+
       {/* Absolute Close Button */}
-      <View style={{ 
-        position: 'absolute', 
-        top: Math.max(insets.top, 16), 
-        right: 0, 
+      <View style={{
+        position: 'absolute',
+        top: Math.max(insets.top, 16),
+        right: 0,
         zIndex: 10,
       }}>
         <TouchableOpacity
@@ -275,46 +214,29 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
         maxToRenderPerBatch={10}
         updateCellsBatchingPeriod={50}
         contentContainerStyle={[
-          styles.listContent, 
-          { 
+          styles.listContent,
+          {
             paddingTop: Math.max(insets.top, 20) + 40,
-            paddingBottom: 220 
+            paddingBottom: 220
           }
         ]}
         showsVerticalScrollIndicator={false}
       />
 
       {/* Fixed Footer */}
-      <View style={[
-        styles.stickyFooter, 
-        { 
-          backgroundColor: tokens.colors.backgroundPrimary,
-          paddingBottom: Math.max(insets.bottom, 24)
-        }
-      ]}>
-        <TouchableOpacity
-          onPress={handlePurchase}
-          disabled={isProcessing || !selectedPlanId}
-          style={[
-            styles.cta,
-            { backgroundColor: tokens.colors.primary },
-            (isProcessing || !selectedPlanId) && styles.ctaDisabled
-          ]}
-          activeOpacity={0.8}
-        >
-          <AtomicText type="titleLarge" style={[styles.ctaText, { color: tokens.colors.onPrimary }]}>
-            {isProcessing ? translations.processingText : translations.purchaseButtonText}
-          </AtomicText>
-        </TouchableOpacity>
-
-        <PaywallFooter
-          translations={translations}
-          legalUrls={legalUrls}
-          isProcessing={isProcessing}
-          onRestore={handleRestore}
-          onLegalClick={handleLegalUrl}
-        />
-      </View>
+      <PaywallFooter
+        translations={translations}
+        legalUrls={legalUrls}
+        isProcessing={isProcessing}
+        selectedPlanId={selectedPlanId}
+        packages={packages}
+        onPurchase={handlePurchase}
+        onRestore={handleRestore}
+        onLegalUrl={handleLegalUrl}
+        insets={insets}
+        tokens={tokens}
+        styles={styles}
+      />
     </View>
   );
 });

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

@@ -0,0 +1,187 @@
+/**
+ * State Components for ManagedSubscriptionFlow
+ * Separated for better maintainability
+ */
+
+import React from "react";
+import type { NavigationProp } from "@react-navigation/native";
+import { SplashScreen } from "@umituz/react-native-design-system/molecules";
+import { OnboardingScreen } from "@umituz/react-native-design-system/onboarding";
+import { useSubscriptionFlowStore } from "../useSubscriptionFlow";
+import type { ManagedSubscriptionFlowProps } from "./ManagedSubscriptionFlow";
+import { PaywallScreen } from "../../../paywall/components/PaywallScreen";
+import { PaywallFeedbackScreen } from "./feedback/PaywallFeedbackScreen";
+import { usePaywallFeedbackSubmit } from "../../../../presentation/hooks/feedback/useFeedbackSubmit";
+
+// ============================================================================
+// INITIALIZING STATE
+// ============================================================================
+
+interface InitializingStateProps {
+  tokens: any;
+  splash?: ManagedSubscriptionFlowProps["splash"];
+}
+
+export const InitializingState: React.FC<InitializingStateProps> = ({ tokens, splash }) => (
+  <SplashScreen
+    appName={splash?.appName || "Loading..."}
+    tagline={splash?.tagline || "Please wait while we set things up"}
+    colors={tokens.colors}
+  />
+);
+
+// ============================================================================
+// ONBOARDING STATE
+// ============================================================================
+
+interface OnboardingStateProps {
+  config: ManagedSubscriptionFlowProps["onboarding"];
+  onComplete: () => void;
+}
+
+export const OnboardingState: React.FC<OnboardingStateProps> = ({ config, onComplete }) => (
+  <OnboardingScreen
+    slides={config.slides}
+    onComplete={onComplete}
+    showSkipButton={config.showSkipButton ?? true}
+    showBackButton={config.showBackButton ?? true}
+    showProgressBar={config.showProgressBar ?? true}
+    themeColors={config.themeColors}
+    translations={config.translations}
+  />
+);
+
+// ============================================================================
+// PAYWALL STATE
+// ============================================================================
+
+interface PaywallStateProps {
+  config: ManagedSubscriptionFlowProps["paywall"];
+  packages: any[];
+  isPremium: boolean;
+  credits: number | null;
+  isSyncing: boolean;
+  onPurchase: (pkgId: string) => Promise<any>;
+  onRestore: () => Promise<any>;
+  onClose: (purchased: boolean) => void;
+}
+
+export const PaywallState: React.FC<PaywallStateProps> = ({
+  config,
+  packages,
+  isPremium,
+  credits,
+  isSyncing,
+  onPurchase,
+  onRestore,
+  onClose,
+}) => {
+  const [purchaseSuccessful, setPurchaseSuccessful] = React.useState(false);
+
+  const handlePurchase = async (pkgId: string) => {
+    const result = await onPurchase(pkgId);
+    if (result?.success) {
+      setPurchaseSuccessful(true);
+    }
+    return result;
+  };
+
+  const handleClose = () => {
+    onClose(purchaseSuccessful);
+  };
+
+  return (
+    <PaywallScreen
+      translations={config.translations}
+      legalUrls={config.legalUrls}
+      features={config.features}
+      bestValueIdentifier={config.bestValueIdentifier}
+      creditsLabel={config.creditsLabel}
+      heroImage={config.heroImage}
+      source="onboarding"
+      packages={packages}
+      isPremium={isPremium}
+      credits={credits}
+      isSyncing={isSyncing}
+      onPurchase={handlePurchase}
+      onRestore={onRestore}
+      onClose={handleClose}
+    />
+  );
+};
+
+// ============================================================================
+// FEEDBACK STATE
+// ============================================================================
+
+interface FeedbackStateProps {
+  config: ManagedSubscriptionFlowProps["feedback"];
+  onClose: () => void;
+}
+
+export const FeedbackState: React.FC<FeedbackStateProps> = ({ config, onClose }) => {
+  const { submit: internalSubmit } = usePaywallFeedbackSubmit();
+
+  const handleSubmit = async (data: { reason: string; otherText?: string }) => {
+    if (config.onSubmit) {
+      await config.onSubmit(data);
+    } else {
+      const description = data.otherText ? `${data.reason}: ${data.otherText}` : data.reason;
+      await internalSubmit(description);
+    }
+  };
+
+  return (
+    <PaywallFeedbackScreen
+      onClose={onClose}
+      onSubmit={handleSubmit}
+      translations={config.translations}
+    />
+  );
+};
+
+// ============================================================================
+// READY STATE (APP CONTENT)
+// ============================================================================
+
+interface ReadyStateProps {
+  children: React.ReactNode;
+  offline?: ManagedSubscriptionFlowProps["offline"];
+  feedbackConfig: ManagedSubscriptionFlowProps["feedback"];
+  showFeedback: boolean;
+  tokens: any;
+  onFeedbackClose: () => void;
+}
+
+export const ReadyState: React.FC<ReadyStateProps> = ({
+  children,
+  offline,
+  feedbackConfig,
+  showFeedback,
+  tokens,
+  onFeedbackClose,
+}) => {
+  const { OfflineBanner } = require("@umituz/react-native-design-system/offline");
+
+  return (
+    <>
+      {children}
+
+      {offline && (
+        <OfflineBanner
+          visible={offline.isOffline}
+          message={offline.message}
+          backgroundColor={offline.backgroundColor || tokens.colors.error}
+          position={offline.position || "top"}
+        />
+      )}
+
+      {showFeedback && (
+        <FeedbackState
+          config={feedbackConfig}
+          onClose={onFeedbackClose}
+        />
+      )}
+    </>
+  );
+};

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

@@ -1,19 +1,26 @@
-import React, { useState, useEffect, useCallback } from "react";
+/**
+ * ManagedSubscriptionFlow
+ *
+ * Clean state machine-based flow orchestration.
+ * All state components separated to individual files.
+ */
+
+import React, { useEffect } from "react";
 import type { NavigationProp } from "@react-navigation/native";
 import type { ImageSourcePropType } from "react-native";
-import { SplashScreen, useSplashFlow } from "@umituz/react-native-design-system/molecules";
-import { OnboardingScreen } from "@umituz/react-native-design-system/onboarding";
-import { OfflineBanner } from "@umituz/react-native-design-system/offline";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { usePremiumStatus } from "../../presentation/usePremiumStatus";
 import { usePremiumPackages } from "../../presentation/usePremiumPackages";
 import { usePremiumActions } from "../../presentation/usePremiumActions";
-import { usePaywallOrchestrator } from "../../../paywall/hooks/usePaywallOrchestrator";
-import { PaywallFeedbackScreen } from "../../../subscription/presentation/components/feedback/PaywallFeedbackScreen";
-import { PaywallFeedbackTranslations } from "../../../subscription/presentation/components/feedback/PaywallFeedbackScreen.types";
-import { PaywallTranslations, PaywallLegalUrls, SubscriptionFeature } from "../../../paywall/entities/types";
-import { usePaywallFeedbackSubmit } from "../../../../presentation/hooks/feedback/useFeedbackSubmit";
-import { PaywallScreen } from "../../../paywall/components/PaywallScreen";
+import { useSubscriptionFlowStore, SubscriptionFlowStatus } from "../useSubscriptionFlow";
+import type { PaywallFeedbackTranslations } from "./feedback/PaywallFeedbackScreen.types";
+import type { PaywallTranslations, PaywallLegalUrls, SubscriptionFeature } from "../../../paywall/entities/types";
+import {
+  InitializingState,
+  OnboardingState,
+  PaywallState,
+  ReadyState,
+} from "./ManagedSubscriptionFlow.states";
 
 export interface ManagedSubscriptionFlowProps {
   children: React.ReactNode;
@@ -66,23 +73,13 @@ export interface ManagedSubscriptionFlowProps {
   };
 }
 
-/**
- * ManagedSubscriptionFlow
- * 
- * A high-level layout component that orchestrates the entire application flow:
- * Splash -> Onboarding -> [Managed Paywall Screens] -> Main Application Stack.
- * 
- * Use this to reduce AppNavigator boilerplate to nearly zero.
- */
 import {
   SubscriptionFlowProvider,
   useSubscriptionFlowStatus
 } from "../providers/SubscriptionFlowProvider";
-import { useSubscriptionFlowStore, SubscriptionFlowStatus } from "../useSubscriptionFlow";
 
-const ManagedSubscriptionFlowInner = React.memo<ManagedSubscriptionFlowProps>(({
+const ManagedSubscriptionFlowInner: React.FC<ManagedSubscriptionFlowProps> = ({
   children,
-  navigation,
   islocalizationReady,
   splash,
   onboarding,
@@ -92,168 +89,91 @@ const ManagedSubscriptionFlowInner = React.memo<ManagedSubscriptionFlowProps>(({
 }) => {
   const tokens = useAppDesignTokens();
   const status = useSubscriptionFlowStatus();
-  const { isInitialized: isSplashComplete } = useSplashFlow({
-    duration: splash?.duration || 0,
-  });
 
-  // Hooks for paywall (called at component level, not inside conditional render)
-  const { isPremium, isSyncing, credits } = usePremiumStatus();
+  // Premium hooks
+  const { isPremium, isSyncing, credits, isLoading: isPremiumLoading } = usePremiumStatus();
   const { packages } = usePremiumPackages();
-  const { purchasePackage: originalPurchasePackage, restorePurchase } = usePremiumActions();
-  const { closePostOnboardingPaywall } = useSubscriptionFlowStore();
-
-  // Track if purchase was successful to avoid showing feedback
-  const [purchaseSuccessful, setPurchaseSuccessful] = useState(false);
-
-  // Wrap purchasePackage to track success
-  const purchasePackage = useCallback(async (pkgId: string) => {
-    const result = await originalPurchasePackage(pkgId);
-    if (result?.success) {
-      setPurchaseSuccessful(true);
-    }
-    return result;
-  }, [originalPurchasePackage]);
+  const { purchasePackage, restorePurchase } = usePremiumActions();
 
-  // Wrap onClose to pass purchase status
-  const handleClose = useCallback(() => {
-    closePostOnboardingPaywall({ purchased: purchaseSuccessful });
-  }, [closePostOnboardingPaywall, purchaseSuccessful]);
+  // Store actions
+  const completeOnboarding = useSubscriptionFlowStore((s) => s.completeOnboarding);
+  const showPaywall = useSubscriptionFlowStore((s) => s.showPaywall);
+  const completePaywall = useSubscriptionFlowStore((s) => s.completePaywall);
+  const hideFeedback = useSubscriptionFlowStore((s) => s.hideFeedback);
+  const showFeedbackScreen = useSubscriptionFlowStore((s) => s.showFeedbackScreen);
+  const showFeedback = useSubscriptionFlowStore((s) => s.showFeedback);
 
-  const [isNavReady, setIsNavReady] = useState(false);
+  // ========================================================================
+  // STATE TRANSITIONS
+  // ========================================================================
 
-  // Mark navigation tree as ready after splash and localization
   useEffect(() => {
-    if (isSplashComplete && islocalizationReady) {
-      const timer = setTimeout(() => setIsNavReady(true), 500);
-      return () => clearTimeout(timer);
+    if (status === SubscriptionFlowStatus.CHECK_PREMIUM && !isPremiumLoading) {
+      const paywallShown = useSubscriptionFlowStore.getState().paywallShown;
+
+      if (isPremium) {
+        completePaywall(true);
+      } else if (!paywallShown) {
+        showPaywall();
+      } else {
+        completePaywall(false);
+      }
     }
-  }, [isSplashComplete, islocalizationReady]);
-
-  const {
-    flowState,
-    setShowFeedback,
-    completeOnboarding
-  } = usePaywallOrchestrator({
-    navigation,
-    isNavReady,
-    isLocalizationReady: islocalizationReady,
-    translations: paywall.translations,
-    features: paywall.features,
-    legalUrls: paywall.legalUrls,
-    heroImage: paywall.heroImage,
-    bestValueIdentifier: paywall.bestValueIdentifier,
-    creditsLabel: paywall.creditsLabel,
-    disableNavigation: true, // Paywall is rendered inline, don't navigate
-  });
+  }, [status, isPremium, isPremiumLoading, showPaywall, completePaywall]);
 
-  const { submit: internalSubmit } = usePaywallFeedbackSubmit();
-
-  const handleFeedbackSubmit = async (data: { reason: string; otherText?: string }) => {
-    if (feedback.onSubmit) {
-      await feedback.onSubmit(data);
-    } else {
-      const description = data.otherText ? `${data.reason}: ${data.otherText}` : data.reason;
-      await internalSubmit(description);
-    }
-  };
-
-  // 1. Loading / Initialization View
-  if (status === SubscriptionFlowStatus.INITIALIZING || !islocalizationReady) {
-    if (__DEV__) {
-       console.log('[ManagedSubscriptionFlow] ⏳ Rendering Initialization state', {
-         status,
-         islocalizationReady,
-         hasSplashConfig: !!splash,
-         isSplashComplete
-       });
+  useEffect(() => {
+    if (status === SubscriptionFlowStatus.READY && showFeedback) {
+      showFeedbackScreen();
     }
+  }, [status, showFeedback, showFeedbackScreen]);
 
-    // Even if no splash config provided, we should show a basic splash to avoid white screen
-    return (
-      <SplashScreen
-        appName={splash?.appName || "Loading..."}
-        tagline={splash?.tagline || "Please wait while we set things up"}
-        colors={tokens.colors}
-      />
-    );
-  }
-
-  if (__DEV__) {
-    console.log('[ManagedSubscriptionFlow] 🔄 Rendering Main state', {
-      status,
-      isSplashComplete,
-      islocalizationReady,
-      showFeedback: flowState.showFeedback
-    });
-  }
+  // ========================================================================
+  // RENDER BY STATE
+  // ========================================================================
 
-  // 2. Onboarding View
-  if (status === SubscriptionFlowStatus.ONBOARDING) {
-    return (
-      <OnboardingScreen
-        slides={onboarding.slides}
-        onComplete={completeOnboarding}
-        showSkipButton={onboarding.showSkipButton ?? true}
-        showBackButton={onboarding.showBackButton ?? true}
-        showProgressBar={onboarding.showProgressBar ?? true}
-        themeColors={onboarding.themeColors}
-        translations={onboarding.translations}
-      />
-    );
+  if (!islocalizationReady || status === SubscriptionFlowStatus.INITIALIZING) {
+    return <InitializingState tokens={tokens} splash={splash} />;
   }
 
-  // 2.5. Post-Onboarding Paywall View
-  if (status === SubscriptionFlowStatus.POST_ONBOARDING_PAYWALL) {
-    if (__DEV__) {
-      console.log('[ManagedSubscriptionFlow] 💳 Rendering Post-Onboarding Paywall', {
-        hasPackages: flowState.showPostOnboardingPaywall
-      });
-    }
+  switch (status) {
+    case SubscriptionFlowStatus.ONBOARDING:
+      return <OnboardingState config={onboarding} onComplete={completeOnboarding} />;
+
+    case SubscriptionFlowStatus.CHECK_PREMIUM:
+      return <InitializingState tokens={tokens} splash={splash} />;
+
+    case SubscriptionFlowStatus.POST_ONBOARDING_PAYWALL:
+      return (
+        <PaywallState
+          config={paywall}
+          packages={packages}
+          isPremium={isPremium}
+          credits={credits}
+          isSyncing={isSyncing}
+          onPurchase={purchasePackage}
+          onRestore={restorePurchase}
+          onClose={(purchased) => completePaywall(purchased)}
+        />
+      );
+
+    case SubscriptionFlowStatus.READY:
+      return (
+        <ReadyState
+          children={children}
+          offline={offline}
+          feedbackConfig={feedback}
+          showFeedback={showFeedback}
+          tokens={tokens}
+          onFeedbackClose={hideFeedback}
+        />
+      );
 
-    return (
-      <PaywallScreen
-        translations={paywall.translations}
-        legalUrls={paywall.legalUrls}
-        features={paywall.features}
-        bestValueIdentifier={paywall.bestValueIdentifier}
-        creditsLabel={paywall.creditsLabel}
-        heroImage={paywall.heroImage}
-        source="onboarding"
-        packages={packages}
-        isPremium={isPremium}
-        credits={credits}
-        isSyncing={isSyncing}
-        onPurchase={purchasePackage}
-        onRestore={restorePurchase}
-        onClose={handleClose}
-      />
-    );
+    default:
+      return <InitializingState tokens={tokens} splash={splash} />;
   }
+};
 
-  // 3. Application Content + Overlays
-  return (
-    <>
-      {children}
-      
-      {offline && (
-        <OfflineBanner
-          visible={offline.isOffline}
-          message={offline.message}
-          backgroundColor={offline.backgroundColor || tokens.colors.error}
-          position={offline.position || "top"}
-        />
-      )}
-
-      {flowState.showFeedback && (
-        <PaywallFeedbackScreen
-          onClose={() => setShowFeedback(false)}
-          onSubmit={handleFeedbackSubmit}
-          translations={feedback.translations}
-        />
-      )}
-    </>
-  );
-});
+ManagedSubscriptionFlowInner.displayName = "ManagedSubscriptionFlowInner";
 
 export const ManagedSubscriptionFlow: React.FC<ManagedSubscriptionFlowProps> = (props) => {
   return (

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

@@ -1,7 +1,8 @@
 /**
- * Subscription Flow Store
- * Manages the high-level application flow: Splash -> Onboarding -> Paywall -> Main App.
- * Uses @umituz/react-native-design-system's storage utility for standardized persistence.
+ * Subscription Flow State Machine
+ *
+ * Single source of truth for app flow state.
+ * Clean state transitions without complex if/else logic.
  */
 
 import { createStore } from "@umituz/react-native-design-system/storage";
@@ -10,9 +11,9 @@ import { subscriptionEventBus, FLOW_EVENTS } from "../../../shared/infrastructur
 export enum SubscriptionFlowStatus {
   INITIALIZING = "INITIALIZING",
   ONBOARDING = "ONBOARDING",
-  PAYWALL = "PAYWALL",
-  READY = "READY",
+  CHECK_PREMIUM = "CHECK_PREMIUM",
   POST_ONBOARDING_PAYWALL = "POST_ONBOARDING_PAYWALL",
+  READY = "READY",
 }
 
 export enum SyncStatus {
@@ -23,28 +24,46 @@ export enum SyncStatus {
 }
 
 export interface SubscriptionFlowState {
+  // Flow state
   status: SubscriptionFlowStatus;
+
+  // Sync state
   syncStatus: SyncStatus;
   syncError: string | null;
-  isInitialized: boolean;
+
+  // Onboarding state
   isOnboardingComplete: boolean;
-  showPostOnboardingPaywall: boolean;
-  showFeedback: boolean;
+
+  // Paywall state
   paywallShown: boolean;
+
+  // Feedback state
+  showFeedback: boolean;
+
+  // Auth modal state
   isAuthModalOpen: boolean;
+
+  // Initialization flag
+  isInitialized: boolean;
 }
 
 export interface SubscriptionFlowActions {
-  completeOnboarding: () => Promise<void>;
-  closePostOnboardingPaywall: (params?: { purchased: boolean }) => Promise<void>;
-  closeFeedback: () => void;
+  // Flow actions
+  completeOnboarding: () => void;
+  checkPremiumStatus: () => void;
+  showPaywall: () => void;
+  completePaywall: (purchased: boolean) => void;
+  showFeedbackScreen: () => void;
+  hideFeedback: () => void;
+
+  // Auth actions
   setAuthModalOpen: (open: boolean) => void;
-  markPaywallShown: () => Promise<void>;
-  setShowFeedback: (show: boolean) => void;
-  resetFlow: () => Promise<void>;
-  setInitialized: (initialized: boolean) => void;
-  setStatus: (status: SubscriptionFlowStatus) => void;
+
+  // Sync actions
   setSyncStatus: (status: SyncStatus, error?: string | null) => void;
+
+  // Reset
+  resetFlow: () => void;
 }
 
 export type SubscriptionFlowStore = SubscriptionFlowState & SubscriptionFlowActions;
@@ -53,73 +72,103 @@ const initialState: SubscriptionFlowState = {
   status: SubscriptionFlowStatus.INITIALIZING,
   syncStatus: SyncStatus.IDLE,
   syncError: null,
-  isInitialized: false,
   isOnboardingComplete: false,
-  showPostOnboardingPaywall: false,
-  showFeedback: false,
   paywallShown: false,
+  showFeedback: false,
   isAuthModalOpen: false,
+  isInitialized: false,
 };
 
+/**
+ * State transition rules:
+ *
+ * INITIALIZING -> ONBOARDING (first launch)
+ * INITIALIZING -> CHECK_PREMIUM (onboarding already done)
+ *
+ * ONBOARDING -> CHECK_PREMIUM (onboarding completed)
+ *
+ * CHECK_PREMIUM -> READY (user is premium)
+ * CHECK_PREMIUM -> POST_ONBOARDING_PAYWALL (user not premium, paywall not shown)
+ * CHECK_PREMIUM -> READY (user not premium but paywall already shown)
+ *
+ * POST_ONBOARDING_PAYWALL -> READY (paywall closed)
+ *
+ * READY -> READY (stays ready, shows overlays when needed)
+ */
 export const useSubscriptionFlowStore = createStore<SubscriptionFlowState, SubscriptionFlowActions>({
   name: "subscription-flow-storage",
   initialState,
-  persist: false,
+  persist: true,
   onRehydrate: (state) => {
     if (!state.isInitialized) {
       state.setInitialized(true);
+
+      // First time: show onboarding
+      state.setStatus(SubscriptionFlowStatus.INITIALIZING);
+    } else if (state.isOnboardingComplete) {
+      // Onboarding done, check premium status
+      state.setStatus(SubscriptionFlowStatus.CHECK_PREMIUM);
+    } else {
+      // Show onboarding
+      state.setStatus(SubscriptionFlowStatus.ONBOARDING);
     }
   },
   actions: (set) => ({
-    completeOnboarding: async () => {
+    setInitialized: (initialized: boolean) => set({ isInitialized: initialized }),
+    setStatus: (status: SubscriptionFlowStatus) => set({ status }),
+
+    completeOnboarding: () => {
       set({
         isOnboardingComplete: true,
-        showPostOnboardingPaywall: true,
-        status: SubscriptionFlowStatus.POST_ONBOARDING_PAYWALL,
+        status: SubscriptionFlowStatus.CHECK_PREMIUM,
       });
       subscriptionEventBus.emit(FLOW_EVENTS.ONBOARDING_COMPLETED, { timestamp: Date.now() });
     },
-    closePostOnboardingPaywall: async (params?: { purchased: boolean }) => {
-      const purchased = params?.purchased ?? false;
+
+    checkPremiumStatus: () => {
+      // This is a transient state - the component will check isPremium
+      // and transition accordingly
+      set({ status: SubscriptionFlowStatus.CHECK_PREMIUM });
+    },
+
+    showPaywall: () => {
       set({
-        showPostOnboardingPaywall: false,
+        status: SubscriptionFlowStatus.POST_ONBOARDING_PAYWALL,
         paywallShown: true,
+      });
+      subscriptionEventBus.emit(FLOW_EVENTS.PAYWALL_SHOWN, { timestamp: Date.now() });
+    },
+
+    completePaywall: (purchased: boolean) => {
+      set({
         status: SubscriptionFlowStatus.READY,
-        showFeedback: !purchased, // Only show feedback if NOT purchased
+        paywallShown: true,
+        showFeedback: !purchased, // Only show feedback if not purchased
       });
       subscriptionEventBus.emit(FLOW_EVENTS.PAYWALL_CLOSED, {
         timestamp: Date.now(),
         purchased
       });
     },
-    closeFeedback: () => set({ showFeedback: false }),
+
+    showFeedbackScreen: () => set({ showFeedback: true }),
+    hideFeedback: () => set({ showFeedback: false }),
+
     setAuthModalOpen: (open: boolean) => set({ isAuthModalOpen: open }),
-    setShowFeedback: (show: boolean) => set({ showFeedback: show }),
-    markPaywallShown: async () => {
-      set({ paywallShown: true });
-      subscriptionEventBus.emit(FLOW_EVENTS.PAYWALL_SHOWN, { timestamp: Date.now() });
-    },
-    setInitialized: (initialized: boolean) => set((state) => {
-      if (state.isInitialized === initialized) return state;
-      return { isInitialized: initialized };
-    }),
-    setStatus: (status: SubscriptionFlowStatus) => set((state) => {
-      if (state.status === status) return state;
-      return { status };
-    }),
-    setSyncStatus: (syncStatus: SyncStatus, syncError: string | null = null) => 
+
+    setSyncStatus: (syncStatus: SyncStatus, syncError: string | null = null) =>
       set({ syncStatus, syncError }),
-    resetFlow: async () => {
+
+    resetFlow: () => {
       set({
         status: SubscriptionFlowStatus.INITIALIZING,
         syncStatus: SyncStatus.IDLE,
         syncError: null,
-        isInitialized: false, // Reset isInitialized to allow fresh initialization
         isOnboardingComplete: false,
-        showPostOnboardingPaywall: false,
-        showFeedback: false,
         paywallShown: false,
+        showFeedback: false,
         isAuthModalOpen: false,
+        isInitialized: false,
       });
     },
   }),