@umituz/react-native-subscription 2.11.8 → 2.11.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.11.8",
+  "version": "2.11.9",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -71,6 +71,14 @@ export {
 export { SubscriptionModalHeader } from "./presentation/components/paywall/SubscriptionModalHeader";
 
 export { SubscriptionPlanCard } from "./presentation/components/paywall/SubscriptionPlanCard";
+export {
+  AccordionPlanCard,
+  PlanCardHeader,
+  PlanCardDetails,
+  type AccordionPlanCardProps,
+  type PlanCardHeaderProps,
+  type PlanCardDetailsProps,
+} from "./presentation/components/paywall/accordion";
 export { PaywallFeaturesList } from "./presentation/components/paywall/PaywallFeaturesList";
 export { PaywallFeatureItem } from "./presentation/components/paywall/PaywallFeatureItem";
 export { PaywallLegalFooter } from "./presentation/components/paywall/PaywallLegalFooter";

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

@@ -5,11 +5,10 @@
 
 import React from "react";
 import { View, StyleSheet, ScrollView } from "react-native";
-import { useAppDesignTokens, BaseModal } from "@umituz/react-native-design-system";
+import { BaseModal } from "@umituz/react-native-design-system";
 import type { PurchasesPackage } from "react-native-purchases";
 
 import { SubscriptionModalHeader } from "./SubscriptionModalHeader";
-import { PaywallFeaturesList } from "./PaywallFeaturesList";
 import { SubscriptionPackageList } from "./SubscriptionPackageList";
 import { SubscriptionFooter } from "./SubscriptionFooter";
 import { useSubscriptionModal } from "../../hooks/useSubscriptionModal";
@@ -22,7 +21,6 @@ export interface SubscriptionModalProps {
   onRestore: () => Promise<boolean>;
   title: string;
   subtitle?: string;
-  features?: Array<{ icon: string; text: string }>;
   isLoading?: boolean;
   purchaseButtonText: string;
   restoreButtonText: string;
@@ -49,7 +47,6 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
     onRestore,
     title,
     subtitle,
-    features,
     isLoading = false,
     purchaseButtonText,
     restoreButtonText,
@@ -65,8 +62,6 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
     bestValueIdentifier,
   } = props;
 
-  const tokens = useAppDesignTokens();
-
   const {
     selectedPkg,
     setSelectedPkg,
@@ -104,20 +99,6 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
             creditAmounts={creditAmounts}
             bestValueIdentifier={bestValueIdentifier}
           />
-
-          {features && features.length > 0 && (
-            <View
-              style={[
-                styles.featuresSection,
-                {
-                  backgroundColor: tokens.colors.surfaceSecondary,
-                  borderColor: tokens.colors.border
-                }
-              ]}
-            >
-              <PaywallFeaturesList features={features} gap={12} />
-            </View>
-          )}
         </ScrollView>
 
         <SubscriptionFooter
@@ -155,10 +136,4 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     paddingBottom: 32,
   },
-  featuresSection: {
-    borderRadius: 24,
-    padding: 24,
-    marginTop: 12,
-    borderWidth: 1,
-  },
 });

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/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";