@zezosoft/zezo-ott-react-native-ui-kit 1.3.1 → 1.3.3

package/lib/module/components/Subscription/SubOne.js

@@ -1,442 +1,193 @@
 "use strict";
 
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 21 Jul 2025 at 04:55 PM
- */
-
-import React, { memo, useCallback, useMemo, useState } from 'react';
-import { View, StyleSheet, TouchableOpacity, ActivityIndicator, ScrollView, Dimensions } from 'react-native';
+import { memo, useCallback } from 'react';
+import { View, StyleSheet, TouchableOpacity, ActivityIndicator, Dimensions, ScrollView } from 'react-native';
 import Carousel from 'react-native-reanimated-carousel';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import LinearGradient from 'react-native-linear-gradient';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
-import Modal from 'react-native-modal';
-import { X } from 'lucide-react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from "../Text/index.js";
 import AppHeader from "../Headers/AppHeader.js";
 import { useInternalTheme } from "../../theme/hook/useInternalTheme.js";
-import Display from "../../utils/Display.js";
 import { RFValue } from 'react-native-responsive-fontsize';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Memoized Plan Details Modal Component
-const PlanDetailsModalContent = /*#__PURE__*/memo(({
-  plan,
-  colors,
-  onClose
-}) => {
-  const modalContentStyle = useMemo(() => [styles.modalContent, {
-    backgroundColor: colors.surface
-  }], [colors.surface]);
-  const modalTitleStyle = useMemo(() => [styles.modalTitle, {
-    color: colors.textPrimary
-  }], [colors.textPrimary]);
-  const modalCloseButtonStyle = useMemo(() => [styles.modalCloseButton, {
-    backgroundColor: colors.background
-  }], [colors.background]);
-  const priceHighlightBoxStyle = useMemo(() => [styles.priceHighlightBox, {
-    backgroundColor: colors.background
-  }], [colors.background]);
-  const platformBadgeStyle = useMemo(() => [styles.platformBadge, {
-    backgroundColor: colors.surface,
-    borderColor: colors.primary
-  }], [colors.surface, colors.primary]);
-  const modalPriceLabelStyle = useMemo(() => [styles.modalPriceLabel, {
-    color: colors.textSecondary
-  }], [colors.textSecondary]);
-  const modalPriceValueStyle = useMemo(() => [styles.modalPriceValue, {
-    color: colors.primary
-  }], [colors.primary]);
-  const modalPriceDurationStyle = useMemo(() => [styles.modalPriceDuration, {
-    color: colors.textSecondary
-  }], [colors.textSecondary]);
-  const modalSectionTitleStyle = useMemo(() => [styles.modalSectionTitle, {
-    color: colors.textPrimary
-  }], [colors.textPrimary]);
-  const platformBadgeTextStyle = useMemo(() => [styles.platformBadgeText, {
-    color: colors.textPrimary
-  }], [colors.textPrimary]);
-  const benefitBulletStyle = useMemo(() => [styles.benefitBullet, {
-    color: colors.primary
-  }], [colors.primary]);
-  const benefitTextStyle = useMemo(() => [styles.benefitText, {
-    color: colors.textSecondary
-  }], [colors.textSecondary]);
-  const modalSectionValueStyle = useMemo(() => [styles.modalSectionValue, {
-    color: colors.textSecondary
-  }], [colors.textSecondary]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: modalContentStyle,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.modalHeader,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: modalTitleStyle,
-        children: plan.title || 'Plan Details'
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: onClose,
-        style: modalCloseButtonStyle,
-        activeOpacity: 0.7,
-        children: /*#__PURE__*/_jsx(X, {
-          size: scale(20),
-          color: colors.textPrimary
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(ScrollView, {
-      style: styles.modalScrollView,
-      contentContainerStyle: styles.modalScrollContent,
-      showsVerticalScrollIndicator: false,
-      bounces: false,
-      scrollEventThrottle: 16,
-      keyboardShouldPersistTaps: "handled",
-      removeClippedSubviews: false,
-      nestedScrollEnabled: true,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.modalSection, styles.modalFirstSection],
-        children: /*#__PURE__*/_jsxs(View, {
-          style: priceHighlightBoxStyle,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: modalPriceLabelStyle,
-            children: "PRICING"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: modalPriceValueStyle,
-            children: plan.price
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: modalPriceDurationStyle,
-            children: ["per ", plan.duration]
-          })]
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.modalSection,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: modalSectionTitleStyle,
-          children: "Available On"
-        }), /*#__PURE__*/_jsx(View, {
-          style: platformBadgeStyle,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: platformBadgeTextStyle,
-            children: plan.platforms
-          })
-        })]
-      }), plan.benefits && plan.benefits.length > 0 && /*#__PURE__*/_jsxs(View, {
-        style: styles.modalSection,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: modalSectionTitleStyle,
-          children: "Benefits"
-        }), plan.benefits.map((benefit, index) => /*#__PURE__*/_jsxs(View, {
-          style: styles.benefitRow,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: benefitBulletStyle,
-            children: "\u2022"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: benefitTextStyle,
-            children: benefit
-          })]
-        }, `benefit-${plan.id}-${index}`))]
-      }), plan.extraDetails?.description && /*#__PURE__*/_jsxs(View, {
-        style: styles.modalSection,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: modalSectionTitleStyle,
-          children: "Description"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: modalSectionValueStyle,
-          children: plan.extraDetails.description
-        })]
-      }), plan.extraDetails?.features && plan.extraDetails.features.length > 0 && /*#__PURE__*/_jsxs(View, {
-        style: styles.modalSection,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: modalSectionTitleStyle,
-          children: "Features"
-        }), plan.extraDetails.features.map((feature, index) => /*#__PURE__*/_jsxs(View, {
-          style: styles.benefitRow,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: benefitBulletStyle,
-            children: "\u2713"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: benefitTextStyle,
-            children: feature
-          })]
-        }, `feature-${plan.id}-${index}`))]
-      }), plan.extraDetails?.terms && /*#__PURE__*/_jsxs(View, {
-        style: styles.modalSection,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: modalSectionTitleStyle,
-          children: "Terms & Conditions"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: modalSectionValueStyle,
-          children: plan.extraDetails.terms
-        })]
-      })]
-    })]
-  });
-});
-PlanDetailsModalContent.displayName = 'PlanDetailsModalContent';
-const CAROUSEL_WIDTH = Display.fullWidth;
-const CAROUSEL_HEIGHT = verticalScale(CAROUSEL_WIDTH / 1.4);
-
-// Move parsePrice outside component to avoid recreation on every render
+import { SubscriptionCard } from "./components/SubscriptionCard.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const {
+  width: SCREEN_WIDTH,
+  height: SCREEN_HEIGHT
+} = Dimensions.get('window');
+const CAROUSEL_HEIGHT = SCREEN_HEIGHT * 0.42;
 const parsePrice = price => parseFloat(price.replace(/[^\d.]/g, '')) || 0;
 const SubscriptionSliderOne = ({
   theme,
   onSubscribe,
   subscribeButtonText = 'Subscribe',
   subscribeLoadingId,
-  plans,
+  plans = [],
   errorMessage = 'Something went wrong',
   isLoading = false,
-  onBackPress = () => {},
+  onBackPress,
+  onRestore,
+  restoreLoading = false,
+  restoreText = 'Restore Purchase',
+  restoreDescription = 'Already purchased? Restore your subscription here.',
   header,
   footer,
-  extraContentText
+  onPressTerms,
+  onPressPrivacy,
+  termsText = 'Terms of Use',
+  privacyText = 'Privacy Policy'
 }) => {
   const {
     theme: appliedTheme
   } = useInternalTheme(theme);
-  const colors = appliedTheme.colors;
-  const [selectedPlan, setSelectedPlan] = useState(null);
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const sortedPlans = useMemo(() => {
-    return [...plans].sort((a, b) => {
-      const aPopular = a?.isPopular ? 1 : 0;
-      const bPopular = b?.isPopular ? 1 : 0;
-      if (aPopular !== bPopular) {
-        return bPopular - aPopular;
-      }
-      if (aPopular === 1 && bPopular === 1) {
-        return parsePrice(b.price) - parsePrice(a.price);
-      }
-      return 0;
-    });
-  }, [plans]);
-  const placeholderData = useMemo(() => new Array(plans.length || 3).fill({}), [plans.length]);
-  const shouldLoop = useMemo(() => sortedPlans.length > 1, [sortedPlans.length]);
-  const carouselModeConfig = useMemo(() => ({
-    parallaxScrollingOffset: Display.fullWidth * 0.21,
-    parallaxAdjacentItemScale: 0.8
-  }), []);
-  const errorMessageStyle = useMemo(() => ({
-    color: colors.error
-  }), [colors.error]);
-  const containerStyle = useMemo(() => [styles.container, {
-    backgroundColor: colors.background
-  }], [colors.background]);
-  const headingStyle = useMemo(() => [styles.heading], []);
-  const subTextStyle = useMemo(() => [styles.subText, {
-    color: colors.onSurfaceVariant
-  }], [colors.onSurfaceVariant]);
-  const infoStyle = useMemo(() => [styles.info, {
-    color: colors.onSurfaceVariant
-  }], [colors.onSurfaceVariant]);
-  const cancelTextStyle = useMemo(() => [styles.cancelText, {
-    color: colors.onSurfaceVariant
-  }], [colors.onSurfaceVariant]);
-  const extraContentTextStyle = useMemo(() => [styles.extraContentTextText, {
-    color: colors.onSurfaceVariant
-  }], [colors.onSurfaceVariant]);
-  const modalColors = useMemo(() => ({
-    surface: colors.surface,
-    background: colors.background,
-    textPrimary: colors.textPrimary,
-    textSecondary: colors.textSecondary,
-    primary: colors.primary
-  }), [colors.surface, colors.background, colors.textPrimary, colors.textSecondary, colors.primary]);
-  const skeletonColors = useMemo(() => ({
-    backgroundColor: colors.skeletonBaseColor,
-    highlightColor: colors.skeletonHighlightColor
-  }), [colors.skeletonBaseColor, colors.skeletonHighlightColor]);
-  const renderSkeleton = useCallback(() => /*#__PURE__*/_jsx(Animated.View, {
-    entering: FadeIn,
-    exiting: FadeOut,
-    style: styles.cardContainer,
-    children: /*#__PURE__*/_jsx(SkeletonPlaceholder, {
-      borderRadius: 20,
-      backgroundColor: skeletonColors.backgroundColor,
-      highlightColor: skeletonColors.highlightColor,
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.card
-      })
-    })
-  }), [skeletonColors]);
-  const openDetailsModal = useCallback(plan => {
-    setSelectedPlan(plan);
-    setIsModalVisible(true);
-  }, []);
-  const closeDetailsModal = useCallback(() => {
-    setIsModalVisible(false);
-    // Delay clearing selectedPlan to prevent flicker during close animation
-    setTimeout(() => {
-      setSelectedPlan(null);
-    }, 300);
-  }, []);
-  const gradientConfig = useMemo(() => ({
-    colors: colors.cardGradient,
-    start: {
-      x: 1,
-      y: 0
-    },
-    end: {
-      x: 0,
-      y: 1.2
-    },
-    locations: [0, 0.7, 1]
-  }), [colors.cardGradient]);
-  const cardStyle = useMemo(() => [styles.card, {
-    shadowColor: colors.primary
-  }], [colors.primary]);
-  const handleSubscribe = useCallback(item => {
-    onSubscribe?.(item);
-  }, [onSubscribe]);
-  const renderPlan = useCallback(({
+  const {
+    colors
+  } = appliedTheme;
+  const sortedPlans = [...plans]?.sort?.((a, b) => {
+    const aPopular = a?.isPopular ? 1 : 0;
+    const bPopular = b?.isPopular ? 1 : 0;
+    if (aPopular !== bPopular) return bPopular - aPopular;
+    if (aPopular) return parsePrice(b.price) - parsePrice(a.price);
+    return 0;
+  });
+  const placeholderData = new Array(plans.length || 3).fill({});
+  const shouldLoop = sortedPlans?.length > 1 || placeholderData?.length > 1;
+  const handleSubscribe = useCallback(plan => onSubscribe?.(plan), [onSubscribe]);
+  const renderPlan = ({
     item
   }) => {
-    const isPopular = item?.isPopular;
-    const hasBenefits = !!item.benefits?.length;
-    const benefitsCount = item.benefits?.length || 0;
-    const showViewDetails = hasBenefits || !!item.extraDetails;
-    const isSubscribing = subscribeLoadingId === item.id;
-    const viewDetailsText = hasBenefits && benefitsCount > 4 ? 'View More Details' : 'View Details';
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.cardContainer,
-      children: /*#__PURE__*/_jsxs(LinearGradient, {
-        colors: gradientConfig.colors,
-        start: gradientConfig.start,
-        end: gradientConfig.end,
-        locations: gradientConfig.locations,
-        style: cardStyle,
-        children: [isPopular && /*#__PURE__*/_jsx(View, {
-          style: [styles.popularBadge, {
-            backgroundColor: colors.button
+    const isProcessing = subscribeLoadingId === item.id;
+    return /*#__PURE__*/_jsx(SubscriptionCard, {
+      plan: item,
+      colors: colors,
+      onSubscribe: handleSubscribe,
+      isLoading: isLoading,
+      isProcessing: isProcessing,
+      subscribeButtonText: isProcessing ? 'Subscribing...' : subscribeButtonText
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, {
+      backgroundColor: colors.background
+    }],
+    children: [/*#__PURE__*/_jsx(AppHeader, {
+      title: header.topTitle,
+      onBackPress: onBackPress,
+      titleAlign: header.topTitleAlign,
+      theme: theme
+    }), /*#__PURE__*/_jsxs(ScrollView, {
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.headerContent,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.title, {
+            color: colors.textPrimary
           }],
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.popularText, {
-              color: colors.buttonText
-            }],
-            children: "POPULAR"
-          })
+          children: header.title
         }), /*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
-          style: [styles.cardTitle, {
-            color: colors.white
+          style: [styles.subtitle, {
+            color: colors.onSurfaceVariant
           }],
-          children: item.title
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.price, {
-            color: colors.white
+          children: header.subTitle
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.carouselWrapper,
+        children: !plans.length && !isLoading ? /*#__PURE__*/_jsx(View, {
+          style: [styles.error, {
+            borderRadius: scale(12),
+            width: SCREEN_WIDTH,
+            height: CAROUSEL_HEIGHT
           }],
-          children: item.price
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.per, {
-            color: colors.white
+          children: /*#__PURE__*/_jsx(Text, {
+            style: {
+              color: colors.error
+            },
+            children: errorMessage
+          })
+        }) : /*#__PURE__*/_jsx(Carousel, {
+          width: SCREEN_WIDTH,
+          height: CAROUSEL_HEIGHT,
+          data: isLoading ? placeholderData : sortedPlans,
+          renderItem: renderPlan,
+          loop: shouldLoop,
+          autoPlay: false,
+          scrollAnimationDuration: 500,
+          mode: "parallax",
+          modeConfig: {
+            parallaxScrollingOffset: scale(60),
+            parallaxAdjacentItemScale: 0.8
+          }
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.footerContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.footerTitle, {
+            color: colors.textPrimary
           }],
-          children: item.duration
+          children: footer.title
         }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.platforms, {
-            color: colors.white
+          style: [styles.footerSub, {
+            color: colors.onSurfaceVariant
           }],
-          children: item.platforms
-        }), hasBenefits && item.benefits && /*#__PURE__*/_jsx(View, {
-          style: styles.benefitsContainer,
-          children: item.benefits.slice(0, 4).map((benefit, i) => /*#__PURE__*/_jsxs(Text, {
-            numberOfLines: 1,
-            style: [styles.benefit, {
-              color: colors.white
+          children: footer.subTitle
+        })]
+      }), (onPressTerms || onPressPrivacy) && /*#__PURE__*/_jsxs(View, {
+        style: styles.legalContainer,
+        children: [onPressTerms && /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onPressTerms,
+          activeOpacity: 0.6,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.legalText, {
+              color: colors.primary
             }],
-            children: ["\u2022 ", benefit]
-          }, `${item.id}-benefit-${i}`))
-        }), showViewDetails && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.viewDetailsButton,
-          onPress: () => openDetailsModal(item),
-          activeOpacity: 0.7,
+            children: termsText
+          })
+        }), onPressTerms && onPressPrivacy && /*#__PURE__*/_jsx(Text, {
+          style: styles.dot,
+          children: " \u2022 "
+        }), onPressPrivacy && /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onPressPrivacy,
+          activeOpacity: 0.6,
           children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.viewDetailsText, {
-              color: colors.white
+            style: [styles.legalText, {
+              color: colors.primary
             }],
-            children: viewDetailsText
+            children: privacyText
           })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.subscribeButton, {
-            backgroundColor: colors.button
-          }],
-          onPress: () => handleSubscribe(item),
+        })]
+      }), onRestore && /*#__PURE__*/_jsxs(View, {
+        style: styles.restoreWrapper,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onRestore,
           activeOpacity: 0.8,
-          disabled: isSubscribing,
-          children: isSubscribing ? /*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "small",
-            color: colors.buttonText
+          disabled: restoreLoading,
+          style: [styles.restoreButton, {
+            backgroundColor: colors.primary,
+            opacity: restoreLoading ? 0.7 : 1
+          }],
+          children: restoreLoading ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+              size: "small",
+              color: colors.onPrimary
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.restoreText, {
+                marginLeft: scale(8),
+                color: colors.onPrimary
+              }],
+              children: "Restoring..."
+            })]
           }) : /*#__PURE__*/_jsx(Text, {
-            style: [styles.subscribeText, {
-              color: colors.buttonText
+            style: [styles.restoreText, {
+              color: colors.onPrimary
             }],
-            children: subscribeButtonText
+            children: restoreText
           })
+        }), restoreDescription && /*#__PURE__*/_jsx(Text, {
+          style: [styles.restoreDescription, {
+            color: colors.onSurfaceVariant
+          }],
+          children: restoreDescription
         })]
-      })
-    });
-  }, [gradientConfig, cardStyle, colors.button, colors.buttonText, colors.white, subscribeButtonText, subscribeLoadingId, openDetailsModal, handleSubscribe]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: containerStyle,
-    children: [/*#__PURE__*/_jsx(AppHeader, {
-      title: header.topTitle,
-      onBackPress: onBackPress,
-      titleAlign: header.topTitleAlign,
-      theme: theme
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.content,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: headingStyle,
-        color: colors.textPrimary,
-        children: header.title
-      }), /*#__PURE__*/_jsx(Text, {
-        style: subTextStyle,
-        children: header.subTitle
-      }), !plans || plans.length === 0 && !isLoading && errorMessage ? /*#__PURE__*/_jsx(View, {
-        style: styles.errorMessage,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: errorMessageStyle,
-          children: errorMessage
-        })
-      }) : /*#__PURE__*/_jsx(Carousel, {
-        width: CAROUSEL_WIDTH,
-        height: CAROUSEL_HEIGHT,
-        data: isLoading ? placeholderData : sortedPlans,
-        renderItem: isLoading ? renderSkeleton : renderPlan,
-        loop: shouldLoop,
-        autoPlay: false,
-        scrollAnimationDuration: 500,
-        mode: "parallax",
-        modeConfig: carouselModeConfig
-      }), /*#__PURE__*/_jsx(Text, {
-        style: infoStyle,
-        children: footer.title
-      }), /*#__PURE__*/_jsx(Text, {
-        style: cancelTextStyle,
-        children: footer.subTitle
-      }), extraContentText && /*#__PURE__*/_jsx(View, {
-        style: styles.extraContentTextWrapper,
-        children: /*#__PURE__*/React.isValidElement(extraContentText) ? extraContentText : /*#__PURE__*/_jsx(Text, {
-          style: extraContentTextStyle,
-          children: extraContentText
-        })
-      }), /*#__PURE__*/_jsx(Modal, {
-        isVisible: isModalVisible,
-        onBackdropPress: closeDetailsModal,
-        onBackButtonPress: closeDetailsModal,
-        backdropOpacity: 0.35,
-        useNativeDriver: true,
-        useNativeDriverForBackdrop: true,
-        onSwipeComplete: closeDetailsModal,
-        propagateSwipe: true,
-        style: styles.modal,
-        hideModalContentWhileAnimating: true,
-        animationIn: "slideInUp",
-        animationOut: "slideOutDown",
-        animationInTiming: 300,
-        animationOutTiming: 300,
-        children: selectedPlan && /*#__PURE__*/_jsx(PlanDetailsModalContent, {
-          plan: selectedPlan,
-          colors: modalColors,
-          onClose: closeDetailsModal
-        })
       })]
     })]
   });
@@ -446,281 +197,94 @@ const styles = StyleSheet.create({
   container: {
     flex: 1
   },
-  content: {
-    flex: 1,
-    paddingTop: verticalScale(16)
-  },
-  heading: {
-    fontSize: RFValue(21),
-    fontWeight: '700',
-    textAlign: 'center',
-    marginBottom: verticalScale(12),
-    marginHorizontal: scale(16)
-  },
-  subText: {
-    textAlign: 'center',
-    fontSize: RFValue(12),
-    fontWeight: '400',
-    marginBottom: verticalScale(12),
-    marginHorizontal: scale(16)
-  },
-  errorMessage: {
-    height: CAROUSEL_HEIGHT,
-    fontSize: RFValue(13),
-    fontWeight: '600',
-    textAlign: 'center',
-    textAlignVertical: 'center',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginVertical: verticalScale(12)
-  },
-  cardContainer: {
-    alignItems: 'center',
-    justifyContent: 'center'
+  scrollContent: {
+    flexGrow: 1,
+    paddingBottom: verticalScale(20)
   },
-  card: {
-    position: 'relative',
-    width: Display.fullWidth * 0.95,
-    aspectRatio: 1,
-    borderRadius: scale(20),
-    justifyContent: 'center',
-    alignItems: 'center',
-    alignSelf: 'center',
-    shadowOffset: {
-      width: 0,
-      height: 4
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 8,
-    elevation: 5
+  headerContent: {
+    paddingHorizontal: scale(20),
+    marginTop: verticalScale(10),
+    alignItems: 'center'
   },
-  cardTitle: {
-    fontSize: RFValue(17),
+  title: {
+    fontSize: RFValue(20),
     fontWeight: '700',
-    maxWidth: '50%',
-    marginHorizontal: 'auto',
-    marginBottom: verticalScale(8),
     textAlign: 'center'
   },
-  price: {
-    fontSize: RFValue(43),
-    fontWeight: 'bold',
-    marginBottom: verticalScale(4)
-  },
-  per: {
+  subtitle: {
     fontSize: RFValue(13),
-    textTransform: 'capitalize',
-    marginBottom: verticalScale(6)
-  },
-  platforms: {
-    fontSize: RFValue(13),
-    textTransform: 'capitalize',
-    textAlign: 'center',
-    marginBottom: verticalScale(8)
-  },
-  benefitsContainer: {
-    marginTop: verticalScale(8),
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-    width: '60%',
-    marginHorizontal: 'auto'
-  },
-  benefit: {
-    fontSize: RFValue(12)
-  },
-  subscribeButton: {
-    paddingVertical: verticalScale(10),
-    paddingHorizontal: scale(60),
-    borderRadius: scale(30),
-    alignItems: 'center',
-    marginTop: verticalScale(5)
-  },
-  subscribeText: {
-    fontSize: RFValue(14),
-    fontWeight: '700'
-  },
-  info: {
-    fontSize: RFValue(11),
     textAlign: 'center',
-    fontWeight: '400',
-    marginVertical: verticalScale(8),
-    marginHorizontal: scale(16)
+    marginTop: verticalScale(6),
+    lineHeight: scale(18),
+    opacity: 0.85
   },
-  cancelText: {
-    fontSize: RFValue(11),
-    textAlign: 'center',
-    fontWeight: '400',
-    marginBottom: verticalScale(16),
-    marginHorizontal: scale(16)
+  carouselWrapper: {
+    marginTop: verticalScale(20),
+    alignItems: 'center'
   },
-  extraContentTextWrapper: {
-    marginTop: verticalScale(18),
-    alignItems: 'center',
+  error: {
+    height: verticalScale(200),
     justifyContent: 'center',
-    paddingHorizontal: scale(16)
-  },
-  extraContentTextText: {
-    fontSize: RFValue(10),
-    marginHorizontal: scale(16),
-    fontWeight: '400',
-    textAlign: 'center'
+    alignItems: 'center'
   },
-  popularBadge: {
-    position: 'absolute',
-    top: verticalScale(10),
-    right: scale(10),
-    paddingHorizontal: scale(6),
-    paddingVertical: verticalScale(3),
-    borderRadius: scale(12),
-    zIndex: 10
-  },
-  popularText: {
-    fontSize: RFValue(9),
-    textTransform: 'uppercase',
-    fontWeight: '700'
-  },
-  viewDetailsButton: {
-    paddingVertical: verticalScale(6),
+  footerContainer: {
+    marginTop: verticalScale(20),
     paddingHorizontal: scale(20),
-    alignItems: 'center',
-    justifyContent: 'center'
+    alignItems: 'center'
   },
-  viewDetailsText: {
+  footerTitle: {
     fontSize: RFValue(12),
     fontWeight: '600',
-    textDecorationLine: 'underline'
-  },
-  modal: {
-    margin: 0,
-    justifyContent: 'flex-end',
-    zIndex: 1000
-  },
-  modalContent: {
-    borderTopLeftRadius: moderateScale(24),
-    borderTopRightRadius: moderateScale(24),
-    maxHeight: Dimensions.get('window').height * 0.85,
-    minHeight: Dimensions.get('window').height * 0.4,
-    paddingBottom: verticalScale(20),
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: -4
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 12,
-    elevation: 8,
-    overflow: 'hidden'
-  },
-  modalHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: scale(20),
-    paddingTop: verticalScale(16),
-    paddingBottom: verticalScale(5),
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: 'rgba(0,0,0,0.08)'
-  },
-  modalTitle: {
-    fontSize: RFValue(17),
-    fontWeight: '700',
-    flex: 1,
-    letterSpacing: 0.2
-  },
-  modalCloseButton: {
-    width: scale(30),
-    height: scale(30),
-    borderRadius: scale(20),
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginLeft: scale(12)
-  },
-  modalScrollView: {
-    paddingHorizontal: scale(20),
-    paddingTop: verticalScale(16)
-  },
-  modalScrollContent: {
-    paddingBottom: verticalScale(24),
-    flexGrow: 1
-  },
-  modalSection: {
-    marginBottom: verticalScale(10),
-    paddingBottom: verticalScale(16),
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: 'rgba(0,0,0,0.06)'
-  },
-  modalFirstSection: {
-    marginTop: 0
-  },
-  modalSectionTitle: {
-    fontSize: RFValue(15),
-    fontWeight: '700',
-    marginBottom: verticalScale(10),
-    letterSpacing: 0.3,
+    textAlign: 'center',
+    lineHeight: scale(16),
     opacity: 0.9
   },
-  modalSectionValue: {
-    fontSize: RFValue(15),
-    lineHeight: RFValue(20),
-    letterSpacing: 0.2,
-    opacity: 0.85
+  footerSub: {
+    fontSize: RFValue(11),
+    textAlign: 'center',
+    marginTop: verticalScale(4),
+    lineHeight: scale(16),
+    opacity: 0.75
   },
-  benefitRow: {
+  legalContainer: {
     flexDirection: 'row',
+    justifyContent: 'center',
     alignItems: 'center',
-    marginBottom: verticalScale(10),
-    paddingRight: scale(8),
-    paddingLeft: scale(4)
+    marginTop: verticalScale(12)
   },
-  benefitBullet: {
-    fontSize: RFValue(16),
-    marginRight: scale(10),
-    fontWeight: '600'
+  legalText: {
+    fontSize: RFValue(11),
+    fontWeight: '500',
+    textDecorationLine: 'underline'
   },
-  benefitText: {
-    fontSize: RFValue(12),
-    flex: 1,
-    letterSpacing: 0.2,
-    textTransform: 'capitalize',
-    opacity: 0.85
+  dot: {
+    marginHorizontal: scale(6),
+    fontSize: RFValue(10),
+    opacity: 0.6
   },
-  priceHighlightBox: {
-    borderRadius: scale(16),
-    padding: scale(20),
+  restoreWrapper: {
     alignItems: 'center',
-    justifyContent: 'center'
+    flexDirection: 'column',
+    gap: verticalScale(8),
+    marginTop: verticalScale(20)
   },
-  modalPriceLabel: {
-    fontSize: RFValue(12),
-    fontWeight: '700',
-    letterSpacing: 1.2,
+  restoreDescription: {
+    fontSize: RFValue(11),
+    textAlign: 'center',
     marginBottom: verticalScale(8),
-    opacity: 0.7
+    maxWidth: '70%',
+    opacity: 0.75
   },
-  modalPriceValue: {
-    fontSize: RFValue(36),
-    fontWeight: '800',
-    marginBottom: verticalScale(4),
-    letterSpacing: -0.5
-  },
-  modalPriceDuration: {
-    fontSize: RFValue(14),
-    fontWeight: '500',
-    opacity: 0.7
-  },
-  platformBadge: {
-    alignSelf: 'flex-start',
-    paddingHorizontal: scale(12),
-    paddingVertical: verticalScale(8),
-    borderRadius: scale(12),
-    borderWidth: 1,
-    borderColor: 'rgba(0,0,0,0.08)'
+  restoreButton: {
+    paddingVertical: verticalScale(10),
+    paddingHorizontal: scale(22),
+    borderRadius: scale(14),
+    flexDirection: 'row',
+    alignItems: 'center'
   },
-  platformBadgeText: {
-    fontSize: RFValue(12),
-    fontWeight: '600',
-    letterSpacing: 0.3,
-    textTransform: 'capitalize'
+  restoreText: {
+    fontSize: RFValue(13),
+    fontWeight: '600'
   }
 });
 //# sourceMappingURL=SubOne.js.map