@umituz/react-native-subscription 2.12.1 → 2.12.3

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,100 +0,0 @@
-/**
- * Accordion Plan Card
- * Expandable subscription plan card with credit display
- */
-
-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 displayPrice = price;
-
-    const handleHeaderPress = useCallback(() => {
-      onSelect();
-      if (!isExpanded) {
-        onToggleExpand();
-      }
-    }, [onSelect, onToggleExpand, isExpanded]);
-
-    const containerStyle: StyleProp<ViewStyle> = [
-      styles.container,
-      {
-        borderColor: isSelected
-          ? tokens.colors.primary
-          : tokens.colors.borderLight,
-        borderWidth: isSelected ? 2 : 1,
-        backgroundColor: tokens.colors.surface,
-      },
-    ];
-
-    return (
-      <View style={containerStyle}>
-        <PlanCardHeader
-          title={title}
-          price={displayPrice}
-          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,
-    },
-  });

package/src/presentation/components/paywall/accordion/AccordionPlanCardTypes.ts

@@ -1,39 +0,0 @@
-/**
- * Accordion Plan Card Types
- * Type definitions for accordion-style subscription cards
- */
-
-import type { PurchasesPackage } from "react-native-purchases";
-
-export interface AccordionPlanCardProps {
-  package: PurchasesPackage;
-  isSelected: boolean;
-  isExpanded: boolean;
-  onSelect: () => void;
-  onToggleExpand: () => void;
-  isBestValue?: boolean;
-  creditAmount?: number;
-  billingPeriodLabel?: string;
-  totalPriceLabel?: string;
-  perMonthLabel?: string;
-}
-
-export interface PlanCardHeaderProps {
-  title: string;
-  price: string;
-  creditAmount?: number;
-  isSelected: boolean;
-  isExpanded: boolean;
-  isBestValue?: boolean;
-  onToggle: () => void;
-}
-
-export interface PlanCardDetailsProps {
-  fullPrice: string;
-  monthlyEquivalent: string | null;
-  periodLabel: string;
-  isYearly: boolean;
-  billingPeriodLabel?: string;
-  totalPriceLabel?: string;
-  perMonthLabel?: string;
-}

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

@@ -1,107 +0,0 @@
-/**
- * Plan Card Details
- * Expanded state of accordion subscription card
- */
-
-import React, { useMemo } from "react";
-import { View, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-  useResponsive,
-} from "@umituz/react-native-design-system";
-import type { PlanCardDetailsProps } from "./AccordionPlanCardTypes";
-
-export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
-  fullPrice,
-  monthlyEquivalent,
-  periodLabel,
-  isYearly,
-  billingPeriodLabel = "Billing Period",
-  totalPriceLabel = "Total Price",
-  perMonthLabel = "Per Month",
-}) => {
-  const tokens = useAppDesignTokens();
-  const { spacingMultiplier } = useResponsive();
-
-  const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          backgroundColor: tokens.colors.surfaceSecondary,
-          borderTopColor: tokens.colors.border,
-        },
-      ]}
-    >
-      <View style={styles.row}>
-        <AtomicText
-          type="bodyMedium"
-          style={{ color: tokens.colors.textSecondary }}
-        >
-          {billingPeriodLabel}
-        </AtomicText>
-        <AtomicText
-          type="bodyMedium"
-          style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
-        >
-          {periodLabel}
-        </AtomicText>
-      </View>
-
-      {isYearly && (
-        <View style={styles.row}>
-          <AtomicText
-            type="bodyMedium"
-            style={{ color: tokens.colors.textSecondary }}
-          >
-            {totalPriceLabel}
-          </AtomicText>
-          <AtomicText
-            type="bodyMedium"
-            style={{
-              color: tokens.colors.primary,
-              fontWeight: "700",
-            }}
-          >
-            {fullPrice}
-          </AtomicText>
-        </View>
-      )}
-
-      {monthlyEquivalent && (
-        <View style={styles.row}>
-          <AtomicText
-            type="bodyMedium"
-            style={{ color: tokens.colors.textSecondary }}
-          >
-            {perMonthLabel}
-          </AtomicText>
-          <AtomicText
-            type="bodyMedium"
-            style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
-          >
-            {monthlyEquivalent}
-          </AtomicText>
-        </View>
-      )}
-    </View>
-  );
-};
-
-const createStyles = (spacingMult: number) =>
-  StyleSheet.create({
-    container: {
-      paddingHorizontal: 16 * spacingMult,
-      paddingVertical: 12 * spacingMult,
-      borderTopWidth: 1,
-      gap: 10 * spacingMult,
-    },
-    row: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-    },
-  });