@umituz/react-native-subscription 2.12.1 → 2.12.3

package/src/presentation/components/paywall/PaywallTabBar.tsx

@@ -1,96 +0,0 @@
-/**
- * Paywall Tab Bar Component
- * Single Responsibility: Display and handle tab selection
- */
-
-import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import type { PaywallTabType } from "../../../domain/entities/paywall/PaywallTab";
-
-interface PaywallTabBarProps {
-  activeTab: PaywallTabType;
-  onTabChange: (tab: PaywallTabType) => void;
-  creditsLabel?: string;
-  subscriptionLabel?: string;
-}
-
-export const PaywallTabBar: React.FC<PaywallTabBarProps> = React.memo(
-  ({
-    activeTab,
-    onTabChange,
-    creditsLabel = "Credits",
-    subscriptionLabel = "Subscription",
-  }) => {
-    const tokens = useAppDesignTokens();
-
-    const renderTab = (tab: PaywallTabType, label: string) => {
-      const isActive = activeTab === tab;
-
-      return (
-        <TouchableOpacity
-          key={tab}
-          style={[
-            styles.tab,
-            {
-              backgroundColor: isActive
-                ? tokens.colors.primary
-                : tokens.colors.surfaceSecondary,
-            },
-          ]}
-          onPress={() => onTabChange(tab)}
-          activeOpacity={0.8}
-        >
-          <AtomicText
-            type="labelLarge"
-            style={[
-              styles.tabText,
-              {
-                color: isActive
-                  ? tokens.colors.onPrimary
-                  : tokens.colors.textSecondary,
-              },
-            ]}
-          >
-            {label}
-          </AtomicText>
-        </TouchableOpacity>
-      );
-    };
-
-    return (
-      <View
-        style={[
-          styles.container,
-          { backgroundColor: tokens.colors.surfaceSecondary },
-        ]}
-      >
-        {renderTab("credits", creditsLabel)}
-        {renderTab("subscription", subscriptionLabel)}
-      </View>
-    );
-  },
-);
-
-PaywallTabBar.displayName = "PaywallTabBar";
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    borderRadius: 12,
-    padding: 4,
-    marginHorizontal: 24,
-    marginBottom: 16,
-  },
-  tab: {
-    flex: 1,
-    paddingVertical: 12,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  tabText: {
-    fontWeight: "600",
-  },
-});

package/src/presentation/components/paywall/SubscriptionFooter.tsx

@@ -1,116 +0,0 @@
-import React, { useMemo } from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
-import type { PurchasesPackage } from "react-native-purchases";
-import { AtomicText, useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
-import { PaywallLegalFooter } from "./PaywallLegalFooter";
-
-interface SubscriptionFooterProps {
-    isProcessing: boolean;
-    isLoading: boolean;
-    processingText: string;
-    purchaseButtonText: string;
-    hasPackages: boolean;
-    selectedPkg: PurchasesPackage | null;
-    restoreButtonText: string;
-    showRestoreButton: boolean;
-    privacyUrl?: string;
-    termsUrl?: string;
-    privacyText?: string;
-    termsOfServiceText?: string;
-    onPurchase: () => void;
-    onRestore: () => void;
-}
-
-import { LinearGradient } from "expo-linear-gradient";
-
-export const SubscriptionFooter: React.FC<SubscriptionFooterProps> = React.memo(
-    ({
-        isProcessing,
-        isLoading,
-        processingText,
-        purchaseButtonText,
-        hasPackages,
-        selectedPkg,
-        restoreButtonText,
-        showRestoreButton,
-        privacyUrl,
-        termsUrl,
-        privacyText,
-        termsOfServiceText,
-        onPurchase,
-        onRestore,
-    }) => {
-        const tokens = useAppDesignTokens();
-        const { spacingMultiplier, getFontSize } = useResponsive();
-
-        const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
-        const buttonFontSize = getFontSize(16);
-
-        const isDisabled = !selectedPkg || isProcessing || isLoading;
-
-        return (
-            <View style={styles.container}>
-                <View style={styles.actions}>
-                    {hasPackages && (
-                        <TouchableOpacity
-                            onPress={onPurchase}
-                            disabled={isDisabled}
-                            activeOpacity={0.8}
-                        >
-                            <LinearGradient
-                                colors={[tokens.colors.primary, tokens.colors.secondary]}
-                                start={{ x: 0, y: 0 }}
-                                end={{ x: 1, y: 0 }}
-                                style={[styles.gradientButton, isDisabled && { opacity: 0.5 }]}
-                            >
-                                <AtomicText
-                                    type="titleSmall"
-                                    style={{
-                                        color: tokens.colors.onPrimary,
-                                        fontWeight: "800",
-                                        fontSize: buttonFontSize,
-                                    }}
-                                >
-                                    {isProcessing ? processingText : purchaseButtonText}
-                                </AtomicText>
-                            </LinearGradient>
-                        </TouchableOpacity>
-                    )}
-                </View>
-
-                <PaywallLegalFooter
-                    privacyUrl={privacyUrl}
-                    termsUrl={termsUrl}
-                    privacyText={privacyText}
-                    termsOfServiceText={termsOfServiceText}
-                    showRestoreButton={showRestoreButton}
-                    restoreButtonText={restoreButtonText}
-                    onRestore={onRestore}
-                    isProcessing={isProcessing || isLoading}
-                />
-            </View>
-        );
-    }
-);
-
-SubscriptionFooter.displayName = "SubscriptionFooter";
-
-const createStyles = (spacingMult: number) =>
-    StyleSheet.create({
-        container: {},
-        actions: {
-            paddingHorizontal: 24 * spacingMult,
-            paddingVertical: 16 * spacingMult,
-            gap: 12 * spacingMult,
-        },
-        gradientButton: {
-            paddingVertical: 16 * spacingMult,
-            borderRadius: 16 * spacingMult,
-            alignItems: "center",
-            justifyContent: "center",
-        },
-        restoreButton: {
-            alignItems: "center",
-            paddingVertical: 8 * spacingMult,
-        },
-    });

package/src/presentation/components/paywall/SubscriptionModal.tsx

@@ -1,168 +0,0 @@
-/**
- * Subscription Modal Component
- * Fullscreen subscription flow using BaseModal from design system
- */
-
-import React, { useMemo } from "react";
-import { View, StyleSheet, ScrollView } from "react-native";
-import { BaseModal, useResponsive } from "@umituz/react-native-design-system";
-import type { PurchasesPackage } from "react-native-purchases";
-
-import { SubscriptionModalHeader } from "./SubscriptionModalHeader";
-import { SubscriptionPackageList } from "./SubscriptionPackageList";
-import { SubscriptionFooter } from "./SubscriptionFooter";
-import { PaywallFeaturesList } from "./PaywallFeaturesList";
-import { useSubscriptionModal } from "../../hooks/useSubscriptionModal";
-
-export interface SubscriptionModalProps {
-  visible: boolean;
-  onClose: () => void;
-  packages: PurchasesPackage[];
-  onPurchase: (pkg: PurchasesPackage) => Promise<boolean>;
-  onRestore: () => Promise<boolean>;
-  title: string;
-  subtitle?: string;
-  isLoading?: boolean;
-  purchaseButtonText: string;
-  restoreButtonText: string;
-  loadingText: string;
-  emptyText: string;
-  processingText: string;
-  privacyUrl?: string;
-  termsUrl?: string;
-  privacyText?: string;
-  termsOfServiceText?: string;
-  showRestoreButton?: boolean;
-  /** Optional: Map of product identifier to credit amount */
-  creditAmounts?: Record<string, number>;
-  /** Optional: Manually specify which package should show "Best Value" badge */
-  bestValueIdentifier?: string;
-  /** Optional: Text labels for accordion details */
-  billingPeriodLabel?: string;
-  totalPriceLabel?: string;
-  perMonthLabel?: string;
-  /** Optional: List of premium features to display */
-  features?: Array<{ icon: string; text: string }>;
-}
-
-export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((props) => {
-  const {
-    visible,
-    onClose,
-    packages,
-    onPurchase,
-    onRestore,
-    title,
-    subtitle,
-    isLoading = false,
-    purchaseButtonText,
-    restoreButtonText,
-    loadingText,
-    emptyText,
-    processingText,
-    privacyUrl,
-    termsUrl,
-    privacyText,
-    termsOfServiceText,
-    showRestoreButton = true,
-    creditAmounts,
-    bestValueIdentifier,
-    billingPeriodLabel,
-    totalPriceLabel,
-    perMonthLabel,
-    features = [],
-  } = props;
-
-  const {
-    selectedPkg,
-    setSelectedPkg,
-    isProcessing,
-    handlePurchase,
-    handleRestore,
-  } = useSubscriptionModal({
-    onPurchase,
-    onRestore,
-    onClose,
-  });
-
-  const { spacingMultiplier } = useResponsive();
-  const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
-
-  return (
-    <BaseModal visible={visible} onClose={onClose}>
-      <View style={styles.container}>
-        <SubscriptionModalHeader
-          title={title}
-          subtitle={subtitle}
-          onClose={onClose}
-        />
-
-        <ScrollView
-          style={styles.scrollView}
-          contentContainerStyle={styles.scrollContent}
-          showsVerticalScrollIndicator={false}
-          bounces={false}
-        >
-          {features.length > 0 && (
-            <PaywallFeaturesList
-              features={features}
-              containerStyle={styles.featuresList}
-            />
-          )}
-
-          <SubscriptionPackageList
-            packages={packages}
-            isLoading={isLoading}
-            selectedPkg={selectedPkg}
-            onSelect={setSelectedPkg}
-            loadingText={loadingText}
-            emptyText={emptyText}
-            creditAmounts={creditAmounts}
-            bestValueIdentifier={bestValueIdentifier}
-            billingPeriodLabel={billingPeriodLabel}
-            totalPriceLabel={totalPriceLabel}
-            perMonthLabel={perMonthLabel}
-          />
-        </ScrollView>
-
-        <SubscriptionFooter
-          isProcessing={isProcessing}
-          isLoading={isLoading}
-          processingText={processingText}
-          purchaseButtonText={purchaseButtonText}
-          hasPackages={packages.length > 0}
-          selectedPkg={selectedPkg}
-          restoreButtonText={restoreButtonText}
-          showRestoreButton={showRestoreButton}
-          privacyUrl={privacyUrl}
-          termsUrl={termsUrl}
-          privacyText={privacyText}
-          termsOfServiceText={termsOfServiceText}
-          onPurchase={handlePurchase}
-          onRestore={handleRestore}
-        />
-      </View>
-    </BaseModal>
-  );
-});
-
-SubscriptionModal.displayName = "SubscriptionModal";
-
-const createStyles = (spacingMult: number) =>
-  StyleSheet.create({
-    container: {
-      flex: 1,
-      width: "100%",
-    },
-    scrollView: {
-      flex: 1,
-    },
-    scrollContent: {
-      flexGrow: 1,
-      paddingBottom: 32 * spacingMult,
-    },
-    featuresList: {
-      paddingHorizontal: 24 * spacingMult,
-      marginBottom: 24 * spacingMult,
-    },
-  });

package/src/presentation/components/paywall/SubscriptionModalHeader.tsx

@@ -1,78 +0,0 @@
-/**
- * Subscription Modal Header Component
- */
-
-import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-
-interface SubscriptionModalHeaderProps {
-    title: string;
-    subtitle?: string;
-    onClose: () => void;
-}
-
-export const SubscriptionModalHeader: React.FC<SubscriptionModalHeaderProps> = ({
-    title,
-    subtitle,
-    onClose,
-}) => {
-    const tokens = useAppDesignTokens();
-
-    return (
-        <View style={styles.header}>
-            <TouchableOpacity
-                style={styles.closeButton}
-                onPress={onClose}
-                testID="subscription-modal-close-button"
-            >
-                <AtomicText style={[styles.closeIcon, { color: tokens.colors.textSecondary }]}>
-                    ×
-                </AtomicText>
-            </TouchableOpacity>
-            <AtomicText
-                type="headlineMedium"
-                style={[styles.title, { color: tokens.colors.textPrimary }]}
-            >
-                {title}
-            </AtomicText>
-            {subtitle && (
-                <AtomicText
-                    type="bodyMedium"
-                    style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
-                >
-                    {subtitle}
-                </AtomicText>
-            )}
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    header: {
-        alignItems: "center",
-        paddingHorizontal: 24,
-        paddingTop: 16,
-        paddingBottom: 16,
-    },
-    closeButton: {
-        position: "absolute",
-        top: 8,
-        right: 16,
-        padding: 8,
-        zIndex: 1,
-    },
-    closeIcon: {
-        fontSize: 28,
-        fontWeight: "300",
-    },
-    title: {
-        marginBottom: 8,
-        textAlign: "center",
-    },
-    subtitle: {
-        textAlign: "center",
-        paddingHorizontal: 20,
-    },
-});

package/src/presentation/components/paywall/SubscriptionPackageList.tsx

@@ -1,171 +0,0 @@
-import React, { useState, useCallback } from "react";
-import { View, StyleSheet, ActivityIndicator } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import type { PurchasesPackage } from "react-native-purchases";
-import { AccordionPlanCard } from "./accordion";
-import { isYearlyPackage, isMonthlyPackage, isWeeklyPackage } from "../../../utils/packagePeriodUtils";
-
-interface SubscriptionPackageListProps {
-    isLoading: boolean;
-    packages: PurchasesPackage[];
-    selectedPkg: PurchasesPackage | null;
-    loadingText: string;
-    emptyText: string;
-    onSelect: (pkg: PurchasesPackage) => void;
-    /** Optional: Manually specify which package should show "Best Value" badge by identifier */
-    bestValueIdentifier?: string;
-    /** Optional: Map of product identifier to credit amount (e.g., { "weekly": 6, "monthly": 25, "yearly": 300 }) */
-    creditAmounts?: Record<string, number>;
-    /** Optional: Text labels for accordion details */
-    billingPeriodLabel?: string;
-    totalPriceLabel?: string;
-    perMonthLabel?: string;
-}
-
-export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = React.memo(
-    ({
-        isLoading,
-        packages,
-        selectedPkg,
-        loadingText,
-        emptyText,
-        onSelect,
-        bestValueIdentifier,
-        creditAmounts,
-        billingPeriodLabel,
-        totalPriceLabel,
-        perMonthLabel,
-    }) => {
-        const tokens = useAppDesignTokens();
-        const hasPackages = packages.length > 0;
-        const showLoading = isLoading && !hasPackages;
-
-        const [expandedPackageId, setExpandedPackageId] = useState<string | null>(null);
-
-        const handleToggleExpand = useCallback((packageId: string) => {
-            setExpandedPackageId((prev) => (prev === packageId ? null : packageId));
-        }, []);
-
-        if (showLoading) {
-            return (
-                <View style={styles.centerContent}>
-                    <ActivityIndicator size="large" color={tokens.colors.primary} />
-                    <AtomicText
-                        type="bodyMedium"
-                        style={[styles.loadingText, { color: tokens.colors.textSecondary }]}
-                    >
-                        {loadingText}
-                    </AtomicText>
-                </View>
-            );
-        }
-
-        if (!hasPackages) {
-            return (
-                <View style={styles.centerContent}>
-                    <AtomicText
-                        type="bodyMedium"
-                        style={[styles.emptyText, { color: tokens.colors.textSecondary }]}
-                    >
-                        {emptyText}
-                    </AtomicText>
-                </View>
-            );
-        }
-
-        return (
-            <View style={styles.packagesContainer}>
-                {packages.map((pkg) => {
-                    // Determine if this package should show "Best Value" badge
-                    let isBestValue = false;
-
-                    if (bestValueIdentifier) {
-                        // Use manual override if provided
-                        isBestValue = pkg.product.identifier === bestValueIdentifier;
-                    } else {
-                        // Auto-detect: mark yearly packages as best value
-                        isBestValue = isYearlyPackage(pkg);
-                    }
-
-                    // Smart matching for credit amounts
-                    const findCreditAmount = () => {
-                        if (!creditAmounts) return undefined;
-
-                        const productId = pkg.product.identifier;
-                        const packageId = pkg.identifier;
-                        const productTitle = pkg.product.title || "";
-
-                        // 1. Exact match
-                        if (creditAmounts[productId] !== undefined) return creditAmounts[productId];
-                        if (creditAmounts[packageId] !== undefined) return creditAmounts[packageId];
-
-                        // 2. Case-insensitive and Title matching
-                        const lowerProductId = productId.toLowerCase();
-                        const lowerPackageId = packageId.toLowerCase();
-                        const lowerTitle = productTitle.toLowerCase();
-
-                        for (const [key, value] of Object.entries(creditAmounts)) {
-                            const lowerKey = key.toLowerCase();
-                            if (lowerProductId === lowerKey || lowerPackageId === lowerKey || lowerTitle.includes(lowerKey)) {
-                                return value;
-                            }
-                        }
-
-                        // 3. Period-based fallback
-                        const isYearly = isYearlyPackage(pkg);
-                        const isMonthly = isMonthlyPackage(pkg);
-                        const isWeekly = isWeeklyPackage(pkg);
-
-                        for (const [key, value] of Object.entries(creditAmounts)) {
-                            const lowerKey = key.toLowerCase();
-                            if (isYearly && (lowerKey.includes("year") || lowerKey.includes("annual") || lowerKey === "yearly")) return value;
-                            if (isMonthly && (lowerKey.includes("month") || lowerKey === "monthly")) return value;
-                            if (isWeekly && (lowerKey.includes("week") || lowerKey === "weekly")) return value;
-                        }
-
-                        return undefined;
-                    };
-
-                    const creditAmount = findCreditAmount();
-                    const packageId = pkg.product.identifier;
-
-                    return (
-                        <AccordionPlanCard
-                            key={packageId}
-                            package={pkg}
-                            isSelected={selectedPkg?.product.identifier === packageId}
-                            isExpanded={expandedPackageId === packageId}
-                            onSelect={() => onSelect(pkg)}
-                            onToggleExpand={() => handleToggleExpand(packageId)}
-                            isBestValue={isBestValue}
-                            creditAmount={creditAmount}
-                            billingPeriodLabel={billingPeriodLabel}
-                            totalPriceLabel={totalPriceLabel}
-                            perMonthLabel={perMonthLabel}
-                        />
-                    );
-                })}
-            </View>
-        );
-    }
-);
-
-SubscriptionPackageList.displayName = "SubscriptionPackageList";
-
-const styles = StyleSheet.create({
-    centerContent: {
-        alignItems: "center",
-        paddingVertical: 40
-    },
-    loadingText: {
-        marginTop: 16
-    },
-    emptyText: {
-        textAlign: "center"
-    },
-    packagesContainer: {
-        gap: 12,
-        marginBottom: 20
-    },
-});