@zezosoft/zezo-ott-react-native-ui-kit 1.1.0 → 1.1.2

package/src/components/Subscription/SubOne.tsx

@@ -42,6 +42,182 @@ export type Plan = {
   };
 };
 
+// Memoized Plan Details Modal Component
+const PlanDetailsModalContent = memo<{
+  plan: Plan;
+  colors: {
+    surface: string;
+    background: string;
+    textPrimary: string;
+    textSecondary: string;
+    primary: string;
+  };
+  onClose: () => void;
+}>(({ 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 (
+    <View style={modalContentStyle}>
+      <View style={styles.modalHeader}>
+        <Text style={modalTitleStyle}>{plan.title || 'Plan Details'}</Text>
+        <TouchableOpacity
+          onPress={onClose}
+          style={modalCloseButtonStyle}
+          activeOpacity={0.7}
+        >
+          <X size={scale(20)} color={colors.textPrimary} />
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView
+        style={styles.modalScrollView}
+        contentContainerStyle={styles.modalScrollContent}
+        showsVerticalScrollIndicator={false}
+        bounces={false}
+        scrollEventThrottle={16}
+        keyboardShouldPersistTaps="handled"
+        removeClippedSubviews={false}
+        nestedScrollEnabled={true}
+      >
+        <View style={[styles.modalSection, styles.modalFirstSection]}>
+          <View style={priceHighlightBoxStyle}>
+            <Text style={modalPriceLabelStyle}>PRICING</Text>
+            <Text style={modalPriceValueStyle}>{plan.price}</Text>
+            <Text style={modalPriceDurationStyle}>per {plan.duration}</Text>
+          </View>
+        </View>
+
+        <View style={styles.modalSection}>
+          <Text style={modalSectionTitleStyle}>Available On</Text>
+          <View style={platformBadgeStyle}>
+            <Text style={platformBadgeTextStyle}>{plan.platforms}</Text>
+          </View>
+        </View>
+
+        {plan.benefits && plan.benefits.length > 0 && (
+          <View style={styles.modalSection}>
+            <Text style={modalSectionTitleStyle}>Benefits</Text>
+            {plan.benefits.map((benefit, index) => (
+              <View
+                key={`benefit-${plan.id}-${index}`}
+                style={styles.benefitRow}
+              >
+                <Text style={benefitBulletStyle}>•</Text>
+                <Text style={benefitTextStyle}>{benefit}</Text>
+              </View>
+            ))}
+          </View>
+        )}
+
+        {plan.extraDetails?.description && (
+          <View style={styles.modalSection}>
+            <Text style={modalSectionTitleStyle}>Description</Text>
+            <Text style={modalSectionValueStyle}>
+              {plan.extraDetails.description}
+            </Text>
+          </View>
+        )}
+
+        {plan.extraDetails?.features &&
+          plan.extraDetails.features.length > 0 && (
+            <View style={styles.modalSection}>
+              <Text style={modalSectionTitleStyle}>Features</Text>
+              {plan.extraDetails.features.map((feature, index) => (
+                <View
+                  key={`feature-${plan.id}-${index}`}
+                  style={styles.benefitRow}
+                >
+                  <Text style={benefitBulletStyle}>✓</Text>
+                  <Text style={benefitTextStyle}>{feature}</Text>
+                </View>
+              ))}
+            </View>
+          )}
+
+        {plan.extraDetails?.terms && (
+          <View style={styles.modalSection}>
+            <Text style={modalSectionTitleStyle}>Terms & Conditions</Text>
+            <Text style={modalSectionValueStyle}>
+              {plan.extraDetails.terms}
+            </Text>
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  );
+});
+
+PlanDetailsModalContent.displayName = 'PlanDetailsModalContent';
+
 type SubscriptionSliderOneProps = {
   theme?: ThemeOverride;
   headerTitleAlign?: 'center' | 'left';
@@ -66,6 +242,11 @@ type SubscriptionSliderOneProps = {
 };
 const CAROUSEL_WIDTH = Display.fullWidth;
 const CAROUSEL_HEIGHT = verticalScale(CAROUSEL_WIDTH / 1.4);
+
+// Move parsePrice outside component to avoid recreation on every render
+const parsePrice = (price: string) =>
+  parseFloat(price.replace(/[^\d.]/g, '')) || 0;
+
 const SubscriptionSliderOne = ({
   theme,
   onSubscribe,
@@ -83,8 +264,6 @@ const SubscriptionSliderOne = ({
   const colors = appliedTheme.colors;
   const [selectedPlan, setSelectedPlan] = useState<Plan | null>(null);
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const parsePrice = (price: string) =>
-    parseFloat(price.replace(/[^\d.]/g, '')) || 0;
   const sortedPlans = useMemo(() => {
     return [...plans].sort((a, b) => {
       const aPopular = a?.isPopular ? 1 : 0;
@@ -101,9 +280,80 @@ const SubscriptionSliderOne = ({
       return 0;
     });
   }, [plans]);
+
   const placeholderData = useMemo(
     () => new Array(plans.length || 3).fill({}),
-    [plans]
+    [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(
@@ -115,14 +365,14 @@ const SubscriptionSliderOne = ({
       >
         <SkeletonPlaceholder
           borderRadius={20}
-          backgroundColor={colors.skeletonBaseColor}
-          highlightColor={colors.skeletonHighlightColor}
+          backgroundColor={skeletonColors.backgroundColor}
+          highlightColor={skeletonColors.highlightColor}
         >
           <View style={styles.card} />
         </SkeletonPlaceholder>
       </Animated.View>
     ),
-    [colors.skeletonBaseColor, colors.skeletonHighlightColor]
+    [skeletonColors]
   );
 
   const openDetailsModal = useCallback((plan: Plan) => {
@@ -132,104 +382,145 @@ const SubscriptionSliderOne = ({
 
   const closeDetailsModal = useCallback(() => {
     setIsModalVisible(false);
-    setSelectedPlan(null);
+    // 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] as number[],
+    }),
+    [colors.cardGradient]
+  );
+
+  const cardStyle = useMemo(
+    () => [styles.card, { shadowColor: colors.primary }],
+    [colors.primary]
+  );
+
+  const handleSubscribe = useCallback(
+    (item: Plan) => {
+      onSubscribe?.(item);
+    },
+    [onSubscribe]
+  );
+
   const renderPlan = useCallback(
-    ({ item }: { item: Plan }) => (
-      <View style={styles.cardContainer}>
-        <LinearGradient
-          colors={colors.cardGradient}
-          start={{ x: 1, y: 0 }}
-          end={{ x: 0, y: 1.2 }}
-          locations={[0, 0.7, 1]}
-          style={[styles.card, { shadowColor: colors.primary }]}
-        >
-          {item?.isPopular && (
-            <View
-              style={[styles.popularBadge, { backgroundColor: colors.button }]}
-            >
-              <Text style={[styles.popularText, { color: colors.buttonText }]}>
-                POPULAR
-              </Text>
-            </View>
-          )}
+    ({ item }: { item: Plan }) => {
+      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';
 
-          <Text
-            numberOfLines={1}
-            style={[styles.cardTitle, { color: colors.white }]}
+      return (
+        <View style={styles.cardContainer}>
+          <LinearGradient
+            colors={gradientConfig.colors}
+            start={gradientConfig.start}
+            end={gradientConfig.end}
+            locations={gradientConfig.locations}
+            style={cardStyle}
           >
-            {item.title}
-          </Text>
-          <Text style={[styles.price, { color: colors.white }]}>
-            {item.price}
-          </Text>
-          <Text style={[styles.per, { color: colors.white }]}>
-            {item.duration}
-          </Text>
-          <Text style={[styles.platforms, { color: colors.white }]}>
-            {item.platforms}
-          </Text>
-          {!!item.benefits?.length && (
-            <View style={styles.benefitsContainer}>
-              {item.benefits.slice(0, 4).map((benefit, i) => (
+            {isPopular && (
+              <View
+                style={[
+                  styles.popularBadge,
+                  { backgroundColor: colors.button },
+                ]}
+              >
                 <Text
-                  key={i}
-                  numberOfLines={1}
-                  style={[styles.benefit, { color: colors.white }]}
+                  style={[styles.popularText, { color: colors.buttonText }]}
                 >
-                  • {benefit}
+                  POPULAR
                 </Text>
-              ))}
-            </View>
-          )}
-          {(item.benefits?.length || item.extraDetails) && (
-            <TouchableOpacity
-              style={styles.viewDetailsButton}
-              onPress={() => openDetailsModal(item)}
-              activeOpacity={0.7}
+              </View>
+            )}
+
+            <Text
+              numberOfLines={1}
+              style={[styles.cardTitle, { color: colors.white }]}
             >
-              <Text style={[styles.viewDetailsText, { color: colors.white }]}>
-                {item.benefits && item.benefits.length > 4
-                  ? 'View More Details'
-                  : 'View Details'}
-              </Text>
-            </TouchableOpacity>
-          )}
-          <TouchableOpacity
-            style={[styles.subscribeButton, { backgroundColor: colors.button }]}
-            onPress={() => onSubscribe?.(item)}
-            activeOpacity={0.8}
-            disabled={subscribeLoadingId === item.id}
-          >
-            {subscribeLoadingId === item.id ? (
-              <ActivityIndicator size="small" color={colors.buttonText} />
-            ) : (
-              <Text
-                style={[styles.subscribeText, { color: colors.buttonText }]}
+              {item.title}
+            </Text>
+            <Text style={[styles.price, { color: colors.white }]}>
+              {item.price}
+            </Text>
+            <Text style={[styles.per, { color: colors.white }]}>
+              {item.duration}
+            </Text>
+            <Text style={[styles.platforms, { color: colors.white }]}>
+              {item.platforms}
+            </Text>
+            {hasBenefits && item.benefits && (
+              <View style={styles.benefitsContainer}>
+                {item.benefits.slice(0, 4).map((benefit, i) => (
+                  <Text
+                    key={`${item.id}-benefit-${i}`}
+                    numberOfLines={1}
+                    style={[styles.benefit, { color: colors.white }]}
+                  >
+                    • {benefit}
+                  </Text>
+                ))}
+              </View>
+            )}
+            {showViewDetails && (
+              <TouchableOpacity
+                style={styles.viewDetailsButton}
+                onPress={() => openDetailsModal(item)}
+                activeOpacity={0.7}
               >
-                {subscribeButtonText}
-              </Text>
+                <Text style={[styles.viewDetailsText, { color: colors.white }]}>
+                  {viewDetailsText}
+                </Text>
+              </TouchableOpacity>
             )}
-          </TouchableOpacity>
-        </LinearGradient>
-      </View>
-    ),
+            <TouchableOpacity
+              style={[
+                styles.subscribeButton,
+                { backgroundColor: colors.button },
+              ]}
+              onPress={() => handleSubscribe(item)}
+              activeOpacity={0.8}
+              disabled={isSubscribing}
+            >
+              {isSubscribing ? (
+                <ActivityIndicator size="small" color={colors.buttonText} />
+              ) : (
+                <Text
+                  style={[styles.subscribeText, { color: colors.buttonText }]}
+                >
+                  {subscribeButtonText}
+                </Text>
+              )}
+            </TouchableOpacity>
+          </LinearGradient>
+        </View>
+      );
+    },
     [
+      gradientConfig,
+      cardStyle,
       colors.button,
       colors.buttonText,
-      colors.cardGradient,
-      colors.primary,
       colors.white,
-      onSubscribe,
       subscribeButtonText,
       subscribeLoadingId,
       openDetailsModal,
+      handleSubscribe,
     ]
   );
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
+    <View style={containerStyle}>
       <AppHeader
         title={header.topTitle}
         onBackPress={onBackPress}
@@ -237,16 +528,14 @@ const SubscriptionSliderOne = ({
         theme={theme}
       />
       <View style={styles.content}>
-        <Text style={[styles.heading]} color={colors.textPrimary}>
+        <Text style={headingStyle} color={colors.textPrimary}>
           {header.title}
         </Text>
-        <Text style={[styles.subText, { color: colors.onSurfaceVariant }]}>
-          {header.subTitle}
-        </Text>
+        <Text style={subTextStyle}>{header.subTitle}</Text>
 
         {!plans || (plans.length === 0 && !isLoading && errorMessage) ? (
           <View style={styles.errorMessage}>
-            <Text style={{ color: colors.error }}>{errorMessage}</Text>
+            <Text style={errorMessageStyle}>{errorMessage}</Text>
           </View>
         ) : (
           <Carousel
@@ -254,39 +543,23 @@ const SubscriptionSliderOne = ({
             height={CAROUSEL_HEIGHT}
             data={isLoading ? placeholderData : sortedPlans}
             renderItem={isLoading ? renderSkeleton : renderPlan}
-            loop={
-              ((isLoading ? sortedPlans.length : sortedPlans.length) || 0) > 1
-            }
+            loop={shouldLoop}
             autoPlay={false}
             scrollAnimationDuration={500}
             mode="parallax"
-            modeConfig={{
-              parallaxScrollingOffset: Display.fullWidth * 0.21,
-              parallaxAdjacentItemScale: 0.8,
-            }}
+            modeConfig={carouselModeConfig}
           />
         )}
 
-        <Text style={[styles.info, { color: colors.onSurfaceVariant }]}>
-          {footer.title}
-        </Text>
-        <Text style={[styles.cancelText, { color: colors.onSurfaceVariant }]}>
-          {footer.subTitle}
-        </Text>
+        <Text style={infoStyle}>{footer.title}</Text>
+        <Text style={cancelTextStyle}>{footer.subTitle}</Text>
 
         {extraContentText && (
           <View style={styles.extraContentTextWrapper}>
             {React.isValidElement(extraContentText) ? (
               extraContentText
             ) : (
-              <Text
-                style={[
-                  styles.extraContentTextText,
-                  { color: colors.onSurfaceVariant },
-                ]}
-              >
-                {extraContentText}
-              </Text>
+              <Text style={extraContentTextStyle}>{extraContentText}</Text>
             )}
           </View>
         )}
@@ -298,219 +571,23 @@ const SubscriptionSliderOne = ({
           onBackButtonPress={closeDetailsModal}
           backdropOpacity={0.35}
           useNativeDriver={true}
+          useNativeDriverForBackdrop={true}
           onSwipeComplete={closeDetailsModal}
           propagateSwipe
           style={styles.modal}
+          hideModalContentWhileAnimating={true}
+          animationIn="slideInUp"
+          animationOut="slideOutDown"
+          animationInTiming={300}
+          animationOutTiming={300}
         >
-          <View
-            style={[styles.modalContent, { backgroundColor: colors.surface }]}
-          >
-            <View style={styles.modalHeader}>
-              <Text style={[styles.modalTitle, { color: colors.textPrimary }]}>
-                {selectedPlan?.title || 'Plan Details'}
-              </Text>
-              <TouchableOpacity
-                onPress={closeDetailsModal}
-                style={[
-                  styles.modalCloseButton,
-                  { backgroundColor: colors.background },
-                ]}
-                activeOpacity={0.7}
-              >
-                <X size={scale(20)} color={colors.textPrimary} />
-              </TouchableOpacity>
-            </View>
-
-            <ScrollView
-              style={styles.modalScrollView}
-              contentContainerStyle={styles.modalScrollContent}
-              showsVerticalScrollIndicator={false}
-              bounces={false}
-              scrollEventThrottle={16}
-              keyboardShouldPersistTaps="handled"
-              removeClippedSubviews={false}
-              nestedScrollEnabled={true}
-            >
-              {selectedPlan && (
-                <>
-                  <View style={[styles.modalSection, styles.modalFirstSection]}>
-                    <View
-                      style={[
-                        styles.priceHighlightBox,
-                        { backgroundColor: colors.background },
-                      ]}
-                    >
-                      <Text
-                        style={[
-                          styles.modalPriceLabel,
-                          { color: colors.textSecondary },
-                        ]}
-                      >
-                        PRICING
-                      </Text>
-                      <Text
-                        style={[
-                          styles.modalPriceValue,
-                          { color: colors.primary },
-                        ]}
-                      >
-                        {selectedPlan.price}
-                      </Text>
-                      <Text
-                        style={[
-                          styles.modalPriceDuration,
-                          { color: colors.textSecondary },
-                        ]}
-                      >
-                        per {selectedPlan.duration}
-                      </Text>
-                    </View>
-                  </View>
-
-                  <View style={[styles.modalSection]}>
-                    <Text
-                      style={[
-                        styles.modalSectionTitle,
-                        { color: colors.textPrimary },
-                      ]}
-                    >
-                      Available On
-                    </Text>
-                    <View
-                      style={[
-                        styles.platformBadge,
-                        {
-                          backgroundColor: colors.surface,
-                          borderColor: colors.primary,
-                        },
-                      ]}
-                    >
-                      <Text
-                        style={[
-                          styles.platformBadgeText,
-                          { color: colors.textPrimary },
-                        ]}
-                      >
-                        {selectedPlan.platforms}
-                      </Text>
-                    </View>
-                  </View>
-
-                  {selectedPlan.benefits &&
-                    selectedPlan.benefits.length > 0 && (
-                      <View style={styles.modalSection}>
-                        <Text
-                          style={[
-                            styles.modalSectionTitle,
-                            { color: colors.textPrimary },
-                          ]}
-                        >
-                          Benefits
-                        </Text>
-                        {selectedPlan.benefits.map((benefit, index) => (
-                          <View key={index} style={styles.benefitRow}>
-                            <Text
-                              style={[
-                                styles.benefitBullet,
-                                { color: colors.primary },
-                              ]}
-                            >
-                              •
-                            </Text>
-                            <Text
-                              style={[
-                                styles.benefitText,
-                                { color: colors.textSecondary },
-                              ]}
-                            >
-                              {benefit}
-                            </Text>
-                          </View>
-                        ))}
-                      </View>
-                    )}
-
-                  {selectedPlan.extraDetails?.description && (
-                    <View style={styles.modalSection}>
-                      <Text
-                        style={[
-                          styles.modalSectionTitle,
-                          { color: colors.textPrimary },
-                        ]}
-                      >
-                        Description
-                      </Text>
-                      <Text
-                        style={[
-                          styles.modalSectionValue,
-                          { color: colors.textSecondary },
-                        ]}
-                      >
-                        {selectedPlan.extraDetails.description}
-                      </Text>
-                    </View>
-                  )}
-
-                  {selectedPlan.extraDetails?.features &&
-                    selectedPlan.extraDetails.features.length > 0 && (
-                      <View style={styles.modalSection}>
-                        <Text
-                          style={[
-                            styles.modalSectionTitle,
-                            { color: colors.textPrimary },
-                          ]}
-                        >
-                          Features
-                        </Text>
-                        {selectedPlan.extraDetails.features.map(
-                          (feature, index) => (
-                            <View key={index} style={styles.benefitRow}>
-                              <Text
-                                style={[
-                                  styles.benefitBullet,
-                                  { color: colors.primary },
-                                ]}
-                              >
-                                ✓
-                              </Text>
-                              <Text
-                                style={[
-                                  styles.benefitText,
-                                  { color: colors.textSecondary },
-                                ]}
-                              >
-                                {feature}
-                              </Text>
-                            </View>
-                          )
-                        )}
-                      </View>
-                    )}
-
-                  {selectedPlan.extraDetails?.terms && (
-                    <View style={styles.modalSection}>
-                      <Text
-                        style={[
-                          styles.modalSectionTitle,
-                          { color: colors.textPrimary },
-                        ]}
-                      >
-                        Terms & Conditions
-                      </Text>
-                      <Text
-                        style={[
-                          styles.modalSectionValue,
-                          { color: colors.textSecondary },
-                        ]}
-                      >
-                        {selectedPlan.extraDetails.terms}
-                      </Text>
-                    </View>
-                  )}
-                </>
-              )}
-            </ScrollView>
-          </View>
+          {selectedPlan && (
+            <PlanDetailsModalContent
+              plan={selectedPlan}
+              colors={modalColors}
+              onClose={closeDetailsModal}
+            />
+          )}
         </Modal>
       </View>
     </View>