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

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

@@ -0,0 +1,293 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { useCallback, memo, useMemo } 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';
+import type { ThemeOverride } 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;
+};
+
+export type ProfileUpdateProps = {
+  title?: string;
+  name?: string;
+  avatarUri?: string;
+  onBackPress?: () => void;
+  onSubmit?: (val: { fullName: string; avatarFile?: Image }) => void;
+  theme?: ThemeOverride;
+  loading?: boolean;
+  onError?: (error: { message: string }) => void;
+};
+
+const ProfileUpdateComponent = ({
+  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: avatarUri ? ({ path: avatarUri } as Image) : undefined,
+    },
+    mode: 'onChange',
+    reValidateMode: 'onBlur',
+  });
+
+  const avatar = watch('avatarFile');
+
+  const containerStyle = useMemo(
+    () => [styles.container, { backgroundColor: colors.background }],
+    [colors.background]
+  );
+
+  const cameraBtnStyle = useMemo(
+    () => [
+      styles.cameraBtn,
+      {
+        borderColor: colors.primary,
+        backgroundColor: colors.surfaceVariant,
+        shadowColor: colors.shadow || colors.surface,
+      },
+    ],
+    [colors.primary, colors.surfaceVariant, colors.shadow, colors.surface]
+  );
+
+  const labelStyle = useMemo(
+    () => [styles.label, { color: colors.textPrimary }],
+    [colors.textPrimary]
+  );
+
+  const errorTextStyle = useMemo(
+    () => [styles.errorText, { color: colors.error }],
+    [colors.error]
+  );
+
+  const handlePickImage = useCallback(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 });
+    }
+  }, [avatarUri, setValue, onError]);
+
+  const handleFormSubmit = useCallback(
+    (data: ProfileUpdateFormValues) => {
+      Keyboard.dismiss();
+
+      const hasNewAvatar =
+        data.avatarFile?.path && data.avatarFile.path !== avatarUri;
+
+      onSubmit?.({
+        fullName: data.fullName,
+        ...(hasNewAvatar ? { avatarFile: data.avatarFile } : {}),
+      });
+    },
+    [avatarUri, onSubmit]
+  );
+
+  return (
+    <KeyboardAvoidingView
+      style={containerStyle}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        <View style={styles.container}>
+          <AppHeader
+            title={title}
+            onBackPress={onBackPress}
+            theme={theme}
+            titleAlign="left"
+          />
+
+          <View style={styles.content}>
+            <View style={styles.avatarBox}>
+              <UserAvatar avatarUri={avatar?.path} theme={theme} size={100} />
+              <TouchableOpacity
+                style={cameraBtnStyle}
+                activeOpacity={0.8}
+                onPress={handlePickImage}
+              >
+                <Camera
+                  size={moderateScale(13)}
+                  color={colors.primary}
+                  strokeWidth={2}
+                />
+              </TouchableOpacity>
+            </View>
+
+            <Text style={labelStyle}>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={styles.inputWrapper}>
+                    <Input.One
+                      label="Full Name"
+                      value={value}
+                      onChangeText={(text) => {
+                        onChange(text);
+                        trigger('fullName');
+                      }}
+                      onBlur={onBlur}
+                      placeholder={'Enter your full name'}
+                      placeholderTextColor={colors.textDisabled}
+                      containerStyle={styles.inputContainer}
+                      theme={theme}
+                      returnKeyType="done"
+                      onSubmitEditing={() => {
+                        handleSubmit(handleFormSubmit)();
+                      }}
+                    />
+                    {errors.fullName && (
+                      <Text style={errorTextStyle}>
+                        {errors.fullName.message}
+                      </Text>
+                    )}
+                  </View>
+                )}
+              />
+
+              <Button.Primary
+                title={'Update Profile'}
+                onPress={handleSubmit(handleFormSubmit)}
+                theme={theme}
+                titleStyle={styles.btnTitle}
+                loading={loading}
+                containerStyle={styles.btnContainer}
+              />
+            </View>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
+  );
+};
+
+export const ProfileUpdate = memo(ProfileUpdateComponent);
+export default ProfileUpdate;
+
+namespace ProfileUpdate {
+  export type Props = ProfileUpdateProps;
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  inputWrapper: {
+    width: '100%',
+  },
+  inputContainer: {
+    marginTop: verticalScale(20),
+  },
+  btnTitle: {
+    fontSize: RFValue(14),
+  },
+  btnContainer: {
+    marginTop: verticalScale(5),
+  },
+  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',
+  },
+});