@zezosoft/zezo-ott-react-native-ui-kit 1.3.5 → 1.3.6

package/src/components/Subscription/components/SubsDetailsModal.tsx

@@ -0,0 +1,347 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { memo, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  type TouchableOpacityProps,
+  type PressableProps,
+} from 'react-native';
+import Modal from 'react-native-modal';
+import { X } from 'lucide-react-native';
+import { Text } from '../../Text';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { Plan } from './SubscriptionCard';
+
+type Props = {
+  plan: Plan;
+  colors: {
+    surface: string;
+    background: string;
+    textPrimary: string;
+    textSecondary: string;
+    primary: string;
+  };
+  trigger?: React.ReactElement<PressableProps | TouchableOpacityProps>;
+};
+
+export const SubsDetailsModal = memo(({ plan, colors, trigger }: Props) => {
+  const [visible, setVisible] = useState(false);
+
+  const open = () => setVisible(true);
+  const close = () => setVisible(false);
+
+  const renderTrigger = () => {
+    if (trigger) {
+      return React.cloneElement(trigger, {
+        onPress: open,
+      });
+    }
+
+    // default button
+    return (
+      <TouchableOpacity onPress={open} style={styles.defaultBtn}>
+        <Text style={[styles.defaultBtnText, { color: colors.primary }]}>
+          View Details
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View>
+      {renderTrigger()}
+
+      <Modal
+        isVisible={visible}
+        onBackdropPress={close}
+        onBackButtonPress={close}
+        onSwipeComplete={close}
+        backdropOpacity={0.35}
+        style={styles.modalWrapper}
+        useNativeDriver
+        useNativeDriverForBackdrop
+        hideModalContentWhileAnimating
+        animationIn="slideInUp"
+        animationOut="slideOutDown"
+      >
+        <View style={[styles.container, { backgroundColor: colors.surface }]}>
+          {/* Header */}
+          <View style={styles.header}>
+            <Text style={[styles.title, { color: colors.textPrimary }]}>
+              {plan.title || 'Plan Details'}
+            </Text>
+
+            <TouchableOpacity
+              onPress={close}
+              style={[styles.closeBtn, { backgroundColor: colors.background }]}
+            >
+              <X size={scale(20)} color={colors.textPrimary} />
+            </TouchableOpacity>
+          </View>
+
+          {/* Content */}
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.scrollContent}
+          >
+            {/* Pricing */}
+            <View style={styles.section}>
+              <View
+                style={[
+                  styles.priceCard,
+                  { backgroundColor: colors.background },
+                ]}
+              >
+                <Text
+                  style={[styles.priceLabel, { color: colors.textSecondary }]}
+                >
+                  PRICING
+                </Text>
+
+                <Text style={[styles.priceValue, { color: colors.primary }]}>
+                  {plan.price}
+                </Text>
+
+                <Text
+                  style={[
+                    styles.priceDuration,
+                    { color: colors.textSecondary },
+                  ]}
+                >
+                  per {plan.duration}
+                </Text>
+              </View>
+            </View>
+
+            {/* Platform */}
+            <View style={styles.section}>
+              <Text
+                style={[styles.sectionTitle, { color: colors.textPrimary }]}
+              >
+                Available On
+              </Text>
+
+              <View style={[styles.badge, { borderColor: colors.primary }]}>
+                <Text style={[styles.badgeText, { color: colors.textPrimary }]}>
+                  {plan.platforms}
+                </Text>
+              </View>
+            </View>
+
+            {/* Benefits */}
+            {!!plan.benefits?.length && (
+              <View style={styles.section}>
+                <Text
+                  style={[styles.sectionTitle, { color: colors.textPrimary }]}
+                >
+                  Benefits
+                </Text>
+
+                {plan.benefits.map((item, i) => (
+                  <View key={i} style={styles.row}>
+                    <Text style={[styles.bullet, { color: colors.primary }]}>
+                      •
+                    </Text>
+                    <Text
+                      style={[styles.rowText, { color: colors.textSecondary }]}
+                    >
+                      {item}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+            )}
+
+            {/* Description */}
+            {!!plan.extraDetails?.description && (
+              <View style={styles.section}>
+                <Text
+                  style={[styles.sectionTitle, { color: colors.textPrimary }]}
+                >
+                  Description
+                </Text>
+
+                <Text
+                  style={[styles.description, { color: colors.textSecondary }]}
+                >
+                  {plan.extraDetails.description}
+                </Text>
+              </View>
+            )}
+
+            {/* Features */}
+            {!!plan.extraDetails?.features?.length && (
+              <View style={styles.section}>
+                <Text
+                  style={[styles.sectionTitle, { color: colors.textPrimary }]}
+                >
+                  Features
+                </Text>
+
+                {plan.extraDetails.features.map((item, i) => (
+                  <View key={i} style={styles.row}>
+                    <Text style={[styles.bullet, { color: colors.primary }]}>
+                      ✓
+                    </Text>
+                    <Text
+                      style={[styles.rowText, { color: colors.textSecondary }]}
+                    >
+                      {item}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+            )}
+
+            {/* Terms */}
+            {!!plan.extraDetails?.terms && (
+              <View style={styles.section}>
+                <Text
+                  style={[styles.sectionTitle, { color: colors.textPrimary }]}
+                >
+                  Terms & Conditions
+                </Text>
+
+                <Text
+                  style={[styles.description, { color: colors.textSecondary }]}
+                >
+                  {plan.extraDetails.terms}
+                </Text>
+              </View>
+            )}
+          </ScrollView>
+        </View>
+      </Modal>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  modalWrapper: {
+    margin: 0,
+    justifyContent: 'flex-end',
+  },
+
+  container: {
+    borderTopLeftRadius: moderateScale(24),
+    borderTopRightRadius: moderateScale(24),
+    maxHeight: '85%',
+    minHeight: '40%',
+    paddingBottom: verticalScale(20),
+  },
+
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: scale(20),
+    paddingTop: verticalScale(16),
+  },
+
+  title: {
+    fontSize: RFValue(18),
+    lineHeight: RFValue(24),
+    fontWeight: '700',
+    flex: 1,
+  },
+
+  closeBtn: {
+    width: scale(30),
+    height: scale(30),
+    borderRadius: scale(20),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  scrollContent: {
+    paddingHorizontal: scale(20),
+    paddingTop: verticalScale(16),
+    paddingBottom: verticalScale(24),
+  },
+
+  section: {
+    marginBottom: verticalScale(14),
+  },
+
+  sectionTitle: {
+    fontSize: RFValue(15.5),
+    lineHeight: RFValue(22),
+    fontWeight: '600',
+    marginBottom: verticalScale(8),
+  },
+
+  description: {
+    fontSize: RFValue(14),
+    lineHeight: RFValue(21),
+  },
+
+  row: {
+    flexDirection: 'row',
+    marginBottom: verticalScale(8),
+  },
+
+  bullet: {
+    fontSize: RFValue(14),
+    marginRight: scale(8),
+    marginTop: 2,
+  },
+
+  rowText: {
+    flex: 1,
+    fontSize: RFValue(13.5),
+    lineHeight: RFValue(20),
+  },
+
+  priceCard: {
+    borderRadius: scale(16),
+    padding: scale(20),
+    alignItems: 'center',
+  },
+
+  priceLabel: {
+    fontSize: RFValue(11),
+    letterSpacing: 1,
+    marginBottom: verticalScale(6),
+  },
+
+  priceValue: {
+    fontSize: RFValue(34),
+    fontWeight: '800',
+  },
+
+  priceDuration: {
+    fontSize: RFValue(13),
+    lineHeight: RFValue(18),
+  },
+
+  badge: {
+    alignSelf: 'flex-start',
+    paddingHorizontal: scale(12),
+    paddingVertical: verticalScale(8),
+    borderRadius: scale(12),
+    borderWidth: 1,
+  },
+
+  badgeText: {
+    fontSize: RFValue(12.5),
+    lineHeight: RFValue(16),
+    fontWeight: '600',
+  },
+
+  defaultBtn: {
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: scale(12),
+  },
+
+  defaultBtnText: {
+    fontSize: RFValue(13),
+    fontWeight: '600',
+  },
+});

package/src/components/Subscription/components/SubscriptionCard.tsx

@@ -0,0 +1,342 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { memo, useMemo } from 'react';
+import { ActivityIndicator, TouchableOpacity, StyleSheet } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+
+import { View } from '../../View';
+import { Text } from '../../Text';
+
+import type { ITheme } from '../../../theme';
+
+import { scale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { SubsDetailsModal } from './SubsDetailsModal';
+
+export type Plan = {
+  id: string;
+  title: string;
+  price: string;
+  duration: string;
+  platforms: string;
+  benefits?: string[];
+  isPopular?: boolean;
+  extraDetails?: {
+    description?: string;
+    features?: string[];
+    terms?: string;
+    [key: string]: any;
+  };
+};
+
+export const SubscriptionCard = memo(
+  ({
+    plan,
+    colors,
+    onSubscribe,
+    isProcessing = false,
+    isLoading = false,
+    subscribeButtonText = 'Subscribe',
+  }: {
+    plan: Plan;
+    isProcessing?: boolean;
+    isLoading?: boolean;
+    colors: ITheme['colors'];
+    onSubscribe?: (plan: Plan) => void;
+    subscribeButtonText?: string;
+  }) => {
+    const gradientConfig = useMemo(
+      () => ({
+        colors: colors.cardGradient,
+        start: { x: 1, y: 0 },
+        end: { x: 0, y: 1 },
+      }),
+      [colors.cardGradient]
+    );
+
+    const planBenefits = plan?.benefits ?? [];
+    const hasPlanBenefits = planBenefits.length > 0;
+    const hasPlanDetails = hasPlanBenefits || !!plan?.extraDetails;
+
+    const textOnDark = colors.white
+      ? { color: colors.white }
+      : styles.textOnDark;
+
+    if (isLoading) {
+      return (
+        <View>
+          <SkeletonPlaceholder
+            backgroundColor={colors.skeletonBaseColor}
+            highlightColor={colors.skeletonHighlightColor}
+          >
+            <SkeletonPlaceholder.Item
+              style={styles.cardContainer}
+              borderRadius={20}
+            />
+          </SkeletonPlaceholder>
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.cardContainer}>
+        <LinearGradient {...gradientConfig} style={styles.cardGradient} />
+        <View style={styles.cardOverlay} />
+
+        {plan?.isPopular && (
+          <View
+            style={[styles.badgeContainer, { backgroundColor: colors.button }]}
+          >
+            <Text
+              style={[styles.badgeText, { color: colors.buttonText }]}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              POPULAR
+            </Text>
+          </View>
+        )}
+
+        {/* Title */}
+        <Text
+          style={[styles.planTitle, textOnDark]}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {plan.title}
+        </Text>
+
+        {/* Price */}
+        <View style={styles.priceContainer}>
+          <Text
+            style={[styles.planPrice, textOnDark]}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {plan.price}
+          </Text>
+
+          <Text
+            style={[styles.planDuration, textOnDark]}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            /{plan.duration}
+          </Text>
+        </View>
+
+        {/* Platform */}
+        <Text
+          style={[styles.planPlatform, textOnDark]}
+          numberOfLines={2}
+          ellipsizeMode="tail"
+        >
+          {plan.platforms}
+        </Text>
+
+        {/* Benefits */}
+        {hasPlanBenefits && (
+          <View style={styles.benefitsContainer}>
+            {planBenefits.slice(0, 4).map((benefit, index) => (
+              <Text
+                key={index}
+                style={[styles.benefitText, textOnDark]}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+              >
+                • {benefit}
+              </Text>
+            ))}
+          </View>
+        )}
+
+        {/* Details */}
+        {hasPlanDetails && (
+          <SubsDetailsModal
+            colors={colors}
+            plan={plan}
+            trigger={
+              <TouchableOpacity
+                activeOpacity={0.7}
+                style={styles.detailsButton}
+              >
+                <Text
+                  style={[styles.detailsText, textOnDark]}
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  View More Details
+                </Text>
+              </TouchableOpacity>
+            }
+          />
+        )}
+
+        {/* Subscribe Button */}
+        <TouchableOpacity
+          style={[styles.subscribeButton, { backgroundColor: colors.button }]}
+          onPress={() => onSubscribe?.(plan)}
+          disabled={isProcessing}
+          activeOpacity={0.85}
+        >
+          <View style={styles.buttonContent}>
+            {isProcessing && (
+              <ActivityIndicator
+                size="small"
+                color={colors.buttonText}
+                style={styles.loader}
+              />
+            )}
+
+            <Text
+              style={[styles.subscribeButtonText, { color: colors.buttonText }]}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {isProcessing ? 'Subscribing...' : subscribeButtonText}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    width: '100%',
+    borderRadius: scale(20),
+    paddingVertical: verticalScale(20),
+    paddingHorizontal: scale(16),
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    overflow: 'hidden',
+    aspectRatio: 1,
+  },
+
+  cardGradient: {
+    ...StyleSheet.absoluteFill,
+  },
+
+  cardOverlay: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: 'rgba(0,0,0,0.03)',
+  },
+
+  textOnDark: {
+    color: '#FFFFFF',
+  },
+
+  planTitle: {
+    fontSize: RFValue(20),
+    lineHeight: RFValue(26),
+    fontWeight: '800',
+    textAlign: 'center',
+    marginBottom: verticalScale(6),
+    flexShrink: 1,
+  },
+
+  priceContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginBottom: verticalScale(4),
+  },
+
+  planPrice: {
+    fontSize: RFValue(30),
+    fontWeight: '900',
+    flexShrink: 1,
+  },
+
+  planDuration: {
+    fontSize: RFValue(16),
+    fontWeight: '600',
+    marginLeft: scale(4),
+    marginBottom: verticalScale(3),
+    opacity: 0.9,
+    flexShrink: 1,
+  },
+
+  planPlatform: {
+    fontSize: RFValue(13),
+    lineHeight: RFValue(18),
+    fontWeight: '500',
+    textAlign: 'center',
+    marginBottom: verticalScale(8),
+    opacity: 0.9,
+    flexShrink: 1,
+  },
+
+  benefitsContainer: {
+    alignItems: 'center',
+    marginBottom: verticalScale(8),
+    paddingHorizontal: scale(10),
+  },
+
+  benefitText: {
+    fontSize: RFValue(13),
+    fontWeight: '500',
+    lineHeight: RFValue(18),
+    marginBottom: verticalScale(3),
+    textAlign: 'center',
+    flexShrink: 1,
+  },
+
+  detailsButton: {
+    marginBottom: verticalScale(10),
+  },
+
+  detailsText: {
+    fontSize: RFValue(12),
+    lineHeight: RFValue(16),
+    fontWeight: '500',
+    textDecorationLine: 'underline',
+    opacity: 0.95,
+    flexShrink: 1,
+  },
+
+  subscribeButton: {
+    width: '85%',
+    paddingVertical: verticalScale(13),
+    borderRadius: scale(24),
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 3,
+  },
+
+  subscribeButtonText: {
+    fontSize: RFValue(14),
+    fontWeight: '700',
+    letterSpacing: 0.3,
+    flexShrink: 1,
+  },
+
+  badgeContainer: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 12,
+  },
+
+  badgeText: {
+    fontSize: RFValue(9),
+    fontWeight: '700',
+    letterSpacing: 0.5,
+  },
+
+  buttonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  loader: {
+    marginRight: scale(8),
+  },
+});

package/src/components/Subscription/index.ts

@@ -0,0 +1,12 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import SubscriptionOne from './SubOne';
+
+const Subscription = {
+  One: SubscriptionOne,
+};
+
+export { Subscription };