@umituz/react-native-subscription 1.4.0 → 1.5.0

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

@@ -0,0 +1,82 @@
+/**
+ * Paywall Header Component
+ * Single Responsibility: Display paywall header with close button
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+interface PaywallHeaderProps {
+  title: string;
+  subtitle?: string;
+  onClose: () => void;
+}
+
+export const PaywallHeader: React.FC<PaywallHeaderProps> = React.memo(
+  ({ title, subtitle, onClose }) => {
+    const tokens = useAppDesignTokens();
+
+    return (
+      <View style={styles.container}>
+        <View style={styles.titleContainer}>
+          <AtomicText
+            type="headlineLarge"
+            style={[styles.title, { color: tokens.colors.textPrimary }]}
+          >
+            {title}
+          </AtomicText>
+          {subtitle && (
+            <AtomicText
+              type="bodyMedium"
+              style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
+            >
+              {subtitle}
+            </AtomicText>
+          )}
+        </View>
+        <TouchableOpacity
+          onPress={onClose}
+          style={[
+            styles.closeButton,
+            { backgroundColor: tokens.colors.surfaceSecondary },
+          ]}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <AtomicIcon name="X" size="md" color="secondary" />
+        </TouchableOpacity>
+      </View>
+    );
+  },
+);
+
+PaywallHeader.displayName = "PaywallHeader";
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    paddingHorizontal: 24,
+    paddingTop: 8,
+    paddingBottom: 16,
+  },
+  titleContainer: {
+    flex: 1,
+    marginRight: 16,
+  },
+  title: {
+    fontWeight: "700",
+  },
+  subtitle: {
+    marginTop: 4,
+  },
+  closeButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

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

@@ -0,0 +1,54 @@
+/**
+ * Paywall Legal Footer Component
+ * Display legal links and terms for App Store compliance
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { LegalLinks } from "@umituz/react-native-legal";
+
+interface PaywallLegalFooterProps {
+  termsText?: string;
+}
+
+const DEFAULT_TERMS =
+  "Payment will be charged to your account. Subscription automatically renews unless cancelled.";
+
+export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
+  ({ termsText = DEFAULT_TERMS }) => {
+    const tokens = useAppDesignTokens();
+
+    return (
+      <View style={styles.container}>
+        <AtomicText
+          type="labelSmall"
+          style={[styles.termsText, { color: tokens.colors.textTertiary }]}
+        >
+          {termsText}
+        </AtomicText>
+        <LegalLinks style={styles.legalLinks} />
+      </View>
+    );
+  }
+);
+
+PaywallLegalFooter.displayName = "PaywallLegalFooter";
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    paddingHorizontal: 24,
+    paddingBottom: 16,
+  },
+  termsText: {
+    textAlign: "center",
+    fontSize: 11,
+    lineHeight: 16,
+    marginBottom: 8,
+  },
+  legalLinks: {
+    marginTop: 4,
+  },
+});

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

@@ -0,0 +1,161 @@
+/**
+ * Paywall Modal Component
+ * Single Responsibility: Display paywall with Credits and Subscription tabs
+ */
+
+import React, { useEffect } from "react";
+import { View, Modal, StyleSheet, TouchableOpacity } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { PurchasesPackage } from "react-native-purchases";
+import { usePaywall } from "../hooks/usePaywall";
+import { PaywallHeader } from "./PaywallHeader";
+import { PaywallTabBar } from "./PaywallTabBar";
+import { CreditsTabContent } from "./CreditsTabContent";
+import { SubscriptionTabContent } from "./SubscriptionTabContent";
+import type { PaywallTabType } from "../../domain/entities/PaywallTab";
+import type { CreditsPackage } from "../../domain/entities/CreditsPackage";
+
+interface PaywallModalProps {
+  visible: boolean;
+  onClose: () => void;
+  initialTab?: PaywallTabType;
+  creditsPackages: CreditsPackage[];
+  subscriptionPackages: PurchasesPackage[];
+  currentCredits: number;
+  requiredCredits?: number;
+  onCreditsPurchase: (packageId: string) => Promise<void>;
+  onSubscriptionPurchase: (pkg: PurchasesPackage) => Promise<void>;
+  subscriptionFeatures?: Array<{ icon: string; text: string }>;
+  isLoading?: boolean;
+  title?: string;
+  subtitle?: string;
+}
+
+export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
+  ({
+    visible,
+    onClose,
+    initialTab = "credits",
+    creditsPackages,
+    subscriptionPackages,
+    currentCredits,
+    requiredCredits,
+    onCreditsPurchase,
+    onSubscriptionPurchase,
+    subscriptionFeatures = [],
+    isLoading = false,
+    title,
+    subtitle,
+  }) => {
+    const tokens = useAppDesignTokens();
+    const { t } = useLocalization();
+
+    const {
+      activeTab,
+      selectedCreditsPackageId,
+      selectedSubscriptionPkg,
+      handleTabChange,
+      handleCreditsPackageSelect,
+      handleSubscriptionPackageSelect,
+      handleCreditsPurchase,
+      handleSubscriptionPurchase,
+    } = usePaywall({
+      initialTab,
+      onCreditsPurchase,
+      onSubscriptionPurchase,
+    });
+
+    const displayTitle = title || t("paywall.title", { defaultValue: "Get Premium" });
+    const displaySubtitle = subtitle || t("paywall.subtitle", { defaultValue: "" });
+
+    useEffect(() => {
+      if (__DEV__) {
+        console.log("[PaywallModal] Visibility changed:", visible);
+      }
+    }, [visible]);
+
+    if (!visible) return null;
+
+    return (
+      <Modal
+        visible={visible}
+        transparent
+        animationType="slide"
+        onRequestClose={onClose}
+      >
+        <View style={styles.overlay}>
+          <TouchableOpacity
+            style={styles.backdrop}
+            activeOpacity={1}
+            onPress={onClose}
+          />
+          <View
+            style={[styles.content, { backgroundColor: tokens.colors.surface }]}
+          >
+            <SafeAreaView edges={["top"]} style={styles.safeArea}>
+              <PaywallHeader
+                title={displayTitle}
+                subtitle={displaySubtitle}
+                onClose={onClose}
+              />
+
+<PaywallTabBar
+            activeTab={activeTab}
+            onTabChange={handleTabChange}
+            creditsLabel={t("paywall.tabs.credits", { defaultValue: "Credits" })}
+            subscriptionLabel={t("paywall.tabs.subscription", { defaultValue: "Subscription" })}
+          />
+
+              {activeTab === "credits" ? (
+                <CreditsTabContent
+                  packages={creditsPackages}
+                  selectedPackageId={selectedCreditsPackageId}
+                  onSelectPackage={handleCreditsPackageSelect}
+                  onPurchase={handleCreditsPurchase}
+                  currentCredits={currentCredits}
+                  requiredCredits={requiredCredits}
+                  isLoading={isLoading}
+                  purchaseButtonText={t("paywall.purchase", { defaultValue: "Purchase" })}
+                />
+              ) : (
+                <SubscriptionTabContent
+                  packages={subscriptionPackages}
+                  selectedPackage={selectedSubscriptionPkg}
+                  onSelectPackage={handleSubscriptionPackageSelect}
+                  onPurchase={handleSubscriptionPurchase}
+                  features={subscriptionFeatures}
+                  isLoading={isLoading}
+                  purchaseButtonText={t("paywall.subscribe", { defaultValue: "Subscribe" })}
+                />
+              )}
+            </SafeAreaView>
+          </View>
+        </View>
+      </Modal>
+    );
+  },
+);
+
+PaywallModal.displayName = "PaywallModal";
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+  },
+  content: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    maxHeight: "90%",
+    flex: 1,
+  },
+  safeArea: {
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,96 @@
+/**
+ * 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-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import type { PaywallTabType } from "../../domain/entities/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/SubscriptionModal.tsx

@@ -0,0 +1,206 @@
+/**
+ * Subscription Modal Component
+ * Modal for displaying subscription packages
+ */
+
+import React, { useState, useCallback } from "react";
+import {
+  View,
+  Modal,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  ActivityIndicator,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import type { PurchasesPackage } from "react-native-purchases";
+import { AtomicText, AtomicButton } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { SubscriptionPlanCard } from "./SubscriptionPlanCard";
+import { PaywallFeaturesList } from "./PaywallFeaturesList";
+import { PaywallLegalFooter } from "./PaywallLegalFooter";
+
+export interface SubscriptionModalProps {
+  visible: boolean;
+  onClose: () => void;
+  packages: PurchasesPackage[];
+  onPurchase: (pkg: PurchasesPackage) => Promise<boolean>;
+  onRestore: () => Promise<boolean>;
+  title?: string;
+  subtitle?: string;
+  features?: Array<{ icon: string; text: string }>;
+  isLoading?: boolean;
+  purchaseButtonText?: string;
+  restoreButtonText?: string;
+  loadingText?: string;
+  emptyText?: string;
+  processingText?: string;
+}
+
+export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo(
+  ({
+    visible,
+    onClose,
+    packages,
+    onPurchase,
+    onRestore,
+    title = "Go Premium",
+    subtitle,
+    features = [],
+    isLoading = false,
+    purchaseButtonText = "Subscribe",
+    restoreButtonText = "Restore Purchases",
+    loadingText = "Loading packages...",
+    emptyText = "No packages available",
+    processingText = "Processing...",
+  }) => {
+    const tokens = useAppDesignTokens();
+    const [selectedPkg, setSelectedPkg] = useState<PurchasesPackage | null>(null);
+    const [isProcessing, setIsProcessing] = useState(false);
+
+    const handlePurchase = useCallback(async () => {
+      if (!selectedPkg || isProcessing) return;
+      setIsProcessing(true);
+      try {
+        const success = await onPurchase(selectedPkg);
+        if (success) onClose();
+      } finally {
+        setIsProcessing(false);
+      }
+    }, [selectedPkg, isProcessing, onPurchase, onClose]);
+
+    const handleRestore = useCallback(async () => {
+      if (isProcessing) return;
+      setIsProcessing(true);
+      try {
+        const success = await onRestore();
+        if (success) onClose();
+      } finally {
+        setIsProcessing(false);
+      }
+    }, [isProcessing, onRestore, onClose]);
+
+    if (!visible) return null;
+
+    const hasPackages = packages.length > 0;
+    const showLoading = isLoading && !hasPackages;
+
+    return (
+      <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+        <View style={styles.overlay}>
+          <TouchableOpacity style={styles.backdrop} activeOpacity={1} onPress={onClose} />
+          <View style={[styles.content, { backgroundColor: tokens.colors.surface }]}>
+            <SafeAreaView edges={["bottom"]} style={styles.safeArea}>
+              <View style={styles.header}>
+                <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+                  <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>
+                ) : null}
+              </View>
+
+              <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent}>
+                {showLoading ? (
+                  <View style={styles.centerContent}>
+                    <ActivityIndicator size="large" color={tokens.colors.primary} />
+                    <AtomicText
+                      type="bodyMedium"
+                      style={[styles.loadingText, { color: tokens.colors.textSecondary }]}
+                    >
+                      {loadingText}
+                    </AtomicText>
+                  </View>
+                ) : !hasPackages ? (
+                  <View style={styles.centerContent}>
+                    <AtomicText
+                      type="bodyMedium"
+                      style={[styles.emptyText, { color: tokens.colors.textSecondary }]}
+                    >
+                      {emptyText}
+                    </AtomicText>
+                  </View>
+                ) : (
+                  <View style={styles.packagesContainer}>
+                    {packages.map((pkg, index) => (
+                      <SubscriptionPlanCard
+                        key={pkg.product.identifier}
+                        package={pkg}
+                        isSelected={selectedPkg?.product.identifier === pkg.product.identifier}
+                        onSelect={() => setSelectedPkg(pkg)}
+                        isBestValue={index === 0}
+                      />
+                    ))}
+                  </View>
+                )}
+
+                {features.length > 0 && (
+                  <View style={[styles.featuresSection, { backgroundColor: tokens.colors.surfaceSecondary }]}>
+                    <PaywallFeaturesList features={features} gap={12} />
+                  </View>
+                )}
+              </ScrollView>
+
+              <View style={styles.footer}>
+                {hasPackages && (
+                  <AtomicButton
+                    title={isProcessing ? processingText : purchaseButtonText}
+                    onPress={handlePurchase}
+                    disabled={!selectedPkg || isProcessing || isLoading}
+                  />
+                )}
+                <TouchableOpacity
+                  style={styles.restoreButton}
+                  onPress={handleRestore}
+                  disabled={isProcessing || isLoading}
+                >
+                  <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
+                    {restoreButtonText}
+                  </AtomicText>
+                </TouchableOpacity>
+              </View>
+
+              <PaywallLegalFooter />
+            </SafeAreaView>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+);
+
+SubscriptionModal.displayName = "SubscriptionModal";
+
+const styles = StyleSheet.create({
+  overlay: { flex: 1, justifyContent: "flex-end" },
+  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: "rgba(0, 0, 0, 0.5)" },
+  content: { borderTopLeftRadius: 24, borderTopRightRadius: 24, maxHeight: "90%" },
+  safeArea: { paddingTop: 16 },
+  header: { alignItems: "center", paddingHorizontal: 24, paddingBottom: 20 },
+  closeButton: { position: "absolute", top: 0, right: 16, padding: 8, zIndex: 1 },
+  closeIcon: { fontSize: 28, fontWeight: "300" },
+  title: { marginBottom: 8, textAlign: "center" },
+  subtitle: { textAlign: "center" },
+  scrollView: { maxHeight: 400 },
+  scrollContent: { paddingHorizontal: 24, paddingBottom: 16 },
+  centerContent: { alignItems: "center", paddingVertical: 40 },
+  loadingText: { marginTop: 16 },
+  emptyText: { textAlign: "center" },
+  packagesContainer: { gap: 12, marginBottom: 20 },
+  featuresSection: { borderRadius: 16, padding: 16 },
+  footer: { paddingHorizontal: 24, paddingVertical: 16, gap: 12 },
+  restoreButton: { alignItems: "center", paddingVertical: 8 },
+});