@umituz/react-native-subscription 2.44.0 → 2.44.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.44.0",
+  "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,27 +1,26 @@
 /**
  * ManagedSubscriptionFlow
  *
- * State machine-based flow orchestration.
- * No complex if/else - clean state transitions.
+ * Clean state machine-based flow orchestration.
+ * All state components separated to individual files.
  */
 
-import React, { useEffect, useCallback } from "react";
+import React, { useEffect } from "react";
 import type { NavigationProp } from "@react-navigation/native";
 import type { ImageSourcePropType } from "react-native";
-import { View } 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 { useSubscriptionFlowStore, SubscriptionFlowStatus } from "../useSubscriptionFlow";
-import { PaywallFeedbackScreen } from "./feedback/PaywallFeedbackScreen";
 import type { PaywallFeedbackTranslations } from "./feedback/PaywallFeedbackScreen.types";
 import type { PaywallTranslations, PaywallLegalUrls, SubscriptionFeature } from "../../../paywall/entities/types";
-import { usePaywallFeedbackSubmit } from "../../../../presentation/hooks/feedback/useFeedbackSubmit";
-import { PaywallScreen } from "../../../paywall/components/PaywallScreen";
+import {
+  InitializingState,
+  OnboardingState,
+  PaywallState,
+  ReadyState,
+} from "./ManagedSubscriptionFlow.states";
 
 export interface ManagedSubscriptionFlowProps {
   children: React.ReactNode;
@@ -79,123 +78,8 @@ import {
   useSubscriptionFlowStatus
 } from "../providers/SubscriptionFlowProvider";
 
-// ============================================================================
-// STATE MACHINE COMPONENTS
-// ============================================================================
-
-interface StateComponentProps {
-  status: SubscriptionFlowStatus;
-  tokens: any;
-  onboardingConfig: ManagedSubscriptionFlowProps["onboarding"];
-  paywallConfig: ManagedSubscriptionFlowProps["paywall"];
-  feedbackConfig: ManagedSubscriptionFlowProps["feedback"];
-  isPremium: boolean;
-  packages: any[];
-  credits: number | null;
-  isSyncing: boolean;
-  onPurchasePackage: (pkgId: string) => Promise<any>;
-  onRestorePurchase: () => Promise<any>;
-  navigation: NavigationProp<any>;
-}
-
-const InitializingState: React.FC<{ tokens: any; splash?: ManagedSubscriptionFlowProps["splash"] }> = ({ tokens, splash }) => (
-  <SplashScreen
-    appName={splash?.appName || "Loading..."}
-    tagline={splash?.tagline || "Please wait while we set things up"}
-    colors={tokens.colors}
-  />
-);
-
-const OnboardingState: React.FC<{
-  config: ManagedSubscriptionFlowProps["onboarding"];
-  onComplete: () => void;
-}> = ({ 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}
-  />
-);
-
-const PaywallState: React.FC<{
-  config: ManagedSubscriptionFlowProps["paywall"];
-  packages: any[];
-  isPremium: boolean;
-  credits: number | null;
-  isSyncing: boolean;
-  onPurchase: (pkgId: string) => Promise<any>;
-  onRestore: () => Promise<any>;
-  onClose: (purchased: boolean) => void;
-}> = ({ 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}
-    />
-  );
-};
-
-const FeedbackState: React.FC<{
-  config: ManagedSubscriptionFlowProps["feedback"];
-  onClose: () => void;
-}> = ({ 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}
-    />
-  );
-};
-
-// ============================================================================
-// MAIN COMPONENT
-// ============================================================================
-
-const ManagedSubscriptionFlowInner = React.memo<ManagedSubscriptionFlowProps>(({
+const ManagedSubscriptionFlowInner: React.FC<ManagedSubscriptionFlowProps> = ({
   children,
-  navigation,
   islocalizationReady,
   splash,
   onboarding,
@@ -205,9 +89,6 @@ const ManagedSubscriptionFlowInner = React.memo<ManagedSubscriptionFlowProps>(({
 }) => {
   const tokens = useAppDesignTokens();
   const status = useSubscriptionFlowStatus();
-  const { isInitialized: isSplashComplete } = useSplashFlow({
-    duration: splash?.duration || 0,
-  });
 
   // Premium hooks
   const { isPremium, isSyncing, credits, isLoading: isPremiumLoading } = usePremiumStatus();
@@ -220,32 +101,26 @@ const ManagedSubscriptionFlowInner = React.memo<ManagedSubscriptionFlowProps>(({
   const completePaywall = useSubscriptionFlowStore((s) => s.completePaywall);
   const hideFeedback = useSubscriptionFlowStore((s) => s.hideFeedback);
   const showFeedbackScreen = useSubscriptionFlowStore((s) => s.showFeedbackScreen);
-
   const showFeedback = useSubscriptionFlowStore((s) => s.showFeedback);
 
   // ========================================================================
   // STATE TRANSITIONS
   // ========================================================================
 
-  // CHECK_PREMIUM state transition logic
   useEffect(() => {
     if (status === SubscriptionFlowStatus.CHECK_PREMIUM && !isPremiumLoading) {
       const paywallShown = useSubscriptionFlowStore.getState().paywallShown;
 
       if (isPremium) {
-        // User is premium, go to ready
         completePaywall(true);
       } else if (!paywallShown) {
-        // User not premium and paywall not shown, show paywall
         showPaywall();
       } else {
-        // Paywall already shown, go to ready
         completePaywall(false);
       }
     }
   }, [status, isPremium, isPremiumLoading, showPaywall, completePaywall]);
 
-  // Show feedback when needed
   useEffect(() => {
     if (status === SubscriptionFlowStatus.READY && showFeedback) {
       showFeedbackScreen();
@@ -253,21 +128,18 @@ const ManagedSubscriptionFlowInner = React.memo<ManagedSubscriptionFlowProps>(({
   }, [status, showFeedback, showFeedbackScreen]);
 
   // ========================================================================
-  // RENDER
+  // RENDER BY STATE
   // ========================================================================
 
-  // Wait for localization
   if (!islocalizationReady || status === SubscriptionFlowStatus.INITIALIZING) {
     return <InitializingState tokens={tokens} splash={splash} />;
   }
 
-  // Render by state
   switch (status) {
     case SubscriptionFlowStatus.ONBOARDING:
       return <OnboardingState config={onboarding} onComplete={completeOnboarding} />;
 
     case SubscriptionFlowStatus.CHECK_PREMIUM:
-      // Show loading while checking premium
       return <InitializingState tokens={tokens} splash={splash} />;
 
     case SubscriptionFlowStatus.POST_ONBOARDING_PAYWALL:
@@ -286,31 +158,20 @@ const ManagedSubscriptionFlowInner = React.memo<ManagedSubscriptionFlowProps>(({
 
     case SubscriptionFlowStatus.READY:
       return (
-        <>
-          {children}
-
-          {offline && (
-            <OfflineBanner
-              visible={offline.isOffline}
-              message={offline.message}
-              backgroundColor={offline.backgroundColor || tokens.colors.error}
-              position={offline.position || "top"}
-            />
-          )}
-
-          {showFeedback && (
-            <FeedbackState
-              config={feedback}
-              onClose={hideFeedback}
-            />
-          )}
-        </>
+        <ReadyState
+          children={children}
+          offline={offline}
+          feedbackConfig={feedback}
+          showFeedback={showFeedback}
+          tokens={tokens}
+          onFeedbackClose={hideFeedback}
+        />
       );
 
     default:
       return <InitializingState tokens={tokens} splash={splash} />;
   }
-});
+};
 
 ManagedSubscriptionFlowInner.displayName = "ManagedSubscriptionFlowInner";