@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

package/src/components/User/PurchaseHistory/PurchaseHistory.tsx

@@ -1,493 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 10 Nov 2025 at 03:35 PM
- */
-
-import React, { memo, useMemo, useCallback } from 'react';
-import {
-  StyleSheet,
-  View,
-  TouchableOpacity,
-  type StyleProp,
-  type ViewStyle,
-  type ListRenderItem,
-} from 'react-native';
-import { FlatGrid } from 'react-native-super-grid';
-import { scale } from 'react-native-size-matters';
-import LinearGradient from 'react-native-linear-gradient';
-import { Search, Calendar, CheckCircle2, XCircle } from 'lucide-react-native';
-import moment from 'moment';
-import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-
-import AppHeader from '../../Headers/AppHeader';
-import { Text } from '../../Text';
-import CardPoster from '../../Content/Card/components/CardPoster';
-import type { ThemeOverride } from '../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-
-export interface IPurchaseHistoryItem {
-  _id: string;
-  content_id: IContentData;
-  user_id: string;
-  status: 'valid' | 'expired' | string;
-  valid_upto: string;
-  price: number;
-  tvod_type: 'BUY' | 'RENT';
-  content_owner: string;
-  createdAt: string;
-  updatedAt: string;
-  __v: number;
-}
-
-export interface PurchaseHistoryProps {
-  data: IPurchaseHistoryItem[];
-  isLoading?: boolean;
-
-  // Header Config
-  title?: string;
-  headerComponent?: React.ReactNode;
-  onBackPress?: () => void;
-  onSearchPress?: () => void;
-  showSearchIcon?: boolean;
-
-  // Grid & Layout Customization
-  itemDimension?: number;
-  spacing?: number;
-  listStyle?: StyleProp<ViewStyle>;
-  contentContainerStyle?: StyleProp<ViewStyle>;
-
-  // Theme
-  theme?: ThemeOverride;
-
-  // Rendering Overrides
-  renderItem?: (
-    item: IPurchaseHistoryItem,
-    index: number
-  ) => React.ReactElement | null;
-  skeletonCount?: number;
-  skeletonComponent?: React.ReactElement;
-
-  // Empty State
-  noDataComponent?: React.ReactNode;
-  noDataText?: string;
-
-  // Interaction
-  onPressItem?: (item: IPurchaseHistoryItem) => void;
-
-  onEndReached?: () => void;
-  onEndReachedThreshold?: number;
-}
-
-const PurchaseHistoryComponent: React.FC<PurchaseHistoryProps> = ({
-  data = [],
-  isLoading = false,
-  title = 'Purchase History',
-  headerComponent,
-  onBackPress = () => {},
-  onSearchPress = () => {},
-  showSearchIcon = true,
-  itemDimension = 90,
-  spacing = 10,
-  listStyle,
-  contentContainerStyle,
-  theme,
-  renderItem,
-  skeletonCount = 9,
-  skeletonComponent,
-  noDataComponent,
-  noDataText = 'No Purchase History Found',
-  onPressItem,
-
-  onEndReached,
-  onEndReachedThreshold,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const listData = useMemo(
-    () =>
-      isLoading
-        ? Array.from({ length: skeletonCount }, (_, i) => ({
-            _id: `skeleton-${i}`,
-          }))
-        : data,
-    [isLoading, skeletonCount, data]
-  );
-
-  const formatDate = useCallback((dateString: string): string => {
-    const m = moment(dateString);
-    if (!m.isValid()) return 'Invalid Date';
-
-    const now = moment();
-    const daysDiff = m.diff(now, 'days');
-
-    // Show relative time for recent dates
-    if (daysDiff === 0) {
-      return 'Today';
-    } else if (daysDiff === -1) {
-      return 'Yesterday';
-    } else if (daysDiff > -7 && daysDiff < 0) {
-      return `${Math.abs(daysDiff)} days ago`;
-    }
-
-    // Show full date for older dates
-    if (m.year() === now.year()) {
-      return m.format('D MMM');
-    }
-    return m.format('D MMM YYYY');
-  }, []);
-
-  const getTimeLeft = useCallback((dateString: string): string => {
-    const expiry = moment(dateString);
-    if (!expiry.isValid()) return '';
-
-    const now = moment();
-    if (expiry.isBefore(now)) return 'Expired';
-
-    const dur = moment.duration(expiry.diff(now));
-    const days = Math.floor(dur.asDays());
-    const hours = dur.hours();
-    const minutes = dur.minutes();
-    const seconds = dur.seconds();
-
-    if (days > 0) {
-      if (hours === 0) {
-        return `${days}d left`;
-      }
-      return `${days}d ${hours}h left`;
-    }
-
-    if (hours > 0) {
-      if (minutes === 0) {
-        return `${hours}h left`;
-      }
-      return `${hours}h ${minutes}m left`;
-    }
-
-    if (minutes > 0) {
-      return `${minutes}m left`;
-    }
-
-    return `${seconds}s left`;
-  }, []);
-
-  const getChipColors = useCallback(
-    (expired: boolean, _tvodType?: IPurchaseHistoryItem['tvod_type']) => {
-      if (expired) {
-        return {
-          bg: appliedTheme.colors.background,
-          border: appliedTheme.colors.error,
-          text: appliedTheme.colors.error,
-          icon: appliedTheme.colors.error,
-        };
-      }
-
-      // Same colors for both RENT and BUY
-      return {
-        bg: appliedTheme.colors.background,
-        border: appliedTheme.colors.primary,
-        text: appliedTheme.colors.textPrimary,
-        icon: appliedTheme.colors.textPrimary,
-      };
-    },
-    [
-      appliedTheme.colors.background,
-      appliedTheme.colors.error,
-      appliedTheme.colors.primary,
-      appliedTheme.colors.textPrimary,
-    ]
-  );
-
-  const isExpired = useCallback((item: IPurchaseHistoryItem): boolean => {
-    if (item.status === 'expired') return true;
-    const expiry = moment(item.valid_upto);
-    if (!expiry.isValid()) return false;
-    return expiry.isBefore(moment());
-  }, []);
-
-  const handleItemPress = useCallback(
-    (item: IPurchaseHistoryItem) => {
-      onPressItem?.(item);
-    },
-    [onPressItem]
-  );
-
-  // Memoize theme colors
-  const themeColors = useMemo(
-    () => ({
-      error: appliedTheme.colors.error,
-      primary: appliedTheme.colors.primary,
-      buttonText: appliedTheme.colors.buttonText,
-    }),
-    [
-      appliedTheme.colors.error,
-      appliedTheme.colors.primary,
-      appliedTheme.colors.buttonText,
-    ]
-  );
-
-  const renderGridItem: ListRenderItem<any> = useCallback(
-    ({ item, index }: { item: IPurchaseHistoryItem; index: number }) => {
-      if (isLoading && skeletonComponent) return skeletonComponent;
-      if (!isLoading && renderItem) return renderItem(item, index);
-
-      const expired = !isLoading && item ? isExpired(item) : false;
-      const statusColor = expired ? themeColors.error : themeColors.primary;
-      const statusTextColor = themeColors.buttonText;
-
-      return (
-        <TouchableOpacity
-          onPress={() => handleItemPress(item)}
-          activeOpacity={0.8}
-          style={styles.itemContainer}
-        >
-          <View style={styles.posterWrapper}>
-            <CardPoster
-              theme={appliedTheme}
-              isLoading={isLoading}
-              posterUri={item?.content_id?.poster}
-            />
-
-            {/* Gradient Overlay */}
-            {!isLoading && item && (
-              <LinearGradient
-                colors={[
-                  'rgba(0, 0, 0, 0.95)',
-                  'rgba(0, 0, 0, 0.5)',
-                  'rgba(0, 0, 0, 0.1)',
-                  'transparent',
-                ]}
-                locations={[0, 0.3, 0.6, 1]}
-                style={styles.gradientOverlay}
-                start={{ x: 0, y: 1 }}
-                end={{ x: 0, y: 0 }}
-              />
-            )}
-
-            {!isLoading && item && (
-              <>
-                {/* Status Badge */}
-                <View
-                  style={[
-                    styles.statusBadge,
-                    {
-                      backgroundColor: statusColor,
-                      borderColor: statusColor,
-                    },
-                  ]}
-                >
-                  {expired ? (
-                    <XCircle size={scale(10)} color={statusTextColor} />
-                  ) : (
-                    <CheckCircle2 size={scale(10)} color={statusTextColor} />
-                  )}
-                  <Text style={[styles.statusText, { color: statusTextColor }]}>
-                    {expired ? 'Expired' : 'Active'}
-                  </Text>
-                </View>
-
-                {/* Expiry Date Overlay */}
-                <View style={styles.dateOverlay}>
-                  {(() => {
-                    const chip = getChipColors(expired, item.tvod_type);
-                    return (
-                      <View
-                        style={[
-                          styles.dateContainer,
-                          {
-                            backgroundColor: chip.bg,
-                            borderColor: chip.border,
-                          },
-                        ]}
-                      >
-                        <View
-                          style={[
-                            styles.statusDot,
-                            { backgroundColor: chip.border },
-                          ]}
-                        />
-                        <Calendar size={scale(8)} color={chip.icon} />
-                        <Text
-                          style={[styles.dateText, { color: chip.text }]}
-                          numberOfLines={1}
-                        >
-                          {expired
-                            ? `Exp: ${formatDate(item.valid_upto)}`
-                            : item.tvod_type === 'RENT'
-                              ? getTimeLeft(item.valid_upto)
-                              : 'Purchased'}
-                        </Text>
-                      </View>
-                    );
-                  })()}
-                </View>
-              </>
-            )}
-          </View>
-        </TouchableOpacity>
-      );
-    },
-    [
-      isLoading,
-      skeletonComponent,
-      renderItem,
-      isExpired,
-      themeColors.error,
-      themeColors.primary,
-      themeColors.buttonText,
-      appliedTheme,
-      handleItemPress,
-      getChipColors,
-      formatDate,
-      getTimeLeft,
-    ]
-  );
-
-  const keyExtractor = useCallback(
-    (item: any, index: number) => item._id || `item-${index}`,
-    []
-  );
-
-  const contentContainerStyleMemo = useMemo(
-    () => [contentContainerStyle, { paddingBottom: scale(50) }],
-    [contentContainerStyle]
-  );
-
-  const titleStyleMemo = useMemo(
-    () => ({
-      color: appliedTheme.colors.onBackground,
-    }),
-    [appliedTheme.colors.onBackground]
-  );
-
-  return (
-    <View style={styles.container}>
-      {headerComponent ? (
-        headerComponent
-      ) : (
-        <AppHeader
-          onBackPress={onBackPress}
-          title={title}
-          titleAlign="left"
-          theme={theme}
-          titleStyle={titleStyleMemo}
-          onRightPress={onSearchPress}
-          rightIcon={
-            showSearchIcon ? (
-              <Search
-                size={scale(23)}
-                color={appliedTheme.colors.onBackground}
-              />
-            ) : undefined
-          }
-        />
-      )}
-
-      {isLoading || data.length > 0 ? (
-        <FlatGrid
-          itemDimension={itemDimension}
-          spacing={spacing}
-          data={listData}
-          keyExtractor={keyExtractor}
-          style={listStyle}
-          contentContainerStyle={contentContainerStyleMemo}
-          renderItem={renderGridItem}
-          onEndReached={onEndReached}
-          onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
-        />
-      ) : noDataComponent ? (
-        <>{noDataComponent}</>
-      ) : (
-        <View style={styles.noData}>
-          <Text style={styles.noDataText}>{noDataText}</Text>
-        </View>
-      )}
-    </View>
-  );
-};
-
-export const PurchaseHistory = memo(PurchaseHistoryComponent);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  itemContainer: {
-    width: '100%',
-  },
-  posterWrapper: {
-    width: '100%',
-    position: 'relative',
-  },
-  gradientOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 1,
-    borderRadius: scale(6),
-  },
-  statusBadge: {
-    position: 'absolute',
-    top: scale(4),
-    right: scale(4),
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: scale(3),
-    paddingVertical: scale(1),
-    borderRadius: scale(10),
-    borderWidth: scale(1),
-    gap: scale(3),
-    zIndex: 100,
-    elevation: 8,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.4,
-    shadowRadius: 4,
-  },
-  statusText: {
-    fontSize: RFValue(8),
-    fontWeight: '700',
-    color: '#FFFFFF',
-  },
-  dateOverlay: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    padding: scale(4),
-    zIndex: 100,
-  },
-  dateContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: scale(5),
-    paddingVertical: scale(4),
-    borderRadius: scale(4),
-    gap: scale(3),
-    borderWidth: scale(0.8),
-  },
-  statusDot: { width: scale(6), height: scale(6), borderRadius: scale(3) },
-  dateText: {
-    fontSize: RFValue(7),
-    fontWeight: '600',
-    flex: 1,
-    lineHeight: RFValue(9),
-  },
-  noData: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  noDataText: {
-    fontSize: RFValue(12),
-    opacity: 0.5,
-  },
-});
-
-export namespace PurchaseHistory {
-  export type Props = PurchaseHistoryProps;
-  export type Data = Props['data'];
-  export type Item = Props['data'][number];
-}

package/src/components/User/WatchHistory/WatchHistory.tsx

@@ -1,226 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 24 Jun 2025 at 07:32 PM
- */
-
-import React, { memo, useMemo, useCallback } from 'react';
-import {
-  StyleSheet,
-  View,
-  TouchableOpacity,
-  type StyleProp,
-  type ViewStyle,
-  type ListRenderItem,
-} from 'react-native';
-import { FlatGrid } from 'react-native-super-grid';
-import { scale } from 'react-native-size-matters';
-import { Search } from 'lucide-react-native';
-
-import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-
-import AppHeader from '../../Headers/AppHeader';
-import { Text } from '../../Text';
-import CardPoster from '../../Content/Card/components/CardPoster';
-import type { ThemeOverride } from '../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-
-export interface IHistoryItem {
-  _id: string;
-  content: IContentData;
-  content_type: 'movie' | 'series' | 'live_stream';
-  currentTime: number;
-  duration: number;
-  season_number?: number;
-  episode_number?: number;
-  completed: boolean;
-  current_season?: any;
-  current_episode?: any;
-}
-
-export interface WatchHistoryProps {
-  data: IHistoryItem[];
-  isLoading?: boolean;
-
-  // Header Config
-  title?: string;
-  headerComponent?: React.ReactNode;
-  onBackPress?: () => void;
-  onSearchPress?: () => void;
-  showSearchIcon?: boolean;
-
-  // Grid & Layout Customization
-  itemDimension?: number;
-  spacing?: number;
-  listStyle?: StyleProp<ViewStyle>;
-  contentContainerStyle?: StyleProp<ViewStyle>;
-
-  // Theme
-  theme?: ThemeOverride;
-
-  // Rendering Overrides
-  renderItem?: (item: IHistoryItem, index: number) => React.ReactElement | null;
-  skeletonCount?: number;
-  skeletonComponent?: React.ReactElement;
-
-  // Empty State
-  noDataComponent?: React.ReactNode;
-  noDataText?: string;
-
-  // Interaction
-  onPressItem?: (item: IHistoryItem) => void;
-
-  onEndReached?: () => void;
-  onEndReachedThreshold?: number;
-}
-
-const WatchHistoryComponent: React.FC<WatchHistoryProps> = ({
-  data = [],
-  isLoading = false,
-  title = 'Watch History',
-  headerComponent,
-  onBackPress = () => {},
-  onSearchPress = () => {},
-  showSearchIcon = true,
-  itemDimension = 90,
-  spacing = 10,
-  listStyle,
-  contentContainerStyle,
-  theme,
-  renderItem,
-  skeletonCount = 9,
-  skeletonComponent,
-  noDataComponent,
-  noDataText = 'No Watch History Found',
-  onPressItem,
-  onEndReached,
-  onEndReachedThreshold,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const listData = useMemo(
-    () =>
-      isLoading
-        ? Array.from({ length: skeletonCount }, (_, i) => ({
-            _id: `skeleton-${i}`,
-          }))
-        : data,
-    [isLoading, skeletonCount, data]
-  );
-
-  const handleItemPress = useCallback(
-    (item: any) => {
-      onPressItem?.(item);
-    },
-    [onPressItem]
-  );
-
-  const renderGridItem: ListRenderItem<any> = useCallback(
-    ({ item, index }) => {
-      if (isLoading && skeletonComponent) return skeletonComponent;
-      if (!isLoading && renderItem) return renderItem(item, index);
-
-      return (
-        <TouchableOpacity
-          key={item._id || index}
-          onPress={() => handleItemPress(item)}
-          activeOpacity={0.8}
-        >
-          <CardPoster
-            content_offering_type={item?.content?.content_offering_type}
-            theme={appliedTheme}
-            isLoading={isLoading}
-            posterUri={item?.content?.poster}
-          />
-        </TouchableOpacity>
-      );
-    },
-    [isLoading, skeletonComponent, renderItem, handleItemPress, appliedTheme]
-  );
-
-  const keyExtractor = useCallback(
-    (item: any, index: number) => item._id || `item-${index}`,
-    []
-  );
-
-  const contentContainerStyleMemo = useMemo(
-    () => [contentContainerStyle, { paddingBottom: scale(50) }],
-    [contentContainerStyle]
-  );
-
-  const titleStyleMemo = useMemo(
-    () => ({
-      color: appliedTheme.colors.onBackground,
-    }),
-    [appliedTheme.colors.onBackground]
-  );
-
-  return (
-    <View style={styles.container}>
-      {headerComponent ? (
-        headerComponent
-      ) : (
-        <AppHeader
-          onBackPress={onBackPress}
-          title={title}
-          titleAlign="left"
-          theme={theme}
-          titleStyle={titleStyleMemo}
-          onRightPress={onSearchPress}
-          rightIcon={
-            showSearchIcon ? (
-              <Search
-                size={scale(23)}
-                color={appliedTheme.colors.onBackground}
-              />
-            ) : undefined
-          }
-        />
-      )}
-
-      {isLoading || data.length > 0 ? (
-        <FlatGrid
-          itemDimension={itemDimension}
-          spacing={spacing}
-          data={listData}
-          keyExtractor={keyExtractor}
-          style={listStyle}
-          contentContainerStyle={contentContainerStyleMemo}
-          renderItem={renderGridItem}
-          onEndReached={onEndReached}
-          onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
-        />
-      ) : noDataComponent ? (
-        <>{noDataComponent}</>
-      ) : (
-        <View style={styles.noData}>
-          <Text style={styles.noDataText}>{noDataText}</Text>
-        </View>
-      )}
-    </View>
-  );
-};
-
-export const WatchHistory = memo(WatchHistoryComponent);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-
-  noData: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  noDataText: {
-    fontSize: RFValue(12),
-    opacity: 0.5,
-  },
-});
-
-export namespace WatchHistory {
-  export type Props = WatchHistoryProps;
-  export type Data = Props['data'];
-  export type Item = Props['data'][number];
-}