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

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

@@ -1,347 +0,0 @@
-/**
- * @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

@@ -1,342 +0,0 @@
-/**
- * @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

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