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

package/src/components/Subscription/SubOne.tsx

@@ -3,18 +3,22 @@
  * @lastModified Mon 21 Jul 2025 at 04:55 PM
  */
 
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import {
   View,
   StyleSheet,
   TouchableOpacity,
   ActivityIndicator,
+  ScrollView,
+  Dimensions,
 } from 'react-native';
 import Carousel from 'react-native-reanimated-carousel';
-import { scale, verticalScale } from 'react-native-size-matters';
+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 { Text } from '../Text';
 import AppHeader from '../Headers/AppHeader';
 import { useInternalTheme } from '../../theme/hook/useInternalTheme';
@@ -30,6 +34,12 @@ export type Plan = {
   platforms: string;
   benefits?: string[];
   isPopular?: boolean;
+  extraDetails?: {
+    description?: string;
+    features?: string[];
+    terms?: string;
+    [key: string]: any;
+  };
 };
 
 type SubscriptionSliderOneProps = {
@@ -71,6 +81,8 @@ const SubscriptionSliderOne = ({
 }: SubscriptionSliderOneProps) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
   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(() => {
@@ -113,6 +125,16 @@ const SubscriptionSliderOne = ({
     [colors.skeletonBaseColor, colors.skeletonHighlightColor]
   );
 
+  const openDetailsModal = useCallback((plan: Plan) => {
+    setSelectedPlan(plan);
+    setIsModalVisible(true);
+  }, []);
+
+  const closeDetailsModal = useCallback(() => {
+    setIsModalVisible(false);
+    setSelectedPlan(null);
+  }, []);
+
   const renderPlan = useCallback(
     ({ item }: { item: Plan }) => (
       <View style={styles.cardContainer}>
@@ -133,7 +155,10 @@ const SubscriptionSliderOne = ({
             </View>
           )}
 
-          <Text style={[styles.cardTitle, { color: colors.white }]}>
+          <Text
+            numberOfLines={1}
+            style={[styles.cardTitle, { color: colors.white }]}
+          >
             {item.title}
           </Text>
           <Text style={[styles.price, { color: colors.white }]}>
@@ -147,13 +172,30 @@ const SubscriptionSliderOne = ({
           </Text>
           {!!item.benefits?.length && (
             <View style={styles.benefitsContainer}>
-              {item.benefits.map((benefit, i) => (
-                <Text key={i} style={[styles.benefit, { color: colors.white }]}>
+              {item.benefits.slice(0, 4).map((benefit, i) => (
+                <Text
+                  key={i}
+                  numberOfLines={1}
+                  style={[styles.benefit, { color: colors.white }]}
+                >
                   • {benefit}
                 </Text>
               ))}
             </View>
           )}
+          {(item.benefits?.length || item.extraDetails) && (
+            <TouchableOpacity
+              style={styles.viewDetailsButton}
+              onPress={() => openDetailsModal(item)}
+              activeOpacity={0.7}
+            >
+              <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)}
@@ -182,6 +224,7 @@ const SubscriptionSliderOne = ({
       onSubscribe,
       subscribeButtonText,
       subscribeLoadingId,
+      openDetailsModal,
     ]
   );
 
@@ -247,6 +290,228 @@ const SubscriptionSliderOne = ({
             )}
           </View>
         )}
+
+        {/* Details Modal */}
+        <Modal
+          isVisible={isModalVisible}
+          onBackdropPress={closeDetailsModal}
+          onBackButtonPress={closeDetailsModal}
+          backdropOpacity={0.35}
+          useNativeDriver={true}
+          onSwipeComplete={closeDetailsModal}
+          propagateSwipe
+          style={styles.modal}
+        >
+          <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>
+        </Modal>
       </View>
     </View>
   );
@@ -306,7 +571,10 @@ const styles = StyleSheet.create({
   cardTitle: {
     fontSize: RFValue(17),
     fontWeight: '700',
+    maxWidth: '50%',
+    marginHorizontal: 'auto',
     marginBottom: verticalScale(8),
+    textAlign: 'center',
   },
   price: {
     fontSize: RFValue(43),
@@ -328,7 +596,8 @@ const styles = StyleSheet.create({
     marginTop: verticalScale(8),
     alignItems: 'flex-start',
     justifyContent: 'center',
-    paddingHorizontal: scale(16),
+    width: '60%',
+    marginHorizontal: 'auto',
   },
   benefit: {
     fontSize: RFValue(12),
@@ -338,7 +607,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(60),
     borderRadius: scale(30),
     alignItems: 'center',
-    marginTop: verticalScale(15),
+    marginTop: verticalScale(5),
   },
   subscribeText: {
     fontSize: RFValue(14),
@@ -372,16 +641,157 @@ const styles = StyleSheet.create({
   },
   popularBadge: {
     position: 'absolute',
-    top: verticalScale(12),
-    right: scale(12),
-    paddingHorizontal: scale(10),
-    paddingVertical: verticalScale(4),
+    top: verticalScale(10),
+    right: scale(10),
+    paddingHorizontal: scale(6),
+    paddingVertical: verticalScale(3),
     borderRadius: scale(12),
     zIndex: 10,
   },
   popularText: {
-    fontSize: RFValue(12),
+    fontSize: RFValue(9),
     textTransform: 'uppercase',
     fontWeight: '700',
   },
+  viewDetailsButton: {
+    paddingVertical: verticalScale(6),
+    paddingHorizontal: scale(20),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  viewDetailsText: {
+    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,
+    opacity: 0.9,
+  },
+  modalSectionValue: {
+    fontSize: RFValue(15),
+    lineHeight: RFValue(20),
+    letterSpacing: 0.2,
+    opacity: 0.85,
+  },
+  benefitRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: verticalScale(10),
+    paddingRight: scale(8),
+    paddingLeft: scale(4),
+  },
+  benefitBullet: {
+    fontSize: RFValue(16),
+    marginRight: scale(10),
+    fontWeight: '600',
+  },
+  benefitText: {
+    fontSize: RFValue(12),
+    flex: 1,
+    letterSpacing: 0.2,
+    textTransform: 'capitalize',
+    opacity: 0.85,
+  },
+  priceHighlightBox: {
+    borderRadius: scale(16),
+    padding: scale(20),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  modalPriceLabel: {
+    fontSize: RFValue(12),
+    fontWeight: '700',
+    letterSpacing: 1.2,
+    marginBottom: verticalScale(8),
+    opacity: 0.7,
+  },
+  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)',
+  },
+  platformBadgeText: {
+    fontSize: RFValue(12),
+    fontWeight: '600',
+    letterSpacing: 0.3,
+    textTransform: 'capitalize',
+  },
 });