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

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

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