@umituz/react-native-subscription 2.14.16 → 2.14.18

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 {