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

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

@@ -1,3 +1,8 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 11 Nov 2025 at 09:23 PM
+ */
+
 import React from 'react';
 import {
   View,
@@ -9,15 +14,29 @@ import {
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
 import { Text } from '../../Text';
-import type { IContentData } from '../../../types';
 import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 import { useInternalTheme } from '../../../theme/hook';
+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';
+    rent_expiry_date?: any;
+  };
+
+  labels?: {
+    purchased?: string;
+    rented?: string;
+    buyOrRent?: string;
+    rentedExpiryPrefix?: string;
+    purchasedMsg?: string;
+  };
+
   style?: {
     container?: StyleProp<ViewStyle>;
     row?: StyleProp<ViewStyle>;
@@ -44,13 +63,23 @@ export function formatCurrency(
 export const MiniInfo = ({
   content,
   theme,
+  userData,
   isLoading = false,
   style,
+  labels,
+  visible = true,
 }: Props): React.ReactElement | null => {
   const { theme: appliedTheme } = useInternalTheme(theme);
+  if (!visible) return null;
+  const textLabels = {
+    purchased: labels?.purchased || 'Purchased',
+    rented: labels?.rented || 'Rented',
+    buyOrRent: labels?.buyOrRent || 'Buy or Rent',
+    rentedExpiryPrefix: labels?.rentedExpiryPrefix || '',
+    purchasedMsg: labels?.purchasedMsg || 'You purchased this content',
+  };
 
   if (isLoading) {
-    // Skeleton Placeholder
     return (
       <View
         style={[
@@ -83,12 +112,14 @@ export const MiniInfo = ({
               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)}
@@ -106,29 +137,39 @@ export const MiniInfo = ({
 
   if (content_offering_type !== 'BUY_OR_RENT') return null;
 
-  const renderBadge = () => (
-    <View
-      style={[
-        styles.badge,
-        {
-          backgroundColor: appliedTheme.colors.primary,
-          shadowColor: appliedTheme.colors.textPrimary,
-        },
-        style?.badge,
-      ]}
-    >
-      <Text
-        type="caption"
-        style={{ color: appliedTheme.colors.onPrimary, fontWeight: '600' }}
-        theme={theme}
+  const renderBadge = () => {
+    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={[
+          styles.badge,
+          {
+            backgroundColor: appliedTheme.colors.primary,
+            shadowColor: appliedTheme.colors.textPrimary,
+          },
+          style?.badge,
+        ]}
       >
-        {content_offering_type === 'BUY_OR_RENT' ? 'BUY OR RENT' : 'BUY'}
-      </Text>
-    </View>
-  );
+        <Text
+          type="caption"
+          style={{ color: appliedTheme.colors.onPrimary, fontWeight: '600' }}
+        >
+          {text}
+        </Text>
+      </View>
+    );
+  };
 
   const renderPriceInfo = () => {
     if (!price) return null;
+
     const text =
       is_buy_or_rent === 'BUY'
         ? `Price: ${formatCurrency(price)}`
@@ -142,13 +183,46 @@ export const MiniInfo = ({
           { color: appliedTheme.colors.textPrimary },
           style?.price,
         ]}
-        theme={theme}
       >
         {text}
       </Text>
     );
   };
 
+  const renderUserExpiry = () => {
+    if (!userData?.is_buy_or_rent) return null;
+
+    if (userData.is_buy_or_rent === 'BUY') {
+      return (
+        <Text
+          type="caption"
+          style={{
+            color: appliedTheme.colors.textSecondary,
+            marginTop: scale(4),
+          }}
+        >
+          {textLabels.purchasedMsg}
+        </Text>
+      );
+    }
+
+    if (userData.is_buy_or_rent === 'RENT') {
+      return (
+        <Text
+          type="caption"
+          style={{
+            color: appliedTheme.colors.textSecondary,
+            marginTop: scale(4),
+          }}
+        >
+          {textLabels.rentedExpiryPrefix} {userData?.rent_expiry_date}
+        </Text>
+      );
+    }
+
+    return null;
+  };
+
   return (
     <View
       style={[
@@ -161,7 +235,10 @@ export const MiniInfo = ({
       ]}
     >
       <View style={styles.headerRow}>{renderBadge()}</View>
-      {renderPriceInfo()}
+
+      {!userData?.is_buy_or_rent && renderPriceInfo()}
+
+      {renderUserExpiry()}
     </View>
   );
 };

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

@@ -14,9 +14,9 @@ import {
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
 import { Text } from '../../Text';
-import type { IContentData } from '../../../types';
 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'];

package/src/components/Search/One.tsx

@@ -22,18 +22,14 @@ import SearchCard, {
   type SearchCardSkeletonConfig,
 } from './components/SearchCard';
 import { useDebounce } from '../../hooks/useDebounce';
-import type {
-  IContentData,
-  IGetSectionData,
-  ISectionItem,
-  MoreFetchData,
-} from '../../types';
+import type { IGetSectionData, ISectionItem, MoreFetchData } from '../../types';
 import type { ThemeOverride } from '../../theme/themes';
 import { useRecentSearchesStore } from '../../store/RecentSearchesStore';
 import RecentSearchesSection from './components/RecentSearchesSection';
 import Cards from '../Content/Card';
 import type { RecommendedCardStyles } from '../../types/content/content-view.types';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 // Types
 export type ISearchItem = IContentData;

package/src/components/Settings/AppSettings.tsx

@@ -248,7 +248,7 @@ export const AppSettings: FC<AppSettingsProps> = ({
       <ScrollView
         contentContainerStyle={[
           styles.scrollContent,
-          { paddingBottom: verticalScale(60) + insets.bottom },
+          { paddingBottom: verticalScale(100) + insets.bottom },
         ]}
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"