@umituz/react-native-subscription 2.27.144 → 2.27.146

package/package.json

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

package/src/domains/wallet/presentation/components/TransactionItem.styles.ts

@@ -0,0 +1,30 @@
+import { StyleSheet } from "react-native";
+
+export const transactionItemStyles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    borderRadius: 12,
+    marginBottom: 8,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  content: {
+    flex: 1,
+    gap: 2,
+  },
+  reason: {
+    fontWeight: "600",
+  },
+  change: {
+    fontWeight: "700",
+    marginLeft: 12,
+  },
+});

package/src/domains/wallet/presentation/components/TransactionItem.tsx

@@ -1,41 +1,12 @@
-/**
- * Transaction Item Component
- *
- * Displays a single credit transaction.
- * Props-driven for full customization.
- */
-
 import React, { useMemo } from "react";
-import { View, StyleSheet } from "react-native";
-import {
-    useAppDesignTokens,
-    AtomicText,
-    AtomicIcon,
-} from "@umituz/react-native-design-system";
-import { timezoneService } from "@umituz/react-native-design-system";
-import type { CreditLog } from "../../domain/types/transaction.types";
+import { View } from "react-native";
+import { useAppDesignTokens, AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
 import { getTransactionIcon } from "../../utils/transactionIconMap";
+import { transactionItemStyles } from "./TransactionItem.styles";
+import type { TransactionItemProps } from "./TransactionItem.types";
+import { defaultDateFormatter, getReasonLabel, getChangePrefix } from "./transactionItemHelpers";
 
-export interface TransactionItemTranslations {
-  purchase: string;
-  usage: string;
-  refund: string;
-  bonus: string;
-  subscription: string;
-  admin: string;
-  reward: string;
-  expired: string;
-}
-
-export interface TransactionItemProps {
-  transaction: CreditLog;
-  translations: TransactionItemTranslations;
-  dateFormatter?: (timestamp: number) => string;
-}
-
-const defaultDateFormatter = (timestamp: number): string => {
-  return timezoneService.formatToDisplayDateTime(new Date(timestamp));
-};
+export type { TransactionItemTranslations, TransactionItemProps } from "./TransactionItem.types";
 
 export const TransactionItem: React.FC<TransactionItemProps> = ({
   transaction,
@@ -44,89 +15,34 @@ export const TransactionItem: React.FC<TransactionItemProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const reasonLabel = useMemo(() => {
-    return translations[transaction.reason] || transaction.reason;
-  }, [transaction.reason, translations]);
+  const reasonLabel = useMemo(() => getReasonLabel(transaction.reason, translations), [transaction.reason, translations]);
 
   const isPositive = transaction.change > 0;
   const changeColor = isPositive ? tokens.colors.success : tokens.colors.error;
-  const changePrefix = isPositive ? "+" : "";
+  const changePrefix = getChangePrefix(transaction.change);
   const iconName = getTransactionIcon(transaction.reason);
 
   return (
-    <View
-      style={[
-        styles.container,
-        { backgroundColor: tokens.colors.surfaceSecondary },
-      ]}
-    >
-      <View
-        style={[
-          styles.iconContainer,
-          { backgroundColor: tokens.colors.surface },
-        ]}
-      >
+    <View style={[transactionItemStyles.container, { backgroundColor: tokens.colors.surfaceSecondary }]}>
+      <View style={[transactionItemStyles.iconContainer, { backgroundColor: tokens.colors.surface }]}>
         <AtomicIcon name={iconName} size="md" color="secondary" />
       </View>
-      <View style={styles.content}>
-        <AtomicText
-          type="bodyMedium"
-          style={[styles.reason, { color: tokens.colors.textPrimary }]}
-        >
+      <View style={transactionItemStyles.content}>
+        <AtomicText type="bodyMedium" style={[transactionItemStyles.reason, { color: tokens.colors.textPrimary }]}>
           {reasonLabel}
         </AtomicText>
         {transaction.description && (
-          <AtomicText
-            type="bodySmall"
-            style={{ color: tokens.colors.textSecondary }}
-            numberOfLines={1}
-          >
+          <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }} numberOfLines={1}>
             {transaction.description}
           </AtomicText>
         )}
-        <AtomicText
-          type="bodySmall"
-          style={{ color: tokens.colors.textSecondary }}
-        >
+        <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
           {dateFormatter(transaction.createdAt)}
         </AtomicText>
       </View>
-      <AtomicText
-        type="titleMedium"
-        style={[styles.change, { color: changeColor }]}
-      >
-        {changePrefix}
-        {transaction.change}
+      <AtomicText type="titleMedium" style={[transactionItemStyles.change, { color: changeColor }]}>
+        {changePrefix}{transaction.change}
       </AtomicText>
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 12,
-    borderRadius: 12,
-    marginBottom: 8,
-  },
-  iconContainer: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    justifyContent: "center",
-    alignItems: "center",
-    marginRight: 12,
-  },
-  content: {
-    flex: 1,
-    gap: 2,
-  },
-  reason: {
-    fontWeight: "600",
-  },
-  change: {
-    fontWeight: "700",
-    marginLeft: 12,
-  },
-});

package/src/domains/wallet/presentation/components/TransactionItem.types.ts

@@ -0,0 +1,18 @@
+import type { CreditLog } from "../../domain/types/transaction.types";
+
+export interface TransactionItemTranslations {
+  purchase: string;
+  usage: string;
+  refund: string;
+  bonus: string;
+  subscription: string;
+  admin: string;
+  reward: string;
+  expired: string;
+}
+
+export interface TransactionItemProps {
+  transaction: CreditLog;
+  translations: TransactionItemTranslations;
+  dateFormatter?: (timestamp: number) => string;
+}

package/src/domains/wallet/presentation/components/TransactionList.constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_TRANSACTION_LIST_MAX_HEIGHT = 400;

package/src/domains/wallet/presentation/components/TransactionList.styles.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from "react-native";
+
+export const transactionListStyles = StyleSheet.create({
+  container: {
+    marginTop: 24,
+    marginBottom: 24,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginHorizontal: 16,
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "700",
+  },
+  scrollView: {
+    paddingHorizontal: 16,
+  },
+  scrollContent: {
+    paddingBottom: 8,
+  },
+  stateContainer: {
+    padding: 40,
+    alignItems: "center",
+    gap: 12,
+  },
+  stateText: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});

package/src/domains/wallet/presentation/components/TransactionList.tsx

@@ -1,23 +1,11 @@
-/**
- * Transaction List Component
- *
- * Displays a list of credit transactions.
- * Props-driven for full customization.
- */
-
 import React from "react";
-import { View, StyleSheet, ScrollView } from "react-native";
-import {
-    useAppDesignTokens,
-    AtomicText,
-    AtomicIcon,
-    AtomicSpinner,
-} from "@umituz/react-native-design-system";
+import { View, ScrollView } from "react-native";
+import { useAppDesignTokens, AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
 import type { CreditLog } from "../../domain/types/transaction.types";
-import {
-    TransactionItem,
-    type TransactionItemTranslations,
-} from "./TransactionItem";
+import { TransactionItem, type TransactionItemTranslations } from "./TransactionItem";
+import { transactionListStyles } from "./TransactionList.styles";
+import { LoadingState, EmptyState } from "./TransactionListStates";
+import { DEFAULT_TRANSACTION_LIST_MAX_HEIGHT } from "./TransactionList.constants";
 
 export interface TransactionListTranslations extends TransactionItemTranslations {
   title: string;
@@ -37,89 +25,35 @@ export const TransactionList: React.FC<TransactionListProps> = ({
   transactions,
   loading,
   translations,
-  maxHeight = 400,
+  maxHeight = DEFAULT_TRANSACTION_LIST_MAX_HEIGHT,
   dateFormatter,
 }) => {
   const tokens = useAppDesignTokens();
 
   return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <AtomicText
-          type="titleLarge"
-          style={[styles.title, { color: tokens.colors.textPrimary }]}
-        >
+    <View style={transactionListStyles.container}>
+      <View style={transactionListStyles.header}>
+        <AtomicText type="titleLarge" style={[transactionListStyles.title, { color: tokens.colors.textPrimary }]}>
           {translations.title}
         </AtomicText>
         <AtomicIcon name="time-outline" size="md" color="secondary" />
       </View>
 
       {loading ? (
-        <AtomicSpinner
-          size="lg"
-          color="primary"
-          text={translations.loading}
-          style={styles.stateContainer}
-        />
+        <LoadingState message={translations.loading} />
       ) : transactions.length === 0 ? (
-        <View style={styles.stateContainer}>
-          <AtomicIcon name="file-tray-outline" size="xl" color="secondary" />
-          <AtomicText
-            type="bodyMedium"
-            style={[styles.stateText, { color: tokens.colors.textSecondary }]}
-          >
-            {translations.empty}
-          </AtomicText>
-        </View>
+        <EmptyState message={translations.empty} />
       ) : (
         <ScrollView
-          style={[styles.scrollView, { maxHeight }]}
-          contentContainerStyle={styles.scrollContent}
+          style={[transactionListStyles.scrollView, { maxHeight }]}
+          contentContainerStyle={transactionListStyles.scrollContent}
           showsVerticalScrollIndicator={false}
         >
           {transactions.map((transaction) => (
-            <TransactionItem
-              key={transaction.id}
-              transaction={transaction}
-              translations={translations}
-              dateFormatter={dateFormatter}
-            />
+            <TransactionItem key={transaction.id} transaction={transaction} translations={translations} dateFormatter={dateFormatter} />
           ))}
         </ScrollView>
       )}
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    marginTop: 24,
-    marginBottom: 24,
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginHorizontal: 16,
-    marginBottom: 16,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: "700",
-  },
-  scrollView: {
-    paddingHorizontal: 16,
-  },
-  scrollContent: {
-    paddingBottom: 8,
-  },
-  stateContainer: {
-    padding: 40,
-    alignItems: "center",
-    gap: 12,
-  },
-  stateText: {
-    fontSize: 14,
-    fontWeight: "500",
-  },
-});

package/src/domains/wallet/presentation/components/TransactionListStates.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { View } from "react-native";
+import { useAppDesignTokens, AtomicText, AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system";
+import { transactionListStyles } from "./TransactionList.styles";
+
+interface LoadingStateProps {
+  message: string;
+}
+
+export const LoadingState: React.FC<LoadingStateProps> = ({ message }) => (
+  <AtomicSpinner size="lg" color="primary" text={message} style={transactionListStyles.stateContainer} />
+);
+
+interface EmptyStateProps {
+  message: string;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({ message }) => {
+  const tokens = useAppDesignTokens();
+  return (
+    <View style={transactionListStyles.stateContainer}>
+      <AtomicIcon name="file-tray-outline" size="xl" color="secondary" />
+      <AtomicText type="bodyMedium" style={[transactionListStyles.stateText, { color: tokens.colors.textSecondary }]}>
+        {message}
+      </AtomicText>
+    </View>
+  );
+};

package/src/domains/wallet/presentation/components/transactionItemHelpers.ts

@@ -0,0 +1,14 @@
+import { timezoneService } from "@umituz/react-native-design-system";
+import type { TransactionItemTranslations } from "./TransactionItem.types";
+
+export const defaultDateFormatter = (timestamp: number): string => {
+  return timezoneService.formatToDisplayDateTime(new Date(timestamp));
+};
+
+export const getReasonLabel = (reason: string, translations: TransactionItemTranslations): string => {
+  return translations[reason as keyof TransactionItemTranslations] || reason;
+};
+
+export const getChangePrefix = (change: number): string => {
+  return change > 0 ? "+" : "";
+};