@umituz/react-native-subscription 2.11.7 → 2.11.9

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

@@ -1,9 +1,9 @@
-import React from "react";
+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 { SubscriptionPlanCard } from "./SubscriptionPlanCard";
+import { AccordionPlanCard } from "./accordion";
 import { isYearlyPackage, isMonthlyPackage, isWeeklyPackage } from "../../../utils/packagePeriodUtils";
 
 interface SubscriptionPackageListProps {
@@ -34,6 +34,12 @@ export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = R
         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}>
@@ -115,13 +121,16 @@ export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = R
                     };
 
                     const creditAmount = findCreditAmount();
+                    const packageId = pkg.product.identifier;
 
                     return (
-                        <SubscriptionPlanCard
-                            key={pkg.product.identifier}
+                        <AccordionPlanCard
+                            key={packageId}
                             package={pkg}
-                            isSelected={selectedPkg?.product.identifier === pkg.product.identifier}
+                            isSelected={selectedPkg?.product.identifier === packageId}
+                            isExpanded={expandedPackageId === packageId}
                             onSelect={() => onSelect(pkg)}
+                            onToggleExpand={() => handleToggleExpand(packageId)}
                             isBestValue={isBestValue}
                             creditAmount={creditAmount}
                         />

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

@@ -4,25 +4,18 @@
  */
 
 import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import type { PurchasesPackage } from "react-native-purchases";
+import { View, TouchableOpacity } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system";
 import { useAppDesignTokens, withAlpha } 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";
+import { styles } from "./SubscriptionPlanCardStyles";
 
-interface SubscriptionPlanCardProps {
-  package: PurchasesPackage;
-  isSelected: boolean;
-  onSelect: () => void;
-  isBestValue?: boolean;
-  /** Optional: Number of credits/generations included with this package */
-  creditAmount?: number;
-}
+export type { SubscriptionPlanCardProps } from "./SubscriptionPlanCardTypes";
 
 export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
   React.memo(({ package: pkg, isSelected, onSelect, isBestValue = false, creditAmount }) => {
@@ -147,59 +140,4 @@ export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
   });
 
 
-SubscriptionPlanCard.displayName = "SubscriptionPlanCard";
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 16,
-    position: "relative",
-    overflow: "hidden", // Important for gradient borders/corners
-  },
-  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",
-  },
-});
+SubscriptionPlanCard.displayName = "SubscriptionPlanCard";

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

@@ -0,0 +1,61 @@
+/**
+ * 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

@@ -0,0 +1,15 @@
+/**
+ * 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/accordion/AccordionPlanCard.tsx

@@ -0,0 +1,93 @@
+/**
+ * Accordion Plan Card
+ * Expandable subscription plan card with credit display
+ */
+
+import React, { useCallback } from "react";
+import { View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
+import { useAppDesignTokens } 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,
+  }) => {
+    const tokens = useAppDesignTokens();
+    const { t } = useLocalization();
+
+    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 = isYearly && monthlyEquivalent
+      ? `${monthlyEquivalent}/mo`
+      : 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}
+          />
+        )}
+      </View>
+    );
+  }
+);
+
+AccordionPlanCard.displayName = "AccordionPlanCard";
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 16,
+    overflow: "hidden",
+    marginBottom: 12,
+  },
+});

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

@@ -0,0 +1,33 @@
+/**
+ * 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;
+}
+
+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;
+}

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

@@ -0,0 +1,101 @@
+/**
+ * Plan Card Details
+ * Expanded state of accordion subscription card
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { PlanCardDetailsProps } from "./AccordionPlanCardTypes";
+
+export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
+  fullPrice,
+  monthlyEquivalent,
+  periodLabel,
+  isYearly,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  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 }}
+        >
+          {t("paywall.billingPeriod") || "Billing Period"}
+        </AtomicText>
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
+        >
+          {t(`paywall.period.${periodLabel}`)}
+        </AtomicText>
+      </View>
+
+      {isYearly && (
+        <View style={styles.row}>
+          <AtomicText
+            type="bodyMedium"
+            style={{ color: tokens.colors.textSecondary }}
+          >
+            {t("paywall.totalPrice") || "Total Price"}
+          </AtomicText>
+          <AtomicText
+            type="bodyMedium"
+            style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
+          >
+            {fullPrice}
+          </AtomicText>
+        </View>
+      )}
+
+      {monthlyEquivalent && (
+        <View style={styles.row}>
+          <AtomicText
+            type="bodyMedium"
+            style={{ color: tokens.colors.textSecondary }}
+          >
+            {t("paywall.perMonth") || "Per Month"}
+          </AtomicText>
+          <AtomicText
+            type="bodyMedium"
+            style={{
+              color: tokens.colors.primary,
+              fontWeight: "700",
+            }}
+          >
+            {monthlyEquivalent}
+          </AtomicText>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderTopWidth: 1,
+    gap: 10,
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+});

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

@@ -0,0 +1,159 @@
+/**
+ * Plan Card Header
+ * Collapsed state of accordion subscription card
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+  withAlpha,
+} from "@umituz/react-native-design-system";
+import { BestValueBadge } from "../BestValueBadge";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { PlanCardHeaderProps } from "./AccordionPlanCardTypes";
+
+export const PlanCardHeader: React.FC<PlanCardHeaderProps> = ({
+  title,
+  price,
+  creditAmount,
+  isSelected,
+  isExpanded,
+  isBestValue,
+  onToggle,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  return (
+    <TouchableOpacity
+      onPress={onToggle}
+      activeOpacity={0.7}
+      style={styles.container}
+    >
+      <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={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
+            >
+              {title}
+            </AtomicText>
+            {creditAmount && (
+              <View
+                style={[
+                  styles.creditBadge,
+                  {
+                    backgroundColor: withAlpha(tokens.colors.primary, 0.15),
+                    borderColor: withAlpha(tokens.colors.primary, 0.3),
+                  },
+                ]}
+              >
+                <AtomicText
+                  type="labelSmall"
+                  style={{
+                    color: tokens.colors.primary,
+                    fontWeight: "700",
+                    fontSize: 11,
+                  }}
+                >
+                  {creditAmount} {t("paywall.credits") || "Credits"}
+                </AtomicText>
+              </View>
+            )}
+          </View>
+        </View>
+
+        <View style={styles.rightSection}>
+          <AtomicText
+            type="titleMedium"
+            style={{
+              color: tokens.colors.textPrimary,
+              fontWeight: "700",
+              marginRight: 8,
+            }}
+          >
+            {price}
+          </AtomicText>
+          <AtomicIcon
+            name={isExpanded ? "ChevronUp" : "ChevronDown"}
+            size={20}
+            color={tokens.colors.textSecondary}
+          />
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+  leftSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  radio: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 12,
+  },
+  radioInner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+  textContainer: {
+    flex: 1,
+    gap: 6,
+  },
+  creditBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 12,
+    borderWidth: 1,
+    alignSelf: "flex-start",
+  },
+  rightSection: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+});

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

@@ -0,0 +1,12 @@
+/**
+ * Accordion Components Barrel Export
+ */
+
+export { AccordionPlanCard } from "./AccordionPlanCard";
+export { PlanCardHeader } from "./PlanCardHeader";
+export { PlanCardDetails } from "./PlanCardDetails";
+export type {
+  AccordionPlanCardProps,
+  PlanCardHeaderProps,
+  PlanCardDetailsProps,
+} from "./AccordionPlanCardTypes";

package/src/revenuecat/presentation/hooks/subscriptionQueryKeys.ts

@@ -0,0 +1,16 @@
+/**
+ * Subscription Query Keys
+ * TanStack Query keys and constants for subscription state
+ */
+
+/**
+ * Query keys for TanStack Query
+ */
+export const SUBSCRIPTION_QUERY_KEYS = {
+  packages: ["subscription", "packages"] as const,
+  initialized: (userId: string) =>
+    ["subscription", "initialized", userId] as const,
+} as const;
+
+export const STALE_TIME = 5 * 60 * 1000; // 5 minutes
+export const GC_TIME = 30 * 60 * 1000; // 30 minutes

package/src/revenuecat/presentation/hooks/useInitializeSubscription.ts

@@ -0,0 +1,56 @@
+/**
+ * Initialize Subscription Hook
+ * TanStack mutation for initializing RevenueCat
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { SubscriptionManager } from "../../infrastructure/managers/SubscriptionManager";
+import {
+  trackPackageError,
+  addPackageBreadcrumb,
+} from "@umituz/react-native-sentry";
+import { SUBSCRIPTION_QUERY_KEYS } from "./subscriptionQueryKeys";
+
+/**
+ * Initialize subscription with RevenueCat
+ */
+export const useInitializeSubscription = (userId: string | undefined) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      if (!userId) {
+        throw new Error("User not authenticated");
+      }
+
+      addPackageBreadcrumb("subscription", "Initialize mutation started", {
+        userId,
+      });
+
+      return SubscriptionManager.initialize(userId);
+    },
+    onSuccess: () => {
+      if (userId) {
+        queryClient.invalidateQueries({
+          queryKey: SUBSCRIPTION_QUERY_KEYS.packages,
+        });
+
+        addPackageBreadcrumb(
+          "subscription",
+          "Initialize mutation success - packages invalidated",
+          { userId }
+        );
+      }
+    },
+    onError: (error) => {
+      trackPackageError(
+        error instanceof Error ? error : new Error(String(error)),
+        {
+          packageName: "subscription",
+          operation: "initialize_mutation",
+          userId: userId ?? "NO_USER",
+        }
+      );
+    },
+  });
+};