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

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

@@ -0,0 +1,343 @@
+/**
+ * @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

@@ -0,0 +1,149 @@
+/**
+ * @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),
+  },
+});