@zezosoft/zezo-ott-react-native-ui-kit 1.0.8 → 1.0.9

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

@@ -0,0 +1,439 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 10 Nov 2025 at 03:35 PM
+ */
+
+import React 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 { IContentData } from '../../../types';
+import type { ThemeOverride } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+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;
+}
+
+export const PurchaseHistory: 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 = isLoading
+    ? Array.from({ length: skeletonCount }, (_, i) => ({
+        _id: `skeleton-${i}`,
+      }))
+    : data;
+
+  const formatDate = (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 = (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 = (
+    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,
+    };
+  };
+
+  const isExpired = (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 renderGridItem: ListRenderItem<any> = ({
+    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
+      ? appliedTheme.colors.error
+      : appliedTheme.colors.primary;
+
+    const statusTextColor = appliedTheme.colors.buttonText;
+
+    return (
+      <TouchableOpacity
+        onPress={() => onPressItem?.(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>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      {headerComponent ? (
+        headerComponent
+      ) : (
+        <AppHeader
+          onBackPress={onBackPress}
+          title={title}
+          titleAlign="left"
+          theme={theme}
+          titleStyle={{
+            color: appliedTheme.colors.onBackground,
+          }}
+          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={(item, index) => item._id || `item-${index}`}
+          style={listStyle}
+          contentContainerStyle={[
+            contentContainerStyle,
+            { paddingBottom: scale(50) },
+          ]}
+          renderItem={renderGridItem}
+          onEndReached={onEndReached}
+          onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
+        />
+      ) : noDataComponent ? (
+        <>{noDataComponent}</>
+      ) : (
+        <View style={styles.noData}>
+          <Text style={styles.noDataText}>{noDataText}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+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/index.ts

@@ -7,5 +7,12 @@ import { WatchHistory } from './WatchHistory/WatchHistory';
 import { WatchLater } from './WatchLater/WatchLater';
 import { DeviceSessions } from './DeviceSessions/DeviceSessions';
 import { ProfileUpdate } from './ProfileUpdate/ProfileUpdate';
+import { PurchaseHistory } from './PurchaseHistory/PurchaseHistory';
 
-export { WatchHistory, WatchLater, DeviceSessions, ProfileUpdate };
+export {
+  WatchHistory,
+  WatchLater,
+  DeviceSessions,
+  ProfileUpdate,
+  PurchaseHistory,
+};

package/src/components/index.ts

@@ -25,3 +25,4 @@ export * from './Search';
 export * from './Subscription';
 export * from './Alert';
 export * from './Reels';
+export * from './BlurView';

package/src/hooks/useNavigationMode.ts

@@ -0,0 +1,35 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 06 Nov 2025 at 11:52 AM
+ */
+
+import { useEffect, useState } from 'react';
+import NavigationMode from 'react-native-navigation-mode';
+
+/**
+ * Hook to detect Android navigation mode
+ * @returns {Object} Navigation mode info
+ * @returns {boolean} isThreeButtonNav - true if using three-button navigation
+ * @returns {boolean} isGestureNav - true if using gesture navigation
+ */
+export const useNavigationMode = () => {
+  const [isThreeButtonNav, setIsThreeButtonNav] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const navMode = (await NavigationMode.getNavigationMode()) as any;
+        const isThreeButton =
+          navMode?.navigationMode === 'THREE_BUTTON' ||
+          navMode?.mode === 'THREE_BUTTON';
+        setIsThreeButtonNav(isThreeButton);
+      } catch (err) {
+        console.log('Navigation mode detect error:', err);
+      }
+    })();
+  }, []);
+
+  return {
+    isGestureNav: !isThreeButtonNav,
+  };
+};

package/src/types/content/content-view.types.ts

@@ -11,6 +11,7 @@ import type { IGetSectionData, ISectionItem } from '../../types/sections';
 import type { MoreFetchData } from '../../types/hook/usePaginatedSetion';
 import type { IHistoryItem } from '../../components/User/WatchHistory/WatchHistory';
 import type React from 'react';
+import type { MiniInfo } from '../../components/ContentView/components/MiniInfo';
 
 // 🔷 Common Style Aliases
 export type ViewStyleProp = StyleProp<ViewStyle>;
@@ -145,6 +146,10 @@ export type ComponentProps = {
   };
   theme?: ThemeOverride;
   isLoading?: boolean;
+  pricingAndExpiryInfo?: Omit<
+    React.ComponentProps<typeof MiniInfo>,
+    'content' | 'theme'
+  >;
   seasonsIsLoading?: boolean;
   recommendedContent?: ISectionItem | null;
   events?: ContentViewEvents;

package/src/utils/Spacing.ts

@@ -0,0 +1,27 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 16 Jun 2025 at 03:05 PM
+ */
+
+import { Platform } from 'react-native';
+import { verticalScale } from 'react-native-size-matters';
+
+/**
+ * Get responsive bottom spacing that accounts for platform differences
+ * Automatically adds extra spacing for Android navigation bar
+ * @param baseSpacing - Base spacing value (default: 35)
+ * @returns Platform-specific responsive bottom spacing
+ * @example
+ * // Usage in any component
+ * bottom: getResponsiveBottomSpacing(35) // iOS: 35, Android: 45
+ */
+export const getResponsiveBottomSpacing = (
+  baseSpacing: number = 35
+): number => {
+  return Platform.OS === 'ios'
+    ? verticalScale(baseSpacing)
+    : verticalScale(baseSpacing + 10);
+};
+
+// Legacy export for backward compatibility
+export const getAuthBottomSpacing = getResponsiveBottomSpacing;