@umituz/react-native-subscription 2.12.2 → 2.12.4

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

@@ -1,161 +0,0 @@
-/**
- * Credits Package Card Component
- * Selectable card for credit packages
- */
-
-import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  AtomicBadge,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { CreditsPackage } from "../../../domain/entities/paywall/CreditsPackage";
-
-interface CreditsPackageCardProps {
-  package: CreditsPackage;
-  isSelected: boolean;
-  onSelect: () => void;
-}
-
-export const CreditsPackageCard: React.FC<CreditsPackageCardProps> = React.memo(
-  ({ package: 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}>
-              <View style={styles.creditsRow}>
-                <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>
-
-              {(pkg.bonus ?? 0) > 0 && (
-                <View style={styles.bonusContainer}>
-                  <AtomicIcon name="gift-outline" size="sm" color="success" />
-                  <AtomicText
-                    type="bodySmall"
-                    style={[styles.bonus, { color: tokens.colors.success }]}
-                  >
-                    +{pkg.bonus}
-                  </AtomicText>
-                </View>
-              )}
-
-              {pkg.description && (
-                <AtomicText
-                  type="bodySmall"
-                  style={{ color: tokens.colors.textSecondary }}
-                >
-                  {pkg.description}
-                </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>
-        </View>
-      </TouchableOpacity>
-    );
-  }
-);
-
-CreditsPackageCard.displayName = "CreditsPackageCard";
-
-const styles = StyleSheet.create({
-  touchable: {
-    marginBottom: 12,
-  },
-  container: {
-    borderRadius: 16,
-    padding: 16,
-    position: "relative",
-  },
-  badgeContainer: {
-    position: "absolute",
-    top: -10,
-    right: 16,
-  },
-  content: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  leftSection: {
-    flex: 1,
-    marginRight: 16,
-  },
-  creditsRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 4,
-  },
-  credits: {
-    fontWeight: "700",
-    marginLeft: 8,
-  },
-  bonusContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 4,
-  },
-  bonus: {
-    fontWeight: "600",
-    marginLeft: 4,
-  },
-  rightSection: {
-    alignItems: "flex-end",
-  },
-  price: {
-    fontWeight: "700",
-    marginBottom: 4,
-  },
-});

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,79 +0,0 @@
-/**
- * Paywall Feature Item Component
- * 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 iconSize = getFontSize(18);
-
-    const iconName = useMemo(() => {
-      if (!icon) return "checkmark-circle";
-      return icon;
-    }, [icon]);
-
-    return (
-      <View style={styles.featureItem}>
-        <View
-          style={[
-            styles.iconContainer,
-            { backgroundColor: tokens.colors.primaryLight },
-          ]}
-        >
-          <AtomicIcon
-            name={iconName}
-            customSize={iconSize}
-            customColor={tokens.colors.primary}
-          />
-        </View>
-        <AtomicText
-          type="bodyMedium"
-          style={[styles.featureText, { color: tokens.colors.textPrimary, fontSize }]}
-        >
-          {text}
-        </AtomicText>
-      </View>
-    );
-  }
-);
-
-PaywallFeatureItem.displayName = "PaywallFeatureItem";
-
-const createStyles = (spacingMult: number) =>
-  StyleSheet.create({
-    featureItem: {
-      flexDirection: "row",
-      alignItems: "center",
-    },
-    iconContainer: {
-      width: 32 * spacingMult,
-      height: 32 * spacingMult,
-      borderRadius: 16 * spacingMult,
-      justifyContent: "center",
-      alignItems: "center",
-      marginRight: 12 * spacingMult,
-    },
-    featureText: {
-      flex: 1,
-      fontWeight: "500",
-    },
-  });

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,
-  },
-});