@umituz/react-native-subscription 1.3.1 → 1.5.0

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

@@ -0,0 +1,186 @@
+/**
+ * Subscription Plan Card Component
+ * Single Responsibility: Display a subscription plan option
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import type { PurchasesPackage } from "react-native-purchases";
+import { AtomicText } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { formatPrice } from "@umituz/react-native-subscription";
+import { useLocalization } from "@umituz/react-native-localization";
+
+interface SubscriptionPlanCardProps {
+  package: PurchasesPackage;
+  isSelected: boolean;
+  onSelect: () => void;
+  isBestValue?: boolean;
+}
+
+const getPeriodLabel = (period: string | null | undefined): string => {
+  if (!period) return "";
+  if (period.includes("Y") || period.includes("year")) return "yearly";
+  if (period.includes("M") || period.includes("month")) return "monthly";
+  if (period.includes("W") || period.includes("week")) return "weekly";
+  if (period.includes("D") || period.includes("day")) return "daily";
+  return "";
+};
+
+const isYearlyPeriod = (period: string | null | undefined): boolean => {
+  return period?.includes("Y") || period?.includes("year") || false;
+};
+
+export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
+  React.memo(({ package: pkg, isSelected, onSelect, isBestValue = false }) => {
+    const tokens = useAppDesignTokens();
+    const { t } = useLocalization();
+
+    const period = pkg.product.subscriptionPeriod;
+    const isYearly = isYearlyPeriod(period);
+    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.${periodLabel}`, { defaultValue: periodLabel });
+
+    return (
+      <TouchableOpacity
+        onPress={onSelect}
+        activeOpacity={0.8}
+        style={[
+          styles.container,
+          {
+            backgroundColor: isSelected
+              ? tokens.colors.primaryLight
+              : tokens.colors.surface,
+            borderColor: isSelected
+              ? tokens.colors.primary
+              : tokens.colors.border,
+            borderWidth: isSelected ? 2 : 1,
+          },
+        ]}
+      >
+        {isBestValue && (
+          <View
+            style={[styles.badge, { backgroundColor: tokens.colors.primary }]}
+          >
+            <AtomicText
+              type="labelSmall"
+              style={{ color: tokens.colors.onPrimary, fontWeight: "600" }}
+            >
+              {t("paywall.bestValue", { defaultValue: "Best Value" })}
+            </AtomicText>
+          </View>
+        )}
+
+        <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="titleMedium"
+                style={[styles.title, { color: tokens.colors.textPrimary }]}
+              >
+                {title}
+              </AtomicText>
+              {isYearly && (
+                <AtomicText
+                  type="bodySmall"
+                  style={{ color: tokens.colors.textSecondary }}
+                >
+                  {price}
+                </AtomicText>
+              )}
+            </View>
+          </View>
+
+          <View style={styles.rightSection}>
+            <AtomicText
+              type="titleMedium"
+              style={[styles.price, { color: tokens.colors.textPrimary }]}
+            >
+              {isYearly && monthlyEquivalent
+                ? `${monthlyEquivalent}/mo`
+                : price}
+            </AtomicText>
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  });
+
+SubscriptionPlanCard.displayName = "SubscriptionPlanCard";
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 16,
+    padding: 18,
+    position: "relative",
+  },
+  badge: {
+    position: "absolute",
+    top: -10,
+    right: 20,
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 8,
+  },
+  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,
+  },
+  rightSection: {
+    alignItems: "flex-end",
+  },
+  price: {
+    fontWeight: "700",
+  },
+});

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

@@ -0,0 +1,142 @@
+/**
+ * Subscription Tab Content Component
+ * Single Responsibility: Display subscription plans list
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, ScrollView } from "react-native";
+import { AtomicButton } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { PurchasesPackage } from "react-native-purchases";
+import { SubscriptionPlanCard } from "./SubscriptionPlanCard";
+import { PaywallFeaturesList } from "./PaywallFeaturesList";
+import { PaywallLegalFooter } from "./PaywallLegalFooter";
+
+interface SubscriptionTabContentProps {
+  packages: PurchasesPackage[];
+  selectedPackage: PurchasesPackage | null;
+  onSelectPackage: (pkg: PurchasesPackage) => void;
+  onPurchase: () => void;
+  features?: Array<{ icon: string; text: string }>;
+  isLoading?: boolean;
+  purchaseButtonText?: string;
+  processingText?: 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,
+      features = [],
+      isLoading = false,
+      purchaseButtonText,
+      processingText,
+    }) => {
+      const tokens = useAppDesignTokens();
+      const { t } = useLocalization();
+
+      const displayPurchaseButtonText = purchaseButtonText ||
+        t("paywall.subscribe", { defaultValue: "Subscribe" });
+      const displayProcessingText = processingText ||
+        t("paywall.processing", { defaultValue: "Processing..." });
+
+      const sortedPackages = useMemo(() => sortPackages(packages), [packages]);
+
+      const firstYearlyIndex = useMemo(
+        () => sortedPackages.findIndex(isYearlyPackage),
+        [sortedPackages],
+      );
+
+      return (
+        <View style={styles.container}>
+          <ScrollView
+            style={styles.scrollView}
+            contentContainerStyle={styles.scrollContent}
+            showsVerticalScrollIndicator={false}
+          >
+            <View style={styles.plansContainer}>
+              {sortedPackages.map((pkg, index) => (
+                <SubscriptionPlanCard
+                  key={pkg.product.identifier}
+                  package={pkg}
+                  isSelected={
+                    selectedPackage?.product.identifier ===
+                    pkg.product.identifier
+                  }
+                  onSelect={() => onSelectPackage(pkg)}
+                  isBestValue={index === firstYearlyIndex}
+                />
+              ))}
+            </View>
+
+            {features.length > 0 && (
+              <View
+                style={[
+                  styles.featuresSection,
+                  { backgroundColor: tokens.colors.surfaceSecondary },
+                ]}
+              >
+                <PaywallFeaturesList features={features} gap={12} />
+              </View>
+            )}
+          </ScrollView>
+
+          <View style={styles.footer}>
+            <AtomicButton
+              title={isLoading ? displayProcessingText : displayPurchaseButtonText}
+              onPress={onPurchase}
+              disabled={!selectedPackage || isLoading}
+            />
+          </View>
+
+          <PaywallLegalFooter />
+        </View>
+      );
+    },
+  );
+
+SubscriptionTabContent.displayName = "SubscriptionTabContent";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingHorizontal: 24,
+    paddingBottom: 16,
+  },
+  plansContainer: {
+    gap: 12,
+    marginBottom: 20,
+  },
+  featuresSection: {
+    borderRadius: 16,
+    padding: 16,
+  },
+  footer: {
+    padding: 24,
+    paddingTop: 16,
+  },
+});

package/src/utils/priceUtils.ts

@@ -0,0 +1,20 @@
+/**
+ * Price Formatting Utilities
+ */
+
+/**
+ * Format price for display
+ * @param price - Price value
+ * @param currencyCode - Currency code (e.g., 'USD', 'EUR')
+ * @returns Formatted price string
+ */
+export function formatPrice(price: number, currencyCode: string): string {
+  try {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: currencyCode,
+    }).format(price);
+  } catch {
+    return `${currencyCode} ${price.toFixed(2)}`;
+  }
+}