@umituz/react-native-subscription 2.14.17 → 2.14.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.14.17",
+  "version": "2.14.18",
   "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/index.ts

@@ -172,9 +172,17 @@ export {
   type SubscriptionDetailScreenProps,
   type SubscriptionDetailConfig,
   type SubscriptionDetailTranslations,
+  type DevTestActions,
+  type DevToolsConfig,
 } from "./presentation/screens/SubscriptionDetailScreen";
 
-export { type DevTestActions } from "./presentation/screens/components/DevTestSection";
+export type {
+  SubscriptionHeaderProps,
+  CreditsListProps,
+  CreditItemProps,
+  SubscriptionActionsProps,
+  DevTestSectionProps,
+} from "./presentation/types/SubscriptionDetailTypes";
 
 
 // =============================================================================

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

@@ -63,10 +63,10 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
 
       {isPremium && (
         <View style={styles.detailsSection}>
-          {isLifetime ? (
+          {isLifetime && translations.lifetimeLabel ? (
             <DetailRow
               label={translations.statusLabel}
-              value={translations.lifetimeLabel || "Lifetime"}
+              value={translations.lifetimeLabel}
             />
           ) : (
             <>

package/src/presentation/components/details/PremiumStatusBadge.tsx

@@ -3,10 +3,11 @@
  * Displays subscription status as a colored badge
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
-import { SubscriptionStatusType } from '../../../domain/entities/SubscriptionStatus';
+import type { SubscriptionStatusType } from "../../../domain/entities/SubscriptionStatus";
+
 export type { SubscriptionStatusType };
 
 export interface PremiumStatusBadgeProps {
@@ -17,9 +18,6 @@ export interface PremiumStatusBadgeProps {
   canceledLabel: string;
 }
 
-/**
- * Badge component showing subscription status
- */
 export const PremiumStatusBadge: React.FC<PremiumStatusBadgeProps> = ({
   status,
   activeLabel,
@@ -36,32 +34,38 @@ export const PremiumStatusBadge: React.FC<PremiumStatusBadgeProps> = ({
     canceled: canceledLabel,
   };
 
-  const colors: Record<SubscriptionStatusType, string> = {
-    active: tokens.colors.success,
-    expired: tokens.colors.error,
-    none: tokens.colors.textTertiary,
-    canceled: tokens.colors.warning,
-  };
+  const backgroundColor = useMemo(() => {
+    const colors: Record<SubscriptionStatusType, string> = {
+      active: tokens.colors.success,
+      expired: tokens.colors.error,
+      none: tokens.colors.textTertiary,
+      canceled: tokens.colors.warning,
+    };
+    return colors[status];
+  }, [status, tokens.colors]);
 
-  const backgroundColor = colors[status];
-  const label = labels[status];
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        badge: {
+          paddingHorizontal: tokens.spacing.sm,
+          paddingVertical: tokens.spacing.xs,
+          borderRadius: tokens.borderRadius.xs,
+          backgroundColor,
+        },
+        badgeText: {
+          fontWeight: "600",
+          color: tokens.colors.onPrimary,
+        },
+      }),
+    [tokens, backgroundColor]
+  );
 
   return (
-    <View style={[styles.badge, { backgroundColor }]}>
-      <AtomicText type="labelSmall" style={[styles.badgeText, { color: tokens.colors.onPrimary }]}>
-        {label}
+    <View style={styles.badge}>
+      <AtomicText type="labelSmall" style={styles.badgeText}>
+        {labels[status]}
       </AtomicText>
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  badge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-  },
-  badgeText: {
-    fontWeight: "600",
-  },
-});

package/src/presentation/screens/SubscriptionDetailScreen.tsx

@@ -10,123 +10,90 @@ import { useAppDesignTokens, ScreenLayout } from "@umituz/react-native-design-sy
 import { SubscriptionHeader } from "./components/SubscriptionHeader";
 import { CreditsList } from "./components/CreditsList";
 import { SubscriptionActions } from "./components/SubscriptionActions";
-import { DevTestSection, type DevTestActions } from "./components/DevTestSection";
-import type { SubscriptionStatusType } from "../components/details/PremiumStatusBadge";
-import type { CreditInfo } from "../components/details/PremiumDetailsCard";
+import { DevTestSection } from "./components/DevTestSection";
+import type { SubscriptionDetailScreenProps } from "../types/SubscriptionDetailTypes";
 
-export interface SubscriptionDetailTranslations {
-    title: string;
-    statusLabel: string;
-    statusActive: string;
-    statusExpired: string;
-    statusFree: string;
-    statusCanceled: string;
-    expiresLabel: string;
-    purchasedLabel: string;
-    lifetimeLabel: string;
-    creditsTitle: string;
-    remainingLabel: string;
-    usageTitle?: string;
-    manageButton: string;
-    upgradeButton: string;
-    creditsResetInfo?: string;
-}
+export type {
+  SubscriptionDetailTranslations,
+  SubscriptionDetailConfig,
+  SubscriptionDetailScreenProps,
+  DevTestActions,
+  DevToolsConfig,
+} from "../types/SubscriptionDetailTypes";
 
-export interface SubscriptionDetailConfig {
-    statusType: SubscriptionStatusType;
-    isPremium: boolean;
-    expirationDate?: string | null;
-    purchaseDate?: string | null;
-    isLifetime?: boolean;
-    daysRemaining?: number | null;
-    willRenew?: boolean;
-    credits?: CreditInfo[];
-    translations: SubscriptionDetailTranslations;
-    onManageSubscription?: () => void;
-    onUpgrade?: () => void;
-    devTools?: {
-        actions: DevTestActions;
-        title?: string;
-    };
-}
+export const SubscriptionDetailScreen: React.FC<SubscriptionDetailScreenProps> = ({
+  config,
+}) => {
+  const tokens = useAppDesignTokens();
+  const showCredits = config.credits && config.credits.length > 0;
+  const showUpgradeButton = !config.isPremium && config.onUpgrade;
 
-export interface SubscriptionDetailScreenProps {
-    config: SubscriptionDetailConfig;
-}
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        content: {
+          flexGrow: 1,
+          padding: tokens.spacing.lg,
+          gap: tokens.spacing.lg,
+        },
+        cardsContainer: {
+          gap: tokens.spacing.lg,
+        },
+        spacer: {
+          flex: 1,
+          minHeight: tokens.spacing.xl,
+        },
+      }),
+    [tokens]
+  );
 
-export const SubscriptionDetailScreen: React.FC<
-    SubscriptionDetailScreenProps
-> = ({ config }) => {
-    const tokens = useAppDesignTokens();
-    const showCredits = config.credits && config.credits.length > 0;
-    const showUpgradeButton = !config.isPremium && config.onUpgrade;
+  return (
+    <ScreenLayout
+      scrollable={true}
+      edges={["bottom"]}
+      backgroundColor={tokens.colors.backgroundPrimary}
+      contentContainerStyle={styles.content}
+      footer={
+        config.devTools ? (
+          <DevTestSection
+            actions={config.devTools.actions}
+            title={config.devTools.title}
+          />
+        ) : undefined
+      }
+    >
+      <View style={styles.cardsContainer}>
+        <SubscriptionHeader
+          statusType={config.statusType}
+          isPremium={config.isPremium}
+          isLifetime={config.isLifetime}
+          expirationDate={config.expirationDate}
+          purchaseDate={config.purchaseDate}
+          daysRemaining={config.daysRemaining}
+          translations={config.translations}
+        />
 
-    const styles = useMemo(
-        () =>
-            StyleSheet.create({
-                content: {
-                    flexGrow: 1,
-                    padding: tokens.spacing.lg,
-                    gap: tokens.spacing.lg,
-                },
-                cardsContainer: {
-                    gap: tokens.spacing.lg,
-                },
-                spacer: {
-                    flex: 1,
-                    minHeight: tokens.spacing.xl,
-                },
-            }),
-        [tokens]
-    );
-
-    return (
-        <ScreenLayout
-            scrollable={true}
-            edges={['bottom']}
-            backgroundColor={tokens.colors.backgroundPrimary}
-            contentContainerStyle={styles.content}
-            footer={
-                config.devTools ? (
-                    <DevTestSection
-                        actions={config.devTools.actions}
-                        title={config.devTools.title}
-                    />
-                ) : undefined
+        {showCredits && (
+          <CreditsList
+            credits={config.credits!}
+            title={
+              config.translations.usageTitle || config.translations.creditsTitle
             }
-        >
-            <View style={styles.cardsContainer}>
-                <SubscriptionHeader
-                    statusType={config.statusType}
-                    isPremium={config.isPremium}
-                    isLifetime={config.isLifetime}
-                    expirationDate={config.expirationDate}
-                    purchaseDate={config.purchaseDate}
-                    daysRemaining={config.daysRemaining}
-                    translations={config.translations}
-                />
-
-                {showCredits && (
-                    <CreditsList
-                        credits={config.credits!}
-                        title={
-                            config.translations.usageTitle || config.translations.creditsTitle
-                        }
-                        description={config.translations.creditsResetInfo}
-                        remainingLabel={config.translations.remainingLabel}
-                    />
-                )}
-            </View>
+            description={config.translations.creditsResetInfo}
+            remainingLabel={config.translations.remainingLabel}
+          />
+        )}
+      </View>
 
-            <View style={styles.spacer} />
+      <View style={styles.spacer} />
 
-            {showUpgradeButton && (
-                <SubscriptionActions
-                    isPremium={config.isPremium}
-                    upgradeButtonLabel={config.translations.upgradeButton}
-                    onUpgrade={config.onUpgrade}
-                />
-            )}
-        </ScreenLayout>
-    );
+      {showUpgradeButton && (
+        <SubscriptionActions
+          isPremium={config.isPremium}
+          upgradeButtonLabel={config.translations.upgradeButton}
+          onUpgrade={config.onUpgrade}
+        />
+      )}
+    </ScreenLayout>
+  );
 };

package/src/presentation/screens/components/CreditItem.tsx

@@ -3,98 +3,93 @@
  * Displays individual credit usage with progress bar
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
-
-interface CreditItemProps {
-    label: string;
-    current: number;
-    total: number;
-    remainingLabel?: string;
-}
+import type { CreditItemProps } from "../../types/SubscriptionDetailTypes";
 
 export const CreditItem: React.FC<CreditItemProps> = ({
-    label,
-    current,
-    total,
-    remainingLabel = "remaining",
+  label,
+  current,
+  total,
+  remainingLabel,
 }) => {
-    const tokens = useAppDesignTokens();
-    const percentage = total > 0 ? (current / total) * 100 : 0;
-    const isLow = percentage <= 20;
-    const isMedium = percentage > 20 && percentage <= 50;
+  const tokens = useAppDesignTokens();
+  const percentage = total > 0 ? (current / total) * 100 : 0;
+  const isLow = percentage <= 20;
+  const isMedium = percentage > 20 && percentage <= 50;
+
+  const progressColor = useMemo(() => {
+    if (isLow) return tokens.colors.error;
+    if (isMedium) return tokens.colors.warning;
+    return tokens.colors.success;
+  }, [isLow, isMedium, tokens.colors]);
 
-    const getColor = () => {
-        if (isLow) return tokens.colors.error;
-        if (isMedium) return tokens.colors.warning;
-        return tokens.colors.success;
-    };
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          gap: tokens.spacing.sm,
+        },
+        header: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        },
+        label: {
+          fontWeight: "500",
+        },
+        badge: {
+          paddingHorizontal: tokens.spacing.md,
+          paddingVertical: tokens.spacing.xs,
+          borderRadius: tokens.borderRadius.md,
+          backgroundColor: tokens.colors.surfaceSecondary,
+        },
+        count: {
+          fontWeight: "600",
+        },
+        progressBar: {
+          height: 8,
+          borderRadius: tokens.borderRadius.xs,
+          overflow: "hidden",
+          backgroundColor: tokens.colors.surfaceSecondary,
+        },
+        progressFill: {
+          height: "100%",
+          borderRadius: tokens.borderRadius.xs,
+          width: `${percentage}%`,
+          backgroundColor: progressColor,
+        },
+      }),
+    [tokens, percentage, progressColor]
+  );
 
-    return (
-        <View style={styles.container}>
-            <View style={styles.header}>
-                <AtomicText type="bodyMedium" style={[styles.label, { color: tokens.colors.textPrimary }]}>
-                    {label}
-                </AtomicText>
-                <View style={[styles.badge, { backgroundColor: tokens.colors.surfaceSecondary }]}>
-                    <AtomicText type="labelSmall" style={[styles.count, { color: getColor() }]}>
-                        {current} / {total}
-                    </AtomicText>
-                </View>
-            </View>
-            <View
-                style={[
-                    styles.progressBar,
-                    { backgroundColor: tokens.colors.surfaceSecondary },
-                ]}
-            >
-                <View
-                    style={[
-                        styles.progressFill,
-                        {
-                            width: `${percentage}%`,
-                            backgroundColor: getColor(),
-                        },
-                    ]}
-                />
-            </View>
-            <AtomicText type="bodySmall" style={[styles.remaining, { color: tokens.colors.textSecondary }]}>
-                {current} {remainingLabel}
-            </AtomicText>
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.label, { color: tokens.colors.textPrimary }]}
+        >
+          {label}
+        </AtomicText>
+        <View style={styles.badge}>
+          <AtomicText
+            type="labelSmall"
+            style={[styles.count, { color: progressColor }]}
+          >
+            {current} / {total}
+          </AtomicText>
         </View>
-    );
+      </View>
+      <View style={styles.progressBar}>
+        <View style={styles.progressFill} />
+      </View>
+      {remainingLabel && (
+        <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
+          {current} {remainingLabel}
+        </AtomicText>
+      )}
+    </View>
+  );
 };
-
-const styles = StyleSheet.create({
-    container: {
-        gap: 8,
-    },
-    header: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
-    label: {
-        fontWeight: "500",
-    },
-    badge: {
-        paddingHorizontal: 12,
-        paddingVertical: 4,
-        borderRadius: 12,
-    },
-    count: {
-        fontWeight: "600",
-    },
-    progressBar: {
-        height: 8,
-        borderRadius: 4,
-        overflow: "hidden",
-    },
-    progressFill: {
-        height: "100%",
-        borderRadius: 4,
-    },
-    remaining: {
-    },
-});

package/src/presentation/screens/components/CreditsList.tsx

@@ -3,69 +3,71 @@
  * Displays list of credit usages
  */
 
-import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import React, { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 import { CreditItem } from "./CreditItem";
-import type { CreditInfo } from "../../components/details/PremiumDetailsCard";
-
-interface CreditsListProps {
-    credits: CreditInfo[];
-    title?: string;
-    description?: string;
-    remainingLabel?: string;
-}
+import type { CreditsListProps } from "../../types/SubscriptionDetailTypes";
 
 export const CreditsList: React.FC<CreditsListProps> = ({
-    credits,
-    title,
-    description,
-    remainingLabel,
+  credits,
+  title,
+  description,
+  remainingLabel,
 }) => {
-    const tokens = useAppDesignTokens();
+  const tokens = useAppDesignTokens();
 
-    return (
-        <View style={[styles.container, { backgroundColor: tokens.colors.surface }]}>
-            {title && (
-                <Text style={[styles.title, { color: tokens.colors.textPrimary }]}>
-                    {title}
-                </Text>
-            )}
-            {description && (
-                <Text style={[styles.description, { color: tokens.colors.textSecondary }]}>
-                    {description}
-                </Text>
-            )}
-            <View style={styles.list}>
-                {credits.map((credit) => (
-                    <CreditItem
-                        key={credit.id}
-                        label={credit.label}
-                        current={credit.current}
-                        total={credit.total}
-                        remainingLabel={remainingLabel}
-                    />
-                ))}
-            </View>
-        </View>
-    );
-};
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          borderRadius: tokens.borderRadius.lg,
+          padding: tokens.spacing.lg,
+          gap: tokens.spacing.lg,
+          backgroundColor: tokens.colors.surface,
+        },
+        title: {
+          fontWeight: "700",
+        },
+        description: {
+          marginTop: -tokens.spacing.sm,
+        },
+        list: {
+          gap: tokens.spacing.lg,
+        },
+      }),
+    [tokens]
+  );
 
-const styles = StyleSheet.create({
-    container: {
-        borderRadius: 16,
-        padding: 20,
-        gap: 16,
-    },
-    title: {
-        fontSize: 18,
-        fontWeight: "700",
-    },
-    description: {
-        fontSize: 14,
-        marginTop: -8,
-    },
-    list: {
-        gap: 16,
-    },
-});
+  return (
+    <View style={styles.container}>
+      {title && (
+        <AtomicText
+          type="titleMedium"
+          style={[styles.title, { color: tokens.colors.textPrimary }]}
+        >
+          {title}
+        </AtomicText>
+      )}
+      {description && (
+        <AtomicText
+          type="bodySmall"
+          style={[styles.description, { color: tokens.colors.textSecondary }]}
+        >
+          {description}
+        </AtomicText>
+      )}
+      <View style={styles.list}>
+        {credits.map((credit) => (
+          <CreditItem
+            key={credit.id}
+            label={credit.label}
+            current={credit.current}
+            total={credit.total}
+            remainingLabel={remainingLabel}
+          />
+        ))}
+      </View>
+    </View>
+  );
+};

package/src/presentation/screens/components/DevTestSection.tsx

@@ -4,118 +4,122 @@
  * Only visible in __DEV__ mode
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { DevTestSectionProps } from "../../types/SubscriptionDetailTypes";
 
-export interface DevTestActions {
-  onTestRenewal: () => Promise<void>;
-  onCheckCredits: () => void;
-  onTestDuplicate: () => Promise<void>;
+export type { DevTestActions, DevTestSectionProps } from "../../types/SubscriptionDetailTypes";
+
+/** Dev test button translations */
+export interface DevTestTranslations {
+  title: string;
+  testRenewal: string;
+  checkCredits: string;
+  testDuplicate: string;
 }
 
-export interface DevTestSectionProps {
-  actions: DevTestActions;
-  title?: string;
+export interface DevTestSectionWithTranslationsProps extends DevTestSectionProps {
+  translations?: DevTestTranslations;
 }
 
-export const DevTestSection: React.FC<DevTestSectionProps> = ({
+export const DevTestSection: React.FC<DevTestSectionWithTranslationsProps> = ({
   actions,
-  title = "🧪 Developer Testing",
+  title,
+  translations,
 }) => {
   const tokens = useAppDesignTokens();
 
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          padding: tokens.spacing.lg,
+          gap: tokens.spacing.md,
+          borderTopWidth: 1,
+          backgroundColor: tokens.colors.surfaceSecondary,
+          borderTopColor: tokens.colors.border,
+        },
+        title: {
+          fontWeight: "600",
+          marginBottom: tokens.spacing.xs,
+        },
+        button: {
+          paddingVertical: tokens.spacing.md,
+          paddingHorizontal: tokens.spacing.lg,
+          borderRadius: tokens.borderRadius.md,
+          alignItems: "center",
+        },
+        primaryButton: {
+          backgroundColor: tokens.colors.primary,
+        },
+        secondaryButton: {
+          backgroundColor: tokens.colors.surfaceSecondary,
+          borderWidth: 1,
+          borderColor: tokens.colors.border,
+        },
+        buttonText: {
+          fontWeight: "500",
+        },
+      }),
+    [tokens]
+  );
+
   if (!__DEV__) {
     return null;
   }
 
+  const displayTitle = title || translations?.title;
+  const renewalText = translations?.testRenewal || "Test Auto-Renewal";
+  const creditsText = translations?.checkCredits || "Check Credits";
+  const duplicateText = translations?.testDuplicate || "Test Duplicate Protection";
+
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          backgroundColor: tokens.colors.surfaceSecondary,
-          borderTopColor: tokens.colors.border,
-        },
-      ]}
-    >
-      <AtomicText
-        type="titleMedium"
-        style={[styles.title, { color: tokens.colors.textPrimary }]}
-      >
-        {title}
-      </AtomicText>
+    <View style={styles.container}>
+      {displayTitle && (
+        <AtomicText
+          type="titleMedium"
+          style={[styles.title, { color: tokens.colors.textPrimary }]}
+        >
+          {displayTitle}
+        </AtomicText>
+      )}
 
       <TouchableOpacity
-        style={[styles.button, { backgroundColor: tokens.colors.primary }]}
+        style={[styles.button, styles.primaryButton]}
         onPress={actions.onTestRenewal}
       >
         <AtomicText
           type="bodyMedium"
           style={[styles.buttonText, { color: tokens.colors.onPrimary }]}
         >
-          ⚡ Test Auto-Renewal (Add Credits)
+          {renewalText}
         </AtomicText>
       </TouchableOpacity>
 
       <TouchableOpacity
-        style={[
-          styles.button,
-          {
-            backgroundColor: tokens.colors.surfaceSecondary,
-            borderWidth: 1,
-            borderColor: tokens.colors.border,
-          },
-        ]}
+        style={[styles.button, styles.secondaryButton]}
         onPress={actions.onCheckCredits}
       >
         <AtomicText
           type="bodyMedium"
           style={[styles.buttonText, { color: tokens.colors.textPrimary }]}
         >
-          📊 Check Current Credits
+          {creditsText}
         </AtomicText>
       </TouchableOpacity>
 
       <TouchableOpacity
-        style={[
-          styles.button,
-          {
-            backgroundColor: tokens.colors.surfaceSecondary,
-            borderWidth: 1,
-            borderColor: tokens.colors.border,
-          },
-        ]}
+        style={[styles.button, styles.secondaryButton]}
         onPress={actions.onTestDuplicate}
       >
         <AtomicText
           type="bodyMedium"
           style={[styles.buttonText, { color: tokens.colors.textPrimary }]}
         >
-          🔒 Test Duplicate Protection
+          {duplicateText}
         </AtomicText>
       </TouchableOpacity>
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 16,
-    gap: 12,
-    borderTopWidth: 1,
-  },
-  title: {
-    fontWeight: "600",
-    marginBottom: 4,
-  },
-  button: {
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    alignItems: "center",
-  },
-  buttonText: {
-    fontWeight: "500",
-  },
-});

package/src/presentation/screens/components/SubscriptionActions.tsx

@@ -6,51 +6,46 @@
 import React, { useMemo } from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
-
-interface SubscriptionActionsProps {
-    isPremium: boolean;
-    upgradeButtonLabel?: string;
-    onUpgrade?: () => void;
-}
+import type { SubscriptionActionsProps } from "../../types/SubscriptionDetailTypes";
 
 export const SubscriptionActions: React.FC<SubscriptionActionsProps> = ({
-    isPremium,
-    upgradeButtonLabel,
-    onUpgrade,
+  isPremium,
+  upgradeButtonLabel,
+  onUpgrade,
 }) => {
-    const tokens = useAppDesignTokens();
+  const tokens = useAppDesignTokens();
 
-    const styles = useMemo(
-        () =>
-            StyleSheet.create({
-                container: {
-                    paddingBottom: tokens.spacing.xl,
-                },
-                primaryButton: {
-                    paddingVertical: tokens.spacing.md,
-                    borderRadius: tokens.borderRadius.lg,
-                    alignItems: "center",
-                    backgroundColor: tokens.colors.primary,
-                },
-                buttonText: {
-                    color: tokens.colors.onPrimary,
-                    fontWeight: "700",
-                },
-            }),
-        [tokens]
-    );
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingBottom: tokens.spacing.xl,
+        },
+        primaryButton: {
+          paddingVertical: tokens.spacing.md,
+          borderRadius: tokens.borderRadius.lg,
+          alignItems: "center",
+          backgroundColor: tokens.colors.primary,
+        },
+        buttonText: {
+          color: tokens.colors.onPrimary,
+          fontWeight: "700",
+        },
+      }),
+    [tokens]
+  );
 
-    if (isPremium || !onUpgrade || !upgradeButtonLabel) {
-        return null;
-    }
+  if (isPremium || !onUpgrade || !upgradeButtonLabel) {
+    return null;
+  }
 
-    return (
-        <View style={styles.container}>
-            <TouchableOpacity style={styles.primaryButton} onPress={onUpgrade}>
-                <AtomicText type="titleMedium" style={styles.buttonText}>
-                    {upgradeButtonLabel}
-                </AtomicText>
-            </TouchableOpacity>
-        </View>
-    );
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity style={styles.primaryButton} onPress={onUpgrade}>
+        <AtomicText type="titleMedium" style={styles.buttonText}>
+          {upgradeButtonLabel}
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
 };

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

@@ -3,163 +3,157 @@
  * Displays status badge and subscription details
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
-import {
-    PremiumStatusBadge,
-    type SubscriptionStatusType,
-} from "../../components/details/PremiumStatusBadge";
-
-interface SubscriptionHeaderTranslations {
-    title: string;
-    statusLabel: string;
-    statusActive: string;
-    statusExpired: string;
-    statusFree: string;
-    statusCanceled: string;
-    expiresLabel: string;
-    purchasedLabel: string;
-    lifetimeLabel: string;
-}
-
-interface SubscriptionHeaderProps {
-    statusType: SubscriptionStatusType;
-    isPremium: boolean;
-    isLifetime?: boolean;
-    expirationDate?: string | null;
-    purchaseDate?: string | null;
-    daysRemaining?: number | null;
-    translations: SubscriptionHeaderTranslations;
-}
+import { PremiumStatusBadge } from "../../components/details/PremiumStatusBadge";
+import type { SubscriptionHeaderProps } from "../../types/SubscriptionDetailTypes";
 
 export const SubscriptionHeader: React.FC<SubscriptionHeaderProps> = ({
-    statusType,
-    isPremium,
-    isLifetime,
-    expirationDate,
-    purchaseDate,
-    daysRemaining,
-    translations,
+  statusType,
+  isPremium,
+  isLifetime,
+  expirationDate,
+  purchaseDate,
+  daysRemaining,
+  translations,
 }) => {
-    const tokens = useAppDesignTokens();
-    const showExpiring =
-        daysRemaining !== null &&
-        daysRemaining !== undefined &&
-        daysRemaining <= 7;
+  const tokens = useAppDesignTokens();
+  const showExpiring =
+    daysRemaining !== null && daysRemaining !== undefined && daysRemaining <= 7;
 
-    return (
-        <View style={[styles.container, { backgroundColor: tokens.colors.surface }]}>
-            <View style={styles.header}>
-                <View style={styles.titleContainer}>
-                    <AtomicText type="headlineSmall" style={[styles.title, { color: tokens.colors.textPrimary }]}>
-                        {translations.title}
-                    </AtomicText>
-                </View>
-                <PremiumStatusBadge
-                    status={statusType}
-                    activeLabel={translations.statusActive}
-                    expiredLabel={translations.statusExpired}
-                    noneLabel={translations.statusFree}
-                    canceledLabel={translations.statusCanceled}
-                />
-            </View>
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          borderRadius: tokens.borderRadius.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]
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <View style={styles.titleContainer}>
+          <AtomicText
+            type="headlineSmall"
+            style={[styles.title, { color: tokens.colors.textPrimary }]}
+          >
+            {translations.title}
+          </AtomicText>
+        </View>
+        <PremiumStatusBadge
+          status={statusType}
+          activeLabel={translations.statusActive}
+          expiredLabel={translations.statusExpired}
+          noneLabel={translations.statusFree}
+          canceledLabel={translations.statusCanceled}
+        />
+      </View>
 
-            {isPremium && (
-                <View style={styles.details}>
-                    {isLifetime ? (
-                        <DetailRow
-                            label={translations.statusLabel}
-                            value={translations.lifetimeLabel}
-                            tokens={tokens}
-                        />
-                    ) : (
-                        <>
-                            {expirationDate && (
-                                <DetailRow
-                                    label={translations.expiresLabel}
-                                    value={expirationDate}
-                                    highlight={showExpiring}
-                                    tokens={tokens}
-                                />
-                            )}
-                            {purchaseDate && (
-                                <DetailRow
-                                    label={translations.purchasedLabel}
-                                    value={purchaseDate}
-                                    tokens={tokens}
-                                />
-                            )}
-                        </>
-                    )}
-                </View>
-            )}
+      {isPremium && (
+        <View style={styles.details}>
+          {isLifetime ? (
+            <DetailRow
+              label={translations.statusLabel}
+              value={translations.lifetimeLabel}
+              tokens={tokens}
+              styles={styles}
+            />
+          ) : (
+            <>
+              {expirationDate && (
+                <DetailRow
+                  label={translations.expiresLabel}
+                  value={expirationDate}
+                  highlight={showExpiring}
+                  tokens={tokens}
+                  styles={styles}
+                />
+              )}
+              {purchaseDate && (
+                <DetailRow
+                  label={translations.purchasedLabel}
+                  value={purchaseDate}
+                  tokens={tokens}
+                  styles={styles}
+                />
+              )}
+            </>
+          )}
         </View>
-    );
+      )}
+    </View>
+  );
 };
 
 interface DetailRowProps {
-    label: string;
-    value: string;
-    highlight?: boolean;
-    tokens: ReturnType<typeof useAppDesignTokens>;
+  label: string;
+  value: string;
+  highlight?: boolean;
+  tokens: ReturnType<typeof useAppDesignTokens>;
+  styles: {
+    row: object;
+    label: object;
+    value: object;
+  };
 }
 
 const DetailRow: React.FC<DetailRowProps> = ({
-    label,
-    value,
-    highlight,
-    tokens,
+  label,
+  value,
+  highlight,
+  tokens,
+  styles,
 }) => (
-    <View style={styles.row}>
-        <AtomicText type="bodyMedium" style={[styles.label, { color: tokens.colors.textSecondary }]}>
-            {label}
-        </AtomicText>
-        <AtomicText
-            type="bodyMedium"
-            style={[
-                styles.value,
-                { color: highlight ? tokens.colors.warning : tokens.colors.textPrimary },
-            ]}
-        >
-            {value}
-        </AtomicText>
-    </View>
+  <View style={styles.row}>
+    <AtomicText
+      type="bodyMedium"
+      style={[styles.label, { color: tokens.colors.textSecondary }]}
+    >
+      {label}
+    </AtomicText>
+    <AtomicText
+      type="bodyMedium"
+      style={[
+        styles.value,
+        { color: highlight ? tokens.colors.warning : tokens.colors.textPrimary },
+      ]}
+    >
+      {value}
+    </AtomicText>
+  </View>
 );
-
-const styles = StyleSheet.create({
-    container: {
-        borderRadius: 16,
-        padding: 20,
-        gap: 16,
-    },
-    header: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
-    titleContainer: {
-        flex: 1,
-        marginRight: 12,
-    },
-    title: {
-        fontWeight: "700",
-    },
-    details: {
-        gap: 12,
-        paddingTop: 12,
-    },
-    row: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        gap: 16,
-    },
-    label: {
-        flex: 1,
-    },
-    value: {
-        fontWeight: "600",
-        textAlign: "right",
-    },
-});

package/src/presentation/types/SubscriptionDetailTypes.ts

@@ -0,0 +1,113 @@
+/**
+ * Subscription Detail Types
+ * Type definitions for subscription detail screen and components
+ */
+
+import type { SubscriptionStatusType } from "../../domain/entities/SubscriptionStatus";
+import type { CreditInfo } from "../components/details/PremiumDetailsCardTypes";
+
+export type { SubscriptionStatusType, CreditInfo };
+
+/** Translation strings for subscription detail screen */
+export interface SubscriptionDetailTranslations {
+  title: string;
+  statusLabel: string;
+  statusActive: string;
+  statusExpired: string;
+  statusFree: string;
+  statusCanceled: string;
+  expiresLabel: string;
+  purchasedLabel: string;
+  lifetimeLabel: string;
+  creditsTitle: string;
+  remainingLabel: string;
+  usageTitle?: string;
+  manageButton: string;
+  upgradeButton: string;
+  creditsResetInfo?: string;
+}
+
+/** Dev test action callbacks */
+export interface DevTestActions {
+  onTestRenewal: () => Promise<void>;
+  onCheckCredits: () => void;
+  onTestDuplicate: () => Promise<void>;
+}
+
+/** Dev tools configuration */
+export interface DevToolsConfig {
+  actions: DevTestActions;
+  title?: string;
+}
+
+/** Configuration for subscription detail screen */
+export interface SubscriptionDetailConfig {
+  statusType: SubscriptionStatusType;
+  isPremium: boolean;
+  expirationDate?: string | null;
+  purchaseDate?: string | null;
+  isLifetime?: boolean;
+  daysRemaining?: number | null;
+  willRenew?: boolean;
+  credits?: CreditInfo[];
+  translations: SubscriptionDetailTranslations;
+  onManageSubscription?: () => void;
+  onUpgrade?: () => void;
+  devTools?: DevToolsConfig;
+}
+
+/** Props for subscription detail screen */
+export interface SubscriptionDetailScreenProps {
+  config: SubscriptionDetailConfig;
+}
+
+/** Props for subscription header component */
+export interface SubscriptionHeaderProps {
+  statusType: SubscriptionStatusType;
+  isPremium: boolean;
+  isLifetime?: boolean;
+  expirationDate?: string | null;
+  purchaseDate?: string | null;
+  daysRemaining?: number | null;
+  translations: Pick<
+    SubscriptionDetailTranslations,
+    | "title"
+    | "statusLabel"
+    | "statusActive"
+    | "statusExpired"
+    | "statusFree"
+    | "statusCanceled"
+    | "expiresLabel"
+    | "purchasedLabel"
+    | "lifetimeLabel"
+  >;
+}
+
+/** Props for credits list component */
+export interface CreditsListProps {
+  credits: CreditInfo[];
+  title?: string;
+  description?: string;
+  remainingLabel?: string;
+}
+
+/** Props for credit item component */
+export interface CreditItemProps {
+  label: string;
+  current: number;
+  total: number;
+  remainingLabel?: string;
+}
+
+/** Props for subscription actions component */
+export interface SubscriptionActionsProps {
+  isPremium: boolean;
+  upgradeButtonLabel?: string;
+  onUpgrade?: () => void;
+}
+
+/** Props for dev test section */
+export interface DevTestSectionProps {
+  actions: DevTestActions;
+  title?: string;
+}

package/src/presentation/types/SubscriptionSettingsTypes.ts

@@ -3,10 +3,10 @@
  * Type definitions for subscription settings configuration
  */
 
-import type { SubscriptionDetailConfig } from "../screens/SubscriptionDetailScreen";
+import type { SubscriptionStatusType } from "../../domain/entities/SubscriptionStatus";
+import type { SubscriptionDetailConfig } from "./SubscriptionDetailTypes";
 
-/** Status type for subscription state */
-export type SubscriptionStatusType = "none" | "active" | "expired";
+export type { SubscriptionStatusType };
 
 /** Configuration for settings list item */
 export interface SubscriptionSettingsItemConfig {