@zezosoft/zezo-ott-react-native-ui-kit 1.1.0 → 1.1.2

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

@@ -3,7 +3,7 @@
  * @lastModified Mon 10 Nov 2025 at 03:35 PM
  */
 
-import React from 'react';
+import React, { memo, useMemo, useCallback } from 'react';
 import {
   StyleSheet,
   View,
@@ -79,7 +79,7 @@ export interface PurchaseHistoryProps {
   onEndReachedThreshold?: number;
 }
 
-export const PurchaseHistory: React.FC<PurchaseHistoryProps> = ({
+const PurchaseHistoryComponent: React.FC<PurchaseHistoryProps> = ({
   data = [],
   isLoading = false,
   title = 'Purchase History',
@@ -104,13 +104,17 @@ export const PurchaseHistory: React.FC<PurchaseHistoryProps> = ({
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
 
-  const listData = isLoading
-    ? Array.from({ length: skeletonCount }, (_, i) => ({
-        _id: `skeleton-${i}`,
-      }))
-    : data;
+  const listData = useMemo(
+    () =>
+      isLoading
+        ? Array.from({ length: skeletonCount }, (_, i) => ({
+            _id: `skeleton-${i}`,
+          }))
+        : data,
+    [isLoading, skeletonCount, data]
+  );
 
-  const formatDate = (dateString: string): string => {
+  const formatDate = useCallback((dateString: string): string => {
     const m = moment(dateString);
     if (!m.isValid()) return 'Invalid Date';
 
@@ -131,9 +135,9 @@ export const PurchaseHistory: React.FC<PurchaseHistoryProps> = ({
       return m.format('D MMM');
     }
     return m.format('D MMM YYYY');
-  };
+  }, []);
 
-  const getTimeLeft = (dateString: string): string => {
+  const getTimeLeft = useCallback((dateString: string): string => {
     const expiry = moment(dateString);
     if (!expiry.isValid()) return '';
 
@@ -165,143 +169,196 @@ export const PurchaseHistory: React.FC<PurchaseHistoryProps> = ({
     }
 
     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,
+        };
+      }
 
-  const getChipColors = (
-    expired: boolean,
-    _tvodType?: IPurchaseHistoryItem['tvod_type']
-  ) => {
-    if (expired) {
+      // Same colors for both RENT and BUY
       return {
         bg: appliedTheme.colors.background,
-        border: appliedTheme.colors.error,
-        text: appliedTheme.colors.error,
-        icon: appliedTheme.colors.error,
+        border: appliedTheme.colors.primary,
+        text: appliedTheme.colors.textPrimary,
+        icon: appliedTheme.colors.textPrimary,
       };
-    }
-
-    // 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 = (item: IPurchaseHistoryItem): boolean => {
+  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 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 }}
+  }, []);
+
+  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}
             />
-          )}
-
-          {!isLoading && item && (
-            <>
-              {/* Status Badge */}
-              <View
-                style={[
-                  styles.statusBadge,
-                  {
-                    backgroundColor: statusColor,
-                    borderColor: statusColor,
-                  },
+
+            {/* 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',
                 ]}
-              >
-                {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 },
-                      ]}
-                    >
+                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.statusDot,
-                          { backgroundColor: chip.border },
+                          styles.dateContainer,
+                          {
+                            backgroundColor: chip.bg,
+                            borderColor: 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>
-    );
-  };
+                        <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}>
@@ -313,9 +370,7 @@ export const PurchaseHistory: React.FC<PurchaseHistoryProps> = ({
           title={title}
           titleAlign="left"
           theme={theme}
-          titleStyle={{
-            color: appliedTheme.colors.onBackground,
-          }}
+          titleStyle={titleStyleMemo}
           onRightPress={onSearchPress}
           rightIcon={
             showSearchIcon ? (
@@ -333,12 +388,9 @@ export const PurchaseHistory: React.FC<PurchaseHistoryProps> = ({
           itemDimension={itemDimension}
           spacing={spacing}
           data={listData}
-          keyExtractor={(item, index) => item._id || `item-${index}`}
+          keyExtractor={keyExtractor}
           style={listStyle}
-          contentContainerStyle={[
-            contentContainerStyle,
-            { paddingBottom: scale(50) },
-          ]}
+          contentContainerStyle={contentContainerStyleMemo}
           renderItem={renderGridItem}
           onEndReached={onEndReached}
           onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
@@ -354,6 +406,8 @@ export const PurchaseHistory: React.FC<PurchaseHistoryProps> = ({
   );
 };
 
+export const PurchaseHistory = memo(PurchaseHistoryComponent);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

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

@@ -3,7 +3,7 @@
  * @lastModified Tue 24 Jun 2025 at 07:32 PM
  */
 
-import React from 'react';
+import React, { memo, useMemo, useCallback } from 'react';
 import {
   StyleSheet,
   View,
@@ -74,7 +74,7 @@ export interface WatchHistoryProps {
   onEndReachedThreshold?: number;
 }
 
-export const WatchHistory: React.FC<WatchHistoryProps> = ({
+const WatchHistoryComponent: React.FC<WatchHistoryProps> = ({
   data = [],
   isLoading = false,
   title = 'Watch History',
@@ -93,37 +93,67 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
   noDataComponent,
   noDataText = 'No Watch History Found',
   onPressItem,
-
   onEndReached,
   onEndReachedThreshold,
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
 
-  const listData = isLoading
-    ? Array.from({ length: skeletonCount }, (_, i) => ({
-        _id: `skeleton-${i}`,
-      }))
-    : data;
-
-  const renderGridItem: ListRenderItem<any> = ({ item, index }) => {
-    if (isLoading && skeletonComponent) return skeletonComponent;
-    if (!isLoading && renderItem) return renderItem(item, index);
-
-    return (
-      <TouchableOpacity
-        key={item._id || index}
-        onPress={() => onPressItem?.(item)}
-        activeOpacity={0.8}
-      >
-        <CardPoster
-          content_offering_type={item?.content?.content_offering_type}
-          theme={appliedTheme}
-          isLoading={isLoading}
-          posterUri={item?.content?.poster}
-        />
-      </TouchableOpacity>
-    );
-  };
+  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}>
@@ -135,9 +165,7 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
           title={title}
           titleAlign="left"
           theme={theme}
-          titleStyle={{
-            color: appliedTheme.colors.onBackground,
-          }}
+          titleStyle={titleStyleMemo}
           onRightPress={onSearchPress}
           rightIcon={
             showSearchIcon ? (
@@ -155,12 +183,9 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
           itemDimension={itemDimension}
           spacing={spacing}
           data={listData}
-          keyExtractor={(item, index) => item._id || `item-${index}`}
+          keyExtractor={keyExtractor}
           style={listStyle}
-          contentContainerStyle={[
-            contentContainerStyle,
-            { paddingBottom: scale(50) },
-          ]}
+          contentContainerStyle={contentContainerStyleMemo}
           renderItem={renderGridItem}
           onEndReached={onEndReached}
           onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
@@ -176,6 +201,8 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
   );
 };
 
+export const WatchHistory = memo(WatchHistoryComponent);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,