@umituz/react-native-subscription 2.11.7 → 2.11.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.11.7",
+  "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/details/CreditRow.tsx

@@ -0,0 +1,83 @@
+/**
+ * Credit Row Component
+ * Displays credit information with progress bar
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+export interface CreditRowProps {
+  label: string;
+  current: number;
+  total: number;
+  remainingLabel?: string;
+}
+
+export const CreditRow: React.FC<CreditRowProps> = ({
+  label,
+  current,
+  total,
+  remainingLabel = "remaining",
+}) => {
+  const tokens = useAppDesignTokens();
+  const percentage = total > 0 ? (current / total) * 100 : 0;
+  const isLow = percentage <= 20;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={[styles.label, { color: tokens.colors.text }]}>
+          {label}
+        </Text>
+        <Text
+          style={[
+            styles.count,
+            { color: isLow ? tokens.colors.warning : tokens.colors.textSecondary },
+          ]}
+        >
+          {current} / {total} {remainingLabel}
+        </Text>
+      </View>
+      <View
+        style={[styles.progressBar, { backgroundColor: tokens.colors.surfaceSecondary }]}
+      >
+        <View
+          style={[
+            styles.progressFill,
+            {
+              width: `${percentage}%`,
+              backgroundColor: isLow ? tokens.colors.warning : tokens.colors.primary,
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 4,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  label: {
+    fontSize: 13,
+  },
+  count: {
+    fontSize: 12,
+  },
+  progressBar: {
+    height: 6,
+    borderRadius: 3,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 3,
+  },
+});

package/src/presentation/components/details/DetailRow.tsx

@@ -0,0 +1,53 @@
+/**
+ * Detail Row Component
+ * Displays a single detail row with label and value
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+export interface DetailRowProps {
+  label: string;
+  value: string;
+  highlight?: boolean;
+}
+
+export const DetailRow: React.FC<DetailRowProps> = ({
+  label,
+  value,
+  highlight = false,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.label, { color: tokens.colors.textSecondary }]}>
+        {label}
+      </Text>
+      <Text
+        style={[
+          styles.value,
+          { color: highlight ? tokens.colors.warning : tokens.colors.text },
+        ]}
+      >
+        {value}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  label: {
+    fontSize: 14,
+  },
+  value: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});

package/src/presentation/components/details/PremiumDetailsCard.tsx

@@ -7,45 +7,12 @@
 import React from "react";
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import {
-  PremiumStatusBadge,
-  type SubscriptionStatusType,
-} from "./PremiumStatusBadge";
+import { PremiumStatusBadge } from "./PremiumStatusBadge";
+import { DetailRow } from "./DetailRow";
+import { CreditRow } from "./CreditRow";
+import type { PremiumDetailsCardProps } from "./PremiumDetailsCardTypes";
 
-export interface CreditInfo {
-  id: string;
-  label: string;
-  current: number;
-  total: number;
-}
-
-export interface PremiumDetailsTranslations {
-  title: string;
-  statusLabel: string;
-  expiresLabel: string;
-  purchasedLabel: string;
-  creditsTitle?: string;
-  remainingLabel?: string;
-  manageButton?: string;
-  upgradeButton?: string;
-  lifetimeLabel?: string;
-  statusActive?: string;
-  statusExpired?: string;
-  statusFree?: string;
-}
-
-export interface PremiumDetailsCardProps {
-  statusType: SubscriptionStatusType;
-  isPremium: boolean;
-  expirationDate?: string | null;
-  purchaseDate?: string | null;
-  isLifetime?: boolean;
-  daysRemaining?: number | null;
-  credits?: CreditInfo[];
-  translations: PremiumDetailsTranslations;
-  onManageSubscription?: () => void;
-  onUpgrade?: () => void;
-}
+export type { CreditInfo, PremiumDetailsTranslations, PremiumDetailsCardProps } from "./PremiumDetailsCardTypes";
 
 export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
   statusType,
@@ -82,7 +49,6 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
             <DetailRow
               label={translations.statusLabel}
               value={translations.lifetimeLabel || "Lifetime"}
-              tokens={tokens}
             />
           ) : (
             <>
@@ -95,14 +61,12 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
                     daysRemaining !== undefined &&
                     daysRemaining <= 7
                   }
-                  tokens={tokens}
                 />
               )}
               {purchaseDate && (
                 <DetailRow
                   label={translations.purchasedLabel}
                   value={purchaseDate}
-                  tokens={tokens}
                 />
               )}
             </>
@@ -126,7 +90,6 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
               current={credit.current}
               total={credit.total}
               remainingLabel={translations.remainingLabel}
-              tokens={tokens}
             />
           ))}
         </View>
@@ -163,84 +126,6 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
   );
 };
 
-interface DetailRowProps {
-  label: string;
-  value: string;
-  highlight?: boolean;
-  tokens: ReturnType<typeof useAppDesignTokens>;
-}
-
-const DetailRow: React.FC<DetailRowProps> = ({
-  label,
-  value,
-  highlight = false,
-  tokens,
-}) => (
-  <View style={styles.detailRow}>
-    <Text style={[styles.detailLabel, { color: tokens.colors.textSecondary }]}>
-      {label}
-    </Text>
-    <Text
-      style={[
-        styles.detailValue,
-        { color: highlight ? tokens.colors.warning : tokens.colors.text },
-      ]}
-    >
-      {value}
-    </Text>
-  </View>
-);
-
-interface CreditRowProps {
-  label: string;
-  current: number;
-  total: number;
-  remainingLabel?: string;
-  tokens: ReturnType<typeof useAppDesignTokens>;
-}
-
-const CreditRow: React.FC<CreditRowProps> = ({
-  label,
-  current,
-  total,
-  remainingLabel = "remaining",
-  tokens,
-}) => {
-  const percentage = total > 0 ? (current / total) * 100 : 0;
-  const isLow = percentage <= 20;
-
-  return (
-    <View style={styles.creditRow}>
-      <View style={styles.creditHeader}>
-        <Text style={[styles.creditLabel, { color: tokens.colors.text }]}>
-          {label}
-        </Text>
-        <Text
-          style={[
-            styles.creditCount,
-            { color: isLow ? tokens.colors.warning : tokens.colors.textSecondary },
-          ]}
-        >
-          {current} / {total} {remainingLabel}
-        </Text>
-      </View>
-      <View
-        style={[styles.progressBar, { backgroundColor: tokens.colors.surfaceSecondary }]}
-      >
-        <View
-          style={[
-            styles.progressFill,
-            {
-              width: `${percentage}%`,
-              backgroundColor: isLow ? tokens.colors.warning : tokens.colors.primary,
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
 const styles = StyleSheet.create({
   card: {
     borderRadius: 12,
@@ -264,46 +149,11 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     marginBottom: 4,
   },
-  detailRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  detailLabel: {
-    fontSize: 14,
-  },
-  detailValue: {
-    fontSize: 14,
-    fontWeight: "500",
-  },
   creditsSection: {
     gap: 8,
     paddingTop: 12,
     borderTopWidth: 1,
   },
-  creditRow: {
-    gap: 4,
-  },
-  creditHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  creditLabel: {
-    fontSize: 13,
-  },
-  creditCount: {
-    fontSize: 12,
-  },
-  progressBar: {
-    height: 6,
-    borderRadius: 3,
-    overflow: "hidden",
-  },
-  progressFill: {
-    height: "100%",
-    borderRadius: 3,
-  },
   actionsSection: {
     gap: 8,
   },

package/src/presentation/components/details/PremiumDetailsCardTypes.ts

@@ -0,0 +1,41 @@
+/**
+ * Premium Details Card Types
+ * Type definitions for premium subscription details display
+ */
+
+import type { SubscriptionStatusType } from "./PremiumStatusBadge";
+
+export interface CreditInfo {
+  id: string;
+  label: string;
+  current: number;
+  total: number;
+}
+
+export interface PremiumDetailsTranslations {
+  title: string;
+  statusLabel: string;
+  expiresLabel: string;
+  purchasedLabel: string;
+  creditsTitle?: string;
+  remainingLabel?: string;
+  manageButton?: string;
+  upgradeButton?: string;
+  lifetimeLabel?: string;
+  statusActive?: string;
+  statusExpired?: string;
+  statusFree?: string;
+}
+
+export interface PremiumDetailsCardProps {
+  statusType: SubscriptionStatusType;
+  isPremium: boolean;
+  expirationDate?: string | null;
+  purchaseDate?: string | null;
+  isLifetime?: boolean;
+  daysRemaining?: number | null;
+  credits?: CreditInfo[];
+  translations: PremiumDetailsTranslations;
+  onManageSubscription?: () => void;
+  onUpgrade?: () => void;
+}

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

@@ -4,24 +4,14 @@
  */
 
 import React from "react";
-import { View, StyleSheet, TouchableOpacity, Linking } from "react-native";
+import { View, TouchableOpacity, Linking } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { PaywallLegalFooterProps } from "./PaywallLegalFooterTypes";
+import { DEFAULT_TERMS } from "./PaywallLegalFooterTypes";
+import { styles } from "./PaywallLegalFooterStyles";
 
-interface PaywallLegalFooterProps {
-  termsText?: string;
-  privacyUrl?: string;
-  termsUrl?: string;
-  privacyText?: string;
-  termsOfServiceText?: string;
-  showRestoreButton?: boolean;
-  restoreButtonText?: string;
-  onRestore?: () => void;
-  isProcessing?: boolean;
-}
-
-const DEFAULT_TERMS =
-  "Payment will be charged to your account. Subscription automatically renews unless cancelled.";
+export type { PaywallLegalFooterProps } from "./PaywallLegalFooterTypes";
 
 export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
   ({
@@ -153,50 +143,3 @@ export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
 );
 
 PaywallLegalFooter.displayName = "PaywallLegalFooter";
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    paddingHorizontal: 24,
-    paddingBottom: 24,
-    paddingTop: 8,
-    width: "100%",
-  },
-  termsText: {
-    textAlign: "center",
-    fontSize: 10,
-    lineHeight: 14,
-    marginBottom: 16,
-    opacity: 0.7,
-  },
-  legalLinksWrapper: {
-    width: "100%",
-    alignItems: "center",
-  },
-  legalLinksContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    borderRadius: 20,
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.05)",
-  },
-  linkItem: {
-    paddingVertical: 2,
-  },
-  linkText: {
-    fontSize: 11,
-    fontWeight: "500",
-    letterSpacing: 0.3,
-  },
-  dot: {
-    width: 3,
-    height: 3,
-    borderRadius: 1.5,
-    marginHorizontal: 12,
-    opacity: 0.3,
-  },
-});

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

@@ -0,0 +1,53 @@
+/**
+ * Paywall Legal Footer Styles
+ * StyleSheet definitions for paywall legal footer
+ */
+
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    paddingHorizontal: 24,
+    paddingBottom: 24,
+    paddingTop: 8,
+    width: "100%",
+  },
+  termsText: {
+    textAlign: "center",
+    fontSize: 10,
+    lineHeight: 14,
+    marginBottom: 16,
+    opacity: 0.7,
+  },
+  legalLinksWrapper: {
+    width: "100%",
+    alignItems: "center",
+  },
+  legalLinksContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 20,
+    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.05)",
+  },
+  linkItem: {
+    paddingVertical: 2,
+  },
+  linkText: {
+    fontSize: 11,
+    fontWeight: "500",
+    letterSpacing: 0.3,
+  },
+  dot: {
+    width: 3,
+    height: 3,
+    borderRadius: 1.5,
+    marginHorizontal: 12,
+    opacity: 0.3,
+  },
+});

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

@@ -0,0 +1,19 @@
+/**
+ * Paywall Legal Footer Types
+ * Type definitions for paywall legal footer
+ */
+
+export interface PaywallLegalFooterProps {
+  termsText?: string;
+  privacyUrl?: string;
+  termsUrl?: string;
+  privacyText?: string;
+  termsOfServiceText?: string;
+  showRestoreButton?: boolean;
+  restoreButtonText?: string;
+  onRestore?: () => void;
+  isProcessing?: boolean;
+}
+
+export const DEFAULT_TERMS =
+  "Payment will be charged to your account. Subscription automatically renews unless cancelled.";

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

@@ -3,7 +3,7 @@
  * Displays paywall with Credits and Subscription tabs
  */
 
-import React, { useEffect } from "react";
+import React from "react";
 import { View, StyleSheet } from "react-native";
 import { BaseModal } from "@umituz/react-native-design-system";
 import type { PurchasesPackage } from "react-native-purchases";

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

@@ -108,10 +108,6 @@ const styles = StyleSheet.create({
         borderRadius: 16,
         alignItems: "center",
         justifyContent: "center",
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.2,
-        shadowRadius: 8,
         elevation: 4,
     },
     restoreButton: {

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,
-  },
 });