@umituz/react-native-subscription 2.27.145 → 2.27.146

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.27.145",
+  "version": "2.27.146",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

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

@@ -0,0 +1,37 @@
+import type { MutableRefObject } from "react";
+
+export const executeFeatureAction = (
+  action: () => void | Promise<void>,
+  isAuthenticated: boolean,
+  onShowAuthModal: (callback: () => void | Promise<void>) => void,
+  hasSubscriptionRef: MutableRefObject<boolean>,
+  creditBalanceRef: MutableRefObject<number>,
+  requiredCreditsRef: MutableRefObject<number>,
+  onShowPaywallRef: MutableRefObject<(requiredCredits?: number) => void>,
+  pendingActionRef: MutableRefObject<(() => void | Promise<void>) | null>,
+  isWaitingForAuthCreditsRef: MutableRefObject<boolean>,
+  isWaitingForPurchaseRef: MutableRefObject<boolean>
+): void => {
+  if (!isAuthenticated) {
+    const postAuthAction = () => {
+      pendingActionRef.current = action;
+      isWaitingForAuthCreditsRef.current = true;
+    };
+    onShowAuthModal(postAuthAction);
+    return;
+  }
+
+  if (hasSubscriptionRef.current) {
+    action();
+    return;
+  }
+
+  if (creditBalanceRef.current < requiredCreditsRef.current) {
+    pendingActionRef.current = action;
+    isWaitingForPurchaseRef.current = true;
+    onShowPaywallRef.current(requiredCreditsRef.current);
+    return;
+  }
+
+  action();
+};

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

@@ -0,0 +1,31 @@
+export const DEFAULT_REQUIRED_CREDITS = 1;
+
+export const shouldExecuteAuthAction = (
+  isWaitingForAuthCredits: boolean,
+  isCreditsLoaded: boolean,
+  hasPendingAction: boolean,
+  hasSubscription: boolean,
+  creditBalance: number,
+  requiredCredits: number
+): boolean => {
+  if (!isWaitingForAuthCredits || !isCreditsLoaded || !hasPendingAction) {
+    return false;
+  }
+  return hasSubscription || creditBalance >= requiredCredits;
+};
+
+export const shouldExecutePurchaseAction = (
+  isWaitingForPurchase: boolean,
+  creditBalance: number,
+  prevBalance: number,
+  hasSubscription: boolean,
+  prevHasSubscription: boolean,
+  hasPendingAction: boolean
+): boolean => {
+  if (!isWaitingForPurchase || !hasPendingAction) {
+    return false;
+  }
+  const creditsIncreased = creditBalance > prevBalance;
+  const subscriptionAcquired = hasSubscription && !prevHasSubscription;
+  return creditsIncreased || subscriptionAcquired;
+};

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

@@ -0,0 +1,27 @@
+import { useRef, useEffect, type MutableRefObject } from "react";
+
+export interface FeatureGateRefs {
+  creditBalanceRef: MutableRefObject<number>;
+  hasSubscriptionRef: MutableRefObject<boolean>;
+  onShowPaywallRef: MutableRefObject<(requiredCredits?: number) => void>;
+  requiredCreditsRef: MutableRefObject<number>;
+}
+
+export const useSyncedRefs = (
+  creditBalance: number,
+  hasSubscription: boolean,
+  onShowPaywall: (requiredCredits?: number) => void,
+  requiredCredits: number
+): FeatureGateRefs => {
+  const creditBalanceRef = useRef(creditBalance);
+  const hasSubscriptionRef = useRef(hasSubscription);
+  const onShowPaywallRef = useRef(onShowPaywall);
+  const requiredCreditsRef = useRef(requiredCredits);
+
+  useEffect(() => { creditBalanceRef.current = creditBalance; }, [creditBalance]);
+  useEffect(() => { hasSubscriptionRef.current = hasSubscription; }, [hasSubscription]);
+  useEffect(() => { onShowPaywallRef.current = onShowPaywall; }, [onShowPaywall]);
+  useEffect(() => { requiredCreditsRef.current = requiredCredits; }, [requiredCredits]);
+
+  return { creditBalanceRef, hasSubscriptionRef, onShowPaywallRef, requiredCreditsRef };
+};

package/src/domains/subscription/presentation/screens/components/SubscriptionHeader.constants.ts

@@ -0,0 +1 @@
+export const EXPIRING_SOON_THRESHOLD_DAYS = 7;

package/src/domains/subscription/presentation/screens/components/SubscriptionHeader.styles.ts

@@ -0,0 +1,41 @@
+import { StyleSheet } from "react-native";
+import type { AppDesignTokens } from "@umituz/react-native-design-system";
+
+export const createSubscriptionHeaderStyles = (tokens: AppDesignTokens) =>
+  StyleSheet.create({
+    container: {
+      borderRadius: tokens.radius.lg,
+      padding: tokens.spacing.lg,
+      gap: tokens.spacing.lg,
+      backgroundColor: tokens.colors.surface,
+    },
+    header: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+    },
+    titleContainer: {
+      flex: 1,
+      marginRight: tokens.spacing.md,
+    },
+    title: {
+      fontWeight: "700",
+    },
+    details: {
+      gap: tokens.spacing.md,
+      paddingTop: tokens.spacing.md,
+    },
+    row: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      gap: tokens.spacing.lg,
+    },
+    label: {
+      flex: 1,
+    },
+    value: {
+      fontWeight: "600",
+      textAlign: "right",
+    },
+  });

package/src/domains/subscription/presentation/screens/components/SubscriptionHeader.tsx

@@ -1,34 +1,13 @@
-/**
- * Subscription Header Component
- * Displays status badge and subscription details
- */
-
 import React, { useMemo } from "react";
-import { View, StyleSheet } from "react-native";
+import { View } from "react-native";
 import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 import { PremiumStatusBadge } from "../../components/details/PremiumStatusBadge";
-import { DetailRow } from "../../components/details/DetailRow";
+import type { SubscriptionHeaderProps } from "./SubscriptionHeader.types";
+import { createSubscriptionHeaderStyles } from "./SubscriptionHeader.styles";
+import { EXPIRING_SOON_THRESHOLD_DAYS } from "./SubscriptionHeader.constants";
+import { SubscriptionHeaderContent } from "./SubscriptionHeaderContent";
 
-export interface SubscriptionHeaderProps {
-  statusType: "active" | "expired" | "none" | "canceled";
-  showExpirationDate: boolean;
-  isLifetime: boolean;
-  expirationDate?: string;
-  purchaseDate?: string;
-  daysRemaining?: number | null;
-  hideTitle?: boolean;
-  translations: {
-    title: string;
-    statusActive: string;
-    statusExpired: string;
-    statusFree: string;
-    statusCanceled: string;
-    statusLabel: string;
-    lifetimeLabel: string;
-    expiresLabel: string;
-    purchasedLabel: string;
-  };
-}
+export type { SubscriptionHeaderProps } from "./SubscriptionHeader.types";
 
 export const SubscriptionHeader: React.FC<SubscriptionHeaderProps> = ({
   statusType,
@@ -41,60 +20,15 @@ export const SubscriptionHeader: React.FC<SubscriptionHeaderProps> = ({
   translations,
 }) => {
   const tokens = useAppDesignTokens();
-  const showExpiring =
-    daysRemaining !== null && daysRemaining !== undefined && daysRemaining <= 7;
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          borderRadius: tokens.radius.lg,
-          padding: tokens.spacing.lg,
-          gap: tokens.spacing.lg,
-          backgroundColor: tokens.colors.surface,
-        },
-        header: {
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-        },
-        titleContainer: {
-          flex: 1,
-          marginRight: tokens.spacing.md,
-        },
-        title: {
-          fontWeight: "700",
-        },
-        details: {
-          gap: tokens.spacing.md,
-          paddingTop: tokens.spacing.md,
-        },
-        row: {
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-          gap: tokens.spacing.lg,
-        },
-        label: {
-          flex: 1,
-        },
-        value: {
-          fontWeight: "600",
-          textAlign: "right",
-        },
-      }),
-    [tokens]
-  );
+  const showExpiring = daysRemaining !== null && daysRemaining !== undefined && daysRemaining <= EXPIRING_SOON_THRESHOLD_DAYS;
+  const styles = useMemo(() => createSubscriptionHeaderStyles(tokens), [tokens]);
 
   return (
     <View style={styles.container}>
       <View style={styles.header}>
         {!hideTitle && (
           <View style={styles.titleContainer}>
-            <AtomicText
-              type="headlineSmall"
-              style={[styles.title, { color: tokens.colors.textPrimary }]}
-            >
+            <AtomicText type="headlineSmall" style={[styles.title, { color: tokens.colors.textPrimary }]}>
               {translations.title}
             </AtomicText>
           </View>
@@ -108,39 +42,15 @@ export const SubscriptionHeader: React.FC<SubscriptionHeaderProps> = ({
         />
       </View>
 
-      <View style={styles.details}>
-        {isLifetime ? (
-          <DetailRow
-            label={translations.statusLabel}
-            value={translations.lifetimeLabel}
-            style={styles.row}
-            labelStyle={styles.label}
-            valueStyle={styles.value}
-          />
-        ) : (
-          <>
-            {showExpirationDate && expirationDate && (
-              <DetailRow
-                label={translations.expiresLabel}
-                value={expirationDate}
-                highlight={showExpiring}
-                style={styles.row}
-                labelStyle={styles.label}
-                valueStyle={styles.value}
-              />
-            )}
-            {purchaseDate && (
-              <DetailRow
-                label={translations.purchasedLabel}
-                value={purchaseDate}
-                style={styles.row}
-                labelStyle={styles.label}
-                valueStyle={styles.value}
-              />
-            )}
-          </>
-        )}
-      </View>
+      <SubscriptionHeaderContent
+        isLifetime={isLifetime}
+        showExpirationDate={showExpirationDate}
+        expirationDate={expirationDate}
+        purchaseDate={purchaseDate}
+        showExpiring={showExpiring}
+        translations={translations}
+        styles={styles}
+      />
     </View>
   );
 };

package/src/domains/subscription/presentation/screens/components/SubscriptionHeader.types.ts

@@ -0,0 +1,20 @@
+export interface SubscriptionHeaderProps {
+  statusType: "active" | "expired" | "none" | "canceled";
+  showExpirationDate: boolean;
+  isLifetime: boolean;
+  expirationDate?: string;
+  purchaseDate?: string;
+  daysRemaining?: number | null;
+  hideTitle?: boolean;
+  translations: {
+    title: string;
+    statusActive: string;
+    statusExpired: string;
+    statusFree: string;
+    statusCanceled: string;
+    statusLabel: string;
+    lifetimeLabel: string;
+    expiresLabel: string;
+    purchasedLabel: string;
+  };
+}

package/src/domains/subscription/presentation/screens/components/SubscriptionHeaderContent.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { View } from "react-native";
+import { DetailRow } from "../../components/details/DetailRow";
+import type { SubscriptionHeaderProps } from "./SubscriptionHeader.types";
+
+interface SubscriptionHeaderContentProps {
+  isLifetime: boolean;
+  showExpirationDate: boolean;
+  expirationDate?: string;
+  purchaseDate?: string;
+  showExpiring: boolean;
+  translations: SubscriptionHeaderProps["translations"];
+  styles: any;
+}
+
+export const SubscriptionHeaderContent: React.FC<SubscriptionHeaderContentProps> = ({
+  isLifetime,
+  showExpirationDate,
+  expirationDate,
+  purchaseDate,
+  showExpiring,
+  translations,
+  styles,
+}) => (
+  <View style={styles.details}>
+    {isLifetime ? (
+      <DetailRow
+        label={translations.statusLabel}
+        value={translations.lifetimeLabel}
+        style={styles.row}
+        labelStyle={styles.label}
+        valueStyle={styles.value}
+      />
+    ) : (
+      <>
+        {showExpirationDate && expirationDate && (
+          <DetailRow
+            label={translations.expiresLabel}
+            value={expirationDate}
+            highlight={showExpiring}
+            style={styles.row}
+            labelStyle={styles.label}
+            valueStyle={styles.value}
+          />
+        )}
+        {purchaseDate && (
+          <DetailRow
+            label={translations.purchasedLabel}
+            value={purchaseDate}
+            style={styles.row}
+            labelStyle={styles.label}
+            valueStyle={styles.value}
+          />
+        )}
+      </>
+    )}
+  </View>
+);

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

@@ -1,30 +1,10 @@
-/**
- * useFeatureGate Hook
- * Unified feature gate: Auth → Subscription → Credits
- * Uses ref pattern to avoid stale closure issues.
- * Event-driven approach - no polling, no waiting.
- */
-
 import { useCallback, useRef, useEffect } from "react";
+import type { UseFeatureGateParams, UseFeatureGateResult } from "./useFeatureGate.types";
+import { DEFAULT_REQUIRED_CREDITS, shouldExecuteAuthAction, shouldExecutePurchaseAction } from "./featureGateHelpers";
+import { useSyncedRefs } from "./featureGateRefs";
+import { executeFeatureAction } from "./featureGateActions";
 
-export interface UseFeatureGateParams {
-  readonly isAuthenticated: boolean;
-  readonly onShowAuthModal: (pendingCallback: () => void | Promise<void>) => void;
-  readonly hasSubscription?: boolean;
-  readonly creditBalance: number;
-  readonly requiredCredits?: number;
-  readonly onShowPaywall: (requiredCredits?: number) => void;
-  readonly isCreditsLoaded?: boolean;
-}
-
-export interface UseFeatureGateResult {
-  readonly requireFeature: (action: () => void | Promise<void>) => void;
-  readonly isAuthenticated: boolean;
-  readonly hasSubscription: boolean;
-  readonly hasCredits: boolean;
-  readonly creditBalance: number;
-  readonly canAccess: boolean;
-}
+export type { UseFeatureGateParams, UseFeatureGateResult } from "./useFeatureGate.types";
 
 export function useFeatureGate(params: UseFeatureGateParams): UseFeatureGateResult {
   const {
@@ -32,7 +12,7 @@ export function useFeatureGate(params: UseFeatureGateParams): UseFeatureGateResu
     onShowAuthModal,
     hasSubscription = false,
     creditBalance,
-    requiredCredits = 1,
+    requiredCredits = DEFAULT_REQUIRED_CREDITS,
     onShowPaywall,
     isCreditsLoaded = true,
   } = params;
@@ -42,52 +22,41 @@ export function useFeatureGate(params: UseFeatureGateParams): UseFeatureGateResu
   const isWaitingForPurchaseRef = useRef(false);
   const isWaitingForAuthCreditsRef = useRef(false);
 
-  const creditBalanceRef = useRef(creditBalance);
-  const hasSubscriptionRef = useRef(hasSubscription);
-  const onShowPaywallRef = useRef(onShowPaywall);
-  const requiredCreditsRef = useRef(requiredCredits);
-
-  useEffect(() => {
-    creditBalanceRef.current = creditBalance;
-  }, [creditBalance]);
-
-  useEffect(() => {
-    hasSubscriptionRef.current = hasSubscription;
-  }, [hasSubscription]);
-
-  useEffect(() => {
-    onShowPaywallRef.current = onShowPaywall;
-  }, [onShowPaywall]);
-
-  useEffect(() => {
-    requiredCreditsRef.current = requiredCredits;
-  }, [requiredCredits]);
+  const { creditBalanceRef, hasSubscriptionRef, onShowPaywallRef, requiredCreditsRef } = useSyncedRefs(creditBalance, hasSubscription, onShowPaywall, requiredCredits);
 
   useEffect(() => {
-    if (!isWaitingForAuthCreditsRef.current || !isCreditsLoaded || !pendingActionRef.current) {
-      return;
-    }
-
-    isWaitingForAuthCreditsRef.current = false;
-
-    if (hasSubscription || creditBalance >= requiredCredits) {
-      const action = pendingActionRef.current;
+    if (shouldExecuteAuthAction(
+      isWaitingForAuthCreditsRef.current,
+      isCreditsLoaded,
+      !!pendingActionRef.current,
+      hasSubscription,
+      creditBalance,
+      requiredCredits
+    )) {
+      isWaitingForAuthCreditsRef.current = false;
+      const action = pendingActionRef.current!;
       pendingActionRef.current = null;
       action();
       return;
     }
 
-    isWaitingForPurchaseRef.current = true;
-    onShowPaywall(requiredCredits);
+    if (isWaitingForAuthCreditsRef.current && isCreditsLoaded && pendingActionRef.current) {
+      isWaitingForAuthCreditsRef.current = false;
+      isWaitingForPurchaseRef.current = true;
+      onShowPaywall(requiredCredits);
+    }
   }, [isCreditsLoaded, creditBalance, hasSubscription, requiredCredits, onShowPaywall]);
 
   useEffect(() => {
-    const prevBalance = prevCreditBalanceRef.current ?? 0;
-    const creditsIncreased = creditBalance > prevBalance;
-    const subscriptionAcquired = hasSubscription && !hasSubscriptionRef.current;
-
-    if (isWaitingForPurchaseRef.current && (creditsIncreased || subscriptionAcquired) && pendingActionRef.current) {
-      const action = pendingActionRef.current;
+    if (shouldExecutePurchaseAction(
+      isWaitingForPurchaseRef.current,
+      creditBalance,
+      prevCreditBalanceRef.current ?? 0,
+      hasSubscription,
+      hasSubscriptionRef.current,
+      !!pendingActionRef.current
+    )) {
+      const action = pendingActionRef.current!;
       pendingActionRef.current = null;
       isWaitingForPurchaseRef.current = false;
       action();
@@ -99,45 +68,28 @@ export function useFeatureGate(params: UseFeatureGateParams): UseFeatureGateResu
 
   const requireFeature = useCallback(
     (action: () => void | Promise<void>) => {
-      if (!isAuthenticated) {
-        const postAuthAction = () => {
-          pendingActionRef.current = action;
-          isWaitingForAuthCreditsRef.current = true;
-        };
-        onShowAuthModal(postAuthAction);
-        return;
-      }
-
-      // Use ref values to avoid stale closure
-      const currentHasSubscription = hasSubscriptionRef.current;
-      const currentBalance = creditBalanceRef.current;
-      const currentRequiredCredits = requiredCreditsRef.current;
-
-      if (currentHasSubscription) {
-        action();
-        return;
-      }
-
-      if (currentBalance < currentRequiredCredits) {
-        pendingActionRef.current = action;
-        isWaitingForPurchaseRef.current = true;
-        onShowPaywallRef.current(currentRequiredCredits);
-        return;
-      }
-
-      action();
+      executeFeatureAction(
+        action,
+        isAuthenticated,
+        onShowAuthModal,
+        hasSubscriptionRef,
+        creditBalanceRef,
+        requiredCreditsRef,
+        onShowPaywallRef,
+        pendingActionRef,
+        isWaitingForAuthCreditsRef,
+        isWaitingForPurchaseRef
+      );
     },
-    [isAuthenticated, onShowAuthModal]
+    [isAuthenticated, onShowAuthModal, hasSubscriptionRef, creditBalanceRef, requiredCreditsRef, onShowPaywallRef]
   );
 
-  const hasCredits = creditBalance >= requiredCredits;
-
   return {
     requireFeature,
     isAuthenticated,
     hasSubscription,
-    hasCredits,
+    hasCredits: creditBalance >= requiredCredits,
     creditBalance,
-    canAccess: isAuthenticated && (hasSubscription || hasCredits),
+    canAccess: isAuthenticated && (hasSubscription || creditBalance >= requiredCredits),
   };
 }

package/src/domains/subscription/presentation/useFeatureGate.types.ts

@@ -0,0 +1,18 @@
+export interface UseFeatureGateParams {
+  readonly isAuthenticated: boolean;
+  readonly onShowAuthModal: (pendingCallback: () => void | Promise<void>) => void;
+  readonly hasSubscription?: boolean;
+  readonly creditBalance: number;
+  readonly requiredCredits?: number;
+  readonly onShowPaywall: (requiredCredits?: number) => void;
+  readonly isCreditsLoaded?: boolean;
+}
+
+export interface UseFeatureGateResult {
+  readonly requireFeature: (action: () => void | Promise<void>) => void;
+  readonly isAuthenticated: boolean;
+  readonly hasSubscription: boolean;
+  readonly hasCredits: boolean;
+  readonly creditBalance: number;
+  readonly canAccess: boolean;
+}