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

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

@@ -19,9 +19,163 @@ 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, Fragment as _Fragment } from "react/jsx-runtime";
+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
+const parsePrice = price => parseFloat(price.replace(/[^\d.]/g, '')) || 0;
 const SubscriptionSliderOne = ({
   theme,
   onSubscribe,
@@ -41,7 +195,6 @@ const SubscriptionSliderOne = ({
   const colors = appliedTheme.colors;
   const [selectedPlan, setSelectedPlan] = useState(null);
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const parsePrice = price => parseFloat(price.replace(/[^\d.]/g, '')) || 0;
   const sortedPlans = useMemo(() => {
     return [...plans].sort((a, b) => {
       const aPopular = a?.isPopular ? 1 : 0;
@@ -55,119 +208,173 @@ const SubscriptionSliderOne = ({
       return 0;
     });
   }, [plans]);
-  const placeholderData = useMemo(() => new Array(plans.length || 3).fill({}), [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: colors.skeletonBaseColor,
-      highlightColor: colors.skeletonHighlightColor,
+      backgroundColor: skeletonColors.backgroundColor,
+      highlightColor: skeletonColors.highlightColor,
       children: /*#__PURE__*/_jsx(View, {
         style: styles.card
       })
     })
-  }), [colors.skeletonBaseColor, colors.skeletonHighlightColor]);
+  }), [skeletonColors]);
   const openDetailsModal = useCallback(plan => {
     setSelectedPlan(plan);
     setIsModalVisible(true);
   }, []);
   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]
+  }), [colors.cardGradient]);
+  const cardStyle = useMemo(() => [styles.card, {
+    shadowColor: colors.primary
+  }], [colors.primary]);
+  const handleSubscribe = useCallback(item => {
+    onSubscribe?.(item);
+  }, [onSubscribe]);
   const renderPlan = useCallback(({
     item
-  }) => /*#__PURE__*/_jsx(View, {
-    style: styles.cardContainer,
-    children: /*#__PURE__*/_jsxs(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
-      }],
-      children: [item?.isPopular && /*#__PURE__*/_jsx(View, {
-        style: [styles.popularBadge, {
-          backgroundColor: colors.button
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.popularText, {
-            color: colors.buttonText
+  }) => {
+    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
           }],
-          children: "POPULAR"
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        numberOfLines: 1,
-        style: [styles.cardTitle, {
-          color: colors.white
-        }],
-        children: item.title
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.price, {
-          color: colors.white
-        }],
-        children: item.price
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.per, {
-          color: colors.white
-        }],
-        children: item.duration
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.platforms, {
-          color: colors.white
-        }],
-        children: item.platforms
-      }), !!item.benefits?.length && /*#__PURE__*/_jsx(View, {
-        style: styles.benefitsContainer,
-        children: item.benefits.slice(0, 4).map((benefit, i) => /*#__PURE__*/_jsxs(Text, {
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.popularText, {
+              color: colors.buttonText
+            }],
+            children: "POPULAR"
+          })
+        }), /*#__PURE__*/_jsx(Text, {
           numberOfLines: 1,
-          style: [styles.benefit, {
+          style: [styles.cardTitle, {
             color: colors.white
           }],
-          children: ["\u2022 ", benefit]
-        }, i))
-      }), (item.benefits?.length || item.extraDetails) && /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.viewDetailsButton,
-        onPress: () => openDetailsModal(item),
-        activeOpacity: 0.7,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.viewDetailsText, {
+          children: item.title
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.price, {
             color: colors.white
           }],
-          children: item.benefits && item.benefits.length > 4 ? 'View More Details' : 'View Details'
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.subscribeButton, {
-          backgroundColor: colors.button
-        }],
-        onPress: () => onSubscribe?.(item),
-        activeOpacity: 0.8,
-        disabled: subscribeLoadingId === item.id,
-        children: subscribeLoadingId === item.id ? /*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: colors.buttonText
-        }) : /*#__PURE__*/_jsx(Text, {
-          style: [styles.subscribeText, {
-            color: colors.buttonText
+          children: item.price
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.per, {
+            color: colors.white
           }],
-          children: subscribeButtonText
-        })
-      })]
-    })
-  }), [colors.button, colors.buttonText, colors.cardGradient, colors.primary, colors.white, onSubscribe, subscribeButtonText, subscribeLoadingId, openDetailsModal]);
+          children: item.duration
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.platforms, {
+            color: colors.white
+          }],
+          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: ["\u2022 ", benefit]
+          }, `${item.id}-benefit-${i}`))
+        }), showViewDetails && /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.viewDetailsButton,
+          onPress: () => openDetailsModal(item),
+          activeOpacity: 0.7,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.viewDetailsText, {
+              color: colors.white
+            }],
+            children: viewDetailsText
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.subscribeButton, {
+            backgroundColor: colors.button
+          }],
+          onPress: () => handleSubscribe(item),
+          activeOpacity: 0.8,
+          disabled: isSubscribing,
+          children: isSubscribing ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            size: "small",
+            color: colors.buttonText
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: [styles.subscribeText, {
+              color: colors.buttonText
+            }],
+            children: subscribeButtonText
+          })
+        })]
+      })
+    });
+  }, [gradientConfig, cardStyle, colors.button, colors.buttonText, colors.white, subscribeButtonText, subscribeLoadingId, openDetailsModal, handleSubscribe]);
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, {
-      backgroundColor: colors.background
-    }],
+    style: containerStyle,
     children: [/*#__PURE__*/_jsx(AppHeader, {
       title: header.topTitle,
       onBackPress: onBackPress,
@@ -176,20 +383,16 @@ const SubscriptionSliderOne = ({
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.content,
       children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.heading],
+        style: headingStyle,
         color: colors.textPrimary,
         children: header.title
       }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.subText, {
-          color: colors.onSurfaceVariant
-        }],
+        style: subTextStyle,
         children: header.subTitle
       }), !plans || plans.length === 0 && !isLoading && errorMessage ? /*#__PURE__*/_jsx(View, {
         style: styles.errorMessage,
         children: /*#__PURE__*/_jsx(Text, {
-          style: {
-            color: colors.error
-          },
+          style: errorMessageStyle,
           children: errorMessage
         })
       }) : /*#__PURE__*/_jsx(Carousel, {
@@ -197,30 +400,21 @@ 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
       }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.info, {
-          color: colors.onSurfaceVariant
-        }],
+        style: infoStyle,
         children: footer.title
       }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.cancelText, {
-          color: colors.onSurfaceVariant
-        }],
+        style: cancelTextStyle,
         children: footer.subTitle
       }), extraContentText && /*#__PURE__*/_jsx(View, {
         style: styles.extraContentTextWrapper,
         children: /*#__PURE__*/React.isValidElement(extraContentText) ? extraContentText : /*#__PURE__*/_jsx(Text, {
-          style: [styles.extraContentTextText, {
-            color: colors.onSurfaceVariant
-          }],
+          style: extraContentTextStyle,
           children: extraContentText
         })
       }), /*#__PURE__*/_jsx(Modal, {
@@ -229,154 +423,19 @@ const SubscriptionSliderOne = ({
         onBackButtonPress: closeDetailsModal,
         backdropOpacity: 0.35,
         useNativeDriver: true,
+        useNativeDriverForBackdrop: true,
         onSwipeComplete: closeDetailsModal,
         propagateSwipe: true,
         style: styles.modal,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: [styles.modalContent, {
-            backgroundColor: colors.surface
-          }],
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.modalHeader,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.modalTitle, {
-                color: colors.textPrimary
-              }],
-              children: selectedPlan?.title || 'Plan Details'
-            }), /*#__PURE__*/_jsx(TouchableOpacity, {
-              onPress: closeDetailsModal,
-              style: [styles.modalCloseButton, {
-                backgroundColor: colors.background
-              }],
-              activeOpacity: 0.7,
-              children: /*#__PURE__*/_jsx(X, {
-                size: scale(20),
-                color: colors.textPrimary
-              })
-            })]
-          }), /*#__PURE__*/_jsx(ScrollView, {
-            style: styles.modalScrollView,
-            contentContainerStyle: styles.modalScrollContent,
-            showsVerticalScrollIndicator: false,
-            bounces: false,
-            scrollEventThrottle: 16,
-            keyboardShouldPersistTaps: "handled",
-            removeClippedSubviews: false,
-            nestedScrollEnabled: true,
-            children: selectedPlan && /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [styles.modalSection, styles.modalFirstSection],
-                children: /*#__PURE__*/_jsxs(View, {
-                  style: [styles.priceHighlightBox, {
-                    backgroundColor: colors.background
-                  }],
-                  children: [/*#__PURE__*/_jsx(Text, {
-                    style: [styles.modalPriceLabel, {
-                      color: colors.textSecondary
-                    }],
-                    children: "PRICING"
-                  }), /*#__PURE__*/_jsx(Text, {
-                    style: [styles.modalPriceValue, {
-                      color: colors.primary
-                    }],
-                    children: selectedPlan.price
-                  }), /*#__PURE__*/_jsxs(Text, {
-                    style: [styles.modalPriceDuration, {
-                      color: colors.textSecondary
-                    }],
-                    children: ["per ", selectedPlan.duration]
-                  })]
-                })
-              }), /*#__PURE__*/_jsxs(View, {
-                style: [styles.modalSection],
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: [styles.modalSectionTitle, {
-                    color: colors.textPrimary
-                  }],
-                  children: "Available On"
-                }), /*#__PURE__*/_jsx(View, {
-                  style: [styles.platformBadge, {
-                    backgroundColor: colors.surface,
-                    borderColor: colors.primary
-                  }],
-                  children: /*#__PURE__*/_jsx(Text, {
-                    style: [styles.platformBadgeText, {
-                      color: colors.textPrimary
-                    }],
-                    children: selectedPlan.platforms
-                  })
-                })]
-              }), selectedPlan.benefits && selectedPlan.benefits.length > 0 && /*#__PURE__*/_jsxs(View, {
-                style: styles.modalSection,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: [styles.modalSectionTitle, {
-                    color: colors.textPrimary
-                  }],
-                  children: "Benefits"
-                }), selectedPlan.benefits.map((benefit, index) => /*#__PURE__*/_jsxs(View, {
-                  style: styles.benefitRow,
-                  children: [/*#__PURE__*/_jsx(Text, {
-                    style: [styles.benefitBullet, {
-                      color: colors.primary
-                    }],
-                    children: "\u2022"
-                  }), /*#__PURE__*/_jsx(Text, {
-                    style: [styles.benefitText, {
-                      color: colors.textSecondary
-                    }],
-                    children: benefit
-                  })]
-                }, index))]
-              }), selectedPlan.extraDetails?.description && /*#__PURE__*/_jsxs(View, {
-                style: styles.modalSection,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: [styles.modalSectionTitle, {
-                    color: colors.textPrimary
-                  }],
-                  children: "Description"
-                }), /*#__PURE__*/_jsx(Text, {
-                  style: [styles.modalSectionValue, {
-                    color: colors.textSecondary
-                  }],
-                  children: selectedPlan.extraDetails.description
-                })]
-              }), selectedPlan.extraDetails?.features && selectedPlan.extraDetails.features.length > 0 && /*#__PURE__*/_jsxs(View, {
-                style: styles.modalSection,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: [styles.modalSectionTitle, {
-                    color: colors.textPrimary
-                  }],
-                  children: "Features"
-                }), selectedPlan.extraDetails.features.map((feature, index) => /*#__PURE__*/_jsxs(View, {
-                  style: styles.benefitRow,
-                  children: [/*#__PURE__*/_jsx(Text, {
-                    style: [styles.benefitBullet, {
-                      color: colors.primary
-                    }],
-                    children: "\u2713"
-                  }), /*#__PURE__*/_jsx(Text, {
-                    style: [styles.benefitText, {
-                      color: colors.textSecondary
-                    }],
-                    children: feature
-                  })]
-                }, index))]
-              }), selectedPlan.extraDetails?.terms && /*#__PURE__*/_jsxs(View, {
-                style: styles.modalSection,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: [styles.modalSectionTitle, {
-                    color: colors.textPrimary
-                  }],
-                  children: "Terms & Conditions"
-                }), /*#__PURE__*/_jsx(Text, {
-                  style: [styles.modalSectionValue, {
-                    color: colors.textSecondary
-                  }],
-                  children: selectedPlan.extraDetails.terms
-                })]
-              })]
-            })
-          })]
+        hideModalContentWhileAnimating: true,
+        animationIn: "slideInUp",
+        animationOut: "slideOutDown",
+        animationInTiming: 300,
+        animationOutTiming: 300,
+        children: selectedPlan && /*#__PURE__*/_jsx(PlanDetailsModalContent, {
+          plan: selectedPlan,
+          colors: modalColors,
+          onClose: closeDetailsModal
         })
       })]
     })]