@umituz/react-native-subscription 3.1.10 → 3.1.12

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

@@ -2,77 +2,21 @@
  * ManagedSubscriptionFlow
  *
  * Clean state machine-based flow orchestration.
- * All state components separated to individual files.
+ * State components and logic separated to individual modules.
  */
 
-import React, { useEffect } from "react";
-import type { NavigationProp } from "@react-navigation/native";
-import type { ImageSourcePropType } from "react-native";
+import React from "react";
 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 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;
-  navigation: NavigationProp<any>;
-  islocalizationReady: boolean;
-
-  // Splash Configuration
-  splash?: {
-    appName: string;
-    tagline: string;
-    duration?: number;
-  };
-
-  // Onboarding Configuration
-  onboarding: {
-    slides: any[];
-    translations: {
-      nextButton: string;
-      getStartedButton: string;
-      of: string;
-    };
-    themeColors: any;
-    showSkipButton?: boolean;
-    showBackButton?: boolean;
-    showProgressBar?: boolean;
-  };
-
-  // Paywall Configuration
-  paywall: {
-    translations: PaywallTranslations;
-    features: SubscriptionFeature[];
-    legalUrls: PaywallLegalUrls;
-    heroImage: ImageSourcePropType;
-    bestValueIdentifier?: string;
-    creditsLabel?: string;
-  };
-
-  // Feedback Configuration
-  feedback: {
-    translations: PaywallFeedbackTranslations;
-    onSubmit?: (data: { reason: string; otherText?: string }) => void | Promise<void>;
-  };
-
-  // Offline Configuration (optional)
-  offline?: {
-    isOffline: boolean;
-    message: string;
-    backgroundColor?: string;
-    position?: "top" | "bottom";
-  };
-}
-
+import { useStateTransitions } from "./ManagedSubscriptionFlow.logic";
+import type { ManagedSubscriptionFlowProps } from "./ManagedSubscriptionFlow.types";
+import { InitializingState } from "./states/InitializingState";
+import { OnboardingState } from "./states/OnboardingState";
+import { PaywallState } from "./states/PaywallState";
+import { ReadyState } from "./states/ReadyState";
 import {
   SubscriptionFlowProvider,
   useSubscriptionFlowStatus
@@ -97,35 +41,17 @@ const ManagedSubscriptionFlowInner: React.FC<ManagedSubscriptionFlowProps> = ({
 
   // 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);
 
-  // ========================================================================
-  // STATE TRANSITIONS
-  // ========================================================================
-
-  useEffect(() => {
-    if (status === SubscriptionFlowStatus.CHECK_PREMIUM && !isSyncing) {
-      const paywallShown = useSubscriptionFlowStore.getState().paywallShown;
-
-      if (isPremium) {
-        completePaywall(true);
-      } else if (!paywallShown) {
-        showPaywall();
-      } else {
-        completePaywall(false);
-      }
-    }
-  }, [status, isPremium, isSyncing, showPaywall, completePaywall]);
-
-  useEffect(() => {
-    if (status === SubscriptionFlowStatus.READY && showFeedback) {
-      showFeedbackScreen();
-    }
-  }, [status, showFeedback, showFeedbackScreen]);
+  // State transitions
+  useStateTransitions({
+    status,
+    isPremium,
+    isSyncing,
+    showFeedback,
+  });
 
   // ========================================================================
   // RENDER BY STATE

package/src/domains/subscription/presentation/components/ManagedSubscriptionFlow.types.ts

@@ -0,0 +1,59 @@
+/**
+ * ManagedSubscriptionFlow Types
+ */
+
+import type { NavigationProp } from "@react-navigation/native";
+import type { ImageSourcePropType } from "react-native";
+import type { PaywallFeedbackTranslations } from "./feedback/PaywallFeedbackScreen.types";
+import type { PaywallTranslations, PaywallLegalUrls, SubscriptionFeature } from "../../../paywall/entities/types";
+
+export interface ManagedSubscriptionFlowProps {
+  children: React.ReactNode;
+  navigation: NavigationProp<any>;
+  islocalizationReady: boolean;
+
+  // Splash Configuration
+  splash?: {
+    appName: string;
+    tagline: string;
+    duration?: number;
+  };
+
+  // Onboarding Configuration
+  onboarding: {
+    slides: any[];
+    translations: {
+      nextButton: string;
+      getStartedButton: string;
+      of: string;
+    };
+    themeColors: any;
+    showSkipButton?: boolean;
+    showBackButton?: boolean;
+    showProgressBar?: boolean;
+  };
+
+  // Paywall Configuration
+  paywall: {
+    translations: PaywallTranslations;
+    features: SubscriptionFeature[];
+    legalUrls: PaywallLegalUrls;
+    heroImage: ImageSourcePropType;
+    bestValueIdentifier?: string;
+    creditsLabel?: string;
+  };
+
+  // Feedback Configuration
+  feedback: {
+    translations: PaywallFeedbackTranslations;
+    onSubmit?: (data: { reason: string; otherText?: string }) => void | Promise<void>;
+  };
+
+  // Offline Configuration (optional)
+  offline?: {
+    isOffline: boolean;
+    message: string;
+    backgroundColor?: string;
+    position?: "top" | "bottom";
+  };
+}

package/src/domains/subscription/presentation/components/details/CreditRow.tsx

@@ -55,6 +55,15 @@ export const CreditRow: React.FC<CreditRowProps> = React.memo(({
       )}
     </View>
   );
+}, (prevProps, nextProps) => {
+  // PERFORMANCE: Custom comparison to prevent unnecessary re-renders
+  // Only re-render if these values actually change
+  return (
+    prevProps.label === nextProps.label &&
+    prevProps.current === nextProps.current &&
+    prevProps.total === nextProps.total &&
+    prevProps.remainingLabel === nextProps.remainingLabel
+  );
 });
 
 const styles = StyleSheet.create({

package/src/domains/subscription/presentation/components/details/PremiumDetailsCard.tsx

@@ -68,4 +68,27 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = React.memo(
       />
     </View>
   );
+}, (prevProps, nextProps) => {
+  // PERFORMANCE: Custom comparison to prevent unnecessary re-renders
+  // Deep comparison for credits array since it's frequently updated
+  const creditsEqual = prevProps.credits === nextProps.credits ||
+    (prevProps.credits?.length === nextProps.credits?.length &&
+      prevProps.credits?.every((credit, i) =>
+        credit.id === nextProps.credits?.[i]?.id &&
+        credit.current === nextProps.credits?.[i]?.current &&
+        credit.total === nextProps.credits?.[i]?.total &&
+        credit.label === nextProps.credits?.[i]?.label
+      ));
+
+  return (
+    prevProps.statusType === nextProps.statusType &&
+    prevProps.isPremium === nextProps.isPremium &&
+    prevProps.expirationDate === nextProps.expirationDate &&
+    prevProps.purchaseDate === nextProps.purchaseDate &&
+    prevProps.daysRemaining === nextProps.daysRemaining &&
+    creditsEqual &&
+    prevProps.translations === nextProps.translations &&
+    prevProps.onManageSubscription === nextProps.onManageSubscription &&
+    prevProps.onUpgrade === nextProps.onUpgrade
+  );
 });

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

@@ -0,0 +1,36 @@
+/**
+ * Feedback State Component
+ *
+ * Displays feedback screen to collect user input.
+ */
+
+import React from "react";
+import { PaywallFeedbackScreen } from "../feedback/PaywallFeedbackScreen";
+import { usePaywallFeedbackSubmit } from "../../../../../presentation/hooks/feedback/useFeedbackSubmit";
+import type { ManagedSubscriptionFlowProps } from "../ManagedSubscriptionFlow.types";
+
+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}
+    />
+  );
+};

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

@@ -0,0 +1,47 @@
+/**
+ * Initializing State Component
+ *
+ * Displays splash screen during initialization.
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import type { ManagedSubscriptionFlowProps } from "../ManagedSubscriptionFlow.types";
+
+interface InitializingStateProps {
+  tokens: any;
+  splash?: ManagedSubscriptionFlowProps["splash"];
+}
+
+export const InitializingState: React.FC<InitializingStateProps> = ({ tokens, splash }) => {
+  if (!splash) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.background }]}>
+      <Text style={[styles.appName, { color: tokens.colors.text }]}>
+        {splash.appName}
+      </Text>
+      <Text style={[styles.tagline, { color: tokens.colors.textSecondary }]}>
+        {splash.tagline}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  appName: {
+    fontSize: 32,
+    fontWeight: "bold",
+    marginBottom: 8,
+  },
+  tagline: {
+    fontSize: 16,
+  },
+});

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

@@ -0,0 +1,27 @@
+/**
+ * Onboarding State Component
+ *
+ * Displays onboarding slides to the user.
+ */
+
+import React from "react";
+import { OnboardingScreen } from "@umituz/react-native-design-system/onboarding";
+import type { ManagedSubscriptionFlowProps } from "../ManagedSubscriptionFlow.types";
+
+interface OnboardingStateProps {
+  config: ManagedSubscriptionFlowProps["onboarding"];
+  onComplete: () => void;
+}
+
+export const OnboardingState: React.FC<OnboardingStateProps> = ({ config, onComplete }) => {
+  return (
+    <OnboardingScreen
+      slides={config.slides}
+      translations={config.translations}
+      onComplete={onComplete}
+      showSkipButton={config.showSkipButton ?? true}
+      showBackButton={config.showBackButton ?? true}
+      showProgressBar={config.showProgressBar ?? true}
+    />
+  );
+};

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

@@ -0,0 +1,66 @@
+/**
+ * Paywall State Component
+ *
+ * Displays paywall screen for purchase/restore.
+ */
+
+import React, { useState } from "react";
+import type { PurchasesPackage } from "react-native-purchases";
+import type { UserCredits } from "../../../../credits/core/Credits";
+import { PaywallScreen } from "../../../../paywall/components/PaywallScreen";
+import type { ManagedSubscriptionFlowProps } from "../ManagedSubscriptionFlow.types";
+
+interface PaywallStateProps {
+  config: ManagedSubscriptionFlowProps["paywall"];
+  packages: PurchasesPackage[];
+  isPremium: boolean;
+  credits: UserCredits | null;
+  isSyncing: boolean;
+  onPurchase: (pkg: PurchasesPackage) => Promise<boolean>;
+  onRestore: () => Promise<boolean>;
+  onClose: (purchased: boolean) => void;
+}
+
+export const PaywallState: React.FC<PaywallStateProps> = ({
+  config,
+  packages,
+  isPremium,
+  credits,
+  isSyncing,
+  onPurchase,
+  onRestore,
+  onClose,
+}) => {
+  const [purchaseSuccessful, setPurchaseSuccessful] = useState(false);
+
+  const handlePurchase = async (pkg: PurchasesPackage) => {
+    const result = await onPurchase(pkg);
+    if (result) {
+      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}
+    />
+  );
+};

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

@@ -0,0 +1,51 @@
+/**
+ * Ready State Component
+ *
+ * Displays app content with optional offline banner and feedback.
+ */
+
+import React from "react";
+import { FeedbackState } from "./FeedbackState";
+import type { ManagedSubscriptionFlowProps } from "../ManagedSubscriptionFlow.types";
+
+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/providers/SubscriptionFlowProvider.tsx

@@ -58,9 +58,15 @@ export const SubscriptionFlowProvider: React.FC<{ children: React.ReactNode }> =
       nextStatus = SubscriptionFlowStatus.INITIALIZING;
     } else if (!isOnboardingComplete) {
       nextStatus = SubscriptionFlowStatus.ONBOARDING;
-    } else {
-      // Onboarding complete - let ManagedSubscriptionFlow handle CHECK_PREMIUM
+    } else if (
+      status === SubscriptionFlowStatus.ONBOARDING ||
+      status === SubscriptionFlowStatus.INITIALIZING
+    ) {
+      // First time completing onboarding - transition to CHECK_PREMIUM once
       nextStatus = SubscriptionFlowStatus.CHECK_PREMIUM;
+    } else {
+      // Already past onboarding - let ManagedSubscriptionFlow control the flow
+      nextStatus = status;
     }
 
     if (nextStatus !== status) {