@umituz/react-native-subscription 2.12.2 → 2.12.4

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

@@ -1,171 +0,0 @@
-import React, { useState, useCallback } from "react";
-import { View, StyleSheet, ActivityIndicator } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import type { PurchasesPackage } from "react-native-purchases";
-import { AccordionPlanCard } from "./accordion";
-import { isYearlyPackage, isMonthlyPackage, isWeeklyPackage } from "../../../utils/packagePeriodUtils";
-
-interface SubscriptionPackageListProps {
-    isLoading: boolean;
-    packages: PurchasesPackage[];
-    selectedPkg: PurchasesPackage | null;
-    loadingText: string;
-    emptyText: string;
-    onSelect: (pkg: PurchasesPackage) => void;
-    /** Optional: Manually specify which package should show "Best Value" badge by identifier */
-    bestValueIdentifier?: string;
-    /** Optional: Map of product identifier to credit amount (e.g., { "weekly": 6, "monthly": 25, "yearly": 300 }) */
-    creditAmounts?: Record<string, number>;
-    /** Optional: Text labels for accordion details */
-    billingPeriodLabel?: string;
-    totalPriceLabel?: string;
-    perMonthLabel?: string;
-}
-
-export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = React.memo(
-    ({
-        isLoading,
-        packages,
-        selectedPkg,
-        loadingText,
-        emptyText,
-        onSelect,
-        bestValueIdentifier,
-        creditAmounts,
-        billingPeriodLabel,
-        totalPriceLabel,
-        perMonthLabel,
-    }) => {
-        const tokens = useAppDesignTokens();
-        const hasPackages = packages.length > 0;
-        const showLoading = isLoading && !hasPackages;
-
-        const [expandedPackageId, setExpandedPackageId] = useState<string | null>(null);
-
-        const handleToggleExpand = useCallback((packageId: string) => {
-            setExpandedPackageId((prev) => (prev === packageId ? null : packageId));
-        }, []);
-
-        if (showLoading) {
-            return (
-                <View style={styles.centerContent}>
-                    <ActivityIndicator size="large" color={tokens.colors.primary} />
-                    <AtomicText
-                        type="bodyMedium"
-                        style={[styles.loadingText, { color: tokens.colors.textSecondary }]}
-                    >
-                        {loadingText}
-                    </AtomicText>
-                </View>
-            );
-        }
-
-        if (!hasPackages) {
-            return (
-                <View style={styles.centerContent}>
-                    <AtomicText
-                        type="bodyMedium"
-                        style={[styles.emptyText, { color: tokens.colors.textSecondary }]}
-                    >
-                        {emptyText}
-                    </AtomicText>
-                </View>
-            );
-        }
-
-        return (
-            <View style={styles.packagesContainer}>
-                {packages.map((pkg) => {
-                    // Determine if this package should show "Best Value" badge
-                    let isBestValue = false;
-
-                    if (bestValueIdentifier) {
-                        // Use manual override if provided
-                        isBestValue = pkg.product.identifier === bestValueIdentifier;
-                    } else {
-                        // Auto-detect: mark yearly packages as best value
-                        isBestValue = isYearlyPackage(pkg);
-                    }
-
-                    // Smart matching for credit amounts
-                    const findCreditAmount = () => {
-                        if (!creditAmounts) return undefined;
-
-                        const productId = pkg.product.identifier;
-                        const packageId = pkg.identifier;
-                        const productTitle = pkg.product.title || "";
-
-                        // 1. Exact match
-                        if (creditAmounts[productId] !== undefined) return creditAmounts[productId];
-                        if (creditAmounts[packageId] !== undefined) return creditAmounts[packageId];
-
-                        // 2. Case-insensitive and Title matching
-                        const lowerProductId = productId.toLowerCase();
-                        const lowerPackageId = packageId.toLowerCase();
-                        const lowerTitle = productTitle.toLowerCase();
-
-                        for (const [key, value] of Object.entries(creditAmounts)) {
-                            const lowerKey = key.toLowerCase();
-                            if (lowerProductId === lowerKey || lowerPackageId === lowerKey || lowerTitle.includes(lowerKey)) {
-                                return value;
-                            }
-                        }
-
-                        // 3. Period-based fallback
-                        const isYearly = isYearlyPackage(pkg);
-                        const isMonthly = isMonthlyPackage(pkg);
-                        const isWeekly = isWeeklyPackage(pkg);
-
-                        for (const [key, value] of Object.entries(creditAmounts)) {
-                            const lowerKey = key.toLowerCase();
-                            if (isYearly && (lowerKey.includes("year") || lowerKey.includes("annual") || lowerKey === "yearly")) return value;
-                            if (isMonthly && (lowerKey.includes("month") || lowerKey === "monthly")) return value;
-                            if (isWeekly && (lowerKey.includes("week") || lowerKey === "weekly")) return value;
-                        }
-
-                        return undefined;
-                    };
-
-                    const creditAmount = findCreditAmount();
-                    const packageId = pkg.product.identifier;
-
-                    return (
-                        <AccordionPlanCard
-                            key={packageId}
-                            package={pkg}
-                            isSelected={selectedPkg?.product.identifier === packageId}
-                            isExpanded={expandedPackageId === packageId}
-                            onSelect={() => onSelect(pkg)}
-                            onToggleExpand={() => handleToggleExpand(packageId)}
-                            isBestValue={isBestValue}
-                            creditAmount={creditAmount}
-                            billingPeriodLabel={billingPeriodLabel}
-                            totalPriceLabel={totalPriceLabel}
-                            perMonthLabel={perMonthLabel}
-                        />
-                    );
-                })}
-            </View>
-        );
-    }
-);
-
-SubscriptionPackageList.displayName = "SubscriptionPackageList";
-
-const styles = StyleSheet.create({
-    centerContent: {
-        alignItems: "center",
-        paddingVertical: 40
-    },
-    loadingText: {
-        marginTop: 16
-    },
-    emptyText: {
-        textAlign: "center"
-    },
-    packagesContainer: {
-        gap: 12,
-        marginBottom: 20
-    },
-});

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

@@ -1,213 +0,0 @@
-/**
- * Subscription Plan Card Component
- * Single Responsibility: Display a subscription plan option
- */
-
-import React, { useMemo } from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
-import { useAppDesignTokens, withAlpha, useResponsive } from "@umituz/react-native-design-system";
-import { formatPrice } from "../../../utils/priceUtils";
-import { useLocalization } from "@umituz/react-native-localization";
-import { BestValueBadge } from "./BestValueBadge";
-import { getPeriodLabel, isYearlyPackage } from "../../../utils/packagePeriodUtils";
-import { LinearGradient } from "expo-linear-gradient";
-import type { SubscriptionPlanCardProps } from "./SubscriptionPlanCardTypes";
-
-export type { SubscriptionPlanCardProps } from "./SubscriptionPlanCardTypes";
-
-/**
- * Create responsive styles for subscription plan card
- */
-const createStyles = (spacingMult: number, touchTarget: number) => {
-  const basePadding = 18;
-  const baseRadius = 16;
-  const baseCreditRadius = 12;
-
-  const radioSize = Math.max(touchTarget * 0.5, 24);
-  const radioInnerSize = radioSize * 0.5;
-
-  return StyleSheet.create({
-    container: {
-      borderRadius: baseRadius * spacingMult,
-      position: "relative",
-      overflow: "hidden",
-    },
-    gradientWrapper: {
-      flex: 1,
-      padding: basePadding * spacingMult,
-    },
-    content: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-    },
-    leftSection: {
-      flexDirection: "row",
-      alignItems: "center",
-      flex: 1,
-    },
-    radio: {
-      width: radioSize,
-      height: radioSize,
-      borderRadius: radioSize / 2,
-      borderWidth: 2,
-      alignItems: "center",
-      justifyContent: "center",
-      marginRight: 16 * spacingMult,
-    },
-    radioInner: {
-      width: radioInnerSize,
-      height: radioInnerSize,
-      borderRadius: radioInnerSize / 2,
-    },
-    textContainer: {
-      flex: 1,
-    },
-    title: {
-      fontWeight: "600",
-      marginBottom: 2 * spacingMult,
-    },
-    creditBadge: {
-      paddingHorizontal: 10 * spacingMult,
-      paddingVertical: 4 * spacingMult,
-      borderRadius: baseCreditRadius * spacingMult,
-      marginBottom: 4 * spacingMult,
-    },
-    rightSection: {
-      alignItems: "flex-end",
-    },
-    price: {
-      fontWeight: "700",
-    },
-  });
-};
-
-export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
-  React.memo(({ package: pkg, isSelected, onSelect, isBestValue = false, creditAmount }) => {
-    const tokens = useAppDesignTokens();
-    const { t } = useLocalization();
-    const { spacingMultiplier, getFontSize, minTouchTarget } = useResponsive();
-
-    const period = pkg.product.subscriptionPeriod;
-    const isYearly = isYearlyPackage(pkg);
-    const periodLabel = getPeriodLabel(period);
-    const price = formatPrice(pkg.product.price, pkg.product.currencyCode);
-    const monthlyEquivalent = isYearly
-      ? formatPrice(pkg.product.price / 12, pkg.product.currencyCode)
-      : null;
-
-    const title = pkg.product.title || t(`paywall.period.${periodLabel}`);
-
-    const CardComponent = isSelected ? LinearGradient : View;
-    const cardProps = isSelected
-      ? {
-        colors: [withAlpha(tokens.colors.primary, 0.2), tokens.colors.surface],
-        start: { x: 0, y: 0 },
-        end: { x: 1, y: 1 },
-      }
-      : {};
-
-    // Responsive styles
-    const styles = useMemo(() => createStyles(spacingMultiplier, minTouchTarget), [spacingMultiplier, minTouchTarget]);
-    const secondaryFontSize = getFontSize(11);
-    const creditFontSize = getFontSize(11);
-
-    return (
-      <TouchableOpacity
-        onPress={onSelect}
-        activeOpacity={0.8}
-        style={[
-          styles.container,
-          {
-            borderColor: isSelected
-              ? tokens.colors.primary
-              : tokens.colors.borderLight,
-            borderWidth: isSelected ? 2 : 1,
-            backgroundColor: isSelected ? undefined : tokens.colors.surface,
-          },
-        ]}
-      >
-        <CardComponent {...(cardProps as any)} style={styles.gradientWrapper}>
-          <BestValueBadge text={t("paywall.bestValue")} visible={isBestValue} />
-
-          <View style={styles.content}>
-            <View style={styles.leftSection}>
-              <View
-                style={[
-                  styles.radio,
-                  {
-                    borderColor: isSelected
-                      ? tokens.colors.primary
-                      : tokens.colors.border,
-                  },
-                ]}
-              >
-                {isSelected && (
-                  <View
-                    style={[
-                      styles.radioInner,
-                      { backgroundColor: tokens.colors.primary },
-                    ]}
-                  />
-                )}
-              </View>
-              <View style={styles.textContainer}>
-                <AtomicText
-                  type="titleSmall"
-                  style={[styles.title, { color: tokens.colors.textPrimary }]}
-                >
-                  {title}
-                </AtomicText>
-                {isYearly && monthlyEquivalent && (
-                  <AtomicText
-                    type="bodySmall"
-                    style={{ color: tokens.colors.textSecondary, fontSize: secondaryFontSize }}
-                  >
-                    {monthlyEquivalent}/mo
-                  </AtomicText>
-                )}
-              </View>
-            </View>
-
-            <View style={styles.rightSection}>
-              {creditAmount && (
-                <View
-                  style={[
-                    styles.creditBadge,
-                    {
-                      backgroundColor: withAlpha(tokens.colors.primary, 0.25), // Increased alpha
-                      borderColor: withAlpha(tokens.colors.primary, 0.4),
-                      borderWidth: 1,
-                      flexDirection: "row",
-                      alignItems: "center"
-                    },
-                  ]}
-                >
-                  <AtomicText
-                    type="labelSmall"
-                    style={{
-                      color: tokens.colors.primary,
-                      fontWeight: "800",
-                      fontSize: creditFontSize,
-                    }}
-                  >
-                    {creditAmount} {t("paywall.credits") || "Credits"}
-                  </AtomicText>
-                </View>
-              )}
-              <AtomicText
-                type="titleMedium"
-                style={[styles.price, { color: tokens.colors.textPrimary }]}
-              >
-                {price}
-              </AtomicText>
-            </View>
-          </View>
-        </CardComponent>
-      </TouchableOpacity>
-    );
-  });
-
-
-SubscriptionPlanCard.displayName = "SubscriptionPlanCard";

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

@@ -1,61 +0,0 @@
-/**
- * Subscription Plan Card Styles
- * StyleSheet definitions for subscription plan card
- */
-
-import { StyleSheet } from "react-native";
-
-export const styles = StyleSheet.create({
-  container: {
-    borderRadius: 16,
-    position: "relative",
-    overflow: "hidden",
-  },
-  gradientWrapper: {
-    flex: 1,
-    padding: 18,
-  },
-  content: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  leftSection: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-  },
-  radio: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    borderWidth: 2,
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: 16,
-  },
-  radioInner: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-  },
-  textContainer: {
-    flex: 1,
-  },
-  title: {
-    fontWeight: "600",
-    marginBottom: 2,
-  },
-  creditBadge: {
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 12,
-    marginBottom: 4,
-  },
-  rightSection: {
-    alignItems: "flex-end",
-  },
-  price: {
-    fontWeight: "700",
-  },
-});

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

@@ -1,15 +0,0 @@
-/**
- * Subscription Plan Card Types
- * Type definitions for subscription plan display
- */
-
-import type { PurchasesPackage } from "react-native-purchases";
-
-export interface SubscriptionPlanCardProps {
-  package: PurchasesPackage;
-  isSelected: boolean;
-  onSelect: () => void;
-  isBestValue?: boolean;
-  /** Optional: Number of credits/generations included with this package */
-  creditAmount?: number;
-}

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

@@ -1,139 +0,0 @@
-/**
- * Subscription Tab Content Component
- * Single Responsibility: Display subscription plans list
- */
-
-import React, { useMemo } from "react";
-import { View, StyleSheet, ScrollView } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import type { PurchasesPackage } from "react-native-purchases";
-import { PaywallFeaturesList } from "./PaywallFeaturesList";
-import { SubscriptionPackageList } from "./SubscriptionPackageList";
-import { SubscriptionFooter } from "./SubscriptionFooter";
-
-interface SubscriptionTabContentProps {
-  packages: PurchasesPackage[];
-  selectedPackage: PurchasesPackage | null;
-  onSelectPackage: (pkg: PurchasesPackage) => void;
-  onPurchase: () => void;
-  onRestore?: () => void;
-  features?: Array<{ icon: string; text: string }>;
-  isLoading?: boolean;
-  purchaseButtonText: string;
-  processingText: string;
-  restoreButtonText: string;
-  loadingText: string;
-  emptyText: string;
-  privacyUrl?: string;
-  termsUrl?: string;
-  privacyText?: string;
-  termsOfServiceText?: string;
-}
-
-const isYearlyPackage = (pkg: PurchasesPackage): boolean => {
-  const period = pkg.product.subscriptionPeriod;
-  return period?.includes("Y") || period?.includes("year") || false;
-};
-
-const sortPackages = (packages: PurchasesPackage[]): PurchasesPackage[] => {
-  return [...packages].sort((a, b) => {
-    const aIsYearly = isYearlyPackage(a);
-    const bIsYearly = isYearlyPackage(b);
-    if (aIsYearly && !bIsYearly) return -1;
-    if (!aIsYearly && bIsYearly) return 1;
-    return b.product.price - a.product.price;
-  });
-};
-
-export const SubscriptionTabContent: React.FC<SubscriptionTabContentProps> =
-  React.memo(
-    ({
-      packages,
-      selectedPackage,
-      onSelectPackage,
-      onPurchase,
-      onRestore,
-      features = [],
-      isLoading = false,
-      purchaseButtonText,
-      processingText,
-      restoreButtonText,
-      loadingText,
-      emptyText,
-      privacyUrl,
-      termsUrl,
-      privacyText,
-      termsOfServiceText,
-    }) => {
-      const tokens = useAppDesignTokens();
-
-      const sortedPackages = useMemo(() => sortPackages(packages), [packages]);
-
-      return (
-        <View style={styles.container}>
-          <ScrollView
-            style={styles.scrollView}
-            contentContainerStyle={styles.scrollContent}
-            showsVerticalScrollIndicator={false}
-          >
-            <SubscriptionPackageList
-              packages={sortedPackages}
-              isLoading={isLoading}
-              selectedPkg={selectedPackage}
-              onSelect={onSelectPackage}
-              loadingText={loadingText}
-              emptyText={emptyText}
-            />
-
-            {features.length > 0 && (
-              <View
-                style={[
-                  styles.featuresSection,
-                  { backgroundColor: tokens.colors.surfaceSecondary },
-                ]}
-              >
-                <PaywallFeaturesList features={features} gap={12} />
-              </View>
-            )}
-          </ScrollView>
-
-          <SubscriptionFooter
-            isProcessing={false}
-            isLoading={isLoading}
-            processingText={processingText}
-            purchaseButtonText={purchaseButtonText}
-            hasPackages={packages.length > 0}
-            selectedPkg={selectedPackage}
-            restoreButtonText={restoreButtonText}
-            showRestoreButton={!!onRestore}
-            onPurchase={onPurchase}
-            onRestore={onRestore || (() => { })}
-            privacyUrl={privacyUrl}
-            termsUrl={termsUrl}
-            privacyText={privacyText}
-            termsOfServiceText={termsOfServiceText}
-          />
-        </View>
-      );
-    }
-  );
-
-SubscriptionTabContent.displayName = "SubscriptionTabContent";
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingHorizontal: 24,
-    paddingBottom: 16,
-  },
-  featuresSection: {
-    borderRadius: 16,
-    padding: 16,
-    marginTop: 20,
-  },
-});

package/src/presentation/components/paywall/accordion/AccordionPlanCard.tsx

@@ -1,98 +0,0 @@
-/**
- * Accordion Plan Card
- * Expandable subscription plan card
- */
-
-import React, { useCallback, useMemo } from "react";
-import { View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
-import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
-import { formatPrice } from "../../../../utils/priceUtils";
-import { getPeriodLabel, isYearlyPackage } from "../../../../utils/packagePeriodUtils";
-import { useLocalization } from "@umituz/react-native-localization";
-import { PlanCardHeader } from "./PlanCardHeader";
-import { PlanCardDetails } from "./PlanCardDetails";
-import type { AccordionPlanCardProps } from "./AccordionPlanCardTypes";
-
-export const AccordionPlanCard: React.FC<AccordionPlanCardProps> = React.memo(
-  ({
-    package: pkg,
-    isSelected,
-    isExpanded,
-    onSelect,
-    onToggleExpand,
-    isBestValue = false,
-    creditAmount,
-    billingPeriodLabel,
-    totalPriceLabel,
-    perMonthLabel,
-  }) => {
-    const tokens = useAppDesignTokens();
-    const { t } = useLocalization();
-    const { spacingMultiplier } = useResponsive();
-
-    const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
-
-    const period = pkg.product.subscriptionPeriod;
-    const isYearly = isYearlyPackage(pkg);
-    const periodLabel = getPeriodLabel(period);
-    const price = formatPrice(pkg.product.price, pkg.product.currencyCode);
-    const monthlyEquivalent = isYearly
-      ? formatPrice(pkg.product.price / 12, pkg.product.currencyCode)
-      : null;
-
-    const title = pkg.product.title || t(`paywall.period.${periodLabel}`);
-
-    const handleHeaderPress = useCallback(() => {
-      onSelect();
-      if (!isExpanded) {
-        onToggleExpand();
-      }
-    }, [onSelect, onToggleExpand, isExpanded]);
-
-    const containerStyle: StyleProp<ViewStyle> = [
-      styles.container,
-      {
-        backgroundColor: tokens.colors.surface,
-        borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
-        borderWidth: isSelected ? 2 : 1,
-      },
-    ];
-
-    return (
-      <View style={containerStyle}>
-        <PlanCardHeader
-          title={title}
-          price={price}
-          creditAmount={creditAmount}
-          isSelected={isSelected}
-          isExpanded={isExpanded}
-          isBestValue={isBestValue}
-          onToggle={handleHeaderPress}
-        />
-
-        {isExpanded && (
-          <PlanCardDetails
-            fullPrice={price}
-            monthlyEquivalent={monthlyEquivalent}
-            periodLabel={periodLabel}
-            isYearly={isYearly}
-            billingPeriodLabel={billingPeriodLabel}
-            totalPriceLabel={totalPriceLabel}
-            perMonthLabel={perMonthLabel}
-          />
-        )}
-      </View>
-    );
-  }
-);
-
-AccordionPlanCard.displayName = "AccordionPlanCard";
-
-const createStyles = (spacingMult: number) =>
-  StyleSheet.create({
-    container: {
-      borderRadius: 16 * spacingMult,
-      marginBottom: 12 * spacingMult,
-      overflow: "hidden",
-    },
-  });