@umituz/react-native-subscription 3.1.9 → 3.1.11

package/src/domains/subscription/presentation/screens/components/SubscriptionHeaderContent.tsx

@@ -11,6 +11,12 @@ interface SubscriptionHeaderContentStyles {
   value: TextStyle;
 }
 
+interface DetailInfo {
+  label?: string;
+  value: string;
+  highlight?: boolean;
+}
+
 interface SubscriptionHeaderContentProps {
   showExpirationDate: boolean;
   expirationDate?: string;
@@ -28,106 +34,116 @@ interface SubscriptionHeaderContentProps {
   isSandbox?: boolean;
 }
 
-export const SubscriptionHeaderContent: React.FC<SubscriptionHeaderContentProps> = ({
-  showExpirationDate,
-  expirationDate,
-  purchaseDate,
-  showExpiring,
-  translations,
-  styles,
-  willRenew,
-  periodType: _periodType,
-  packageType,
-  store,
-  originalPurchaseDate,
-  latestPurchaseDate,
-  billingIssuesDetected,
-  isSandbox,
-}) => (
-  <View style={styles.details}>
-    {showExpirationDate && expirationDate && (
-      <DetailRow
-        label={translations.expiresLabel}
-        value={expirationDate}
-        highlight={showExpiring}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {purchaseDate && (
-      <DetailRow
-        label={translations.purchasedLabel}
-        value={purchaseDate}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {willRenew !== null && willRenew !== undefined && translations.willRenewLabel && (
-      <DetailRow
-        label={translations.willRenewLabel}
-        value={willRenew ? (translations.willRenewYes ?? "Yes") : (translations.willRenewNo ?? "No")}
-        highlight={!willRenew}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {packageType && translations.periodTypeLabel && (
-      <DetailRow
-        label={translations.periodTypeLabel}
-        value={formatPackageTypeForDisplay(packageType)}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {store && translations.storeLabel && (
-      <DetailRow
-        label={translations.storeLabel}
-        value={store}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {originalPurchaseDate && translations.originalPurchaseDateLabel && (
-      <DetailRow
-        label={translations.originalPurchaseDateLabel}
-        value={originalPurchaseDate}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {latestPurchaseDate && translations.latestPurchaseDateLabel && (
-      <DetailRow
-        label={translations.latestPurchaseDateLabel}
-        value={latestPurchaseDate}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {billingIssuesDetected && translations.billingIssuesLabel && (
-      <DetailRow
-        label={translations.billingIssuesLabel}
-        value={translations.billingIssuesDetected ?? "Detected"}
-        highlight={true}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {typeof __DEV__ !== 'undefined' && __DEV__ && isSandbox && translations.sandboxLabel && (
-      <DetailRow
-        label={translations.sandboxLabel}
-        value={translations.sandboxTestMode ?? "Test Mode"}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-  </View>
-);
+/**
+ * Helper to build detail row data array.
+ * Reduces code duplication by centralizing detail row creation logic.
+ */
+function buildDetails(
+  props: SubscriptionHeaderContentProps
+): DetailInfo[] {
+  const {
+    showExpirationDate,
+    expirationDate,
+    purchaseDate,
+    showExpiring,
+    translations,
+    willRenew,
+    packageType,
+    store,
+    originalPurchaseDate,
+    latestPurchaseDate,
+    billingIssuesDetected,
+    isSandbox,
+  } = props;
+
+  const details: DetailInfo[] = [];
+
+  if (showExpirationDate && expirationDate) {
+    details.push({
+      label: translations.expiresLabel,
+      value: expirationDate,
+      highlight: showExpiring,
+    });
+  }
+
+  if (purchaseDate) {
+    details.push({
+      label: translations.purchasedLabel,
+      value: purchaseDate,
+    });
+  }
+
+  if (willRenew !== null && willRenew !== undefined && translations.willRenewLabel) {
+    details.push({
+      label: translations.willRenewLabel,
+      value: willRenew ? (translations.willRenewYes ?? "Yes") : (translations.willRenewNo ?? "No"),
+      highlight: !willRenew,
+    });
+  }
+
+  if (packageType && translations.periodTypeLabel) {
+    details.push({
+      label: translations.periodTypeLabel,
+      value: formatPackageTypeForDisplay(packageType),
+    });
+  }
+
+  if (store && translations.storeLabel) {
+    details.push({
+      label: translations.storeLabel,
+      value: store,
+    });
+  }
+
+  if (originalPurchaseDate && translations.originalPurchaseDateLabel) {
+    details.push({
+      label: translations.originalPurchaseDateLabel,
+      value: originalPurchaseDate,
+    });
+  }
+
+  if (latestPurchaseDate && translations.latestPurchaseDateLabel) {
+    details.push({
+      label: translations.latestPurchaseDateLabel,
+      value: latestPurchaseDate,
+    });
+  }
+
+  if (billingIssuesDetected && translations.billingIssuesLabel) {
+    details.push({
+      label: translations.billingIssuesLabel,
+      value: translations.billingIssuesDetected ?? "Detected",
+      highlight: true,
+    });
+  }
+
+  if (typeof __DEV__ !== 'undefined' && __DEV__ && isSandbox && translations.sandboxLabel) {
+    details.push({
+      label: translations.sandboxLabel,
+      value: translations.sandboxTestMode ?? "Test Mode",
+    });
+  }
+
+  return details;
+}
+
+export const SubscriptionHeaderContent: React.FC<SubscriptionHeaderContentProps> = (props) => {
+  const { styles } = props;
+  const details = buildDetails(props);
+
+  return (
+    <View style={styles.details}>
+      {details.map((detail) => (
+        <DetailRow
+          key={detail.label}
+          label={detail.label!}
+          value={detail.value}
+          highlight={detail.highlight}
+          style={styles.row}
+          labelStyle={styles.label}
+          valueStyle={styles.value}
+        />
+      ))}
+    </View>
+  );
+};

package/src/domains/subscription/presentation/usePremiumActions.ts

@@ -5,6 +5,9 @@ import {
   useRestorePurchase,
 } from '../infrastructure/hooks/useSubscriptionQueries';
 import { usePaywallVisibility } from './usePaywallVisibility';
+import { createLogger } from '../../../shared/utils/logger';
+
+const logger = createLogger('usePremiumActions');
 
 export interface PremiumActions {
   purchasePackage: (pkg: PurchasesPackage) => Promise<boolean>;
@@ -38,9 +41,7 @@ export function usePremiumActions(): PremiumActions {
         const result = await purchaseMutation.mutateAsync(pkg);
         return result.success;
       } catch (error) {
-        if (__DEV__) {
-          console.error('[usePremiumActions] Purchase failed:', error);
-        }
+        logger.error('Purchase failed', error, { packageId: pkg.identifier });
         return false;
       }
     },
@@ -52,9 +53,7 @@ export function usePremiumActions(): PremiumActions {
       const result = await restoreMutation.mutateAsync();
       return result.success;
     } catch (error) {
-      if (__DEV__) {
-        console.error('[usePremiumActions] Restore failed:', error);
-      }
+      logger.error('Restore failed', error);
       return false;
     }
   }, [restoreMutation]);

package/src/domains/subscription/presentation/useSubscriptionFlow.ts

@@ -3,109 +3,35 @@
  *
  * Single source of truth for app flow state.
  * Clean state transitions without complex if/else logic.
+ *
+ * State transition rules:
+ * - INITIALIZING -> ONBOARDING (first launch)
+ * - INITIALIZING -> CHECK_PREMIUM (onboarding already done)
+ * - ONBOARDING -> CHECK_PREMIUM (onboarding completed)
+ * - CHECK_PREMIUM -> READY (user is premium)
+ * - CHECK_PREMIUM -> POST_ONBOARDING_PAYWALL (user not premium, paywall not shown)
+ * - CHECK_PREMIUM -> READY (user not premium but paywall already shown)
+ * - POST_ONBOARDING_PAYWALL -> READY (paywall closed)
+ * - READY -> READY (stays ready, shows overlays when needed)
  */
 
 import { createStore } from "@umituz/react-native-design-system/storage";
 import { subscriptionEventBus, FLOW_EVENTS } from "../../../shared/infrastructure/SubscriptionEventBus";
+import {
+  SubscriptionFlowStatus,
+  SyncStatus,
+  type SubscriptionFlowState,
+  type SubscriptionFlowActions,
+} from "./flowTypes";
+import { initialFlowState } from "./flowInitialState";
 
-export enum SubscriptionFlowStatus {
-  INITIALIZING = "INITIALIZING",
-  ONBOARDING = "ONBOARDING",
-  CHECK_PREMIUM = "CHECK_PREMIUM",
-  POST_ONBOARDING_PAYWALL = "POST_ONBOARDING_PAYWALL",
-  READY = "READY",
-}
-
-export enum SyncStatus {
-  IDLE = "IDLE",
-  SYNCING = "SYNCING",
-  SUCCESS = "SUCCESS",
-  ERROR = "ERROR",
-}
-
-export interface SubscriptionFlowState {
-  // Flow state
-  status: SubscriptionFlowStatus;
-
-  // Sync state
-  syncStatus: SyncStatus;
-  syncError: string | null;
-
-  // Onboarding state
-  isOnboardingComplete: boolean;
-
-  // Paywall state
-  paywallShown: boolean;
-
-  // Feedback state
-  showFeedback: boolean;
-
-  // Auth modal state
-  isAuthModalOpen: boolean;
-
-  // Initialization flag
-  isInitialized: boolean;
-}
-
-export interface SubscriptionFlowActions {
-  // Flow actions
-  completeOnboarding: () => void;
-  showPaywall: () => void;
-  completePaywall: (purchased: boolean) => void;
-  showFeedbackScreen: () => void;
-  hideFeedback: () => void;
-
-  // Auth actions
-  setAuthModalOpen: (open: boolean) => void;
-
-  // Sync actions
-  setSyncStatus: (status: SyncStatus, error?: string | null) => void;
-
-  // State setters (for internal use)
-  setInitialized: (initialized: boolean) => void;
-  setStatus: (status: SubscriptionFlowStatus) => void;
-
-  // Reset
-  resetFlow: () => void;
-}
-
-export type SubscriptionFlowStore = SubscriptionFlowState & SubscriptionFlowActions;
-
-const initialState: SubscriptionFlowState = {
-  status: SubscriptionFlowStatus.INITIALIZING,
-  syncStatus: SyncStatus.IDLE,
-  syncError: null,
-  isOnboardingComplete: false,
-  paywallShown: false,
-  showFeedback: false,
-  isAuthModalOpen: false,
-  isInitialized: false,
-};
-
-/**
- * State transition rules:
- *
- * INITIALIZING -> ONBOARDING (first launch)
- * INITIALIZING -> CHECK_PREMIUM (onboarding already done)
- *
- * ONBOARDING -> CHECK_PREMIUM (onboarding completed)
- *
- * CHECK_PREMIUM -> READY (user is premium)
- * CHECK_PREMIUM -> POST_ONBOARDING_PAYWALL (user not premium, paywall not shown)
- * CHECK_PREMIUM -> READY (user not premium but paywall already shown)
- *
- * POST_ONBOARDING_PAYWALL -> READY (paywall closed)
- *
- * READY -> READY (stays ready, shows overlays when needed)
- */
 export const useSubscriptionFlowStore = createStore<SubscriptionFlowState, SubscriptionFlowActions>({
   name: "subscription-flow-storage",
-  initialState,
+  initialState: initialFlowState,
   persist: true,
   onRehydrate: (state) => {
     if (!state.isInitialized) {
       state.setInitialized(true);
-
       // First time: show onboarding
       state.setStatus(SubscriptionFlowStatus.INITIALIZING);
     } else if (state.isOnboardingComplete) {
@@ -176,3 +102,10 @@ export const useSubscriptionFlowStore = createStore<SubscriptionFlowState, Subsc
     },
   }),
 });
+
+// Re-export types for convenience
+export type { SubscriptionFlowState, SubscriptionFlowActions } from "./flowTypes";
+export { SubscriptionFlowStatus, SyncStatus } from "./flowTypes";
+
+// Re-export store type inferred from createStore
+export type SubscriptionFlowStore = ReturnType<typeof useSubscriptionFlowStore>;

package/src/domains/wallet/presentation/components/BalanceCard.tsx

@@ -58,6 +58,13 @@ export const BalanceCard: React.FC<BalanceCardProps> = React.memo(({
       </View>
     </View>
   );
+}, (prevProps, nextProps) => {
+  // PERFORMANCE: Custom comparison to prevent unnecessary re-renders
+  return (
+    prevProps.balance === nextProps.balance &&
+    prevProps.translations === nextProps.translations &&
+    prevProps.iconName === nextProps.iconName
+  );
 });
 
 const styles = StyleSheet.create({

package/src/domains/wallet/presentation/components/TransactionItem.tsx

@@ -44,4 +44,15 @@ export const TransactionItem: React.FC<TransactionItemProps> = React.memo(({
       </AtomicText>
     </View>
   );
+}, (prevProps, nextProps) => {
+  // PERFORMANCE: Custom comparison to prevent unnecessary re-renders
+  return (
+    prevProps.transaction.id === nextProps.transaction.id &&
+    prevProps.transaction.change === nextProps.transaction.change &&
+    prevProps.transaction.reason === nextProps.transaction.reason &&
+    prevProps.transaction.description === nextProps.transaction.description &&
+    prevProps.transaction.createdAt === nextProps.transaction.createdAt &&
+    prevProps.translations === nextProps.translations &&
+    prevProps.dateFormatter === nextProps.dateFormatter
+  );
 });

package/src/domains/wallet/presentation/hooks/useTransactionHistory.ts

@@ -1,11 +1,12 @@
-import { useState, useEffect } from "react";
+import { useMemo } from "react";
 import { useAuthStore, selectUserId } from "@umituz/react-native-auth";
-import { collection, onSnapshot, query, orderBy, limit, Query } from "firebase/firestore";
+import { collection, query, orderBy, limit } from "firebase/firestore";
 import type {
   CreditLog,
   TransactionRepositoryConfig,
 } from "../../domain/types/transaction.types";
 import { requireFirestore } from "../../../../shared/infrastructure/firestore/collectionUtils";
+import { useFirestoreCollectionRealTime } from "../../../../shared/presentation/hooks/useFirestoreRealTime";
 
 export interface UseTransactionHistoryParams {
   config: TransactionRepositoryConfig;
@@ -20,78 +21,51 @@ interface UseTransactionHistoryResult {
   isEmpty: boolean;
 }
 
+/**
+ * Mapper to convert Firestore document to CreditLog entity.
+ */
+function mapTransactionLog(doc: any, docId: string): CreditLog {
+  return {
+    id: docId,
+    ...doc,
+  } as CreditLog;
+}
+
 export function useTransactionHistory({
   config,
   limit: limitCount = 50,
 }: UseTransactionHistoryParams): UseTransactionHistoryResult {
   const userId = useAuthStore(selectUserId);
-  const [transactions, setTransactions] = useState<CreditLog[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    if (!userId) {
-      setTransactions([]);
-      setIsLoading(false);
-      setError(null);
-      return;
-    }
 
-    setIsLoading(true);
-    setError(null);
+  // Build collection query
+  const queryRef = useMemo(() => {
+    if (!userId) return null;
 
-    try {
-      const db = requireFirestore();
-      const collectionPath = config.useUserSubcollection
-        ? `users/${userId}/${config.collectionName}`
-        : config.collectionName;
+    const db = requireFirestore();
+    const collectionPath = config.useUserSubcollection
+      ? `users/${userId}/${config.collectionName}`
+      : config.collectionName;
 
-      const q = query(
-        collection(db, collectionPath),
-        orderBy("timestamp", "desc"),
-        limit(limitCount)
-      ) as Query;
-
-      const unsubscribe = onSnapshot(
-        q,
-        (snapshot) => {
-          const logs: CreditLog[] = [];
-          snapshot.forEach((doc) => {
-            logs.push({
-              id: doc.id,
-              ...doc.data(),
-            } as CreditLog);
-          });
-          setTransactions(logs);
-          setIsLoading(false);
-        },
-        (err) => {
-          console.error("[useTransactionHistory] Snapshot error:", err);
-          setError(err as Error);
-          setIsLoading(false);
-        }
-      );
-
-      return () => unsubscribe();
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error(String(err));
-      console.error("[useTransactionHistory] Setup error:", err);
-      setError(error);
-      setIsLoading(false);
-    }
+    return query(
+      collection(db, collectionPath),
+      orderBy("timestamp", "desc"),
+      limit(limitCount)
+    );
   }, [userId, config.collectionName, config.useUserSubcollection, limitCount]);
 
-  const refetch = () => {
-    if (__DEV__) {
-      console.warn("[useTransactionHistory] Refetch called - not needed for real-time sync");
-    }
-  };
+  // Use generic real-time sync hook
+  const { data, isLoading, error, refetch, isEmpty } = useFirestoreCollectionRealTime(
+    userId,
+    queryRef,
+    mapTransactionLog,
+    "useTransactionHistory"
+  );
 
   return {
-    transactions,
+    transactions: data,
     isLoading,
     error,
     refetch,
-    isEmpty: transactions.length === 0,
+    isEmpty,
   };
 }

package/src/index.components.ts

@@ -35,6 +35,6 @@ export type { PaywallScreenProps } from "./domains/paywall/components/PaywallScr
 
 // Root Flow Components
 export { ManagedSubscriptionFlow } from "./domains/subscription/presentation/components/ManagedSubscriptionFlow";
-export type { ManagedSubscriptionFlowProps } from "./domains/subscription/presentation/components/ManagedSubscriptionFlow";
+export type { ManagedSubscriptionFlowProps } from "./domains/subscription/presentation/components/ManagedSubscriptionFlow.types";
 export { SubscriptionFlowStatus } from "./domains/subscription/presentation/useSubscriptionFlow";
 export { SubscriptionFlowProvider, useSubscriptionFlowStatus } from "./domains/subscription/presentation/providers/SubscriptionFlowProvider";

package/src/shared/infrastructure/SubscriptionEventBus.ts

@@ -36,8 +36,10 @@ class SubscriptionEventBus {
     const listeners = this.listeners.get(event);
     if (!listeners || listeners.size === 0) return;
 
-    listeners.forEach(callback => {
-      queueMicrotask(() => {
+    // PERFORMANCE: Batch all callbacks in a single microtask to reduce call stack overhead
+    // This prevents UI jank when multiple listeners are registered
+    queueMicrotask(() => {
+      listeners.forEach(callback => {
         try {
           callback(data);
         } catch (error) {