@umituz/react-native-subscription 2.27.145 → 2.27.147

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.27.145",
+  "version": "2.27.147",
   "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/components/details/PremiumDetailsCard.constants.ts

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

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

@@ -1,17 +1,13 @@
-/**
- * Premium Details Card
- * Generic component for displaying subscription details
- * Accepts credits via props for app-specific customization
- */
-
 import React from "react";
-import { View, TouchableOpacity } from "react-native";
+import { View } from "react-native";
 import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
-import { PremiumStatusBadge } from "./PremiumStatusBadge";
 import { DetailRow } from "./DetailRow";
 import { CreditRow } from "./CreditRow";
 import { styles } from "./PremiumDetailsCard.styles";
 import type { PremiumDetailsCardProps } from "./PremiumDetailsCardTypes";
+import { PremiumDetailsCardHeader } from "./PremiumDetailsCardHeader";
+import { PremiumDetailsCardActions } from "./PremiumDetailsCardActions";
+import { shouldHighlightExpiration } from "./premiumDetailsHelpers";
 
 export type { CreditInfo, PremiumDetailsTranslations, PremiumDetailsCardProps } from "./PremiumDetailsCardTypes";
 
@@ -32,60 +28,26 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
 
   return (
     <View style={[styles.card, { backgroundColor: tokens.colors.surface }]}>
-      {(isPremium || showCredits) && (
-        <View style={styles.header}>
-          <View style={styles.headerTitleContainer}>
-            <AtomicText type="titleLarge" style={{ color: tokens.colors.textPrimary }}>
-              {translations.title}
-            </AtomicText>
-          </View>
-          <PremiumStatusBadge
-            status={statusType}
-            activeLabel={translations.statusActive}
-            expiredLabel={translations.statusExpired}
-            noneLabel={translations.statusInactive}
-            canceledLabel={translations.statusCanceled}
-          />
-        </View>
-      )}
+      {(isPremium || showCredits) && <PremiumDetailsCardHeader statusType={statusType} translations={translations} />}
 
 
       {isPremium && (
         <View style={styles.detailsSection}>
           {isLifetime && translations.lifetimeLabel ? (
-            <DetailRow
-              label={translations.statusLabel}
-              value={translations.lifetimeLabel}
-            />
+            <DetailRow label={translations.statusLabel} value={translations.lifetimeLabel} />
           ) : (
             <>
               {expirationDate && (
-                <DetailRow
-                  label={translations.expiresLabel}
-                  value={expirationDate}
-                  highlight={
-                    daysRemaining !== null &&
-                    daysRemaining !== undefined &&
-                    daysRemaining > 0 &&
-                    daysRemaining <= 7
-                  }
-                />
-              )}
-              {purchaseDate && (
-                <DetailRow
-                  label={translations.purchasedLabel}
-                  value={purchaseDate}
-                />
+                <DetailRow label={translations.expiresLabel} value={expirationDate} highlight={shouldHighlightExpiration(daysRemaining)} />
               )}
+              {purchaseDate && <DetailRow label={translations.purchasedLabel} value={purchaseDate} />}
             </>
           )}
         </View>
       )}
 
       {showCredits && (
-        <View
-          style={[styles.creditsSection, { borderTopColor: tokens.colors.border }]}
-        >
+        <View style={[styles.creditsSection, { borderTopColor: tokens.colors.border }]}>
           {translations.creditsTitle && (
             <AtomicText type="labelMedium" style={[styles.sectionTitle, { color: tokens.colors.textPrimary }]}>
               {translations.creditsTitle}
@@ -103,34 +65,12 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
         </View>
       )}
 
-      <View style={styles.actionsSection}>
-        {isPremium && onManageSubscription && translations.manageButton && (
-          <TouchableOpacity
-            style={[
-              styles.secondaryButton,
-              { backgroundColor: tokens.colors.surfaceSecondary },
-            ]}
-            onPress={onManageSubscription}
-          >
-            <AtomicText type="labelLarge" style={{ color: tokens.colors.textPrimary }}>
-              {translations.manageButton}
-            </AtomicText>
-          </TouchableOpacity>
-        )}
-        {!isPremium && onUpgrade && translations.upgradeButton && (
-          <TouchableOpacity
-            style={[styles.premiumButton, { backgroundColor: tokens.colors.primary }]}
-            onPress={onUpgrade}
-          >
-            <AtomicText
-              type="titleMedium"
-              style={{ color: tokens.colors.onPrimary, fontWeight: "700" }}
-            >
-              {translations.upgradeButton}
-            </AtomicText>
-          </TouchableOpacity>
-        )}
-      </View>
+      <PremiumDetailsCardActions
+        isPremium={isPremium}
+        onManageSubscription={onManageSubscription}
+        onUpgrade={onUpgrade}
+        translations={translations}
+      />
     </View>
   );
 };

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { View, TouchableOpacity } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { styles } from "./PremiumDetailsCard.styles";
+import type { PremiumDetailsTranslations } from "./PremiumDetailsCardTypes";
+
+interface PremiumDetailsCardActionsProps {
+  isPremium: boolean;
+  onManageSubscription?: () => void;
+  onUpgrade?: () => void;
+  translations: PremiumDetailsTranslations;
+}
+
+export const PremiumDetailsCardActions: React.FC<PremiumDetailsCardActionsProps> = ({
+  isPremium,
+  onManageSubscription,
+  onUpgrade,
+  translations,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.actionsSection}>
+      {isPremium && onManageSubscription && translations.manageButton && (
+        <TouchableOpacity
+          style={[styles.secondaryButton, { backgroundColor: tokens.colors.surfaceSecondary }]}
+          onPress={onManageSubscription}
+        >
+          <AtomicText type="labelLarge" style={{ color: tokens.colors.textPrimary }}>
+            {translations.manageButton}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+      {!isPremium && onUpgrade && translations.upgradeButton && (
+        <TouchableOpacity
+          style={[styles.premiumButton, { backgroundColor: tokens.colors.primary }]}
+          onPress={onUpgrade}
+        >
+          <AtomicText type="titleMedium" style={{ color: tokens.colors.onPrimary, fontWeight: "700" }}>
+            {translations.upgradeButton}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { View } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { PremiumStatusBadge } from "./PremiumStatusBadge";
+import { styles } from "./PremiumDetailsCard.styles";
+import type { PremiumDetailsTranslations } from "./PremiumDetailsCardTypes";
+
+interface PremiumDetailsCardHeaderProps {
+  statusType: "active" | "expired" | "none" | "canceled";
+  translations: PremiumDetailsTranslations;
+}
+
+export const PremiumDetailsCardHeader: React.FC<PremiumDetailsCardHeaderProps> = ({ statusType, translations }) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.header}>
+      <View style={styles.headerTitleContainer}>
+        <AtomicText type="titleLarge" style={{ color: tokens.colors.textPrimary }}>
+          {translations.title}
+        </AtomicText>
+      </View>
+      <PremiumStatusBadge
+        status={statusType}
+        activeLabel={translations.statusActive}
+        expiredLabel={translations.statusExpired}
+        noneLabel={translations.statusInactive}
+        canceledLabel={translations.statusCanceled}
+      />
+    </View>
+  );
+};

package/src/domains/subscription/presentation/components/details/premiumDetailsHelpers.ts

@@ -0,0 +1,5 @@
+import { DAYS_REMAINING_WARNING_THRESHOLD } from "./PremiumDetailsCard.constants";
+
+export const shouldHighlightExpiration = (daysRemaining: number | null | undefined): boolean => {
+  return daysRemaining !== null && daysRemaining !== undefined && daysRemaining > 0 && daysRemaining <= DAYS_REMAINING_WARNING_THRESHOLD;
+};

package/src/domains/subscription/presentation/components/feedback/FeedbackOption.styles.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from "react-native";
+
+export const feedbackOptionStyles = StyleSheet.create({
+  optionRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  optionText: {
+    flex: 1,
+    marginRight: 12,
+  },
+  radioButton: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    borderWidth: 2,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  radioButtonInner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+  inputContainer: {
+    padding: 12,
+  },
+  textInput: {
+    fontSize: 15,
+    borderWidth: 1,
+    borderColor: "#ccc",
+  },
+});

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

@@ -1,21 +1,13 @@
-/**
- * Feedback Option Component
- * Single feedback option with radio button and optional text input
- */
-
 import React from "react";
-import { View, TouchableOpacity, TextInput, StyleSheet } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { FeedbackOptionProps } from "./FeedbackOption.types";
+import { feedbackOptionStyles } from "./FeedbackOption.styles";
+import { FEEDBACK_OPTION_OPACITY } from "./feedbackOptionConstants";
+import { FeedbackRadioButton } from "./FeedbackRadioButton";
+import { FeedbackTextInput } from "./FeedbackTextInput";
 
-interface FeedbackOptionProps {
-  isSelected: boolean;
-  text: string;
-  showInput: boolean;
-  placeholder: string;
-  inputValue: string;
-  onSelect: () => void;
-  onChangeText: (text: string) => void;
-}
+export type { FeedbackOptionProps } from "./FeedbackOption.types";
 
 export const FeedbackOption: React.FC<FeedbackOptionProps> = React.memo(({
   isSelected,
@@ -39,7 +31,7 @@ export const FeedbackOption: React.FC<FeedbackOptionProps> = React.memo(({
     <View style={containerStyle}>
       <TouchableOpacity
         style={[
-          styles.optionRow,
+          feedbackOptionStyles.optionRow,
           {
             borderBottomWidth: showInput ? 1 : 0,
             borderBottomColor: tokens.colors.border,
@@ -48,92 +40,21 @@ export const FeedbackOption: React.FC<FeedbackOptionProps> = React.memo(({
           },
         ]}
         onPress={onSelect}
-        activeOpacity={0.7}
+        activeOpacity={FEEDBACK_OPTION_OPACITY}
       >
         <AtomicText
           type="bodyMedium"
-          style={[
-            styles.optionText,
-            isSelected && { color: tokens.colors.primary, fontWeight: "600" },
-          ]}
+          style={[feedbackOptionStyles.optionText, isSelected && { color: tokens.colors.primary, fontWeight: "600" }]}
         >
           {text}
         </AtomicText>
 
-        <View
-          style={[
-            styles.radioButton,
-            {
-              borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
-              backgroundColor: isSelected ? tokens.colors.primary : "transparent",
-            },
-          ]}
-        >
-          {isSelected && (
-            <View style={[styles.radioButtonInner, { backgroundColor: tokens.colors.primary }]} />
-          )}
-        </View>
+        <FeedbackRadioButton isSelected={isSelected} />
       </TouchableOpacity>
 
-      {showInput && (
-        <View style={styles.inputContainer}>
-          <TextInput
-            style={[
-              styles.textInput,
-              {
-                backgroundColor: tokens.colors.surface,
-                borderRadius: tokens.borderRadius.sm,
-                padding: tokens.spacing.sm,
-                color: tokens.colors.textPrimary,
-                minHeight: 80,
-                textAlignVertical: "top",
-              },
-            ]}
-            placeholder={placeholder}
-            placeholderTextColor={tokens.colors.textTertiary}
-            multiline
-            maxLength={200}
-            value={inputValue}
-            onChangeText={onChangeText}
-            autoFocus
-          />
-        </View>
-      )}
+      {showInput && <FeedbackTextInput placeholder={placeholder} value={inputValue} onChangeText={onChangeText} />}
     </View>
   );
 });
 
 FeedbackOption.displayName = "FeedbackOption";
-
-const styles = StyleSheet.create({
-  optionRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  optionText: {
-    flex: 1,
-    marginRight: 12,
-  },
-  radioButton: {
-    width: 22,
-    height: 22,
-    borderRadius: 11,
-    borderWidth: 2,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  radioButtonInner: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-  },
-  inputContainer: {
-    padding: 12,
-  },
-  textInput: {
-    fontSize: 15,
-    borderWidth: 1,
-    borderColor: "#ccc",
-  },
-});

package/src/domains/subscription/presentation/components/feedback/FeedbackOption.types.ts

@@ -0,0 +1,9 @@
+export interface FeedbackOptionProps {
+  isSelected: boolean;
+  text: string;
+  showInput: boolean;
+  placeholder: string;
+  inputValue: string;
+  onSelect: () => void;
+  onChangeText: (text: string) => void;
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { View } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { feedbackOptionStyles } from "./FeedbackOption.styles";
+
+interface FeedbackRadioButtonProps {
+  isSelected: boolean;
+}
+
+export const FeedbackRadioButton: React.FC<FeedbackRadioButtonProps> = ({ isSelected }) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[
+        feedbackOptionStyles.radioButton,
+        {
+          borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+          backgroundColor: isSelected ? tokens.colors.primary : "transparent",
+        },
+      ]}
+    >
+      {isSelected && (
+        <View style={[feedbackOptionStyles.radioButtonInner, { backgroundColor: tokens.colors.primary }]} />
+      )}
+    </View>
+  );
+};

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { View, TextInput } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { feedbackOptionStyles } from "./FeedbackOption.styles";
+import { FEEDBACK_INPUT_MAX_LENGTH, FEEDBACK_INPUT_MIN_HEIGHT } from "./feedbackOptionConstants";
+
+interface FeedbackTextInputProps {
+  placeholder: string;
+  value: string;
+  onChangeText: (text: string) => void;
+}
+
+export const FeedbackTextInput: React.FC<FeedbackTextInputProps> = ({ placeholder, value, onChangeText }) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={feedbackOptionStyles.inputContainer}>
+      <TextInput
+        style={[
+          feedbackOptionStyles.textInput,
+          {
+            backgroundColor: tokens.colors.surface,
+            borderRadius: tokens.borderRadius.sm,
+            padding: tokens.spacing.sm,
+            color: tokens.colors.textPrimary,
+            minHeight: FEEDBACK_INPUT_MIN_HEIGHT,
+            textAlignVertical: "top",
+          },
+        ]}
+        placeholder={placeholder}
+        placeholderTextColor={tokens.colors.textTertiary}
+        multiline
+        maxLength={FEEDBACK_INPUT_MAX_LENGTH}
+        value={value}
+        onChangeText={onChangeText}
+        autoFocus
+      />
+    </View>
+  );
+};

package/src/domains/subscription/presentation/components/feedback/feedbackOptionConstants.ts

@@ -0,0 +1,3 @@
+export const FEEDBACK_INPUT_MAX_LENGTH = 200;
+export const FEEDBACK_INPUT_MIN_HEIGHT = 80;
+export const FEEDBACK_OPTION_OPACITY = 0.7;

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;
+}