@umituz/react-native-subscription 2.14.9 → 2.14.11

package/src/domains/wallet/infrastructure/repositories/TransactionRepository.ts

@@ -0,0 +1,166 @@
+/**
+ * Transaction Repository
+ *
+ * Firestore operations for credit transaction logs.
+ * Generic repository for use across hundreds of apps.
+ */
+
+import {
+  collection,
+  getDocs,
+  addDoc,
+  query,
+  where,
+  orderBy,
+  limit as firestoreLimit,
+  serverTimestamp,
+  type Firestore,
+  type QueryConstraint,
+} from "firebase/firestore";
+import { BaseRepository, getFirestore } from "@umituz/react-native-firebase";
+import type {
+  CreditLog,
+  TransactionRepositoryConfig,
+  TransactionQueryOptions,
+  TransactionResult,
+  TransactionReason,
+} from "../../domain/types/transaction.types";
+
+export class TransactionRepository extends BaseRepository {
+  private config: TransactionRepositoryConfig;
+
+  constructor(config: TransactionRepositoryConfig) {
+    super();
+    this.config = config;
+  }
+
+  private getCollectionRef(db: Firestore, userId: string) {
+    if (this.config.useUserSubcollection) {
+      return collection(db, "users", userId, this.config.collectionName);
+    }
+    return collection(db, this.config.collectionName);
+  }
+
+  async getTransactions(
+    options: TransactionQueryOptions
+  ): Promise<TransactionResult> {
+    const db = getFirestore();
+    if (!db) {
+      return {
+        success: false,
+        error: { message: "Database not available", code: "DB_NOT_AVAILABLE" },
+      };
+    }
+
+    try {
+      const colRef = this.getCollectionRef(db, options.userId);
+      const constraints: QueryConstraint[] = [];
+
+      if (!this.config.useUserSubcollection) {
+        constraints.push(where("userId", "==", options.userId));
+      }
+
+      constraints.push(orderBy("createdAt", "desc"));
+      constraints.push(firestoreLimit(options.limit ?? 50));
+
+      const q = query(colRef, ...constraints);
+      const snapshot = await getDocs(q);
+
+      const transactions: CreditLog[] = snapshot.docs.map((docSnap) => {
+        const data = docSnap.data();
+        return {
+          id: docSnap.id,
+          userId: data.userId || options.userId,
+          change: data.change,
+          reason: data.reason,
+          feature: data.feature,
+          jobId: data.jobId,
+          packageId: data.packageId,
+          subscriptionPlan: data.subscriptionPlan,
+          description: data.description,
+          createdAt: data.createdAt?.toMillis?.() || Date.now(),
+        };
+      });
+
+      return { success: true, data: transactions };
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[TransactionRepository] Error:", error);
+      }
+      return {
+        success: false,
+        error: {
+          message:
+            error instanceof Error ? error.message : "Failed to get logs",
+          code: "FETCH_FAILED",
+        },
+      };
+    }
+  }
+
+  async addTransaction(
+    userId: string,
+    change: number,
+    reason: TransactionReason,
+    metadata?: Partial<CreditLog>
+  ): Promise<TransactionResult<CreditLog>> {
+    const db = getFirestore();
+    if (!db) {
+      return {
+        success: false,
+        error: { message: "Database not available", code: "DB_NOT_AVAILABLE" },
+      };
+    }
+
+    try {
+      const colRef = this.getCollectionRef(db, userId);
+      const docData = {
+        userId,
+        change,
+        reason,
+        feature: metadata?.feature,
+        jobId: metadata?.jobId,
+        packageId: metadata?.packageId,
+        subscriptionPlan: metadata?.subscriptionPlan,
+        description: metadata?.description,
+        createdAt: serverTimestamp(),
+      };
+
+      const docRef = await addDoc(colRef, docData);
+
+      if (__DEV__) {
+        console.log("[TransactionRepository] Added:", docRef.id);
+      }
+
+      return {
+        success: true,
+        data: {
+          id: docRef.id,
+          userId,
+          change,
+          reason,
+          ...metadata,
+          createdAt: Date.now(),
+        },
+      };
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[TransactionRepository] Add error:", error);
+      }
+      return {
+        success: false,
+        error: {
+          message:
+            error instanceof Error ? error.message : "Failed to add log",
+          code: "ADD_FAILED",
+        },
+      };
+    }
+  }
+}
+
+export function createTransactionRepository(
+  config: TransactionRepositoryConfig
+): TransactionRepository {
+  return new TransactionRepository(config);
+}

package/src/domains/wallet/infrastructure/services/ProductMetadataService.ts

@@ -0,0 +1,131 @@
+/**
+ * Product Metadata Service
+ *
+ * Generic service for fetching product metadata from Firestore.
+ * Collection name is configurable for use across hundreds of apps.
+ */
+
+import { collection, getDocs, orderBy, query } from "firebase/firestore";
+import { getFirestore } from "@umituz/react-native-firebase";
+import type {
+  ProductMetadata,
+  ProductMetadataConfig,
+  ProductType,
+} from "../../domain/types/wallet.types";
+
+interface CacheEntry {
+  data: ProductMetadata[];
+  timestamp: number;
+}
+
+const DEFAULT_CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
+
+export class ProductMetadataService {
+  private config: ProductMetadataConfig;
+  private cache: CacheEntry | null = null;
+
+  constructor(config: ProductMetadataConfig) {
+    this.config = config;
+  }
+
+  private isCacheValid(): boolean {
+    if (!this.cache) return false;
+    const ttl = this.config.cacheTTL ?? DEFAULT_CACHE_TTL_MS;
+    return Date.now() - this.cache.timestamp < ttl;
+  }
+
+  private async fetchFromFirebase(): Promise<ProductMetadata[]> {
+    const db = getFirestore();
+    if (!db) {
+      throw new Error("Firestore not initialized");
+    }
+
+    const colRef = collection(db, this.config.collectionName);
+    const q = query(colRef, orderBy("order", "asc"));
+    const snapshot = await getDocs(q);
+
+    return snapshot.docs.map((docSnap) => ({
+      productId: docSnap.id,
+      ...docSnap.data(),
+    })) as ProductMetadata[];
+  }
+
+  async getAll(): Promise<ProductMetadata[]> {
+    if (this.isCacheValid() && this.cache) {
+      return this.cache.data;
+    }
+
+    try {
+      const data = await this.fetchFromFirebase();
+      this.cache = { data, timestamp: Date.now() };
+
+      if (__DEV__) {
+        console.log(
+          "[ProductMetadataService] Loaded:",
+          data.length,
+          "products"
+        );
+      }
+
+      return data;
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[ProductMetadataService] Fetch error:", error);
+      }
+
+      if (this.cache) {
+        return this.cache.data;
+      }
+      throw error;
+    }
+  }
+
+  async getByProductId(productId: string): Promise<ProductMetadata | null> {
+    const all = await this.getAll();
+    return all.find((p) => p.productId === productId) ?? null;
+  }
+
+  async getByType(type: ProductType): Promise<ProductMetadata[]> {
+    const all = await this.getAll();
+    return all.filter((p) => p.type === type);
+  }
+
+  async getCreditsPackages(): Promise<ProductMetadata[]> {
+    return this.getByType("credits");
+  }
+
+  async getSubscriptionPackages(): Promise<ProductMetadata[]> {
+    return this.getByType("subscription");
+  }
+
+  clearCache(): void {
+    this.cache = null;
+  }
+}
+
+export function createProductMetadataService(
+  config: ProductMetadataConfig
+): ProductMetadataService {
+  return new ProductMetadataService(config);
+}
+
+let defaultService: ProductMetadataService | null = null;
+
+export function configureProductMetadataService(
+  config: ProductMetadataConfig
+): void {
+  defaultService = new ProductMetadataService(config);
+}
+
+export function getProductMetadataService(): ProductMetadataService {
+  if (!defaultService) {
+    throw new Error(
+      "ProductMetadataService not configured. Call configureProductMetadataService first."
+    );
+  }
+  return defaultService;
+}
+
+export function resetProductMetadataService(): void {
+  defaultService = null;
+}

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

@@ -0,0 +1,119 @@
+/**
+ * Balance Card Component
+ *
+ * Displays user's credit balance with gradient background.
+ * Props-driven for full customization.
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import {
+  useAppDesignTokens,
+  AtomicText,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+
+export interface BalanceCardTranslations {
+  balanceLabel: string;
+  availableCredits: string;
+}
+
+export interface BalanceCardProps {
+  balance: number;
+  translations: BalanceCardTranslations;
+  iconName?: string;
+}
+
+export const BalanceCard: React.FC<BalanceCardProps> = ({
+  balance,
+  translations,
+  iconName = "Wallet",
+}) => {
+  const tokens = useAppDesignTokens();
+  const gradientColors = [
+    tokens.colors.primary,
+    tokens.colors.primaryDark || tokens.colors.primary,
+  ] as const;
+
+  return (
+    <LinearGradient
+      colors={gradientColors}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      style={styles.container}
+    >
+      <View style={styles.content}>
+        <View style={styles.textContainer}>
+          <AtomicText
+            type="bodyMedium"
+            style={[styles.label, { color: tokens.colors.onPrimary + "CC" }]}
+          >
+            {translations.balanceLabel}
+          </AtomicText>
+          <AtomicText
+            type="displayLarge"
+            style={[styles.balance, { color: tokens.colors.onPrimary }]}
+          >
+            {balance.toLocaleString()}
+          </AtomicText>
+          <AtomicText
+            type="bodySmall"
+            style={[styles.subtitle, { color: tokens.colors.onPrimary + "CC" }]}
+          >
+            {translations.availableCredits}
+          </AtomicText>
+        </View>
+        <View
+          style={[
+            styles.iconContainer,
+            { backgroundColor: tokens.colors.onPrimary + "20" },
+          ]}
+        >
+          <AtomicIcon name={iconName} size="xl" color="onPrimary" />
+        </View>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 16,
+    padding: 24,
+    marginHorizontal: 16,
+    marginTop: 16,
+    marginBottom: 8,
+  },
+  content: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  textContainer: {
+    flex: 1,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "500",
+    marginBottom: 8,
+    opacity: 0.9,
+  },
+  balance: {
+    fontSize: 36,
+    fontWeight: "700",
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 12,
+    fontWeight: "400",
+    opacity: 0.8,
+  },
+  iconContainer: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

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

@@ -0,0 +1,150 @@
+/**
+ * Transaction Item Component
+ *
+ * Displays a single credit transaction.
+ * Props-driven for full customization.
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicText,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+import type { CreditLog, TransactionReason } from "../../domain/types/transaction.types";
+
+export interface TransactionItemTranslations {
+  purchase: string;
+  usage: string;
+  refund: string;
+  bonus: string;
+  subscription: string;
+  admin: string;
+  reward: string;
+  expired: string;
+}
+
+export interface TransactionItemProps {
+  transaction: CreditLog;
+  translations: TransactionItemTranslations;
+  dateFormatter?: (timestamp: number) => string;
+}
+
+const getReasonIcon = (reason: TransactionReason): string => {
+  const iconMap: Record<TransactionReason, string> = {
+    purchase: "ShoppingCart",
+    usage: "Zap",
+    refund: "RotateCcw",
+    bonus: "Gift",
+    subscription: "Star",
+    admin: "Shield",
+    reward: "Award",
+    expired: "Clock",
+  };
+  return iconMap[reason] || "Circle";
+};
+
+const defaultDateFormatter = (timestamp: number): string => {
+  const date = new Date(timestamp);
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+
+export const TransactionItem: React.FC<TransactionItemProps> = ({
+  transaction,
+  translations,
+  dateFormatter = defaultDateFormatter,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const reasonLabel = useMemo(() => {
+    return translations[transaction.reason] || transaction.reason;
+  }, [transaction.reason, translations]);
+
+  const isPositive = transaction.change > 0;
+  const changeColor = isPositive ? tokens.colors.success : tokens.colors.error;
+  const changePrefix = isPositive ? "+" : "";
+  const iconName = getReasonIcon(transaction.reason);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: tokens.colors.surfaceSecondary },
+      ]}
+    >
+      <View
+        style={[
+          styles.iconContainer,
+          { backgroundColor: tokens.colors.surface },
+        ]}
+      >
+        <AtomicIcon name={iconName} size="md" color="secondary" />
+      </View>
+      <View style={styles.content}>
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.reason, { color: tokens.colors.textPrimary }]}
+        >
+          {reasonLabel}
+        </AtomicText>
+        {transaction.description && (
+          <AtomicText
+            type="bodySmall"
+            style={{ color: tokens.colors.textSecondary }}
+            numberOfLines={1}
+          >
+            {transaction.description}
+          </AtomicText>
+        )}
+        <AtomicText
+          type="bodySmall"
+          style={{ color: tokens.colors.textSecondary }}
+        >
+          {dateFormatter(transaction.createdAt)}
+        </AtomicText>
+      </View>
+      <AtomicText
+        type="titleMedium"
+        style={[styles.change, { color: changeColor }]}
+      >
+        {changePrefix}
+        {transaction.change}
+      </AtomicText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    borderRadius: 12,
+    marginBottom: 8,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  content: {
+    flex: 1,
+    gap: 2,
+  },
+  reason: {
+    fontWeight: "600",
+  },
+  change: {
+    fontWeight: "700",
+    marginLeft: 12,
+  },
+});

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

@@ -0,0 +1,127 @@
+/**
+ * Transaction List Component
+ *
+ * Displays a list of credit transactions.
+ * Props-driven for full customization.
+ */
+
+import React from "react";
+import { View, StyleSheet, ScrollView, ActivityIndicator } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicText,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+import type { CreditLog } from "../../domain/types/transaction.types";
+import {
+  TransactionItem,
+  type TransactionItemTranslations,
+} from "./TransactionItem";
+
+export interface TransactionListTranslations extends TransactionItemTranslations {
+  title: string;
+  empty: string;
+  loading: string;
+}
+
+export interface TransactionListProps {
+  transactions: CreditLog[];
+  loading: boolean;
+  translations: TransactionListTranslations;
+  maxHeight?: number;
+  dateFormatter?: (timestamp: number) => string;
+}
+
+export const TransactionList: React.FC<TransactionListProps> = ({
+  transactions,
+  loading,
+  translations,
+  maxHeight = 400,
+  dateFormatter,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <AtomicText
+          type="titleLarge"
+          style={[styles.title, { color: tokens.colors.textPrimary }]}
+        >
+          {translations.title}
+        </AtomicText>
+        <AtomicIcon name="History" size="md" color="secondary" />
+      </View>
+
+      {loading ? (
+        <View style={styles.stateContainer}>
+          <ActivityIndicator size="large" color={tokens.colors.primary} />
+          <AtomicText
+            type="bodyMedium"
+            style={[styles.stateText, { color: tokens.colors.textSecondary }]}
+          >
+            {translations.loading}
+          </AtomicText>
+        </View>
+      ) : transactions.length === 0 ? (
+        <View style={styles.stateContainer}>
+          <AtomicIcon name="Package" size="xl" color="secondary" />
+          <AtomicText
+            type="bodyMedium"
+            style={[styles.stateText, { color: tokens.colors.textSecondary }]}
+          >
+            {translations.empty}
+          </AtomicText>
+        </View>
+      ) : (
+        <ScrollView
+          style={[styles.scrollView, { maxHeight }]}
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+        >
+          {transactions.map((transaction) => (
+            <TransactionItem
+              key={transaction.id}
+              transaction={transaction}
+              translations={translations}
+              dateFormatter={dateFormatter}
+            />
+          ))}
+        </ScrollView>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 24,
+    marginBottom: 24,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginHorizontal: 16,
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "700",
+  },
+  scrollView: {
+    paddingHorizontal: 16,
+  },
+  scrollContent: {
+    paddingBottom: 8,
+  },
+  stateContainer: {
+    padding: 40,
+    alignItems: "center",
+    gap: 12,
+  },
+  stateText: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});

package/src/domains/wallet/presentation/components/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Wallet Components Index
+ *
+ * Export all wallet-related components.
+ */
+
+export {
+  BalanceCard,
+  type BalanceCardProps,
+  type BalanceCardTranslations,
+} from "./BalanceCard";
+
+export {
+  TransactionItem,
+  type TransactionItemProps,
+  type TransactionItemTranslations,
+} from "./TransactionItem";
+
+export {
+  TransactionList,
+  type TransactionListProps,
+  type TransactionListTranslations,
+} from "./TransactionList";