@zezosoft/zezo-ott-react-native-ui-kit 1.0.2 → 1.0.4

package/src/components/User/DeviceSessions/DeviceSessions.tsx

@@ -4,7 +4,15 @@
  */
 
 import React from 'react';
-import { View, StyleSheet, FlatList, TouchableOpacity, type StyleProp, type ViewStyle, Alert } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+  type StyleProp,
+  type ViewStyle,
+  Alert,
+} from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../../Text';
 import { useTheme } from '../../../theme/hook/useTheme';
@@ -12,6 +20,7 @@ import AppHeader from '../../Headers/AppHeader';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import type { AppTheme } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { ScanLine } from 'lucide-react-native';
 
 type IUserLocation = {
   country: string | null;
@@ -49,10 +58,17 @@ type IDeviceSessionsProps = {
   error?: string;
   onLogout: ({ session }: { session: ISessions }) => void;
   onBackPress?: () => void;
+  onQrLoginPress?: () => void;
   style?: StyleProp<ViewStyle>;
   title?: string;
   renderLogoutButton?: ({ session }: { session: ISessions }) => React.ReactNode;
-  renderContent?: ({ session, isActive }: { session: ISessions; isActive: boolean }) => React.ReactNode | null;
+  renderContent?: ({
+    session,
+    isActive,
+  }: {
+    session: ISessions;
+    isActive: boolean;
+  }) => React.ReactNode | null;
   textLabels?: TextLabels;
   headerStyle?: StyleProp<ViewStyle>;
   headerTitleAlign?: 'left' | 'center';
@@ -68,6 +84,7 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
   activeSessionId,
   onLogout,
   onBackPress = () => {},
+  onQrLoginPress,
   title = 'Manage Devices',
   style,
   error,
@@ -80,12 +97,14 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
   renderHeader,
   theme,
   isLoading,
-  isLoadingLogout
+  isLoadingLogout,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
   const colors = appliedTheme.colors;
 
-  const [logoutSessionId, setLogoutSessionId] = React.useState<string | null>(null);
+  const [logoutSessionId, setLogoutSessionId] = React.useState<string | null>(
+    null
+  );
 
   const {
     thisDevice = 'This Device',
@@ -94,17 +113,21 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
     noSessions = 'No active sessions found.',
     loadingLogoutText = 'Logging out...',
     cannotLogoutThisDeviceTitle = '⚠️ Cannot Logout',
-    cannotLogoutThisDeviceMessage = 'You cannot log out of this device.'
+    cannotLogoutThisDeviceMessage = 'You cannot log out of this device.',
   } = textLabels || {};
 
-  const renderItem = ({ item }: { item: ISessions }): React.ReactElement | null => {
+  const renderItem = ({
+    item,
+  }: {
+    item: ISessions;
+  }): React.ReactElement | null => {
     const isActive = item?.id === activeSessionId;
     const isLoggingOut = isLoadingLogout && logoutSessionId === item.id;
     if (renderContent) {
       return (
         (renderContent({
           session: item,
-          isActive
+          isActive,
         }) as React.ReactElement) ?? null
       );
     }
@@ -113,9 +136,14 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
     const hasLocation = location?.city || location?.state || location?.country;
     const handleLogoutPress = () => {
       if (isActive) {
-        Alert.alert(cannotLogoutThisDeviceTitle, cannotLogoutThisDeviceMessage, [{ text: 'Cancel', style: 'cancel' }], {
-          cancelable: true
-        });
+        Alert.alert(
+          cannotLogoutThisDeviceTitle,
+          cannotLogoutThisDeviceMessage,
+          [{ text: 'Cancel', style: 'cancel' }],
+          {
+            cancelable: true,
+          }
+        );
         return;
       }
       setLogoutSessionId(item.id);
@@ -128,21 +156,30 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
           {
             backgroundColor: colors.surfaceVariant,
             borderColor: colors.outlineVariant ?? colors.outline,
-            shadowColor: colors.shadow ?? '#000'
-          }
+            shadowColor: colors.shadow ?? '#000',
+          },
         ]}
       >
         <View style={styles.deviceInfo}>
           {(name || isActive) && (
             <View style={styles.deviceRowHeader}>
               {name && (
-                <Text numberOfLines={1} ellipsizeMode="tail" style={[styles.deviceName, { color: colors.onSurface }]}>
+                <Text
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                  style={[styles.deviceName, { color: colors.onSurface }]}
+                >
                   {name}
                 </Text>
               )}
               {isActive && (
-                <View style={[styles.badge, { backgroundColor: colors.button }]}>
-                  <Text numberOfLines={1} style={[styles.badgeText, { color: colors.black }]}>
+                <View
+                  style={[styles.badge, { backgroundColor: colors.button }]}
+                >
+                  <Text
+                    numberOfLines={1}
+                    style={[styles.badgeText, { color: colors.black }]}
+                  >
                     {thisDevice}
                   </Text>
                 </View>
@@ -158,7 +195,10 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
             >
               {browser}
               {browser && hasLocation ? ' · ' : ''}
-              {hasLocation && [location?.city, location?.state, location?.country].filter(Boolean).join(', ')}
+              {hasLocation &&
+                [location?.city, location?.state, location?.country]
+                  .filter(Boolean)
+                  .join(', ')}
             </Text>
           )}
 
@@ -175,7 +215,7 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
 
         {renderLogoutButton ? (
           renderLogoutButton({
-            session: item
+            session: item,
           })
         ) : (
           <TouchableOpacity
@@ -184,7 +224,11 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
             activeOpacity={0.7}
             onPress={handleLogoutPress}
           >
-            <Text numberOfLines={1} ellipsizeMode="tail" style={[styles.logoutText, { color: colors.primary }]}>
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[styles.logoutText, { color: colors.primary }]}
+            >
               {isLoggingOut ? loadingLogoutText : logOut}
             </Text>
           </TouchableOpacity>
@@ -205,7 +249,7 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
               borderRadius: scale(10),
               padding: scale(12),
               marginBottom: verticalScale(12),
-              backgroundColor: colors.surfaceVariant
+              backgroundColor: colors.surfaceVariant,
             }}
           >
             <SkeletonPlaceholder
@@ -213,7 +257,11 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
               highlightColor={colors.skeletonHighlightColor || '#F2F8FC'}
               borderRadius={scale(8)}
             >
-              <SkeletonPlaceholder.Item flexDirection="row" alignItems="center" justifyContent="space-between">
+              <SkeletonPlaceholder.Item
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="space-between"
+              >
                 <SkeletonPlaceholder.Item flex={1} paddingRight={scale(12)}>
                   <SkeletonPlaceholder.Item
                     width="60%"
@@ -227,10 +275,18 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
                     borderRadius={scale(4)}
                     marginBottom={scale(4)}
                   />
-                  <SkeletonPlaceholder.Item width="50%" height={scale(10)} borderRadius={scale(4)} />
+                  <SkeletonPlaceholder.Item
+                    width="50%"
+                    height={scale(10)}
+                    borderRadius={scale(4)}
+                  />
                 </SkeletonPlaceholder.Item>
 
-                <SkeletonPlaceholder.Item width={scale(80)} height={verticalScale(30)} borderRadius={scale(6)} />
+                <SkeletonPlaceholder.Item
+                  width={scale(80)}
+                  height={verticalScale(30)}
+                  borderRadius={scale(6)}
+                />
               </SkeletonPlaceholder.Item>
             </SkeletonPlaceholder>
           </View>
@@ -247,13 +303,23 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
     });
   }, [sessions, activeSessionId]);
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }, style]}>
+    <View
+      style={[styles.container, { backgroundColor: colors.background }, style]}
+    >
       {renderHeader ? (
         renderHeader()
       ) : (
         <AppHeader
           title={title}
           onBackPress={onBackPress}
+          onRightPress={onQrLoginPress}
+          rightIcon={
+            <ScanLine
+              size={22}
+              strokeWidth={2}
+              color={colors.onSurfaceVariant}
+            />
+          }
           titleAlign={headerTitleAlign}
           style={headerStyle}
           titleStyle={headerTitleStyle}
@@ -287,11 +353,11 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
   },
   listContent: {
     paddingHorizontal: scale(16),
-    paddingVertical: verticalScale(12)
+    paddingVertical: verticalScale(12),
   },
   deviceRow: {
     flexDirection: 'row',
@@ -304,11 +370,11 @@ const styles = StyleSheet.create({
     elevation: 2,
     shadowOpacity: 0.1,
     shadowOffset: { width: 0, height: 1 },
-    shadowRadius: 4
+    shadowRadius: 4,
   },
   deviceInfo: {
     flex: 1,
-    paddingRight: scale(12)
+    paddingRight: scale(12),
   },
   deviceRowHeader: {
     flexDirection: 'row',
@@ -316,18 +382,18 @@ const styles = StyleSheet.create({
     columnGap: scale(8),
     rowGap: verticalScale(2),
     flexWrap: 'wrap',
-    marginBottom: scale(4)
+    marginBottom: scale(4),
   },
   deviceName: {
     fontSize: RFValue(12),
     fontWeight: '600',
     flexShrink: 1,
-    maxWidth: '80%'
+    maxWidth: '80%',
   },
   deviceMeta: {
     fontSize: RFValue(9),
     marginTop: scale(2),
-    flexShrink: 1
+    flexShrink: 1,
   },
   logoutButton: {
     paddingHorizontal: scale(12),
@@ -335,36 +401,36 @@ const styles = StyleSheet.create({
     borderRadius: scale(6),
     minWidth: scale(80),
     borderWidth: scale(1.5),
-    alignItems: 'center'
+    alignItems: 'center',
   },
   logoutText: {
     fontSize: RFValue(10),
-    fontWeight: '600'
+    fontWeight: '600',
   },
   badge: {
     paddingHorizontal: scale(8),
     paddingVertical: verticalScale(2),
-    borderRadius: scale(6)
+    borderRadius: scale(6),
   },
   badgeText: {
     fontSize: RFValue(9),
     fontWeight: '500',
     maxWidth: scale(100),
-    flexShrink: 1
+    flexShrink: 1,
   },
   emptyWrapper: {
     paddingVertical: verticalScale(40),
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   emptyText: {
     fontSize: RFValue(11),
-    textAlign: 'center'
+    textAlign: 'center',
   },
   skeletonLine: {
     borderRadius: scale(4),
-    backgroundColor: '#ccc'
-  }
+    backgroundColor: '#ccc',
+  },
 });
 
 export namespace DeviceSessions {

package/src/components/User/ProfileUpdate/ProfileUpdate.tsx

@@ -0,0 +1,265 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 03 Oct 2025 at 01:09 PM
+ */
+import { useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
+  TouchableOpacity,
+} from 'react-native';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { Camera } from 'lucide-react-native';
+import { useForm, Controller } from 'react-hook-form';
+import { Text } from '../../Text';
+import AppHeader from '../../Headers/AppHeader';
+import { useTheme } from '../../../theme/hook/useTheme';
+import type { AppTheme } from '../../../theme/themes';
+import UserAvatar from '../components/UserAvatar';
+import { Input } from '../../Input/Input';
+import { Button } from '../../Button';
+import ImageCropPicker, { type Image } from 'react-native-image-crop-picker';
+
+export type ProfileUpdateFormValues = {
+  fullName: string;
+  avatarFile: Image; // new field to store actual file
+};
+
+export type ProfileUpdateProps = {
+  title?: string;
+  name?: string;
+  avatarUri?: string;
+  onBackPress?: () => void;
+  onSubmit?: (val: { fullName: string; avatarFile: Image }) => void;
+  theme?: AppTheme;
+  loading?: boolean;
+  onError?: (error: { message: string }) => void;
+};
+
+export const ProfileUpdate = ({
+  title = 'My Profile',
+  name = '',
+  avatarUri = '',
+  onBackPress,
+  onSubmit,
+  theme,
+  loading = false,
+  onError,
+}: ProfileUpdateProps) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const { colors } = appliedTheme;
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    trigger,
+    setValue,
+    watch,
+  } = useForm<ProfileUpdateFormValues>({
+    defaultValues: {
+      fullName: name,
+      avatarFile: {
+        path: avatarUri,
+      },
+    },
+    mode: 'onChange',
+    reValidateMode: 'onBlur',
+  });
+
+  const avatar = watch('avatarFile');
+
+  const handlePickImage = async () => {
+    try {
+      const image = await ImageCropPicker.openPicker({
+        width: 400,
+        height: 400,
+        cropping: true,
+        showCropGuidelines: false,
+        cropperCircleOverlay: true,
+        showCropFrame: false,
+        compressImageQuality: 0.7,
+        mediaType: 'photo',
+      });
+
+      if (image?.path && image?.path !== '' && image.path !== avatarUri) {
+        setValue('avatarFile', image, {
+          shouldValidate: true,
+          shouldDirty: true,
+        });
+      } else {
+        onError?.({ message: 'No image selected' });
+      }
+    } catch (error) {
+      const message = (error as Error).message;
+      onError?.({ message });
+    }
+  };
+
+  const handleFormSubmit = useCallback(
+    (data: ProfileUpdateFormValues) => {
+      Keyboard.dismiss();
+      if (data.avatarFile.path !== avatarUri) {
+        onSubmit?.({
+          avatarFile: data.avatarFile,
+          fullName: data.fullName,
+        });
+      } else {
+        onError?.({ message: 'No image selected' });
+      }
+    },
+    [avatarUri, onError, onSubmit]
+  );
+
+  return (
+    <KeyboardAvoidingView
+      style={[styles.container, { backgroundColor: colors.background }]}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        <View style={{ flex: 1 }}>
+          <AppHeader
+            title={title}
+            onBackPress={onBackPress}
+            theme={appliedTheme}
+            titleAlign="left"
+          />
+
+          <View style={styles.content}>
+            <View style={styles.avatarBox}>
+              <UserAvatar
+                avatarUri={avatar.path}
+                theme={appliedTheme}
+                size={100}
+              />
+              <TouchableOpacity
+                style={[
+                  styles.cameraBtn,
+                  {
+                    borderColor: colors.button,
+                    backgroundColor: colors.surfaceVariant,
+                    shadowColor: colors.shadow || colors.surface,
+                  },
+                ]}
+                activeOpacity={0.8}
+                onPress={handlePickImage}
+              >
+                <Camera
+                  size={moderateScale(13)}
+                  color={colors.button}
+                  strokeWidth={2}
+                />
+              </TouchableOpacity>
+            </View>
+
+            <Text style={[styles.label, { color: colors.textPrimary }]}>
+              Basic Detail
+            </Text>
+
+            <View style={styles.formContainer}>
+              <Controller
+                control={control}
+                name="fullName"
+                rules={{
+                  required: 'Name is required',
+                  minLength: { value: 3, message: 'At least 3 characters' },
+                }}
+                render={({ field: { onChange, value, onBlur } }) => (
+                  <View style={{ width: '100%' }}>
+                    <Input.One
+                      label="Full Name"
+                      value={value}
+                      onChangeText={(text) => {
+                        onChange(text);
+                        trigger('fullName');
+                      }}
+                      onBlur={onBlur}
+                      placeholder={'Enter your full name'}
+                      placeholderTextColor={colors.textDisabled}
+                      containerStyle={{ marginTop: verticalScale(20) }}
+                      theme={appliedTheme}
+                      returnKeyType="done"
+                      onSubmitEditing={handleSubmit(handleFormSubmit)}
+                    />
+                    {errors.fullName && (
+                      <Text style={[styles.errorText, { color: colors.error }]}>
+                        {errors.fullName.message}
+                      </Text>
+                    )}
+                  </View>
+                )}
+              />
+
+              <Button.Primary
+                title={'Update Profile'}
+                onPress={handleSubmit(handleFormSubmit)}
+                theme={appliedTheme}
+                titleStyle={{ fontSize: RFValue(14) }}
+                loading={loading}
+                containerStyle={{ marginTop: verticalScale(5) }}
+              />
+            </View>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
+  );
+};
+
+export default ProfileUpdate;
+
+namespace ProfileUpdate {
+  export type Props = ProfileUpdateProps;
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    padding: moderateScale(16),
+  },
+  avatarBox: {
+    marginVertical: verticalScale(20),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cameraBtn: {
+    position: 'absolute',
+    bottom: scale(3),
+    right: scale(3),
+    padding: scale(2),
+    width: scale(23),
+    height: scale(23),
+    borderRadius: scale(13.5),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    elevation: 3,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.5,
+  },
+  label: {
+    fontSize: RFValue(12),
+    fontWeight: '500',
+    alignSelf: 'flex-start',
+    margin: scale(5),
+    marginTop: verticalScale(10),
+  },
+  formContainer: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  errorText: {
+    fontSize: RFValue(11),
+    marginTop: verticalScale(5),
+    marginLeft: scale(5),
+    alignSelf: 'flex-start',
+  },
+});

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

@@ -4,7 +4,14 @@
  */
 
 import React from 'react';
-import { StyleSheet, View, TouchableOpacity, type StyleProp, type ViewStyle, type ListRenderItem } from 'react-native';
+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';
@@ -88,13 +95,13 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
   onPressItem,
 
   onEndReached,
-  onEndReachedThreshold
+  onEndReachedThreshold,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
   const listData = isLoading
     ? Array.from({ length: skeletonCount }, (_, i) => ({
-        _id: `skeleton-${i}`
+        _id: `skeleton-${i}`,
       }))
     : data;
 
@@ -103,8 +110,16 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
     if (!isLoading && renderItem) return renderItem(item, index);
 
     return (
-      <TouchableOpacity key={item._id || index} onPress={() => onPressItem?.(item)} activeOpacity={0.8}>
-        <CardPoster theme={appliedTheme} isLoading={isLoading} posterUri={item?.content?.poster} />
+      <TouchableOpacity
+        key={item._id || index}
+        onPress={() => onPressItem?.(item)}
+        activeOpacity={0.8}
+      >
+        <CardPoster
+          theme={appliedTheme}
+          isLoading={isLoading}
+          posterUri={item?.content?.poster}
+        />
       </TouchableOpacity>
     );
   };
@@ -120,10 +135,17 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
           titleAlign="left"
           theme={appliedTheme}
           titleStyle={{
-            color: appliedTheme.colors.onBackground
+            color: appliedTheme.colors.onBackground,
           }}
           onRightPress={onSearchPress}
-          rightIcon={showSearchIcon ? <Search size={scale(23)} color={appliedTheme.colors.onBackground} /> : undefined}
+          rightIcon={
+            showSearchIcon ? (
+              <Search
+                size={scale(23)}
+                color={appliedTheme.colors.onBackground}
+              />
+            ) : undefined
+          }
         />
       )}
 
@@ -134,7 +156,10 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
           data={listData}
           keyExtractor={(item, index) => item._id || `item-${index}`}
           style={listStyle}
-          contentContainerStyle={[contentContainerStyle, { paddingBottom: scale(50) }]}
+          contentContainerStyle={[
+            contentContainerStyle,
+            { paddingBottom: scale(50) },
+          ]}
           renderItem={renderGridItem}
           onEndReached={onEndReached}
           onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
@@ -152,18 +177,18 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
   },
 
   noData: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   noDataText: {
     fontSize: RFValue(12),
-    opacity: 0.5
-  }
+    opacity: 0.5,
+  },
 });
 
 export namespace WatchHistory {