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

package/src/components/Subscription/SubOne.tsx

@@ -1,423 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import { memo, useCallback } from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-  Dimensions,
-  ScrollView,
-} from 'react-native';
-import Carousel from 'react-native-reanimated-carousel';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Text } from '../Text';
-import AppHeader from '../Headers/AppHeader';
-import { useTheme } from '../../theme';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { SubscriptionCard, type Plan } from './components/SubscriptionCard';
-import type { ThemeOverride } from '../../theme';
-
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
-const CAROUSEL_HEIGHT = SCREEN_HEIGHT * 0.42;
-
-type Props = {
-  theme?: ThemeOverride;
-  plans: Plan[];
-
-  onSubscribe?: (plan: Plan) => void;
-  subscribeButtonText?: string;
-  subscribeLoadingId?: string | null;
-
-  isLoading?: boolean;
-  errorMessage?: string;
-
-  onBackPress?: () => void;
-
-  onRestore?: () => void;
-  restoreLoading?: boolean;
-  restoreText?: string;
-
-  restoreDescription?: string;
-
-  onPressTerms?: () => void;
-  onPressPrivacy?: () => void;
-  termsText?: string;
-  privacyText?: string;
-
-  header: {
-    topTitle: string;
-    topTitleAlign?: 'center' | 'left';
-    title: string;
-    subTitle: string;
-  };
-
-  footer: {
-    title: string;
-    subTitle: string;
-  };
-};
-
-const parsePrice = (price: string) =>
-  parseFloat(price.replace(/[^\d.]/g, '')) || 0;
-
-const SubscriptionSliderOne = ({
-  theme,
-  onSubscribe,
-  subscribeButtonText = 'Subscribe',
-  subscribeLoadingId,
-  plans = [],
-  errorMessage = 'Something went wrong',
-  isLoading = false,
-  onBackPress,
-  onRestore,
-  restoreLoading = false,
-  restoreText = 'Restore Purchase',
-  restoreDescription = 'Already purchased? Restore your subscription here.',
-  header,
-  footer,
-  onPressTerms,
-  onPressPrivacy,
-  termsText = 'Terms of Use',
-  privacyText = 'Privacy Policy',
-}: Props) => {
-  const { theme: appliedTheme } = useTheme(theme);
-  const { colors } = appliedTheme;
-
-  const sortedPlans = [...plans]?.sort?.((a, b) => {
-    const aPopular = a?.isPopular ? 1 : 0;
-    const bPopular = b?.isPopular ? 1 : 0;
-
-    if (aPopular !== bPopular) return bPopular - aPopular;
-    if (aPopular) return parsePrice(b.price) - parsePrice(a.price);
-    return 0;
-  });
-
-  const placeholderData = new Array(plans.length || 3).fill({});
-  const shouldLoop = sortedPlans?.length > 1 || placeholderData?.length > 1;
-
-  const handleSubscribe = useCallback(
-    (plan: Plan) => onSubscribe?.(plan),
-    [onSubscribe]
-  );
-
-  const renderPlan = ({ item }: { item: Plan }) => {
-    const isProcessing = subscribeLoadingId === item.id;
-
-    return (
-      <SubscriptionCard
-        plan={item}
-        colors={colors}
-        onSubscribe={handleSubscribe}
-        isLoading={isLoading}
-        isProcessing={isProcessing}
-        subscribeButtonText={
-          isProcessing ? 'Subscribing...' : subscribeButtonText
-        }
-      />
-    );
-  };
-
-  const dynamicRestoreBtnStyle = {
-    backgroundColor: colors.primary,
-    opacity: restoreLoading ? 0.7 : 1,
-  };
-  const dynamicRestoreTextStyle = {
-    color: colors.onPrimary,
-  };
-
-  return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
-      <AppHeader
-        title={header.topTitle}
-        onBackPress={onBackPress}
-        titleAlign={header.topTitleAlign}
-        theme={theme}
-      />
-
-      <ScrollView
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-      >
-        {/* Header */}
-        <View style={styles.headerContent}>
-          <Text
-            style={[styles.title, { color: colors.textPrimary }]}
-            numberOfLines={2}
-            ellipsizeMode="tail"
-          >
-            {header.title}
-          </Text>
-
-          <Text
-            style={[styles.subtitle, { color: colors.onSurfaceVariant }]}
-            numberOfLines={2}
-            ellipsizeMode="tail"
-          >
-            {header.subTitle}
-          </Text>
-        </View>
-
-        {/* Carousel */}
-        <View style={styles.carouselWrapper}>
-          {!plans.length && !isLoading ? (
-            <View
-              style={[
-                styles.error,
-                {
-                  borderRadius: scale(12),
-                  width: SCREEN_WIDTH,
-                  height: CAROUSEL_HEIGHT,
-                },
-              ]}
-            >
-              <Text
-                style={{ color: colors.error }}
-                numberOfLines={2}
-                ellipsizeMode="tail"
-              >
-                {errorMessage}
-              </Text>
-            </View>
-          ) : (
-            <Carousel
-              width={SCREEN_WIDTH}
-              height={CAROUSEL_HEIGHT}
-              data={isLoading ? placeholderData : sortedPlans}
-              renderItem={renderPlan}
-              loop={shouldLoop}
-              autoPlay={false}
-              scrollAnimationDuration={500}
-              mode="parallax"
-              modeConfig={{
-                parallaxScrollingOffset: scale(60),
-                parallaxAdjacentItemScale: 0.8,
-              }}
-            />
-          )}
-        </View>
-
-        {/* Footer */}
-        <View style={styles.footerContainer}>
-          <Text
-            style={[styles.footerTitle, { color: colors.textPrimary }]}
-            numberOfLines={2}
-            ellipsizeMode="tail"
-          >
-            {footer.title}
-          </Text>
-
-          <Text
-            style={[styles.footerSub, { color: colors.onSurfaceVariant }]}
-            numberOfLines={2}
-            ellipsizeMode="tail"
-          >
-            {footer.subTitle}
-          </Text>
-        </View>
-
-        {/* Terms + Privacy */}
-        {(onPressTerms || onPressPrivacy) && (
-          <View style={styles.legalContainer}>
-            {onPressTerms && (
-              <TouchableOpacity onPress={onPressTerms} activeOpacity={0.6}>
-                <Text
-                  style={[styles.legalText, { color: colors.primary }]}
-                  numberOfLines={1}
-                  ellipsizeMode="tail"
-                >
-                  {termsText}
-                </Text>
-              </TouchableOpacity>
-            )}
-
-            {onPressTerms && onPressPrivacy && (
-              <Text style={styles.dot}> • </Text>
-            )}
-
-            {onPressPrivacy && (
-              <TouchableOpacity onPress={onPressPrivacy} activeOpacity={0.6}>
-                <Text
-                  style={[styles.legalText, { color: colors.primary }]}
-                  numberOfLines={1}
-                  ellipsizeMode="tail"
-                >
-                  {privacyText}
-                </Text>
-              </TouchableOpacity>
-            )}
-          </View>
-        )}
-
-        {/* Restore */}
-        {onRestore && (
-          <View style={styles.restoreWrapper}>
-            <TouchableOpacity
-              onPress={onRestore}
-              activeOpacity={0.8}
-              disabled={restoreLoading}
-              style={[styles.restoreButton, dynamicRestoreBtnStyle]}
-            >
-              {restoreLoading ? (
-                <>
-                  <ActivityIndicator size="small" color={colors.onPrimary} />
-                  <Text
-                    style={[
-                      styles.restoreText,
-                      styles.restoreTextWithMargin,
-                      dynamicRestoreTextStyle,
-                    ]}
-                    numberOfLines={1}
-                  >
-                    Restoring...
-                  </Text>
-                </>
-              ) : (
-                <Text
-                  style={[styles.restoreText, { color: colors.onPrimary }]}
-                  numberOfLines={1}
-                >
-                  {restoreText}
-                </Text>
-              )}
-            </TouchableOpacity>
-
-            {restoreDescription && (
-              <Text
-                style={[
-                  styles.restoreDescription,
-                  { color: colors.onSurfaceVariant },
-                ]}
-                numberOfLines={2}
-                ellipsizeMode="tail"
-              >
-                {restoreDescription}
-              </Text>
-            )}
-          </View>
-        )}
-      </ScrollView>
-    </View>
-  );
-};
-
-export default memo(SubscriptionSliderOne);
-
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-
-  scrollContent: {
-    flexGrow: 1,
-    paddingBottom: verticalScale(20),
-  },
-
-  headerContent: {
-    paddingHorizontal: scale(20),
-    marginTop: verticalScale(10),
-    alignItems: 'center',
-  },
-
-  title: {
-    fontSize: RFValue(20),
-    fontWeight: '700',
-    textAlign: 'center',
-    flexShrink: 1,
-  },
-
-  subtitle: {
-    fontSize: RFValue(13),
-    textAlign: 'center',
-    marginTop: verticalScale(6),
-    lineHeight: scale(18),
-    opacity: 0.85,
-    flexShrink: 1,
-  },
-
-  carouselWrapper: {
-    alignItems: 'center',
-  },
-
-  error: {
-    height: verticalScale(200),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-
-  footerContainer: {
-    marginTop: verticalScale(10),
-    paddingHorizontal: scale(20),
-    alignItems: 'center',
-  },
-
-  footerTitle: {
-    fontSize: RFValue(12),
-    fontWeight: '600',
-    textAlign: 'center',
-    lineHeight: scale(16),
-    opacity: 0.9,
-    flexShrink: 1,
-  },
-
-  footerSub: {
-    fontSize: RFValue(11),
-    textAlign: 'center',
-    marginTop: verticalScale(4),
-    lineHeight: scale(16),
-    opacity: 0.75,
-    flexShrink: 1,
-  },
-
-  legalContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: verticalScale(10),
-  },
-
-  legalText: {
-    fontSize: RFValue(11),
-    fontWeight: '500',
-    textDecorationLine: 'underline',
-  },
-
-  dot: {
-    marginHorizontal: scale(6),
-    fontSize: RFValue(10),
-    opacity: 0.6,
-  },
-
-  restoreWrapper: {
-    alignItems: 'center',
-    flexDirection: 'column',
-    gap: verticalScale(8),
-    marginTop: verticalScale(15),
-  },
-
-  restoreDescription: {
-    fontSize: RFValue(11),
-    textAlign: 'center',
-    marginBottom: verticalScale(8),
-    maxWidth: '70%',
-    opacity: 0.75,
-    flexShrink: 1,
-  },
-
-  restoreButton: {
-    paddingVertical: verticalScale(9),
-    paddingHorizontal: scale(20),
-    borderRadius: scale(14),
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-
-  restoreText: {
-    fontSize: RFValue(12),
-    fontWeight: '600',
-  },
-  restoreTextWithMargin: {
-    marginLeft: scale(8),
-  },
-});