@umituz/react-native-subscription 2.14.9 → 2.14.11

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

@@ -0,0 +1,88 @@
+/**
+ * useProductMetadata Hook
+ *
+ * TanStack Query hook for fetching product metadata.
+ * Generic and reusable - uses config from ProductMetadataService.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import type {
+  ProductMetadata,
+  ProductMetadataConfig,
+  ProductType,
+} from "../../domain/types/wallet.types";
+import { ProductMetadataService } from "../../infrastructure/services/ProductMetadataService";
+
+const CACHE_CONFIG = {
+  staleTime: 5 * 60 * 1000, // 5 minutes
+  gcTime: 30 * 60 * 1000, // 30 minutes
+};
+
+export const productMetadataQueryKeys = {
+  all: ["productMetadata"] as const,
+  byType: (type: ProductType) => ["productMetadata", type] as const,
+};
+
+export interface UseProductMetadataParams {
+  config: ProductMetadataConfig;
+  type?: ProductType;
+  enabled?: boolean;
+}
+
+export interface UseProductMetadataResult {
+  products: ProductMetadata[];
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+  creditsPackages: ProductMetadata[];
+  subscriptionPackages: ProductMetadata[];
+}
+
+export function useProductMetadata({
+  config,
+  type,
+  enabled = true,
+}: UseProductMetadataParams): UseProductMetadataResult {
+  const service = new ProductMetadataService(config);
+
+  const queryKey = type
+    ? productMetadataQueryKeys.byType(type)
+    : productMetadataQueryKeys.all;
+
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey,
+    queryFn: async () => {
+      if (type) {
+        return service.getByType(type);
+      }
+      return service.getAll();
+    },
+    enabled,
+    staleTime: CACHE_CONFIG.staleTime,
+    gcTime: CACHE_CONFIG.gcTime,
+  });
+
+  const products = data ?? [];
+
+  const creditsPackages = products.filter((p) => p.type === "credits");
+  const subscriptionPackages = products.filter((p) => p.type === "subscription");
+
+  if (__DEV__) {
+    console.log("[useProductMetadata] State", {
+      enabled,
+      isLoading,
+      count: products.length,
+      credits: creditsPackages.length,
+      subscriptions: subscriptionPackages.length,
+    });
+  }
+
+  return {
+    products,
+    isLoading,
+    error: error as Error | null,
+    refetch,
+    creditsPackages,
+    subscriptionPackages,
+  };
+}

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

@@ -0,0 +1,87 @@
+/**
+ * useTransactionHistory Hook
+ *
+ * TanStack Query hook for fetching credit transaction history.
+ * Generic and reusable - uses config from TransactionRepository.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import type {
+  CreditLog,
+  TransactionRepositoryConfig,
+} from "../../domain/types/transaction.types";
+import { TransactionRepository } from "../../infrastructure/repositories/TransactionRepository";
+
+const CACHE_CONFIG = {
+  staleTime: 60 * 1000, // 1 minute
+  gcTime: 5 * 60 * 1000, // 5 minutes
+};
+
+export const transactionQueryKeys = {
+  all: ["transactions"] as const,
+  user: (userId: string) => ["transactions", userId] as const,
+};
+
+export interface UseTransactionHistoryParams {
+  userId: string | undefined;
+  config: TransactionRepositoryConfig;
+  limit?: number;
+  enabled?: boolean;
+}
+
+export interface UseTransactionHistoryResult {
+  transactions: CreditLog[];
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+  isEmpty: boolean;
+}
+
+export function useTransactionHistory({
+  userId,
+  config,
+  limit = 50,
+  enabled = true,
+}: UseTransactionHistoryParams): UseTransactionHistoryResult {
+  const repository = new TransactionRepository(config);
+
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: [...transactionQueryKeys.user(userId ?? ""), limit],
+    queryFn: async () => {
+      if (!userId) return [];
+
+      const result = await repository.getTransactions({
+        userId,
+        limit,
+      });
+
+      if (!result.success) {
+        throw new Error(result.error?.message || "Failed to fetch history");
+      }
+
+      return result.data ?? [];
+    },
+    enabled: enabled && !!userId,
+    staleTime: CACHE_CONFIG.staleTime,
+    gcTime: CACHE_CONFIG.gcTime,
+  });
+
+  const transactions = data ?? [];
+
+  if (__DEV__) {
+    console.log("[useTransactionHistory] State", {
+      userId,
+      enabled,
+      isLoading,
+      count: transactions.length,
+    });
+  }
+
+  return {
+    transactions,
+    isLoading,
+    error: error as Error | null,
+    refetch,
+    isEmpty: transactions.length === 0,
+  };
+}

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

@@ -0,0 +1,93 @@
+/**
+ * useWallet Hook
+ *
+ * Orchestration hook for wallet functionality.
+ * Combines balance, transactions, and purchase state.
+ */
+
+import { useCallback, useMemo } from "react";
+import {
+  useCredits,
+  type UseCreditsParams,
+} from "../../../../presentation/hooks/useCredits";
+import {
+  useTransactionHistory,
+  type UseTransactionHistoryParams,
+} from "./useTransactionHistory";
+import type { CreditLog } from "../../domain/types/transaction.types";
+
+export interface UseWalletParams {
+  userId: string | undefined;
+  transactionConfig: UseTransactionHistoryParams["config"];
+  transactionLimit?: number;
+  enabled?: boolean;
+}
+
+export interface UseWalletResult {
+  balance: number;
+  textCredits: number;
+  imageCredits: number;
+  balanceLoading: boolean;
+  transactions: CreditLog[];
+  transactionsLoading: boolean;
+  hasCredits: boolean;
+  refetchBalance: () => void;
+  refetchTransactions: () => void;
+  refetchAll: () => void;
+}
+
+export function useWallet({
+  userId,
+  transactionConfig,
+  transactionLimit = 50,
+  enabled = true,
+}: UseWalletParams): UseWalletResult {
+  const creditsParams: UseCreditsParams = {
+    userId,
+    enabled,
+  };
+
+  const transactionParams: UseTransactionHistoryParams = {
+    userId,
+    config: transactionConfig,
+    limit: transactionLimit,
+    enabled,
+  };
+
+  const {
+    credits,
+    isLoading: balanceLoading,
+    refetch: refetchBalance,
+    hasTextCredits,
+    hasImageCredits,
+  } = useCredits(creditsParams);
+
+  const {
+    transactions,
+    isLoading: transactionsLoading,
+    refetch: refetchTransactions,
+  } = useTransactionHistory(transactionParams);
+
+  const balance = useMemo(() => {
+    if (!credits) return 0;
+    return credits.textCredits + credits.imageCredits;
+  }, [credits]);
+
+  const refetchAll = useCallback(() => {
+    refetchBalance();
+    refetchTransactions();
+  }, [refetchBalance, refetchTransactions]);
+
+  return {
+    balance,
+    textCredits: credits?.textCredits ?? 0,
+    imageCredits: credits?.imageCredits ?? 0,
+    balanceLoading,
+    transactions,
+    transactionsLoading,
+    hasCredits: hasTextCredits || hasImageCredits,
+    refetchBalance,
+    refetchTransactions,
+    refetchAll,
+  };
+}

package/src/domains/wallet/presentation/screens/WalletScreen.tsx

@@ -0,0 +1,147 @@
+/**
+ * Wallet Screen
+ *
+ * Generic wallet screen composition.
+ * Props-driven for full customization across apps.
+ * No business logic - pure presentation.
+ */
+
+import React from "react";
+import { View, StyleSheet, ActivityIndicator, TouchableOpacity } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  useAppDesignTokens,
+  AtomicText,
+  AtomicIcon,
+  ScreenLayout,
+} from "@umituz/react-native-design-system";
+import {
+  BalanceCard,
+  type BalanceCardTranslations,
+} from "../components/BalanceCard";
+import {
+  TransactionList,
+  type TransactionListTranslations,
+} from "../components/TransactionList";
+import type { CreditLog } from "../../domain/types/transaction.types";
+
+export interface WalletScreenTranslations
+  extends BalanceCardTranslations,
+    TransactionListTranslations {
+  screenTitle: string;
+}
+
+export interface WalletScreenConfig {
+  balance: number;
+  balanceLoading: boolean;
+  transactions: CreditLog[];
+  transactionsLoading: boolean;
+  translations: WalletScreenTranslations;
+  onBack?: () => void;
+  dateFormatter?: (timestamp: number) => string;
+  maxTransactionHeight?: number;
+  balanceIconName?: string;
+  footer?: React.ReactNode;
+}
+
+export interface WalletScreenProps {
+  config: WalletScreenConfig;
+}
+
+export const WalletScreen: React.FC<WalletScreenProps> = ({ config }) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+
+  const renderHeader = () => (
+    <View style={[styles.header, { paddingTop: insets.top + 12 }]}>
+      {config.onBack && (
+        <TouchableOpacity
+          onPress={config.onBack}
+          style={styles.backButton}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <AtomicIcon
+            name="ArrowLeft"
+            size="lg"
+            customColor={tokens.colors.textPrimary}
+          />
+        </TouchableOpacity>
+      )}
+      <AtomicText
+        type="titleLarge"
+        style={{ color: tokens.colors.textPrimary, fontWeight: "700" }}
+      >
+        {config.translations.screenTitle}
+      </AtomicText>
+    </View>
+  );
+
+  const renderBalance = () => {
+    if (config.balanceLoading) {
+      return (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color={tokens.colors.primary} />
+          <AtomicText
+            type="bodyMedium"
+            style={[styles.loadingText, { color: tokens.colors.textSecondary }]}
+          >
+            {config.translations.loading}
+          </AtomicText>
+        </View>
+      );
+    }
+
+    return (
+      <BalanceCard
+        balance={config.balance}
+        translations={config.translations}
+        iconName={config.balanceIconName}
+      />
+    );
+  };
+
+  return (
+    <ScreenLayout
+      scrollable={true}
+      edges={["bottom"]}
+      backgroundColor={tokens.colors.backgroundPrimary}
+      contentContainerStyle={styles.content}
+      footer={config.footer}
+    >
+      {renderHeader()}
+      {renderBalance()}
+      <TransactionList
+        transactions={config.transactions}
+        loading={config.transactionsLoading}
+        translations={config.translations}
+        maxHeight={config.maxTransactionHeight}
+        dateFormatter={config.dateFormatter}
+      />
+    </ScreenLayout>
+  );
+};
+
+const styles = StyleSheet.create({
+  content: {
+    paddingBottom: 24,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingBottom: 12,
+  },
+  backButton: {
+    marginRight: 16,
+  },
+  loadingContainer: {
+    padding: 40,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+  },
+  loadingText: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});

package/src/index.ts

@@ -6,9 +6,11 @@
  */
 
 // =============================================================================
-// DOMAIN LAYER - Errors
+// WALLET DOMAIN (Complete)
 // =============================================================================
 
+export * from "./domains/wallet";
+
 // =============================================================================
 // DOMAIN LAYER - Subscription Status
 // =============================================================================
@@ -231,6 +233,9 @@ export type {
 
 export { DEFAULT_CREDITS_CONFIG } from "./domain/entities/Credits";
 
+// CreditCost, Transaction types, Wallet types, Credit-cost types
+// are now exported from "./domains/wallet"
+
 // =============================================================================
 // CREDITS SYSTEM - Repository
 // =============================================================================
@@ -240,6 +245,9 @@ export {
   createCreditsRepository,
 } from "./infrastructure/repositories/CreditsRepository";
 
+// TransactionRepository and ProductMetadataService
+// are now exported from "./domains/wallet"
+
 // =============================================================================
 // CREDITS SYSTEM - Configuration (Module-Level Provider)
 // =============================================================================
@@ -316,6 +324,9 @@ export {
 
 export { useDevTestCallbacks } from "./presentation/hooks/useDevTestCallbacks";
 
+// Wallet hooks, components, and screens
+// are now exported from "./domains/wallet"
+
 // =============================================================================
 // CREDITS SYSTEM - Utilities
 // =============================================================================

package/src/presentation/components/feedback/PaywallFeedbackModal.tsx

@@ -8,7 +8,7 @@ import {
     View,
     Modal,
     TouchableOpacity,
-    TouchableWithoutFeedback,
+    Pressable,
     TextInput,
     KeyboardAvoidingView,
 } from "react-native";
@@ -75,14 +75,13 @@ export const PaywallFeedbackModal: React.FC<PaywallFeedbackModalProps> = React.m
             animationType="fade"
             onRequestClose={handleSkip}
         >
-            <TouchableWithoutFeedback onPress={handleSkip}>
-                <View style={styles.overlay}>
-                    <KeyboardAvoidingView
-                        behavior="padding"
-                        style={styles.keyboardView}
-                    >
-                        <TouchableWithoutFeedback>
-                            <View style={styles.container}>
+            <Pressable onPress={handleSkip} style={styles.overlay}>
+                <KeyboardAvoidingView
+                    behavior="padding"
+                    style={styles.keyboardView}
+                >
+                    <Pressable onPress={(e) => e.stopPropagation()}>
+                        <View style={styles.container}>
                                 <View style={styles.header}>
                                     <AtomicText type="headlineMedium" style={styles.title}>
                                         {displayTitle}
@@ -159,11 +158,10 @@ export const PaywallFeedbackModal: React.FC<PaywallFeedbackModalProps> = React.m
                                         {displaySubmitText}
                                     </AtomicText>
                                 </TouchableOpacity>
-                            </View>
-                        </TouchableWithoutFeedback>
-                    </KeyboardAvoidingView>
-                </View>
-            </TouchableWithoutFeedback>
+                        </View>
+                    </Pressable>
+                </KeyboardAvoidingView>
+            </Pressable>
         </Modal>
     );
 });