@umituz/react-native-subscription 2.12.1 → 2.12.3

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

@@ -1,123 +0,0 @@
-/**
- * Credits Tab Content Component
- * Single Responsibility: Display credits packages list
- */
-
-import React from "react";
-import { View, StyleSheet, ScrollView } from "react-native";
-import { AtomicText, AtomicButton, Grid, useResponsiveDesignTokens } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
-import { CreditsPackageCard } from "./CreditsPackageCard";
-import { PaywallLegalFooter } from "./PaywallLegalFooter";
-import type { CreditsPackage } from "../../../domain/entities/paywall/CreditsPackage";
-
-interface CreditsTabContentProps {
-  packages: CreditsPackage[];
-  selectedPackageId: string | null;
-  onSelectPackage: (packageId: string) => void;
-  onPurchase: () => void;
-  currentCredits: number;
-  requiredCredits?: number;
-  isLoading?: boolean;
-  purchaseButtonText?: string;
-  creditsInfoText?: string;
-  processingText?: string;
-}
-
-export const CreditsTabContent: React.FC<CreditsTabContentProps> = React.memo(
-  ({
-    packages,
-    selectedPackageId,
-    onSelectPackage,
-    onPurchase,
-    currentCredits,
-    requiredCredits,
-    isLoading = false,
-    purchaseButtonText,
-    creditsInfoText,
-    processingText,
-  }) => {
-    const tokens = useResponsiveDesignTokens();
-    const { t } = useLocalization();
-
-    const needsCredits = requiredCredits && requiredCredits > currentCredits;
-
-    const displayPurchaseButtonText = purchaseButtonText ||
-      t("paywall.purchase");
-    const displayProcessingText = processingText ||
-      t("paywall.processing");
-    const displayCreditsInfoText = creditsInfoText ||
-      t("paywall.creditsInfo");
-
-    return (
-      <View style={styles.container}>
-        {needsCredits && (
-          <View
-            style={[
-              styles.infoCard,
-              { backgroundColor: tokens.colors.surfaceSecondary },
-            ]}
-          >
-            <AtomicText
-              type="bodyMedium"
-              style={{ color: tokens.colors.textSecondary }}
-            >
-              {displayCreditsInfoText
-                .replace("{{required}}", String(requiredCredits))
-                .replace("{{current}}", String(currentCredits))}
-            </AtomicText>
-          </View>
-        )}
-
-        <ScrollView
-          style={styles.scrollView}
-          contentContainerStyle={[styles.scrollContent, { paddingHorizontal: tokens.spacing.lg, paddingBottom: tokens.spacing.md }]}
-          showsVerticalScrollIndicator={false}
-        >
-          <Grid mobileColumns={1} tabletColumns={2} gap={tokens.spacing.sm}>
-            {packages.map((pkg) => (
-              <CreditsPackageCard
-                key={pkg.id}
-                package={pkg}
-                isSelected={selectedPackageId === pkg.id}
-                onSelect={() => onSelectPackage(pkg.id)}
-              />
-            ))}
-          </Grid>
-        </ScrollView>
-
-        <View style={styles.footer}>
-          <AtomicButton
-            title={isLoading ? displayProcessingText : displayPurchaseButtonText}
-            onPress={onPurchase}
-            disabled={!selectedPackageId || isLoading}
-          />
-        </View>
-
-        <PaywallLegalFooter />
-      </View>
-    );
-  },
-);
-
-CreditsTabContent.displayName = "CreditsTabContent";
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  infoCard: {
-    marginHorizontal: 24,
-    marginBottom: 16,
-    padding: 12,
-    borderRadius: 12,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {},
-  footer: {
-    padding: 24,
-    paddingTop: 16,
-  },
-});

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

@@ -1,65 +0,0 @@
-/**
- * Paywall Feature Item Component
- * Single Responsibility: Display a single feature in the features list
- */
-
-import React, { useMemo } from "react";
-import { View, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon, useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
-
-interface PaywallFeatureItemProps {
-  icon: string;
-  text: string;
-}
-
-export const PaywallFeatureItem: React.FC<PaywallFeatureItemProps> = React.memo(
-  ({ icon, text }) => {
-    const tokens = useAppDesignTokens();
-    const { spacingMultiplier, getFontSize } = useResponsive();
-
-    const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
-    const fontSize = getFontSize(15);
-    const lineHeight = getFontSize(22);
-    const iconSize = getFontSize(20);
-
-    // Pass icon name directly to AtomicIcon (which uses Ionicons)
-    // Do NOT capitalize, as Ionicons names are lowercase/kebab-case.
-    const iconName = useMemo(() => {
-      if (!icon) return "help-circle-outline";
-      return icon;
-    }, [icon]);
-
-    return (
-      <View style={styles.featureItem}>
-        <AtomicIcon
-          name={iconName}
-          customSize={iconSize}
-          customColor={tokens.colors.primary}
-          style={styles.featureIcon}
-        />
-        <AtomicText
-          type="bodyMedium"
-          style={[styles.featureText, { color: tokens.colors.textPrimary, fontSize, lineHeight }]}
-        >
-          {text}
-        </AtomicText>
-      </View>
-    );
-  },
-);
-
-PaywallFeatureItem.displayName = "PaywallFeatureItem";
-
-const createStyles = (spacingMult: number) =>
-  StyleSheet.create({
-    featureItem: {
-      flexDirection: "row",
-      alignItems: "center",
-    },
-    featureIcon: {
-      marginRight: 12 * spacingMult,
-    },
-    featureText: {
-      flex: 1,
-    },
-  });

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

@@ -1,47 +0,0 @@
-/**
- * Paywall Features List Component
- * Displays premium features list
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import { useResponsive } from "@umituz/react-native-design-system";
-import { PaywallFeatureItem } from "./PaywallFeatureItem";
-
-interface PaywallFeaturesListProps {
-  /** Features list */
-  features: Array<{ icon: string; text: string }>;
-  /** Optional custom container style */
-  containerStyle?: object;
-  /** Optional gap between items (default: 12) */
-  gap?: number;
-}
-
-export const PaywallFeaturesList: React.FC<PaywallFeaturesListProps> = React.memo(
-  ({ features, containerStyle, gap = 12 }) => {
-    const { spacingMultiplier } = useResponsive();
-    const responsiveGap = gap * spacingMultiplier;
-
-    return (
-      <View style={[styles.container, containerStyle]}>
-        {features.map((feature, index) => (
-          <View
-            key={`${feature.icon}-${feature.text}-${index}`}
-            style={{ marginBottom: index < features.length - 1 ? responsiveGap : 0 }}
-          >
-            <PaywallFeatureItem icon={feature.icon} text={feature.text} />
-          </View>
-        ))}
-      </View>
-    );
-  },
-);
-
-PaywallFeaturesList.displayName = "PaywallFeaturesList";
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-  },
-});
-

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

@@ -1,82 +0,0 @@
-/**
- * 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";
-import { 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();
-
-    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: 48,
-    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

@@ -1,145 +0,0 @@
-/**
- * Paywall Legal Footer Component
- * Display legal links and terms for App Store compliance
- */
-
-import React from "react";
-import { View, TouchableOpacity, Linking } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import type { PaywallLegalFooterProps } from "./PaywallLegalFooterTypes";
-import { DEFAULT_TERMS } from "./PaywallLegalFooterTypes";
-import { styles } from "./PaywallLegalFooterStyles";
-
-export type { PaywallLegalFooterProps } from "./PaywallLegalFooterTypes";
-
-export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
-  ({
-    termsText = DEFAULT_TERMS,
-    privacyUrl,
-    termsUrl,
-    privacyText = "Privacy Policy",
-    termsOfServiceText = "Terms of Service",
-    showRestoreButton = false,
-    restoreButtonText = "Restore Purchases",
-    onRestore,
-    isProcessing = false,
-  }) => {
-    const tokens = useAppDesignTokens();
-
-    const handlePrivacyPress = () => {
-      if (privacyUrl) {
-        Linking.openURL(privacyUrl).catch(() => {});
-      }
-    };
-
-    const handleTermsPress = () => {
-      if (termsUrl) {
-        Linking.openURL(termsUrl).catch(() => {});
-      }
-    };
-
-    const hasLinks = privacyUrl || termsUrl || showRestoreButton;
-
-    return (
-      <View style={styles.container}>
-        <AtomicText
-          type="labelSmall"
-          style={[styles.termsText, { color: tokens.colors.textTertiary }]}
-        >
-          {termsText}
-        </AtomicText>
-
-        {hasLinks && (
-          <View style={styles.legalLinksWrapper}>
-            <View
-              style={[
-                styles.legalLinksContainer,
-                { borderColor: tokens.colors.border },
-              ]}
-            >
-              {showRestoreButton && (
-                <>
-                  <TouchableOpacity
-                    onPress={onRestore}
-                    activeOpacity={0.6}
-                    style={styles.linkItem}
-                    disabled={isProcessing}
-                  >
-                    <AtomicText
-                      type="labelSmall"
-                      style={[
-                        styles.linkText,
-                        {
-                          color: tokens.colors.textSecondary,
-                        },
-                      ]}
-                    >
-                      {restoreButtonText}
-                    </AtomicText>
-                  </TouchableOpacity>
-                  {(privacyUrl || termsUrl) && (
-                    <View
-                      style={[
-                        styles.dot,
-                        { backgroundColor: tokens.colors.border },
-                      ]}
-                    />
-                  )}
-                </>
-              )}
-
-              {privacyUrl && (
-                <>
-                  <TouchableOpacity
-                    onPress={handlePrivacyPress}
-                    activeOpacity={0.6}
-                    style={styles.linkItem}
-                  >
-                    <AtomicText
-                      type="labelSmall"
-                      style={[
-                        styles.linkText,
-                        { color: tokens.colors.textSecondary },
-                      ]}
-                    >
-                      {privacyText}
-                    </AtomicText>
-                  </TouchableOpacity>
-                  {termsUrl && (
-                    <View
-                      style={[
-                        styles.dot,
-                        { backgroundColor: tokens.colors.border },
-                      ]}
-                    />
-                  )}
-                </>
-              )}
-
-              {termsUrl && (
-                <TouchableOpacity
-                  onPress={handleTermsPress}
-                  activeOpacity={0.6}
-                  style={styles.linkItem}
-                >
-                  <AtomicText
-                    type="labelSmall"
-                    style={[
-                      styles.linkText,
-                      { color: tokens.colors.textSecondary },
-                    ]}
-                  >
-                    {termsOfServiceText}
-                  </AtomicText>
-                </TouchableOpacity>
-              )}
-            </View>
-          </View>
-        )}
-      </View>
-    );
-  }
-);
-
-PaywallLegalFooter.displayName = "PaywallLegalFooter";

package/src/presentation/components/paywall/PaywallLegalFooterStyles.ts

@@ -1,53 +0,0 @@
-/**
- * Paywall Legal Footer Styles
- * StyleSheet definitions for paywall legal footer
- */
-
-import { StyleSheet } from "react-native";
-
-export const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    paddingHorizontal: 24,
-    paddingBottom: 24,
-    paddingTop: 8,
-    width: "100%",
-  },
-  termsText: {
-    textAlign: "center",
-    fontSize: 10,
-    lineHeight: 14,
-    marginBottom: 16,
-    opacity: 0.7,
-  },
-  legalLinksWrapper: {
-    width: "100%",
-    alignItems: "center",
-  },
-  legalLinksContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    borderRadius: 20,
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.05)",
-  },
-  linkItem: {
-    paddingVertical: 2,
-  },
-  linkText: {
-    fontSize: 11,
-    fontWeight: "500",
-    letterSpacing: 0.3,
-  },
-  dot: {
-    width: 3,
-    height: 3,
-    borderRadius: 1.5,
-    marginHorizontal: 12,
-    opacity: 0.3,
-  },
-});

package/src/presentation/components/paywall/PaywallLegalFooterTypes.ts

@@ -1,19 +0,0 @@
-/**
- * Paywall Legal Footer Types
- * Type definitions for paywall legal footer
- */
-
-export interface PaywallLegalFooterProps {
-  termsText?: string;
-  privacyUrl?: string;
-  termsUrl?: string;
-  privacyText?: string;
-  termsOfServiceText?: string;
-  showRestoreButton?: boolean;
-  restoreButtonText?: string;
-  onRestore?: () => void;
-  isProcessing?: boolean;
-}
-
-export const DEFAULT_TERMS =
-  "Payment will be charged to your account. Subscription automatically renews unless cancelled.";

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

@@ -1,162 +0,0 @@
-/**
- * Paywall Modal Component
- * Displays paywall with Credits and Subscription tabs
- */
-
-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 { PaywallHeader } from "./PaywallHeader";
-import { PaywallTabBar } from "./PaywallTabBar";
-import { CreditsTabContent } from "./CreditsTabContent";
-import { SubscriptionTabContent } from "./SubscriptionTabContent";
-import type { PaywallTabType } from "../../../domain/entities/paywall/PaywallTab";
-import type { CreditsPackage } from "../../../domain/entities/paywall/CreditsPackage";
-
-export interface PaywallModalStyles {
-  headerTopPadding?: number;
-  contentHorizontalPadding?: number;
-  contentBottomPadding?: number;
-}
-
-export 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>;
-  onRestore?: () => Promise<void>;
-  subscriptionFeatures?: Array<{ icon: string; text: string }>;
-  isLoading?: boolean;
-  title: string;
-  subtitle: string;
-  creditsTabLabel: string;
-  subscriptionTabLabel: string;
-  purchaseButtonText: string;
-  subscribeButtonText: string;
-  restoreButtonText: string;
-  loadingText: string;
-  emptyText: string;
-  processingText: string;
-  privacyUrl?: string;
-  termsUrl?: string;
-  privacyText?: string;
-  termsOfServiceText?: string;
-}
-
-export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
-  const {
-    visible,
-    onClose,
-    initialTab = "credits",
-    creditsPackages,
-    subscriptionPackages,
-    currentCredits,
-    requiredCredits,
-    onCreditsPurchase,
-    onSubscriptionPurchase,
-    onRestore,
-    subscriptionFeatures = [],
-    isLoading = false,
-    title,
-    subtitle,
-    creditsTabLabel,
-    subscriptionTabLabel,
-    purchaseButtonText,
-    subscribeButtonText,
-    privacyUrl,
-    termsUrl,
-    privacyText,
-    termsOfServiceText,
-    restoreButtonText,
-    loadingText,
-    emptyText,
-    processingText,
-  } = props;
-
-  const {
-    activeTab,
-    selectedCreditsPackageId,
-    selectedSubscriptionPkg,
-    handleTabChange,
-    handleCreditsPackageSelect,
-    handleSubscriptionPackageSelect,
-    handleCreditsPurchase,
-    handleSubscriptionPurchase,
-  } = usePaywall({
-    initialTab,
-    onCreditsPurchase,
-    onSubscriptionPurchase,
-  });
-
-  return (
-    <BaseModal visible={visible} onClose={onClose}>
-      <View style={styles.container}>
-        <PaywallHeader
-          title={title}
-          subtitle={subtitle}
-          onClose={onClose}
-        />
-
-        <PaywallTabBar
-          activeTab={activeTab}
-          onTabChange={handleTabChange}
-          creditsLabel={creditsTabLabel}
-          subscriptionLabel={subscriptionTabLabel}
-        />
-
-        <View style={styles.tabContent}>
-          {activeTab === "credits" ? (
-            <CreditsTabContent
-              packages={creditsPackages}
-              selectedPackageId={selectedCreditsPackageId}
-              onSelectPackage={handleCreditsPackageSelect}
-              onPurchase={handleCreditsPurchase}
-              currentCredits={currentCredits}
-              requiredCredits={requiredCredits}
-              isLoading={isLoading}
-              purchaseButtonText={purchaseButtonText}
-            />
-          ) : (
-            <SubscriptionTabContent
-              packages={subscriptionPackages}
-              selectedPackage={selectedSubscriptionPkg}
-              onSelectPackage={handleSubscriptionPackageSelect}
-              onPurchase={handleSubscriptionPurchase}
-              features={subscriptionFeatures}
-              isLoading={isLoading}
-              purchaseButtonText={subscribeButtonText}
-              processingText={processingText}
-              restoreButtonText={restoreButtonText}
-              loadingText={loadingText}
-              emptyText={emptyText}
-              onRestore={onRestore}
-              privacyUrl={privacyUrl}
-              termsUrl={termsUrl}
-              privacyText={privacyText}
-              termsOfServiceText={termsOfServiceText}
-            />
-          )}
-        </View>
-      </View>
-    </BaseModal>
-  );
-});
-
-PaywallModal.displayName = "PaywallModal";
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: "100%",
-  },
-  tabContent: {
-    flex: 1,
-  },
-});