@umituz/react-native-subscription 2.12.1 → 2.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.12.1",
+  "version": "2.12.3",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -47,7 +47,7 @@
   "devDependencies": {
     "@tanstack/react-query": "^5.0.0",
     "@types/react": "~19.1.10",
-    "@umituz/react-native-design-system": "^2.2.0",
+    "@umituz/react-native-design-system": "^2.3.1",
     "@umituz/react-native-firebase": "*",
     "@umituz/react-native-legal": "*",
     "@umituz/react-native-localization": "*",
@@ -70,4 +70,4 @@
     "LICENSE"
   ],
   "dependencies": {}
-}
+}

package/src/domains/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Domains Index
+ */
+
+export * from "./paywall";

package/src/domains/paywall/components/CreditCard.tsx

@@ -0,0 +1,117 @@
+/**
+ * Credit Card
+ * Credit package selection card
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon, AtomicBadge, useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { CreditsPackage } from "../entities";
+
+interface CreditCardProps {
+    pkg: CreditsPackage;
+    isSelected: boolean;
+    onSelect: () => void;
+}
+
+export const CreditCard: React.FC<CreditCardProps> = React.memo(({ pkg, isSelected, onSelect }) => {
+    const tokens = useAppDesignTokens();
+    const totalCredits = pkg.credits + (pkg.bonus ?? 0);
+
+    return (
+        <TouchableOpacity onPress={onSelect} activeOpacity={0.7} style={styles.touchable}>
+            <View
+                style={[
+                    styles.container,
+                    {
+                        backgroundColor: tokens.colors.surface,
+                        borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+                        borderWidth: isSelected ? 2 : 1,
+                    },
+                ]}
+            >
+                {pkg.badge && (
+                    <View style={styles.badgeContainer}>
+                        <AtomicBadge text={pkg.badge} variant="warning" size="sm" />
+                    </View>
+                )}
+
+                <View style={styles.content}>
+                    <View style={styles.leftSection}>
+                        <AtomicIcon name="flash" size="md" color={isSelected ? "primary" : "secondary"} />
+                        <AtomicText
+                            type="headlineSmall"
+                            style={[styles.credits, { color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary }]}
+                        >
+                            {totalCredits.toLocaleString()}
+                        </AtomicText>
+                    </View>
+
+                    <View style={styles.rightSection}>
+                        <AtomicText
+                            type="titleLarge"
+                            style={[styles.price, { color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary }]}
+                        >
+                            {pkg.currency}{pkg.price.toFixed(2)}
+                        </AtomicText>
+                        {isSelected && <AtomicIcon name="checkmark-circle" size="md" color="primary" />}
+                    </View>
+                </View>
+
+                {(pkg.bonus ?? 0) > 0 && (
+                    <View style={styles.bonusRow}>
+                        <AtomicIcon name="gift-outline" size="sm" color="success" />
+                        <AtomicText type="bodySmall" style={{ color: tokens.colors.success, marginLeft: 4 }}>
+                            +{pkg.bonus}
+                        </AtomicText>
+                    </View>
+                )}
+            </View>
+        </TouchableOpacity>
+    );
+});
+
+CreditCard.displayName = "CreditCard";
+
+const styles = StyleSheet.create({
+    touchable: {
+        marginBottom: 10,
+        marginHorizontal: 24,
+    },
+    container: {
+        borderRadius: 16,
+        padding: 16,
+        position: "relative",
+    },
+    badgeContainer: {
+        position: "absolute",
+        top: -10,
+        right: 16,
+    },
+    content: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    leftSection: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    credits: {
+        fontWeight: "700",
+        marginLeft: 8,
+    },
+    rightSection: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    price: {
+        fontWeight: "700",
+        marginRight: 8,
+    },
+    bonusRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginTop: 8,
+    },
+});

package/src/domains/paywall/components/FeatureItem.tsx

@@ -0,0 +1,50 @@
+/**
+ * Feature Item
+ * Single feature row with icon
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
+
+interface FeatureItemProps {
+    icon: string;
+    text: string;
+}
+
+export const FeatureItem: React.FC<FeatureItemProps> = React.memo(({ icon, text }) => {
+    const tokens = useAppDesignTokens();
+
+    return (
+        <View style={styles.container}>
+            <View style={[styles.iconContainer, { backgroundColor: tokens.colors.primaryLight }]}>
+                <AtomicIcon
+                    name={icon || "checkmark-circle"}
+                    customSize={16}
+                    customColor={tokens.colors.primary}
+                />
+            </View>
+            <AtomicText type="bodyMedium" style={{ color: tokens.colors.textPrimary, flex: 1 }}>
+                {text}
+            </AtomicText>
+        </View>
+    );
+});
+
+FeatureItem.displayName = "FeatureItem";
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginBottom: 12,
+    },
+    iconContainer: {
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        justifyContent: "center",
+        alignItems: "center",
+        marginRight: 12,
+    },
+});

package/src/domains/paywall/components/FeatureList.tsx

@@ -0,0 +1,34 @@
+/**
+ * Feature List
+ * List of premium features
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { FeatureItem } from "./FeatureItem";
+import type { SubscriptionFeature } from "../entities";
+
+interface FeatureListProps {
+    features: SubscriptionFeature[];
+}
+
+export const FeatureList: React.FC<FeatureListProps> = React.memo(({ features }) => {
+    if (features.length === 0) return null;
+
+    return (
+        <View style={styles.container}>
+            {features.map((feature, index) => (
+                <FeatureItem key={`${feature.icon}-${index}`} icon={feature.icon} text={feature.text} />
+            ))}
+        </View>
+    );
+});
+
+FeatureList.displayName = "FeatureList";
+
+const styles = StyleSheet.create({
+    container: {
+        paddingHorizontal: 24,
+        marginBottom: 20,
+    },
+});

package/src/domains/paywall/components/PaywallFooter.tsx

@@ -0,0 +1,98 @@
+/**
+ * Paywall Footer
+ * Action button and legal links
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet, Linking } from "react-native";
+import { AtomicText, AtomicButton, useAppDesignTokens } from "@umituz/react-native-design-system";
+
+interface PaywallFooterProps {
+    isProcessing: boolean;
+    isDisabled: boolean;
+    purchaseButtonText: string;
+    processingText: string;
+    restoreButtonText: string;
+    privacyText?: string;
+    termsText?: string;
+    privacyUrl?: string;
+    termsUrl?: string;
+    onPurchase: () => void;
+    onRestore: () => void;
+}
+
+export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(
+    ({
+        isProcessing,
+        isDisabled,
+        purchaseButtonText,
+        processingText,
+        restoreButtonText,
+        privacyText,
+        termsText,
+        privacyUrl,
+        termsUrl,
+        onPurchase,
+        onRestore,
+    }) => {
+        const tokens = useAppDesignTokens();
+
+        const handleOpenUrl = (url?: string) => {
+            if (url) Linking.openURL(url);
+        };
+
+        return (
+            <View style={styles.container}>
+                <AtomicButton
+                    title={isProcessing ? processingText : purchaseButtonText}
+                    onPress={onPurchase}
+                    disabled={isDisabled || isProcessing}
+                    variant="primary"
+                    size="lg"
+                    style={styles.purchaseButton}
+                />
+
+                <View style={styles.linksRow}>
+                    {termsText && termsUrl && (
+                        <TouchableOpacity onPress={() => handleOpenUrl(termsUrl)}>
+                            <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
+                                {termsText}
+                            </AtomicText>
+                        </TouchableOpacity>
+                    )}
+
+                    <TouchableOpacity onPress={onRestore}>
+                        <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
+                            {restoreButtonText}
+                        </AtomicText>
+                    </TouchableOpacity>
+
+                    {privacyText && privacyUrl && (
+                        <TouchableOpacity onPress={() => handleOpenUrl(privacyUrl)}>
+                            <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
+                                {privacyText}
+                            </AtomicText>
+                        </TouchableOpacity>
+                    )}
+                </View>
+            </View>
+        );
+    }
+);
+
+PaywallFooter.displayName = "PaywallFooter";
+
+const styles = StyleSheet.create({
+    container: {
+        paddingHorizontal: 24,
+        paddingBottom: 32,
+    },
+    purchaseButton: {
+        marginBottom: 16,
+    },
+    linksRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        paddingHorizontal: 8,
+    },
+});

package/src/domains/paywall/components/PaywallHeader.tsx

@@ -0,0 +1,115 @@
+/**
+ * Paywall Header
+ * Header with gradient, close button, title and subtitle
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import {
+    AtomicText,
+    AtomicIcon,
+    useDesignSystemTheme,
+    useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface PaywallHeaderProps {
+    title: string;
+    subtitle?: string;
+    onClose: () => void;
+}
+
+export const PaywallHeader: React.FC<PaywallHeaderProps> = React.memo(
+    ({ title, subtitle, onClose }) => {
+        const tokens = useAppDesignTokens();
+        const { themeMode } = useDesignSystemTheme();
+        const isDark = themeMode === "dark";
+
+        const gradientColors: readonly [string, string] = isDark
+            ? [tokens.colors.surface, tokens.colors.surfaceSecondary]
+            : [tokens.colors.primary, tokens.colors.primaryDark];
+
+        return (
+            <LinearGradient
+                colors={gradientColors}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 1 }}
+                style={styles.container}
+            >
+                <TouchableOpacity
+                    onPress={onClose}
+                    style={[styles.closeButton, { backgroundColor: tokens.colors.onPrimary }]}
+                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                >
+                    <AtomicIcon
+                        name="close-outline"
+                        size="md"
+                        customColor={isDark ? tokens.colors.textPrimary : tokens.colors.primary}
+                    />
+                </TouchableOpacity>
+
+                <View style={styles.content}>
+                    <AtomicText
+                        type="headlineLarge"
+                        style={[styles.title, { color: tokens.colors.onPrimary }]}
+                    >
+                        {title}
+                    </AtomicText>
+                    {subtitle && (
+                        <AtomicText
+                            type="bodyLarge"
+                            style={[styles.subtitle, { color: tokens.colors.onPrimary }]}
+                        >
+                            {subtitle}
+                        </AtomicText>
+                    )}
+                </View>
+
+                <View style={[styles.wave, { backgroundColor: tokens.colors.background }]} />
+            </LinearGradient>
+        );
+    }
+);
+
+PaywallHeader.displayName = "PaywallHeader";
+
+const styles = StyleSheet.create({
+    container: {
+        paddingTop: 56,
+        paddingBottom: 36,
+        paddingHorizontal: 24,
+        position: "relative",
+    },
+    closeButton: {
+        position: "absolute",
+        top: 48,
+        right: 20,
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        justifyContent: "center",
+        alignItems: "center",
+        zIndex: 10,
+    },
+    content: {
+        alignItems: "center",
+    },
+    title: {
+        fontWeight: "700",
+        textAlign: "center",
+        marginBottom: 8,
+    },
+    subtitle: {
+        textAlign: "center",
+        opacity: 0.9,
+    },
+    wave: {
+        position: "absolute",
+        bottom: -1,
+        left: 0,
+        right: 0,
+        height: 24,
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+});

package/src/domains/paywall/components/PaywallModal.tsx

@@ -0,0 +1,187 @@
+/**
+ * Paywall Modal
+ * Mode-based paywall: subscription, credits, or hybrid
+ */
+
+import React, { useState, useCallback } from "react";
+import { View, ScrollView, StyleSheet, ActivityIndicator } from "react-native";
+import { BaseModal, useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import type { PurchasesPackage } from "react-native-purchases";
+import { PaywallHeader } from "./PaywallHeader";
+import { PaywallTabBar } from "./PaywallTabBar";
+import { PaywallFooter } from "./PaywallFooter";
+import { FeatureList } from "./FeatureList";
+import { PlanCard } from "./PlanCard";
+import { CreditCard } from "./CreditCard";
+import type {
+    PaywallMode,
+    PaywallTabType,
+    CreditsPackage,
+    SubscriptionFeature,
+    PaywallTranslations,
+    PaywallLegalUrls,
+} from "../entities";
+
+export interface PaywallModalProps {
+    visible: boolean;
+    onClose: () => void;
+    mode: PaywallMode;
+    translations: PaywallTranslations;
+    subscriptionPackages?: PurchasesPackage[];
+    creditsPackages?: CreditsPackage[];
+    features?: SubscriptionFeature[];
+    isLoading?: boolean;
+    legalUrls?: PaywallLegalUrls;
+    bestValueIdentifier?: string;
+    creditAmounts?: Record<string, number>;
+    creditsLabel?: string;
+    onSubscriptionPurchase?: (pkg: PurchasesPackage) => Promise<void>;
+    onCreditsPurchase?: (packageId: string) => Promise<void>;
+    onRestore?: () => Promise<void>;
+}
+
+export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
+    const {
+        visible,
+        onClose,
+        mode,
+        translations,
+        subscriptionPackages = [],
+        creditsPackages = [],
+        features = [],
+        isLoading = false,
+        legalUrls = {},
+        bestValueIdentifier,
+        creditAmounts,
+        creditsLabel,
+        onSubscriptionPurchase,
+        onCreditsPurchase,
+        onRestore,
+    } = props;
+
+    const tokens = useAppDesignTokens();
+    const initialTab: PaywallTabType = mode === "credits" ? "credits" : "subscription";
+    const [activeTab, setActiveTab] = useState<PaywallTabType>(initialTab);
+    const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
+    const [selectedCreditId, setSelectedCreditId] = useState<string | null>(null);
+    const [isProcessing, setIsProcessing] = useState(false);
+
+    const showTabs = mode === "hybrid";
+    const showCredits = mode === "credits" || (mode === "hybrid" && activeTab === "credits");
+    const showSubscription = mode === "subscription" || (mode === "hybrid" && activeTab === "subscription");
+
+    const handlePurchase = useCallback(async () => {
+        setIsProcessing(true);
+        try {
+            if (showSubscription && selectedPlanId && onSubscriptionPurchase) {
+                const pkg = subscriptionPackages.find((p) => p.product.identifier === selectedPlanId);
+                if (pkg) await onSubscriptionPurchase(pkg);
+            } else if (showCredits && selectedCreditId && onCreditsPurchase) {
+                await onCreditsPurchase(selectedCreditId);
+            }
+        } finally {
+            setIsProcessing(false);
+        }
+    }, [showSubscription, showCredits, selectedPlanId, selectedCreditId, subscriptionPackages, onSubscriptionPurchase, onCreditsPurchase]);
+
+    const handleRestore = useCallback(async () => {
+        if (onRestore) {
+            setIsProcessing(true);
+            try {
+                await onRestore();
+            } finally {
+                setIsProcessing(false);
+            }
+        }
+    }, [onRestore]);
+
+    const isPurchaseDisabled = showSubscription ? !selectedPlanId : !selectedCreditId;
+
+    return (
+        <BaseModal visible={visible} onClose={onClose}>
+            <View style={styles.container}>
+                <PaywallHeader title={translations.title} subtitle={translations.subtitle} onClose={onClose} />
+
+                {showTabs && (
+                    <PaywallTabBar
+                        activeTab={activeTab}
+                        onTabChange={setActiveTab}
+                        creditsLabel={translations.creditsTabLabel ?? "Credits"}
+                        subscriptionLabel={translations.subscriptionTabLabel ?? "Subscription"}
+                    />
+                )}
+
+                <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+                    <FeatureList features={features} />
+
+                    {isLoading ? (
+                        <View style={styles.loadingContainer}>
+                            <ActivityIndicator color={tokens.colors.primary} />
+                            <AtomicText type="bodyMedium" style={{ color: tokens.colors.textSecondary, marginTop: 12 }}>
+                                {translations.loadingText}
+                            </AtomicText>
+                        </View>
+                    ) : (
+                        <>
+                            {showSubscription &&
+                                subscriptionPackages.map((pkg) => (
+                                    <PlanCard
+                                        key={pkg.product.identifier}
+                                        pkg={pkg}
+                                        isSelected={selectedPlanId === pkg.product.identifier}
+                                        onSelect={() => setSelectedPlanId(pkg.product.identifier)}
+                                        badge={pkg.product.identifier === bestValueIdentifier ? "Best Value" : undefined}
+                                        creditAmount={creditAmounts?.[pkg.product.identifier]}
+                                        creditsLabel={creditsLabel}
+                                    />
+                                ))}
+
+                            {showCredits &&
+                                creditsPackages.map((pkg) => (
+                                    <CreditCard
+                                        key={pkg.id}
+                                        pkg={pkg}
+                                        isSelected={selectedCreditId === pkg.id}
+                                        onSelect={() => setSelectedCreditId(pkg.id)}
+                                    />
+                                ))}
+                        </>
+                    )}
+                </ScrollView>
+
+                <PaywallFooter
+                    isProcessing={isProcessing}
+                    isDisabled={isPurchaseDisabled}
+                    purchaseButtonText={showSubscription ? (translations.subscribeButtonText ?? translations.purchaseButtonText) : translations.purchaseButtonText}
+                    processingText={translations.processingText}
+                    restoreButtonText={translations.restoreButtonText}
+                    privacyText={translations.privacyText}
+                    termsText={translations.termsOfServiceText}
+                    privacyUrl={legalUrls.privacyUrl}
+                    termsUrl={legalUrls.termsUrl}
+                    onPurchase={handlePurchase}
+                    onRestore={handleRestore}
+                />
+            </View>
+        </BaseModal>
+    );
+});
+
+PaywallModal.displayName = "PaywallModal";
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        width: "100%",
+    },
+    scroll: {
+        flex: 1,
+    },
+    scrollContent: {
+        paddingBottom: 20,
+    },
+    loadingContainer: {
+        alignItems: "center",
+        paddingVertical: 40,
+    },
+});