@umituz/react-native-subscription 2.12.2 → 2.12.3

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

@@ -1,162 +0,0 @@
-/**
- * Paywall Modal Component
- * Mode-based paywall: subscription, credits, or hybrid
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import { BaseModal } from "@umituz/react-native-design-system";
-import type { PurchasesPackage } from "react-native-purchases";
-import { usePaywall } from "../../hooks/usePaywall";
-import { PaywallHeroHeader } from "./PaywallHeroHeader";
-import { PaywallTabBar } from "./PaywallTabBar";
-import { CreditsTabContent } from "./CreditsTabContent";
-import { SubscriptionTabContent } from "./SubscriptionTabContent";
-import type { PaywallTabType } from "../../../domain/entities/paywall/PaywallTab";
-import type { PaywallMode } from "../../../domain/entities/paywall/PaywallMode";
-import type { CreditsPackage } from "../../../domain/entities/paywall/CreditsPackage";
-
-export interface PaywallModalProps {
-  visible: boolean;
-  onClose: () => void;
-  mode: PaywallMode;
-  initialTab?: PaywallTabType;
-  creditsPackages?: CreditsPackage[];
-  subscriptionPackages?: PurchasesPackage[];
-  currentCredits?: number;
-  requiredCredits?: number;
-  onCreditsPurchase?: (packageId: string) => Promise<void>;
-  onSubscriptionPurchase?: (pkg: PurchasesPackage) => Promise<void>;
-  onRestore?: () => Promise<void>;
-  subscriptionFeatures?: Array<{ icon: string; text: string }>;
-  isLoading?: boolean;
-  translations: PaywallTranslations;
-  legalUrls?: PaywallLegalUrls;
-}
-
-export interface PaywallTranslations {
-  title: string;
-  subtitle: string;
-  creditsTabLabel?: string;
-  subscriptionTabLabel?: string;
-  purchaseButtonText: string;
-  subscribeButtonText?: string;
-  restoreButtonText: string;
-  loadingText: string;
-  emptyText: string;
-  processingText: string;
-  privacyText?: string;
-  termsOfServiceText?: string;
-}
-
-export interface PaywallLegalUrls {
-  privacyUrl?: string;
-  termsUrl?: string;
-}
-
-export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
-  const {
-    visible,
-    onClose,
-    mode,
-    initialTab = mode === "credits" ? "credits" : "subscription",
-    creditsPackages = [],
-    subscriptionPackages = [],
-    currentCredits = 0,
-    requiredCredits,
-    onCreditsPurchase,
-    onSubscriptionPurchase,
-    onRestore,
-    subscriptionFeatures = [],
-    isLoading = false,
-    translations,
-    legalUrls = {},
-  } = props;
-
-  const {
-    activeTab,
-    selectedCreditsPackageId,
-    selectedSubscriptionPkg,
-    handleTabChange,
-    handleCreditsPackageSelect,
-    handleSubscriptionPackageSelect,
-    handleCreditsPurchase,
-    handleSubscriptionPurchase,
-  } = usePaywall({
-    initialTab,
-    onCreditsPurchase: onCreditsPurchase ?? (() => Promise.resolve()),
-    onSubscriptionPurchase: onSubscriptionPurchase ?? (() => Promise.resolve()),
-  });
-
-  const showTabs = mode === "hybrid";
-  const showCredits = mode === "credits" || (mode === "hybrid" && activeTab === "credits");
-  const showSubscription = mode === "subscription" || (mode === "hybrid" && activeTab === "subscription");
-
-  return (
-    <BaseModal visible={visible} onClose={onClose}>
-      <View style={styles.container}>
-        <PaywallHeroHeader
-          title={translations.title}
-          subtitle={translations.subtitle}
-          onClose={onClose}
-        />
-
-        {showTabs && (
-          <PaywallTabBar
-            activeTab={activeTab}
-            onTabChange={handleTabChange}
-            creditsLabel={translations.creditsTabLabel}
-            subscriptionLabel={translations.subscriptionTabLabel}
-          />
-        )}
-
-        <View style={styles.tabContent}>
-          {showCredits && (
-            <CreditsTabContent
-              packages={creditsPackages}
-              selectedPackageId={selectedCreditsPackageId}
-              onSelectPackage={handleCreditsPackageSelect}
-              onPurchase={handleCreditsPurchase}
-              currentCredits={currentCredits}
-              requiredCredits={requiredCredits}
-              isLoading={isLoading}
-              purchaseButtonText={translations.purchaseButtonText}
-            />
-          )}
-          {showSubscription && (
-            <SubscriptionTabContent
-              packages={subscriptionPackages}
-              selectedPackage={selectedSubscriptionPkg}
-              onSelectPackage={handleSubscriptionPackageSelect}
-              onPurchase={handleSubscriptionPurchase}
-              features={subscriptionFeatures}
-              isLoading={isLoading}
-              purchaseButtonText={translations.subscribeButtonText ?? translations.purchaseButtonText}
-              processingText={translations.processingText}
-              restoreButtonText={translations.restoreButtonText}
-              loadingText={translations.loadingText}
-              emptyText={translations.emptyText}
-              onRestore={onRestore}
-              privacyUrl={legalUrls.privacyUrl}
-              termsUrl={legalUrls.termsUrl}
-              privacyText={translations.privacyText}
-              termsOfServiceText={translations.termsOfServiceText}
-            />
-          )}
-        </View>
-      </View>
-    </BaseModal>
-  );
-});
-
-PaywallModal.displayName = "PaywallModal";
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: "100%",
-  },
-  tabContent: {
-    flex: 1,
-  },
-});

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

@@ -1,120 +0,0 @@
-/**
- * Paywall Tab Bar Component
- * Segmented control for paywall tabs
- */
-
-import React from "react";
-import { View, TouchableOpacity, StyleSheet, Animated } from "react-native";
-import { AtomicText, 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 animatedValue = React.useRef(
-      new Animated.Value(activeTab === "credits" ? 0 : 1)
-    ).current;
-
-    React.useEffect(() => {
-      Animated.spring(animatedValue, {
-        toValue: activeTab === "credits" ? 0 : 1,
-        useNativeDriver: false,
-        tension: 68,
-        friction: 12,
-      }).start();
-    }, [activeTab, animatedValue]);
-
-    const renderTab = (tab: PaywallTabType, label: string) => {
-      const isActive = activeTab === tab;
-
-      return (
-        <TouchableOpacity
-          key={tab}
-          style={styles.tab}
-          onPress={() => onTabChange(tab)}
-          activeOpacity={0.7}
-        >
-          <AtomicText
-            type="labelLarge"
-            style={[
-              styles.tabText,
-              {
-                color: isActive ? tokens.colors.primary : tokens.colors.textSecondary,
-              },
-            ]}
-          >
-            {label}
-          </AtomicText>
-        </TouchableOpacity>
-      );
-    };
-
-    const indicatorTranslateX = animatedValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: ["0%", "50%"],
-    });
-
-    return (
-      <View
-        style={[
-          styles.container,
-          { backgroundColor: tokens.colors.surfaceSecondary },
-        ]}
-      >
-        <Animated.View
-          style={[
-            styles.indicator,
-            {
-              backgroundColor: tokens.colors.surface,
-              left: indicatorTranslateX,
-            },
-          ]}
-        />
-        {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,
-    position: "relative",
-    height: 44,
-  },
-  indicator: {
-    position: "absolute",
-    top: 4,
-    bottom: 4,
-    width: "48%",
-    borderRadius: 8,
-  },
-  tab: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1,
-  },
-  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,
-    },
-});