@umituz/react-native-subscription 2.27.144 → 2.27.145

package/package.json

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