@umituz/react-native-subscription 2.14.87 → 2.14.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.14.87",
+  "version": "2.14.88",
   "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/infrastructure/mappers/CreditsMapper.ts

@@ -0,0 +1,27 @@
+/**
+ * Credits Mapper
+ * Maps Firestore data to UserCredits entity and vice-versa.
+ */
+
+import type { UserCredits } from "../../domain/entities/Credits";
+import type { UserCreditsDocumentRead } from "../models/UserCreditsDocument";
+
+export class CreditsMapper {
+  static toEntity(snapData: UserCreditsDocumentRead): UserCredits {
+    return {
+      textCredits: snapData.textCredits,
+      imageCredits: snapData.imageCredits,
+      purchasedAt: snapData.purchasedAt?.toDate?.() || new Date(),
+      lastUpdatedAt: snapData.lastUpdatedAt?.toDate?.() || new Date(),
+    };
+  }
+
+  static toFirestore(data: Partial<UserCredits>): Record<string, any> {
+    return {
+      textCredits: data.textCredits,
+      imageCredits: data.imageCredits,
+      // Timestamps are usually handled by serverTimestamp() in repos, 
+      // but we can map them if needed.
+    };
+  }
+}

package/src/infrastructure/repositories/CreditsRepository.ts

@@ -10,6 +10,8 @@ import { initializeCreditsTransaction } from "../services/CreditsInitializer";
 import { detectPackageType } from "../../utils/packageTypeDetector";
 import { getCreditAllocation } from "../../utils/creditMapper";
 
+import { CreditsMapper } from "../mappers/CreditsMapper";
+
 export class CreditsRepository extends BaseRepository {
   constructor(private config: CreditsConfig) { super(); }
 
@@ -26,7 +28,7 @@ export class CreditsRepository extends BaseRepository {
       const snap = await getDoc(this.getRef(db, userId));
       if (!snap.exists()) return { success: true, data: undefined };
       const d = snap.data() as UserCreditsDocumentRead;
-      return { success: true, data: { textCredits: d.textCredits, imageCredits: d.imageCredits, purchasedAt: d.purchasedAt?.toDate?.() || new Date(), lastUpdatedAt: d.lastUpdatedAt?.toDate?.() || new Date() } };
+      return { success: true, data: CreditsMapper.toEntity(d) };
     } catch (e: any) { return { success: false, error: { message: e.message, code: "FETCH_ERR" } }; }
   }
 
@@ -44,7 +46,14 @@ export class CreditsRepository extends BaseRepository {
         }
       }
       const res = await initializeCreditsTransaction(db, this.getRef(db, userId), cfg, purchaseId);
-      return { success: true, data: { textCredits: res.textCredits, imageCredits: res.imageCredits, purchasedAt: new Date(), lastUpdatedAt: new Date() } };
+      return { 
+        success: true, 
+        data: CreditsMapper.toEntity({
+            ...res,
+            purchasedAt: { toDate: () => new Date() } as any,
+            lastUpdatedAt: { toDate: () => new Date() } as any,
+        }) 
+      };
     } catch (e: any) { return { success: false, error: { message: e.message, code: "INIT_ERR" } }; }
   }
 

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

@@ -1,9 +1,4 @@
-/**
- * Credit Row Component
- * Displays credit information 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";
 
@@ -22,56 +17,75 @@ export const CreditRow: React.FC<CreditRowProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const percentage = total > 0 ? (current / total) * 100 : 0;
-  const isLow = percentage <= 20;
+  
+  // Progress color based on percentage
+  const progressColor = useMemo(() => {
+    if (percentage <= 20) return tokens.colors.error;
+    if (percentage <= 50) return tokens.colors.warning;
+    return tokens.colors.success;
+  }, [percentage, tokens.colors]);
 
   return (
     <View style={styles.container}>
       <View style={styles.header}>
-        <AtomicText type="bodySmall" style={{ color: tokens.colors.textPrimary }}>
+        <AtomicText type="bodyMedium" style={[styles.label, { color: tokens.colors.textPrimary }]}>
           {label}
         </AtomicText>
-        <AtomicText
-          type="bodySmall"
-          style={{
-            color: isLow ? tokens.colors.warning : tokens.colors.textSecondary,
-          }}
-        >
-          {current} / {total} {remainingLabel}
-        </AtomicText>
+        <View style={[styles.badge, { backgroundColor: tokens.colors.surfaceSecondary }]}>
+          <AtomicText type="labelSmall" style={[styles.count, { color: progressColor }]}>
+            {current} / {total}
+          </AtomicText>
+        </View>
       </View>
-      <View
-        style={[styles.progressBar, { backgroundColor: tokens.colors.surfaceSecondary }]}
-      >
+      <View style={[styles.progressBar, { backgroundColor: tokens.colors.surfaceSecondary }]}>
         <View
           style={[
             styles.progressFill,
             {
               width: `${percentage}%`,
-              backgroundColor: isLow ? tokens.colors.warning : tokens.colors.primary,
+              backgroundColor: progressColor,
             },
           ]}
         />
       </View>
+      {remainingLabel && (
+        <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
+          {current} {remainingLabel}
+        </AtomicText>
+      )}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    gap: 4,
+    gap: 8,
+    marginVertical: 4,
   },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
   },
+  label: {
+    fontWeight: "500",
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 6,
+  },
+  count: {
+    fontWeight: "600",
+  },
   progressBar: {
-    height: 6,
-    borderRadius: 3,
+    height: 8,
+    borderRadius: 4,
     overflow: "hidden",
   },
   progressFill: {
     height: "100%",
-    borderRadius: 3,
+    borderRadius: 4,
   },
 });
+

package/src/presentation/hooks/useSubscriptionDetails.ts

@@ -1,14 +1,7 @@
-/**
- * useSubscriptionDetails Hook
- * Provides formatted subscription details for display
- */
-
 import { useMemo } from "react";
 import type { SubscriptionStatus } from "../../domain/entities/SubscriptionStatus";
-import {
-    getDaysUntilExpiration,
-    isSubscriptionExpired,
-} from "../../utils/dateValidationUtils";
+import { isSubscriptionExpired } from "../../utils/dateValidationUtils";
+import { formatDateForLocale, calculateDaysRemaining } from "../utils/subscriptionDateUtils";
 
 export interface SubscriptionDetails {
   /** Raw subscription status */
@@ -34,24 +27,6 @@ interface UseSubscriptionDetailsParams {
   locale?: string;
 }
 
-/**
- * Format date to localized string
- */
-function formatDate(dateString: string | null, locale: string): string | null {
-  if (!dateString) return null;
-
-  try {
-    const date = new Date(dateString);
-    return date.toLocaleDateString(locale, {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    });
-  } catch {
-    return null;
-  }
-}
-
 /**
  * Hook for formatted subscription details
  */
@@ -76,7 +51,7 @@ export function useSubscriptionDetails(
 
     const isExpired = isSubscriptionExpired(status);
     const isLifetime = status.isPremium && !status.expiresAt;
-    const daysRemaining = getDaysUntilExpiration(status);
+    const daysRemainingValue = calculateDaysRemaining(status.expiresAt ?? null);
     const isPremium = status.isPremium && !isExpired;
 
     let statusKey: "active" | "expired" | "none" = "none";
@@ -89,10 +64,11 @@ export function useSubscriptionDetails(
       isPremium,
       isExpired,
       isLifetime,
-      daysRemaining,
-      formattedExpirationDate: formatDate(status.expiresAt ?? null, locale),
-      formattedPurchaseDate: formatDate(status.purchasedAt ?? null, locale),
+      daysRemaining: daysRemainingValue,
+      formattedExpirationDate: formatDateForLocale(status.expiresAt ?? null, locale),
+      formattedPurchaseDate: formatDateForLocale(status.purchasedAt ?? null, locale),
       statusKey,
     };
   }, [status, locale]);
 }
+

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

@@ -6,7 +6,7 @@
 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 { CreditRow } from "../../components/details/CreditRow";
 import type { CreditsListProps } from "../../types/SubscriptionDetailTypes";
 
 export const CreditsList: React.FC<CreditsListProps> = ({
@@ -59,7 +59,7 @@ export const CreditsList: React.FC<CreditsListProps> = ({
       )}
       <View style={styles.list}>
         {credits.map((credit) => (
-          <CreditItem
+          <CreditRow
             key={credit.id}
             label={credit.label}
             current={credit.current}

package/src/presentation/types/SubscriptionDetailTypes.ts

@@ -105,8 +105,8 @@ export interface CreditsListProps {
   remainingLabel?: string;
 }
 
-/** Props for credit item component */
-export interface CreditItemProps {
+/** Props for credit row component */
+export interface CreditRowProps {
   label: string;
   current: number;
   total: number;

package/src/revenuecat/infrastructure/services/RevenueCatInitializer.ts

@@ -45,6 +45,16 @@ function configureLogHandler(): void {
     isLogHandlerConfigured = true;
 }
 
+function buildSuccessResult(
+    deps: InitializerDeps,
+    customerInfo: any,
+    offerings: any
+): InitializeResult {
+    const entitlementId = deps.config.entitlementIdentifier;
+    const hasPremium = !!customerInfo.entitlements.active[entitlementId];
+    return { success: true, offering: offerings.current, hasPremium };
+}
+
 export async function initializeSDK(
     deps: InitializerDeps,
     userId: string,
@@ -57,9 +67,7 @@ export async function initializeSDK(
                 Purchases.getCustomerInfo(),
                 Purchases.getOfferings(),
             ]);
-            const entitlementId = deps.config.entitlementIdentifier;
-            const hasPremium = !!customerInfo.entitlements.active[entitlementId];
-            return { success: true, offering: offerings.current, hasPremium };
+            return buildSuccessResult(deps, customerInfo, offerings);
         } catch {
             return { success: false, offering: null, hasPremium: false };
         }
@@ -82,10 +90,7 @@ export async function initializeSDK(
             deps.setCurrentUserId(userId);
 
             const offerings = await Purchases.getOfferings();
-            const entitlementId = deps.config.entitlementIdentifier;
-            const hasPremium = !!customerInfo.entitlements.active[entitlementId];
-
-            return { success: true, offering: offerings.current, hasPremium };
+            return buildSuccessResult(deps, customerInfo, offerings);
         } catch {
             return { success: false, offering: null, hasPremium: false };
         }
@@ -114,10 +119,7 @@ export async function initializeSDK(
             Purchases.getOfferings(),
         ]);
 
-        const entitlementId = deps.config.entitlementIdentifier;
-        const hasPremium = !!customerInfo.entitlements.active[entitlementId];
-
-        return { success: true, offering: offerings.current, hasPremium };
+        return buildSuccessResult(deps, customerInfo, offerings);
     } catch (error) {
         getErrorMessage(error, "RevenueCat init failed");
         return { success: false, offering: null, hasPremium: false };

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

@@ -1,95 +0,0 @@
-/**
- * Credit Item Component
- * Displays individual credit usage with progress bar
- */
-
-import React, { useMemo } from "react";
-import { View, StyleSheet } from "react-native";
-import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
-import type { CreditItemProps } from "../../types/SubscriptionDetailTypes";
-
-export const CreditItem: React.FC<CreditItemProps> = ({
-  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 progressColor = useMemo(() => {
-    if (isLow) return tokens.colors.error;
-    if (isMedium) return tokens.colors.warning;
-    return tokens.colors.success;
-  }, [isLow, isMedium, tokens.colors]);
-
-  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.radius.md,
-          backgroundColor: tokens.colors.surfaceSecondary,
-        },
-        count: {
-          fontWeight: "600",
-        },
-        progressBar: {
-          height: 8,
-          borderRadius: tokens.radius.xs,
-          overflow: "hidden",
-          backgroundColor: tokens.colors.surfaceSecondary,
-        },
-        progressFill: {
-          height: "100%",
-          borderRadius: tokens.radius.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}>
-          <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>
-  );
-};