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

package/src/components/ContentView/One/components/MiniInfo.tsx

@@ -1,343 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useMemo, useCallback } from 'react';
-import {
-  View,
-  StyleSheet,
-  type StyleProp,
-  type ViewStyle,
-  type TextStyle,
-} from 'react-native';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { scale } from 'react-native-size-matters';
-import { Text } from '../../../Text';
-import type { ThemeOverride } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import moment from 'moment';
-import { useTheme } from '../../../../theme';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-
-type Props = {
-  content?: IContentData;
-  theme?: ThemeOverride;
-  isLoading?: boolean;
-  visible?: boolean;
-  userData?: {
-    is_buy_or_rent?: 'BUY' | 'RENT' | null;
-    rent_expiry_date?: any;
-  };
-
-  labels?: {
-    purchased?: string;
-    rented?: string;
-    buyOrRent?: string;
-    rentedExpiryPrefix?: string;
-    purchasedMsg?: string;
-  };
-
-  style?: {
-    container?: StyleProp<ViewStyle>;
-    row?: StyleProp<ViewStyle>;
-    title?: StyleProp<TextStyle>;
-    subTitle?: StyleProp<TextStyle>;
-    badge?: StyleProp<ViewStyle>;
-    price?: StyleProp<TextStyle>;
-    rating?: StyleProp<TextStyle>;
-  };
-};
-
-export function formatCurrency(
-  amount: number,
-  currency: string = 'INR'
-): string {
-  return new Intl.NumberFormat('en-IN', {
-    style: 'currency',
-    currency,
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-  }).format(amount);
-}
-
-export const MiniInfo = React.memo(
-  ({
-    content,
-    theme,
-    userData,
-    isLoading = false,
-    style,
-    labels,
-    visible = true,
-  }: Props): React.ReactElement | null => {
-    const { theme: appliedTheme } = useTheme(theme);
-
-    // All hooks must be called before any early returns
-    const textLabels = useMemo(
-      () => ({
-        purchased: labels?.purchased || 'Purchased',
-        rented: labels?.rented || 'Rented',
-        buyOrRent: labels?.buyOrRent || 'Buy or Rent',
-        rentedExpiryPrefix: labels?.rentedExpiryPrefix || '',
-        purchasedMsg: labels?.purchasedMsg || 'You purchased this content',
-      }),
-      [labels]
-    );
-
-    const containerStyle = useMemo(
-      () => [
-        styles.container,
-        style?.container,
-        {
-          backgroundColor: appliedTheme.colors.background,
-          borderColor: appliedTheme.colors.border,
-        },
-      ],
-      [
-        style?.container,
-        appliedTheme.colors.background,
-        appliedTheme.colors.border,
-      ]
-    );
-
-    const badgeStyle = useMemo(
-      () => [
-        styles.badge,
-        {
-          backgroundColor: appliedTheme.colors.primary,
-          shadowColor: appliedTheme.colors.textPrimary,
-        },
-        style?.badge,
-      ],
-      [
-        appliedTheme.colors.primary,
-        appliedTheme.colors.textPrimary,
-        style?.badge,
-      ]
-    );
-
-    const badgeTextStyle = useMemo(
-      () => ({
-        color: appliedTheme.colors.onPrimary,
-        fontWeight: '600' as const,
-      }),
-      [appliedTheme.colors.onPrimary]
-    );
-
-    // Memoize price info style
-    const priceTextStyle = useMemo(
-      () => [
-        styles.subTitle,
-        { color: appliedTheme.colors.textPrimary },
-        style?.price,
-      ],
-      [appliedTheme.colors.textPrimary, style?.price]
-    );
-
-    // Memoize expiry text style
-    const expiryTextStyle = useMemo(
-      () => ({
-        color: appliedTheme.colors.textSecondary,
-        marginTop: scale(4),
-        fontWeight: '500' as const,
-      }),
-      [appliedTheme.colors.textSecondary]
-    );
-
-    const getRentExpiryMeta = useCallback(
-      (rawDate: any): { label: string; color: string } => {
-        if (!rawDate) {
-          return { label: '', color: appliedTheme.colors.textSecondary };
-        }
-
-        const expiry = moment(rawDate);
-        if (!expiry.isValid()) {
-          return {
-            label: String(rawDate),
-            color: appliedTheme.colors.textSecondary,
-          };
-        }
-
-        const now = moment();
-        const diffHours = expiry.diff(now, 'hours', true);
-
-        // Make expiry visually meaningful:
-        // - already expired -> error
-        // - next 24h -> warning
-        // - next 72h -> info
-        // - otherwise -> neutral secondary
-        let color = appliedTheme.colors.textSecondary;
-        if (diffHours < 0) color = appliedTheme.colors.alert.error;
-        else if (diffHours <= 24) color = appliedTheme.colors.alert.warning;
-        else if (diffHours <= 72) color = appliedTheme.colors.alert.info;
-
-        // Time format: AM/PM (e.g. `9:30 PM`).
-        return {
-          label: `Expire on ${expiry.format('D MMM YYYY')} ${expiry.format(
-            'hh:mm A'
-          )}`,
-          color,
-        };
-      },
-      [
-        appliedTheme.colors.alert.error,
-        appliedTheme.colors.alert.info,
-        appliedTheme.colors.alert.warning,
-        appliedTheme.colors.textSecondary,
-      ]
-    );
-
-    // Extract content values safely
-    const content_offering_type = content?.content_offering_type;
-    const price = content?.price;
-    const is_buy_or_rent = content?.is_buy_or_rent;
-    const rent_duration = content?.rent_duration;
-
-    const renderBadge = useCallback(() => {
-      let text = textLabels.buyOrRent;
-
-      if (userData?.is_buy_or_rent === 'BUY') {
-        text = textLabels.purchased;
-      } else if (userData?.is_buy_or_rent === 'RENT') {
-        text = textLabels.rented;
-      }
-
-      return (
-        <View style={badgeStyle}>
-          <Text type="caption" style={badgeTextStyle}>
-            {text}
-          </Text>
-        </View>
-      );
-    }, [textLabels, userData?.is_buy_or_rent, badgeStyle, badgeTextStyle]);
-
-    const renderPriceInfo = useCallback(() => {
-      if (!price) return null;
-
-      const text =
-        is_buy_or_rent === 'BUY'
-          ? `Price: ${formatCurrency(price)}`
-          : `Rent: ${formatCurrency(price)} for ${rent_duration ?? 1} day(s)`;
-
-      return (
-        <Text type="subtitle" style={priceTextStyle}>
-          {text}
-        </Text>
-      );
-    }, [price, is_buy_or_rent, rent_duration, priceTextStyle]);
-
-    const renderUserExpiry = useCallback(() => {
-      if (!userData?.is_buy_or_rent) return null;
-
-      if (userData.is_buy_or_rent === 'BUY') {
-        return (
-          <Text type="caption" style={expiryTextStyle}>
-            {textLabels.purchasedMsg}
-          </Text>
-        );
-      }
-
-      if (userData.is_buy_or_rent === 'RENT') {
-        const { label, color } = getRentExpiryMeta(userData?.rent_expiry_date);
-
-        if (!label) return null;
-
-        return (
-          <Text type="caption" style={[expiryTextStyle, { color }]}>
-            {textLabels.rentedExpiryPrefix
-              ? `${textLabels.rentedExpiryPrefix} ${label}`
-              : label}
-          </Text>
-        );
-      }
-
-      return null;
-    }, [userData, textLabels, expiryTextStyle, getRentExpiryMeta]);
-
-    // Early returns after all hooks
-    if (!visible) return null;
-
-    if (isLoading) {
-      return (
-        <View style={containerStyle}>
-          <SkeletonPlaceholder
-            backgroundColor={appliedTheme.colors.skeletonBaseColor}
-            highlightColor={appliedTheme.colors.skeletonHighlightColor}
-          >
-            <SkeletonPlaceholder.Item
-              flexDirection="row"
-              alignItems="center"
-              marginBottom={scale(6)}
-            >
-              <SkeletonPlaceholder.Item
-                width={scale(100)}
-                height={scale(20)}
-                borderRadius={scale(4)}
-              />
-              <SkeletonPlaceholder.Item
-                width={scale(60)}
-                height={scale(20)}
-                borderRadius={scale(4)}
-                marginLeft={scale(8)}
-              />
-            </SkeletonPlaceholder.Item>
-
-            <SkeletonPlaceholder.Item
-              width={scale(120)}
-              height={scale(16)}
-              borderRadius={scale(4)}
-              marginBottom={scale(4)}
-            />
-
-            <SkeletonPlaceholder.Item
-              width={scale(80)}
-              height={scale(14)}
-              borderRadius={scale(4)}
-            />
-          </SkeletonPlaceholder>
-        </View>
-      );
-    }
-
-    if (!content) return null;
-
-    if (content_offering_type !== 'BUY_OR_RENT') return null;
-
-    return (
-      <View style={containerStyle}>
-        <View style={styles.headerRow}>{renderBadge()}</View>
-
-        {!userData?.is_buy_or_rent && renderPriceInfo()}
-
-        {renderUserExpiry()}
-      </View>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  container: {
-    borderWidth: 1,
-    borderRadius: scale(14),
-    padding: scale(10),
-    marginHorizontal: scale(6),
-    marginVertical: scale(6),
-  },
-  headerRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: scale(6),
-  },
-  badge: {
-    paddingHorizontal: scale(10),
-    paddingVertical: scale(5),
-    borderRadius: scale(10),
-  },
-  subTitle: {
-    fontSize: RFValue(12),
-    marginTop: scale(3),
-    fontWeight: '500',
-  },
-});

package/src/components/ContentView/One/components/Title.tsx

@@ -1,149 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useMemo } from 'react';
-import {
-  View,
-  StyleSheet,
-  type StyleProp,
-  type ViewStyle,
-  type TextStyle,
-} from 'react-native';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { scale } from 'react-native-size-matters';
-import { Text } from '../../../Text';
-import type { ITheme } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-
-type Props = {
-  title: IContentData['name'];
-  subtitle: string;
-  rating: IContentData['rating'];
-  theme: ITheme;
-  isLoading?: boolean;
-  style?: {
-    container?: StyleProp<ViewStyle>;
-    title?: StyleProp<TextStyle>;
-    subTitle?: StyleProp<TextStyle>;
-    rating?: StyleProp<TextStyle>;
-  };
-};
-
-export const Title = React.memo(
-  ({
-    title,
-    subtitle,
-    rating,
-    theme,
-    isLoading = false,
-    style,
-  }: Props): React.ReactElement => {
-    const containerStyle = useMemo(
-      () => StyleSheet.flatten([styles.container, style?.container]),
-      [style?.container]
-    );
-
-    const titleStyle = useMemo(
-      () => StyleSheet.flatten([styles.title, style?.title]),
-      [style?.title]
-    );
-
-    const subTitleStyle = useMemo(
-      () => StyleSheet.flatten([styles.subTitle, style?.subTitle]),
-      [style?.subTitle]
-    );
-
-    const ratingStyle = useMemo(
-      () => StyleSheet.flatten([styles.rating, style?.rating]),
-      [style?.rating]
-    );
-
-    if (isLoading) {
-      return (
-        <View style={containerStyle}>
-          <SkeletonPlaceholder
-            backgroundColor={theme.colors.skeletonBaseColor}
-            highlightColor={theme.colors.skeletonHighlightColor}
-          >
-            <SkeletonPlaceholder.Item>
-              {/* Title & Subtitle */}
-              <SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
-                <SkeletonPlaceholder.Item
-                  width={scale(160)}
-                  height={scale(22)}
-                  borderRadius={scale(4)}
-                />
-                <SkeletonPlaceholder.Item
-                  width={scale(60)}
-                  height={scale(22)}
-                  borderRadius={scale(4)}
-                  marginLeft={scale(6)}
-                />
-              </SkeletonPlaceholder.Item>
-
-              {/* Rating */}
-              <SkeletonPlaceholder.Item
-                width={scale(36)}
-                height={scale(16)}
-                borderRadius={scale(4)}
-                marginTop={scale(6)}
-              />
-            </SkeletonPlaceholder.Item>
-          </SkeletonPlaceholder>
-        </View>
-      );
-    }
-
-    return (
-      <View style={containerStyle}>
-        <View>
-          <Text
-            color={theme.colors.textPrimary}
-            style={titleStyle}
-            ellipsizeMode="tail"
-          >
-            {title}
-            {!!subtitle && (
-              <Text
-                color={theme.colors.textSecondary}
-                style={subTitleStyle}
-                ellipsizeMode="tail"
-              >
-                {' '}
-                {`: ${subtitle}`}
-              </Text>
-            )}
-          </Text>
-        </View>
-
-        {!!rating && (
-          <Text color={theme.colors.textSecondary} style={ratingStyle}>
-            ⭐ {rating}
-          </Text>
-        )}
-      </View>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: scale(12),
-    marginTop: scale(5),
-  },
-  title: {
-    fontSize: RFValue(15),
-    fontWeight: 'bold',
-  },
-  subTitle: {
-    fontSize: RFValue(15),
-    marginLeft: scale(6),
-  },
-  rating: {
-    fontSize: RFValue(12),
-    marginTop: scale(4),
-  },
-});