@umituz/react-native-subscription 2.12.6 → 2.12.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.12.6",
+  "version": "2.12.7",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

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

@@ -1,26 +1,22 @@
 /**
  * Paywall Modal
- * Mode-based paywall: subscription, credits, or hybrid
+ * Modern paywall with gradient container and responsive design
  */
 
 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 { View, ScrollView, StyleSheet, TouchableOpacity, ActivityIndicator } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import {
+    BaseModal,
+    useAppDesignTokens,
+    AtomicText,
+    AtomicIcon,
+    useDesignSystemTheme,
+} 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";
+import type { PaywallMode, CreditsPackage, SubscriptionFeature, PaywallTranslations, PaywallLegalUrls } from "../entities";
 
 export interface PaywallModalProps {
     visible: boolean;
@@ -60,15 +56,19 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
     } = props;
 
     const tokens = useAppDesignTokens();
-    const initialTab: PaywallTabType = mode === "credits" ? "credits" : "subscription";
-    const [activeTab, setActiveTab] = useState<PaywallTabType>(initialTab);
+    const { themeMode } = useDesignSystemTheme();
+    const isDark = themeMode === "dark";
+
     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 showCredits = mode === "credits";
+    const showSubscription = mode === "subscription" || mode === "hybrid";
+
+    const gradientColors: readonly [string, string, string] = isDark
+        ? ["#1e3a5f", "#2d1e3f", "#1a1a2e"]
+        : ["#4a5568", "#5a4a78", "#3a3a4a"];
 
     const handlePurchase = useCallback(async () => {
         setIsProcessing(true);
@@ -85,44 +85,64 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
     }, [showSubscription, showCredits, selectedPlanId, selectedCreditId, subscriptionPackages, onSubscriptionPurchase, onCreditsPurchase]);
 
     const handleRestore = useCallback(async () => {
-        if (onRestore) {
-            setIsProcessing(true);
-            try {
-                await onRestore();
-            } finally {
-                setIsProcessing(false);
-            }
+        if (!onRestore || isProcessing) return;
+        setIsProcessing(true);
+        try {
+            await onRestore();
+        } finally {
+            setIsProcessing(false);
         }
-    }, [onRestore]);
+    }, [onRestore, isProcessing]);
 
     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} />
+        <BaseModal visible={visible} onClose={onClose} contentStyle={styles.modalContent}>
+            <LinearGradient colors={gradientColors} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.gradient}>
+                <TouchableOpacity
+                    onPress={onClose}
+                    style={[styles.closeBtn, { backgroundColor: tokens.colors.surface }]}
+                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                >
+                    <AtomicIcon name="close-outline" size="md" customColor={tokens.colors.textPrimary} />
+                </TouchableOpacity>
+
+                <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scroll}>
+                    <View style={styles.header}>
+                        <AtomicText type="headlineLarge" style={[styles.title, { color: tokens.colors.onPrimary }]}>
+                            {translations.title}
+                        </AtomicText>
+                        {translations.subtitle && (
+                            <AtomicText type="bodyLarge" style={[styles.subtitle, { color: tokens.colors.onPrimary }]}>
+                                {translations.subtitle}
+                            </AtomicText>
+                        )}
+                    </View>
+
+                    {features.length > 0 && (
+                        <View style={[styles.features, { backgroundColor: `${tokens.colors.surface}15` }]}>
+                            {features.map((feature, idx) => (
+                                <View key={idx} style={styles.featureRow}>
+                                    <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primaryLight }]}>
+                                        <AtomicIcon name={feature.icon} customSize={20} customColor={tokens.colors.primary} />
+                                    </View>
+                                    <AtomicText type="bodyLarge" style={[styles.featureText, { color: tokens.colors.onPrimary }]}>
+                                        {feature.text}
+                                    </AtomicText>
+                                </View>
+                            ))}
+                        </View>
+                    )}
 
                     {isLoading ? (
-                        <View style={styles.loadingContainer}>
-                            <ActivityIndicator color={tokens.colors.primary} />
-                            <AtomicText type="bodyMedium" style={{ color: tokens.colors.textSecondary, marginTop: 12 }}>
+                        <View style={styles.loading}>
+                            <ActivityIndicator color={tokens.colors.onPrimary} />
+                            <AtomicText type="bodyMedium" style={[styles.loadingText, { color: tokens.colors.onPrimary }]}>
                                 {translations.loadingText}
                             </AtomicText>
                         </View>
                     ) : (
-                        <>
+                        <View style={styles.plans}>
                             {showSubscription &&
                                 subscriptionPackages.map((pkg) => (
                                     <PlanCard
@@ -135,34 +155,49 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
                                         creditsLabel={creditsLabel}
                                     />
                                 ))}
-
                             {showCredits &&
                                 creditsPackages.map((pkg) => (
-                                    <CreditCard
-                                        key={pkg.id}
-                                        pkg={pkg}
-                                        isSelected={selectedCreditId === pkg.id}
-                                        onSelect={() => setSelectedCreditId(pkg.id)}
-                                    />
+                                    <CreditCard key={pkg.id} pkg={pkg} isSelected={selectedCreditId === pkg.id} onSelect={() => setSelectedCreditId(pkg.id)} />
                                 ))}
-                        </>
+                        </View>
                     )}
-                </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>
+                    <TouchableOpacity
+                        onPress={handlePurchase}
+                        disabled={isPurchaseDisabled || isProcessing}
+                        style={[styles.cta, { backgroundColor: tokens.colors.primary }, (isPurchaseDisabled || isProcessing) && styles.ctaDisabled]}
+                        activeOpacity={0.8}
+                    >
+                        <AtomicText type="titleLarge" style={[styles.ctaText, { color: tokens.colors.onPrimary }]}>
+                            {isProcessing ? translations.processingText : showSubscription ? translations.subscribeButtonText : translations.purchaseButtonText}
+                        </AtomicText>
+                    </TouchableOpacity>
+
+                    <View style={styles.footer}>
+                        {legalUrls.termsUrl && (
+                            <TouchableOpacity onPress={() => {}}>
+                                <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.onPrimary }]}>
+                                    {translations.termsOfServiceText}
+                                </AtomicText>
+                            </TouchableOpacity>
+                        )}
+                        {onRestore && (
+                            <TouchableOpacity onPress={handleRestore}>
+                                <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.onPrimary }]}>
+                                    {translations.restoreButtonText}
+                                </AtomicText>
+                            </TouchableOpacity>
+                        )}
+                        {legalUrls.privacyUrl && (
+                            <TouchableOpacity onPress={() => {}}>
+                                <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.onPrimary }]}>
+                                    {translations.privacyText}
+                                </AtomicText>
+                            </TouchableOpacity>
+                        )}
+                    </View>
+                </ScrollView>
+            </LinearGradient>
         </BaseModal>
     );
 });
@@ -170,18 +205,23 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
 PaywallModal.displayName = "PaywallModal";
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        width: "100%",
-    },
-    scroll: {
-        flex: 1,
-    },
-    scrollContent: {
-        paddingBottom: 20,
-    },
-    loadingContainer: {
-        alignItems: "center",
-        paddingVertical: 40,
-    },
+    modalContent: { padding: 0, borderWidth: 0, overflow: "hidden" },
+    gradient: { flex: 1 },
+    closeBtn: { position: "absolute", top: 16, right: 16, width: 36, height: 36, borderRadius: 18, justifyContent: "center", alignItems: "center", zIndex: 10 },
+    scroll: { padding: 24, paddingTop: 56 },
+    header: { alignItems: "center", marginBottom: 24 },
+    title: { fontWeight: "700", textAlign: "center", marginBottom: 8 },
+    subtitle: { textAlign: "center", lineHeight: 24, opacity: 0.8 },
+    features: { borderRadius: 16, padding: 16, marginBottom: 20, gap: 12 },
+    featureRow: { flexDirection: "row", alignItems: "center" },
+    featureIcon: { width: 40, height: 40, borderRadius: 20, justifyContent: "center", alignItems: "center", marginRight: 12 },
+    featureText: { flex: 1, fontWeight: "500" },
+    loading: { alignItems: "center", paddingVertical: 40 },
+    loadingText: { marginTop: 12, opacity: 0.7 },
+    plans: { marginBottom: 20 },
+    cta: { borderRadius: 16, paddingVertical: 18, alignItems: "center", marginBottom: 16 },
+    ctaDisabled: { opacity: 0.5 },
+    ctaText: { fontWeight: "700" },
+    footer: { flexDirection: "row", justifyContent: "space-between", paddingHorizontal: 8 },
+    footerLink: { opacity: 0.6 },
 });