@umituz/react-native-subscription 2.14.16 → 2.14.18

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

@@ -1,77 +1,51 @@
 /**
  * Subscription Actions Component
- * Displays action buttons for subscription management
+ * Displays upgrade button for non-premium users
  */
 
-import React from "react";
+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;
-    manageButtonLabel?: string;
-    upgradeButtonLabel?: string;
-    onManage?: () => void;
-    onUpgrade?: () => void;
-}
+import type { SubscriptionActionsProps } from "../../types/SubscriptionDetailTypes";
 
 export const SubscriptionActions: React.FC<SubscriptionActionsProps> = ({
-    isPremium,
-    manageButtonLabel,
-    upgradeButtonLabel,
-    onManage,
-    onUpgrade,
+  isPremium,
+  upgradeButtonLabel,
+  onUpgrade,
 }) => {
-    const tokens = useAppDesignTokens();
+  const tokens = useAppDesignTokens();
 
-    return (
-        <View style={styles.container}>
-            {isPremium && onManage && manageButtonLabel && (
-                <TouchableOpacity
-                    style={[
-                        styles.secondaryButton,
-                        { backgroundColor: tokens.colors.surfaceSecondary },
-                    ]}
-                    onPress={onManage}
-                >
-                    <AtomicText
-                        type="titleMedium"
-                        style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
-                    >
-                        {manageButtonLabel}
-                    </AtomicText>
-                </TouchableOpacity>
-            )}
-            {!isPremium && onUpgrade && upgradeButtonLabel && (
-                <TouchableOpacity
-                    style={[styles.primaryButton, { backgroundColor: tokens.colors.primary }]}
-                    onPress={onUpgrade}
-                >
-                    <AtomicText
-                        type="titleMedium"
-                        style={{ color: tokens.colors.onPrimary, fontWeight: "700" }}
-                    >
-                        {upgradeButtonLabel}
-                    </AtomicText>
-                </TouchableOpacity>
-            )}
-        </View>
-    );
-};
+  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 = StyleSheet.create({
-    container: {
-        gap: 12,
-        paddingBottom: 32,
-    },
-    primaryButton: {
-        paddingVertical: 16,
-        borderRadius: 12,
-        alignItems: "center",
-    },
-    secondaryButton: {
-        paddingVertical: 16,
-        borderRadius: 12,
-        alignItems: "center",
-    },
-});
+  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>
+  );
+};