@umituz/react-native-subscription 3.0.1 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "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

@@ -75,7 +75,6 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     selectedPlanId,
     setSelectedPlanId,
     isProcessing,
-    handlePurchase,
     handleRestore,
     resetState
   } = usePaywallActions({
@@ -228,14 +227,8 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
         translations={translations}
         legalUrls={legalUrls}
         isProcessing={isProcessing}
-        selectedPlanId={selectedPlanId}
-        packages={packages}
-        onPurchase={handlePurchase}
         onRestore={handleRestore}
-        onLegalUrl={handleLegalUrl}
-        insets={insets}
-        tokens={tokens}
-        styles={styles}
+        onLegalClick={handleLegalUrl}
       />
     </View>
   );

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

@@ -4,10 +4,10 @@
  */
 
 import React from "react";
-import type { NavigationProp } from "@react-navigation/native";
+import type { PurchasesPackage } from "react-native-purchases";
+import type { UserCredits } from "../../../credits/core/Credits";
 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";
@@ -57,12 +57,12 @@ export const OnboardingState: React.FC<OnboardingStateProps> = ({ config, onComp
 
 interface PaywallStateProps {
   config: ManagedSubscriptionFlowProps["paywall"];
-  packages: any[];
+  packages: PurchasesPackage[];
   isPremium: boolean;
-  credits: number | null;
+  credits: UserCredits | null;
   isSyncing: boolean;
-  onPurchase: (pkgId: string) => Promise<any>;
-  onRestore: () => Promise<any>;
+  onPurchase: (pkg: PurchasesPackage) => Promise<boolean>;
+  onRestore: () => Promise<boolean>;
   onClose: (purchased: boolean) => void;
 }
 
@@ -78,9 +78,9 @@ export const PaywallState: React.FC<PaywallStateProps> = ({
 }) => {
   const [purchaseSuccessful, setPurchaseSuccessful] = React.useState(false);
 
-  const handlePurchase = async (pkgId: string) => {
-    const result = await onPurchase(pkgId);
-    if (result?.success) {
+  const handlePurchase = async (pkg: PurchasesPackage) => {
+    const result = await onPurchase(pkg);
+    if (result) {
       setPurchaseSuccessful(true);
     }
     return result;

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

@@ -91,7 +91,7 @@ const ManagedSubscriptionFlowInner: React.FC<ManagedSubscriptionFlowProps> = ({
   const status = useSubscriptionFlowStatus();
 
   // Premium hooks
-  const { isPremium, isSyncing, credits, isLoading: isPremiumLoading } = usePremiumStatus();
+  const { isPremium, isSyncing, credits } = usePremiumStatus();
   const { packages } = usePremiumPackages();
   const { purchasePackage, restorePurchase } = usePremiumActions();
 
@@ -108,7 +108,7 @@ const ManagedSubscriptionFlowInner: React.FC<ManagedSubscriptionFlowProps> = ({
   // ========================================================================
 
   useEffect(() => {
-    if (status === SubscriptionFlowStatus.CHECK_PREMIUM && !isPremiumLoading) {
+    if (status === SubscriptionFlowStatus.CHECK_PREMIUM && !isSyncing) {
       const paywallShown = useSubscriptionFlowStore.getState().paywallShown;
 
       if (isPremium) {
@@ -119,7 +119,7 @@ const ManagedSubscriptionFlowInner: React.FC<ManagedSubscriptionFlowProps> = ({
         completePaywall(false);
       }
     }
-  }, [status, isPremium, isPremiumLoading, showPaywall, completePaywall]);
+  }, [status, isPremium, isSyncing, showPaywall, completePaywall]);
 
   useEffect(() => {
     if (status === SubscriptionFlowStatus.READY && showFeedback) {

package/src/domains/subscription/presentation/components/feedback/PaywallFeedbackScreen.parts.tsx

@@ -4,9 +4,8 @@
  */
 
 import React from "react";
-import { View, TouchableOpacity, ScrollView } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
 import { FeedbackOption } from "./FeedbackOption";
 import type { PaywallFeedbackTranslations } from "./PaywallFeedbackScreen.types";
 

package/src/domains/subscription/presentation/components/feedback/PaywallFeedbackScreen.tsx

@@ -38,7 +38,7 @@ export const PaywallFeedbackScreen: React.FC<PaywallFeedbackScreenProps> = React
     canSubmit,
   } = usePaywallFeedback({ onSubmit, onClose });
 
-  const screenStyles = useMemo(() => createScreenStyles(insets), [insets]);
+  const screenStyles = useMemo(() => createScreenStyles(), []);
 
   return (
     <View style={[screenStyles.container, { backgroundColor: 'white', opacity: 1 }]}>
@@ -96,7 +96,7 @@ PaywallFeedbackScreen.displayName = "PaywallFeedbackScreen";
 // STYLES
 // ============================================================================
 
-const createScreenStyles = (insets: { top: number; bottom: number }) => ({
+const createScreenStyles = () => ({
   container: {
     flex: 1,
   },

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

@@ -16,7 +16,6 @@ export const SubscriptionFlowProvider: React.FC<{ children: React.ReactNode }> =
   // Selectors for stable references and only what we need
   const isInitialized = useSubscriptionFlowStore((state) => state.isInitialized);
   const isOnboardingComplete = useSubscriptionFlowStore((state) => state.isOnboardingComplete);
-  const showPostOnboardingPaywall = useSubscriptionFlowStore((state) => state.showPostOnboardingPaywall);
   const status = useSubscriptionFlowStore((state) => state.status);
   const setInitialized = useSubscriptionFlowStore((state) => state.setInitialized);
   const setStatus = useSubscriptionFlowStore((state) => state.setStatus);
@@ -49,7 +48,6 @@ export const SubscriptionFlowProvider: React.FC<{ children: React.ReactNode }> =
        console.log('[SubscriptionFlowProvider] 🧠 Calculating Status Transition', {
          isInitialized,
          isOnboardingComplete,
-         showPostOnboardingPaywall,
          currentStatus: status
        });
     }
@@ -60,8 +58,9 @@ export const SubscriptionFlowProvider: React.FC<{ children: React.ReactNode }> =
       nextStatus = SubscriptionFlowStatus.INITIALIZING;
     } else if (!isOnboardingComplete) {
       nextStatus = SubscriptionFlowStatus.ONBOARDING;
-    } else if (showPostOnboardingPaywall) {
-      nextStatus = SubscriptionFlowStatus.POST_ONBOARDING_PAYWALL;
+    } else {
+      // Onboarding complete - let ManagedSubscriptionFlow handle CHECK_PREMIUM
+      nextStatus = SubscriptionFlowStatus.CHECK_PREMIUM;
     }
 
     if (nextStatus !== status) {
@@ -71,7 +70,6 @@ export const SubscriptionFlowProvider: React.FC<{ children: React.ReactNode }> =
   }, [
     isInitialized,
     isOnboardingComplete,
-    showPostOnboardingPaywall,
     status,
     setStatus
   ]);

package/src/index.hooks.ts

@@ -35,7 +35,3 @@ export type {
   SettingsFeedbackData,
   UseSettingsFeedbackSubmitOptions,
 } from "./presentation/hooks/feedback/useFeedbackSubmit";
-
-// Paywall Hooks
-export { usePaywallOrchestrator } from "./domains/paywall/hooks/usePaywallOrchestrator";
-export type { PaywallOrchestratorOptions } from "./domains/paywall/hooks/usePaywallOrchestrator";

package/src/domains/paywall/hooks/usePaywallOrchestrator.ts

@@ -1,166 +0,0 @@
-import { useEffect, useRef } from "react";
-import type { NavigationProp } from "@react-navigation/native";
-import type { ImageSourcePropType } from "react-native";
-import { usePremiumStatus } from "../../subscription/presentation/usePremiumStatus";
-import { usePremiumPackages } from "../../subscription/presentation/usePremiumPackages";
-import { usePremiumActions } from "../../subscription/presentation/usePremiumActions";
-import { useSubscriptionFlowStore } from "../../subscription/presentation/useSubscriptionFlow";
-import { usePaywallVisibility } from "../../subscription/presentation/usePaywallVisibility";
-import { PaywallTranslations, PaywallLegalUrls, SubscriptionFeature } from "../entities/types";
-
-export interface PaywallOrchestratorOptions {
-  navigation: NavigationProp<any>;
-  translations: PaywallTranslations;
-  features: SubscriptionFeature[];
-  legalUrls: PaywallLegalUrls;
-  heroImage: ImageSourcePropType;
-  isNavReady?: boolean;
-  isLocalizationReady?: boolean;
-  bestValueIdentifier?: string;
-  creditsLabel?: string;
-  /** Disable manual navigation (used when paywall is rendered inline) */
-  disableNavigation?: boolean;
-}
-
-export function usePaywallOrchestrator({
-  navigation,
-  translations,
-  features,
-  legalUrls,
-  heroImage,
-  isNavReady = true,
-  isLocalizationReady = true,
-  bestValueIdentifier = "yearly",
-  creditsLabel,
-  disableNavigation = false,
-}: PaywallOrchestratorOptions) {
-  const { isPremium, isSyncing, credits } = usePremiumStatus();
-  const { packages } = usePremiumPackages();
-  const { purchasePackage, restorePurchase } = usePremiumActions();
-
-  const isOnboardingComplete = useSubscriptionFlowStore((state) => state.isOnboardingComplete);
-  const showPostOnboardingPaywall = useSubscriptionFlowStore((state) => state.showPostOnboardingPaywall);
-  const paywallShown = useSubscriptionFlowStore((state) => state.paywallShown);
-  const isAuthModalOpen = useSubscriptionFlowStore((state) => state.isAuthModalOpen);
-  const showFeedback = useSubscriptionFlowStore((state) => state.showFeedback);
-  const markPaywallShown = useSubscriptionFlowStore((state) => state.markPaywallShown);
-  const closePostOnboardingPaywall = useSubscriptionFlowStore((state) => state.closePostOnboardingPaywall);
-  const setShowFeedback = useSubscriptionFlowStore((state) => state.setShowFeedback);
-
-  const { showPaywall, closePaywall } = usePaywallVisibility();
-  const hasNavigatedRef = useRef(false);
-
-  const handleClose = () => {
-    closePaywall();
-  };
-
-  useEffect(() => {
-    if (!isNavReady || !isLocalizationReady) return;
-
-    const shouldShowPostOnboarding =
-      isOnboardingComplete &&
-      showPostOnboardingPaywall &&
-      !paywallShown &&
-      !isAuthModalOpen &&
-      !isPremium;
-
-    const shouldShowManual = showPaywall && !isPremium && !isAuthModalOpen;
-
-    if (shouldShowPostOnboarding || shouldShowManual) {
-      if (hasNavigatedRef.current) return;
-      hasNavigatedRef.current = true;
-
-      // Skip navigation if disabled (paywall rendered inline)
-      if (disableNavigation) {
-        if (__DEV__) {
-          console.log('[usePaywallOrchestrator] ⏭️ Skipping navigation (disableNavigation=true)', {
-            source: shouldShowPostOnboarding ? "onboarding" : "manual",
-          });
-        }
-
-        if (shouldShowPostOnboarding) {
-          markPaywallShown();
-        }
-
-        if (showPaywall) {
-          closePaywall();
-        }
-
-        return;
-      }
-
-      if (__DEV__) console.log('[usePaywallOrchestrator] 🚀 Navigating to Paywall', {
-        source: shouldShowPostOnboarding ? "onboarding" : "manual",
-        packagesCount: packages.length
-      });
-
-      navigation.navigate("PaywallScreen", {
-        translations,
-        legalUrls,
-        features,
-        bestValueIdentifier,
-        creditsLabel,
-        heroImage,
-        source: shouldShowPostOnboarding ? "onboarding" : "manual",
-        packages,
-        isPremium,
-        credits,
-        isSyncing,
-        onPurchase: purchasePackage,
-        onRestore: restorePurchase,
-        onClose: handleClose,
-      });
-
-      if (shouldShowPostOnboarding) {
-        markPaywallShown();
-      }
-
-      if (showPaywall) {
-        closePaywall();
-      }
-    } else {
-      hasNavigatedRef.current = false;
-    }
-  }, [
-    isNavReady,
-    isLocalizationReady,
-    isOnboardingComplete,
-    showPostOnboardingPaywall,
-    paywallShown,
-    isAuthModalOpen,
-    isPremium,
-    showPaywall,
-    navigation,
-    translations,
-    legalUrls,
-    features,
-    heroImage,
-    packages,
-    markPaywallShown,
-    closePaywall,
-    bestValueIdentifier,
-    creditsLabel,
-    credits,
-    isSyncing,
-    purchasePackage,
-    restorePurchase,
-    handleClose,
-    disableNavigation,
-  ]);
-
-  const completeOnboarding = useSubscriptionFlowStore((state) => state.completeOnboarding);
-
-  return {
-    flowState: {
-      isOnboardingComplete,
-      showPostOnboardingPaywall,
-      paywallShown,
-      isAuthModalOpen,
-      showFeedback
-    },
-    markPaywallShown,
-    closePostOnboardingPaywall,
-    completeOnboarding,
-    setShowFeedback
-  };
-}