change user info

android/app/release/output-metadata.json

+{
+  "version": 3,
+  "artifactType": {
+    "type": "APK",
+    "kind": "Directory"
+  },
+  "applicationId": "com.anawork_mobile",
+  "variantName": "release",
+  "elements": [
+    {
+      "type": "SINGLE",
+      "filters": [],
+      "attributes": [],
+      "versionCode": 1,
+      "versionName": "1.0",
+      "outputFile": "app-release.apk"
+    }
+  ],
+  "elementType": "File",
+  "baselineProfiles": [
+    {
+      "minApi": 28,
+      "maxApi": 30,
+      "baselineProfiles": [
+        "baselineProfiles/1/app-release.dm"
+      ]
+    },
+    {
+      "minApi": 31,
+      "maxApi": 2147483647,
+      "baselineProfiles": [
+        "baselineProfiles/0/app-release.dm"
+      ]
+    }
+  ],
+  "minSdkVersionForDexing": 23
+}
\ No newline at end of file

src/api/authAPI.js

@@ -14,7 +14,7 @@ const authAPI = {
       `authenticate/authenticate?username=${username}&password=${password}`,
     ),
 
-  requestLogout: ({token}) => axiosClient.post('authenticate/logout', {token}),
+  requestLogout: () => axiosClient.post('authenticate/logout'),
 
   requestGetMyInfo: () => axiosClient.get('authenticate/getMyInfo'),
   requestGetCompanyLogo: () => axiosClient.get('companyInfo'),

src/network/api/onLeaveApi.js → src/api/onLeaveApi.js

-import axiosClient from '../axios';
+import axiosClient from '../network/axios';
 export default {
   requestGetLeavesDay: ({filter, sort, page, pageSize}) =>
     axiosClient.get(

src/api/profileAPI.js

+import axiosClient from '../network/axios';
+export default {
+  requestChangeUserInfo: ({id, body}) => axiosClient.put(`users/${id}`, body),
+};

src/config/index.js

@@ -2,7 +2,10 @@ const storageKey = {
   AUTH: 'auth',
   LANGUAGE: 'language',
 };
-
+const profileField = {
+  PERSONAL_INFO: 'Personal Information',
+  DETAIL_INFO: 'Detail Information',
+};
 export default {
   apiEndpoint: 'https://gateway.dev.meu-solutions.com/staginganawork/api/',
   //apiEndpoint: 'https://gateway.dev.meu-solutions.com/techport/api/',
@@ -11,4 +14,5 @@ export default {
   ONE_SIGNAL_KEY: '6f4f8bd1-9b43-4067-8175-c0052140e891',
   axiosTimeout: 10000,
   storageKey,
+  profileField,
 };

src/screens/authentication/authSlice.js

@@ -52,6 +52,19 @@ export const getCompanyInfo = createAsyncThunk(
     });
   },
 );
+export const logout = createAsyncThunk(
+  'auth/logout',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: authAPI.requestLogout,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
 const authSlice = createSlice({
   name: 'auth',
   initialState: initialState,
@@ -71,6 +84,12 @@ const authSlice = createSlice({
         state.userInfo = user;
       }
     });
+    builder.addCase(logout.fulfilled, (state, action) => {
+      const {success} = Utils.getValues(action, 'payload', false);
+      if (success) {
+        Utils.removeData(config.storageKey.AUTH);
+      }
+    });
   },
 });
 

src/screens/authentication/login/LoginContainer.js

-/* eslint-disable prettier/prettier */
 import React, {useState} from 'react';
 import RootNavigation from '../../../navigation/RootNavigation';
 import LoginScreen from './LoginScreen';
@@ -7,11 +6,10 @@ import {useTranslation} from 'react-i18next';
 import OneSignal from 'react-native-onesignal';
 import {useDispatch, useSelector} from 'react-redux';
 import {loaderSelector} from '../../../app/selectors';
-import {getMyInfo} from '../../../store/actions/CommonAction';
 import Utils from '../../../utils';
 import {APP_NAVIGATE_SCREEN} from '../../../utils/constant';
 import {ToastMessage} from '../../../utils/MessageUtil';
-import {authenticate} from '../authSlice';
+import {authenticate, getMyInfo} from '../authSlice';
 const LoginContainer = props => {
   // console.log("props: ", props)
   const dispatch = useDispatch();
@@ -66,6 +64,7 @@ const LoginContainer = props => {
         }),
       ).then(response => {
         const {success} = Utils.getValues(response, 'payload', false);
+        dispatch(getMyInfo());
         if (success) {
           ToastMessage({
             title: 'Hệ thống',

src/screens/confirm_date/ConfirmDateContainer.js

@@ -380,6 +380,11 @@ const ConfirmDateContainer = props => {
   };
   const handleSubmitConfirmWorkingDayRequest = () => {
     if (directManagersList?.length === 0) {
+      ToastMessage({
+        title: 'Hệ thống',
+        message: 'Bạn đã là cấp trên không thể gửi yêu cầu !!!',
+        type: 'error',
+      });
       return false;
     }
     const isSelectedManager = directManagersList.filter(item => item.isChecked);

src/screens/onleave/OnLeaveContainer.js

@@ -334,6 +334,12 @@ const OnLeaveContainer = props => {
   };
   const handleSubmitLeaveRequest = () => {
     if (directManagersList?.length === 0) {
+      ToastMessage({
+        title: 'Hệ thống',
+        message: 'Bạn đã là cấp trên không thể gửi yêu cầu !!!',
+        type: 'info',
+        timeVisible: 5000,
+      });
       return false;
     }
     const isSelectedManager = directManagersList.filter(item => item.isChecked);

src/screens/onleave/onLeaveSlice.js

@@ -2,7 +2,7 @@ import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
 
 import serviceRequest from '../../app/serviceRequest';
 
-import onLeaveApi from '../../network/api/onLeaveApi';
+import onLeaveApi from '../../api/onLeaveApi';
 import Utils from '../../utils';
 
 const initialHome = {

src/screens/onleave/style.js

@@ -428,9 +428,9 @@ export const leavesModalStyles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 4,
     elevation: 5,
-    marginTop: 80,
-    height: windowHeight,
+    marginTop: 100,
     width: '100%',
+    height: windowHeight,
   },
 
   button: {

src/screens/profile/profilePropsProvider.js

@@ -2,86 +2,24 @@ export default function profilePropsProvider(props) {
   const {
     userInfo,
     isEditField,
-    btnAvailable,
-    infoUser,
     avatar,
     visibleMenu,
-    isSlideShow,
-    dateTimePicker,
-    contactUser,
-    showAlert,
-    modalVisible,
-    userInputContact,
-    setAvatar,
-    setInfoUser,
-    navigateMain,
-    setEditField,
-    setBtnAvailable,
-    onSaveInfo,
     onDeniedAvatar,
     onConfirmAvatar,
     showMenu,
     openGallery,
-    showFullScreen,
-    hideFullScreen,
     hideMenu,
-    hideDateTimePicker,
-    setDateTimePicker,
-    onSubmitChangeContactUser,
-    setContactUser,
-    onChangeDropDownContactUser,
-    onChangeInputContactUser,
-    onPressDeleteItem,
-    onPressAddItem,
-    onConfirmDeleteAlert,
-    onCancelAlert,
-    setUserInputContact,
-    onSubmitCreateNew,
-    setModalVisible,
     navigateToLogout,
     onChangeCoverAvatar,
+    onEditUserInfo,
+    editUserInfo,
+    onSubmitChangeInfo,
   } = props;
   return {
     userInfo,
-    isEditField,
-    btnAvailable,
-    infoUser,
-    avatar,
-    visibleMenu,
-    isSlideShow,
-    dateTimePicker,
-    contactUser,
-    showAlert,
-    modalVisible,
-    userInputContact,
-    setAvatar,
-    setInfoUser,
-    navigateMain,
-    setEditField,
-    setBtnAvailable,
-    onSaveInfo,
-    onDeniedAvatar,
-    onConfirmAvatar,
-    showMenu,
-    openGallery,
-    showFullScreen,
-    hideFullScreen,
-    hideMenu,
-    hideDateTimePicker,
-    setDateTimePicker,
-    onSubmitChangeContactUser,
-    setContactUser,
-    onChangeDropDownContactUser,
-    onChangeInputContactUser,
-    onPressDeleteItem,
-    onPressAddItem,
-    onConfirmDeleteAlert,
-    onCancelAlert,
-    setUserInputContact,
-    onSubmitCreateNew,
-    setModalVisible,
     navigateToLogout,
-    onChangeCoverAvatar,
+    onEditUserInfo,
+    editUserInfo,
     introduceUserProps: {
       userInfo,
       isEditField,
@@ -94,5 +32,6 @@ export default function profilePropsProvider(props) {
       openGallery,
       onChangeCoverAvatar,
     },
+    onSubmitChangeInfo,
   };
 }

src/screens/profile/profileSlice.js

+import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
+
+import serviceRequest from '../../app/serviceRequest';
+
+import Utils from '../../utils';
+import profileAPI from '../../api/profileAPI';
+
+const initialState = {};
+
+export const changeUserInfo = createAsyncThunk(
+  'profile/changeUserInfo',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: profileAPI.requestChangeUserInfo,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
+
+const profileSlice = createSlice({
+  name: 'profile',
+  initialState: initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder.addCase(changeUserInfo.fulfilled, (state, action) => {
+      const {success} = Utils.getValues(action, 'payload', false);
+    });
+  },
+});
+
+const {reducer} = profileSlice;
+export default reducer;

src/screens/profile/template/ProfileMainView.js

-import Moment from 'moment';
 import React from 'react';
-import {
-  Animated,
-  Image,
-  ImageBackground,
-  Modal,
-  SafeAreaView,
-  ScrollView,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import Alert from 'react-native-awesome-alerts';
-import {GestureHandlerRootView, Swipeable} from 'react-native-gesture-handler';
-import {Menu, MenuItem} from 'react-native-material-menu';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
-import SelectDropdown from 'react-native-select-dropdown';
-import Swiper from 'react-native-swiper';
-import AppText from '../../../components/AppText';
+import {SafeAreaView, ScrollView, View} from 'react-native';
 import ButtonComponent from '../../../components/ButtonComponent';
-import TextInputComponent from '../../../components/TextInputComponent';
-import {
-  IMAGES,
-  IcNotificationList,
-  IconProfile,
-  IconSocial,
-} from '../../../values/images';
-import {default as string, default as strings} from '../../../values/string';
+import {IMAGES} from '../../../values/images';
 import styles from '../style';
-import colors from '../../../values/colors';
-import config from '../../../config';
-import IntroduceUser from './components/IntroduceUser';
+import DetailInformation from './components/DetailInformation';
 import GeneralInformation from './components/GeneralInformation';
+import IntroduceUser from './components/IntroduceUser';
 import PersonalInformation from './components/PersonalInformation';
-import DetailInformation from './components/DetailInformation';
-const Socials = [
-  'FACEBOOK',
-  'EMAIL',
-  'SKYPE',
-  'LINKEDIN',
-  'TWITTER',
-  'INSTAGRAM',
-  'WHATSAPP',
-  'VIPER',
-  'SNAPCHAT',
-  'TELEGRAM',
-  'APPLE',
-  'YOUTUBE',
-  'PINTEREST',
-];
-const gender = ['Nam', 'Nữ'];
 
 const ProfileMainView = ({
   userInfo,
-  contactUser,
-  btnAvailable,
-  isEditField,
-  navigateMain,
-  setEditField,
-  setBtnAvailable,
-  infoUser,
-  setInfoUser,
-  onSaveInfo,
-  avatar = [],
-  onDeniedAvatar,
-  onConfirmAvatar,
-  showMenu,
-  hideMenu,
-  visibleMenu,
-  openGallery,
-  isSlideShow,
-  showFullScreen,
-  hideFullScreen,
-  dateTimePicker,
-  hideDateTimePicker,
-  setDateTimePicker,
-  showAlert,
-  onSubmitChangeContactUser,
-  onChangeDropDownContactUser,
-  onChangeInputContactUser,
-  onPressDeleteItem,
-  onPressAddItem,
-  onCancelAlert,
-  modalVisible,
-  setModalVisible,
-  setUserInputContact,
-  userInputContact,
-  onSubmitCreateNew,
-  onConfirmDeleteAlert,
   navigateToLogout,
-  onChangeCoverAvatar,
   introduceUserProps,
+  onEditUserInfo,
+  editUserInfo,
+  onSubmitChangeInfo,
 }) => {
   return (
     <SafeAreaView style={styles.container}>
@@ -100,9 +24,19 @@ const ProfileMainView = ({
         {/* General information  */}
         <GeneralInformation userInfo={userInfo} />
         {/* personal information  */}
-        <PersonalInformation userInfo={userInfo} />
+        <PersonalInformation
+          userInfo={userInfo}
+          onEditUserInfo={onEditUserInfo}
+          editUserInfo={editUserInfo}
+          handleSubmitChangeInfo={onSubmitChangeInfo}
+        />
         {/* detail information  */}
-        <DetailInformation userInfo={userInfo} />
+        <DetailInformation
+          userInfo={userInfo}
+          onEditUserInfo={onEditUserInfo}
+          editUserInfo={editUserInfo}
+          handleSubmitChangeInfo={onSubmitChangeInfo}
+        />
         {/* Logout Btn */}
         <View
           style={{
@@ -118,96 +52,6 @@ const ProfileMainView = ({
             onPress={navigateToLogout}
           />
         </View>
-        {/* <View style={styles.centeredView}>
-          <Modal
-            animationType="slide"
-            transparent={true}
-            visible={modalVisible}
-            onRequestClose={() => {
-              Alert.alert('Modal has been closed.');
-              setModalVisible(!modalVisible);
-            }}>
-            <View style={styles.centeredView}>
-              <View style={styles.modalView}>
-                <View style={{flexDirection: 'row'}}>
-                  <View style={{flex: 1}}>
-                    <SelectDropdown
-                      data={Socials}
-                      dropdownIconPosition={'right'}
-                      defaultButtonText={'Loại liên hệ'}
-                      buttonStyle={styles.dropdown1BtnStyle}
-                      onSelect={(selectedItem, item_index) =>
-                        setUserInputContact(prev => ({
-                          ...prev,
-                          type: selectedItem,
-                        }))
-                      }
-                      dropdownStyle={styles.dropdown1DropdownStyle}
-                      rowStyle={styles.dropdown1RowStyle}
-                      rowTextStyle={styles.dropdown1RowTxtStyle}
-                      buttonTextStyle={styles.dropdown1BtnTxtStyle}
-                      renderDropdownIcon={isOpened => {
-                        return (
-                          <Image
-                            source={
-                              isOpened ? IMAGES.IcUpArrow : IMAGES.IcDownArrow
-                            }
-                            style={{width: 20, height: 20}}
-                          />
-                        );
-                      }}
-                    />
-                    {userInputContact.type.length <= 0 && (
-                      <AppText style={{fontSize: 12, color: 'red'}}>
-                        {' '}
-                        Vui lòng chọn liên hệ
-                      </AppText>
-                    )}
-                  </View>
-                  <View style={{flex: 1}}>
-                    <TextInput
-                      style={{borderBottomWidth: 0.2}}
-                      placeholder={'Nhập F'}
-                      keyboardType={'email-address'}
-                      autoCapitalize="none"
-                      value={userInputContact.text}
-                      onChangeText={text =>
-                        setUserInputContact(prev => ({
-                          ...prev,
-                          text: text,
-                        }))
-                      }
-                    />
-                    {userInputContact.text.length <= 0 && (
-                      <AppText style={{fontSize: 12, color: 'red'}}>
-                        {' '}
-                        Vui lòng nhập liên hệ
-                      </AppText>
-                    )}
-                  </View>
-                </View>
-                <View style={{flexDirection: 'row', marginTop: 20}}>
-                  <ButtonComponent
-                    text={'Đóng'}
-                    textStyle={styles.textStyle}
-                    style={[
-                      styles.button,
-                      styles.buttonClose,
-                      {marginRight: 15},
-                    ]}
-                    onPress={() => setModalVisible(!modalVisible)}
-                  />
-                  <ButtonComponent
-                    text={'Thêm mới'}
-                    textStyle={styles.textStyle}
-                    style={[styles.button, styles.buttonClose]}
-                    onPress={onSubmitCreateNew}
-                  />
-                </View>
-              </View>
-            </View>
-          </Modal>
-        </View> */}
       </ScrollView>
     </SafeAreaView>
   );

src/screens/profile/template/components/DetailInformation.js

@@ -6,9 +6,14 @@ import string from '../../../../values/string';
 import styles from '../../style';
 import commonStyles from '../../../../styles/commonStyles';
 import moment from 'moment';
+import config from '../../../../config';
+import {Formik} from 'formik';
+import TextInputComponent from '../../../../components/TextInputComponent';
+import ButtonComponent from '../../../../components/ButtonComponent';
+import colors from '../../../../values/colors';
 
 const DetailInformation = React.memo(
-  ({userInfo}) => {
+  ({userInfo, editUserInfo, onEditUserInfo, handleSubmitChangeInfo}) => {
     const personalInfo = [
       {
         name: 'Số CMND',
@@ -74,7 +79,7 @@ const DetailInformation = React.memo(
         name: 'Địa chỉ liên hệ',
         value: userInfo?.address || '',
         icon: IMAGES.IcLocationGray,
-        width: '50%',
+        width: '100%',
       },
       {
         name: 'Địa chỉ thường trú',
@@ -90,30 +95,93 @@ const DetailInformation = React.memo(
             {string.PERSONAL_INFORMATION}
           </AppText>
           <View>
-            <TouchableOpacity>
-              <Image source={IMAGES.IcEdit} style={{height: 30, width: 30}} />
-            </TouchableOpacity>
+            {!editUserInfo?.detailInfo ? (
+              <TouchableOpacity
+                onPress={() => onEditUserInfo(config.profileField.DETAIL_INFO)}>
+                <Image source={IMAGES.IcEdit} style={{height: 30, width: 30}} />
+              </TouchableOpacity>
+            ) : (
+              <TouchableOpacity onPress={() => onEditUserInfo()}>
+                <Image source={IMAGES.IcReject} />
+              </TouchableOpacity>
+            )}
           </View>
         </View>
         <View style={[commonStyles.row, {flexWrap: 'wrap'}]}>
-          {personalInfo.map(item => (
-            <View
-              key={item.name}
-              style={[styles.infoView, {width: item.width}]}>
-              <Image source={item.icon} style={{width: 20, height: 20}} />
-              <View style={{marginLeft: 5}}>
-                <AppText>{item.name}</AppText>
-                <AppText isSubText>{item?.value}</AppText>
+          {!editUserInfo?.detailInfo ? (
+            personalInfo.map(item => (
+              <View
+                key={item.name}
+                style={[styles.infoView, {width: item.width}]}>
+                <Image source={item.icon} style={{width: 20, height: 20}} />
+                <View style={{marginLeft: 5}}>
+                  <AppText>{item.name}</AppText>
+                  <AppText isSubText>{item?.value}</AppText>
+                </View>
               </View>
-            </View>
-          ))}
+            ))
+          ) : (
+            <Formik
+              initialValues={{
+                id_card_number: userInfo?.id_card_number || '',
+                id_card_issue_date: userInfo?.id_card_issue_date || '',
+                id_card_issue_palce: userInfo?.id_card_issue_palce || '',
+                birthday: userInfo?.birthday ? 'Nam' : 'Nữ',
+                domicile: userInfo?.domicile || '',
+                birthplace: userInfo?.birthplace || '',
+                religion: userInfo?.religion || '',
+                ethnic: userInfo?.ethnic || '',
+                personal_tax_code: userInfo?.personal_tax_code || '',
+                nationality: userInfo?.personal_tax_code || '',
+                address: userInfo?.address || '',
+                permanent_address: userInfo?.permanent_address || '',
+              }}
+              onSubmit={values => handleSubmitChangeInfo(values)}>
+              {({handleChange, handleBlur, handleSubmit, values}) => (
+                <View style={[commonStyles.row, {flexWrap: 'wrap'}]}>
+                  {personalInfo.map((item, index) => {
+                    return (
+                      <View
+                        key={item.name}
+                        style={{
+                          width: item.width,
+                          paddingHorizontal: 5,
+                        }}>
+                        <TextInputComponent
+                          value={Object.values(values)[index]}
+                          label={item.name}
+                          placeholder={`Vui lòng nhập ${item.name} của bạn`}
+                          styleAreaInput={{
+                            backgroundColor: colors.white,
+                            width: '100%',
+                          }}
+                          autoCompleteType={'postal-address'}
+                          keyboardType={'email'}
+                          onChangeText={handleChange(
+                            Object.keys(values)[index],
+                          )}
+                        />
+                      </View>
+                    );
+                  })}
+
+                  <ButtonComponent
+                    style={[styles.btnSubmit]}
+                    text={'Đồng ý'}
+                    textStyle={{color: colors.white}}
+                    onPress={handleSubmit}
+                  />
+                </View>
+              )}
+            </Formik>
+          )}
         </View>
       </View>
     );
   },
-  function (prevProps, nextProps) {
-    return prevProps.userInfo === nextProps.userInfo;
-  },
+  // function (prevProps, nextProps) {
+  //   return prevProps.userInfo === nextProps.userInfo;
+  // },
 );
 
 export default memo(DetailInformation);

src/screens/profile/template/components/PersonalInformation.js

+import {Formik} from 'formik';
 import React, {memo} from 'react';
 import {Image, TouchableOpacity, View} from 'react-native';
 import AppText from '../../../../components/AppText';
+import ButtonComponent from '../../../../components/ButtonComponent';
+import TextInputComponent from '../../../../components/TextInputComponent';
+import config from '../../../../config';
+import commonStyles from '../../../../styles/commonStyles';
 import {IMAGES} from '../../../../values/images';
 import string from '../../../../values/string';
 import styles from '../../style';
-import commonStyles from '../../../../styles/commonStyles';
+import colors from '../../../../values/colors';
 
 const PersonalInformation = React.memo(
-  ({userInfo}) => {
+  ({userInfo, onEditUserInfo, editUserInfo, handleSubmitChangeInfo}) => {
     const personalInfo = [
       {
         name: 'Họ',
@@ -53,30 +58,94 @@ const PersonalInformation = React.memo(
             {string.PERSONAL_INFORMATION}
           </AppText>
           <View>
-            <TouchableOpacity>
-              <Image source={IMAGES.IcEdit} style={{height: 30, width: 30}} />
-            </TouchableOpacity>
+            {!editUserInfo?.personalInfo ? (
+              <TouchableOpacity
+                onPress={() =>
+                  onEditUserInfo(config.profileField.PERSONAL_INFO)
+                }>
+                <Image source={IMAGES.IcEdit} style={{height: 30, width: 30}} />
+              </TouchableOpacity>
+            ) : (
+              <TouchableOpacity onPress={() => onEditUserInfo()}>
+                <Image source={IMAGES.IcReject} />
+              </TouchableOpacity>
+            )}
           </View>
         </View>
         <View style={[commonStyles.row, {flexWrap: 'wrap'}]}>
-          {personalInfo.map(item => (
-            <View
-              key={item.name}
-              style={[styles.infoView, {width: item.width}]}>
-              <Image source={item.icon} style={{width: 20, height: 20}} />
-              <View style={{marginLeft: 5}}>
-                <AppText>{item.name}</AppText>
-                <AppText isSubText>{item?.value}</AppText>
+          {!editUserInfo?.personalInfo ? (
+            personalInfo.map(item => (
+              <View
+                key={item.name}
+                style={[styles.infoView, {width: item.width}]}>
+                <Image source={item.icon} style={{width: 20, height: 20}} />
+                <View style={{marginLeft: 5}}>
+                  <AppText>{item.name}</AppText>
+                  <AppText isSubText>{item?.value}</AppText>
+                </View>
               </View>
-            </View>
-          ))}
+            ))
+          ) : (
+            <Formik
+              initialValues={{
+                first_name: userInfo?.first_name || '',
+                middle_name: userInfo?.middle_name || '',
+                last_name: userInfo?.last_name || '',
+                gender: userInfo?.gender ? 'Nam' : 'Nữ',
+                cell_phone: userInfo?.cell_phone || '',
+              }}
+              onSubmit={values => handleSubmitChangeInfo(values)}>
+              {({handleChange, handleBlur, handleSubmit, values}) => (
+                <View style={[commonStyles.row, {flexWrap: 'wrap'}]}>
+                  {personalInfo.map((item, index) => {
+                    if (index === personalInfo.length - 1) {
+                      return null;
+                    }
+                    return (
+                      <View
+                        key={item.name}
+                        style={{
+                          width: item.width,
+                          paddingHorizontal: 5,
+                        }}>
+                        <TextInputComponent
+                          value={Object.values(values)[index]}
+                          label={item.name}
+                          placeholder={`Vui lòng nhập ${item.name} của bạn`}
+                          styleAreaInput={{
+                            backgroundColor: colors.white,
+                            width: '100%',
+                          }}
+                          autoCompleteType={'postal-address'}
+                          keyboardType={'email'}
+                          onChangeText={handleChange(
+                            Object.keys(values)[index],
+                          )}
+                        />
+                      </View>
+                    );
+                  })}
+                  <ButtonComponent
+                    style={[styles.btnSubmit]}
+                    text={'Đồng ý'}
+                    textStyle={{color: colors.white}}
+                    onPress={handleSubmit}
+                  />
+                </View>
+              )}
+            </Formik>
+          )}
         </View>
       </View>
     );
   },
-  function (prevProps, nextProps) {
-    return prevProps.userInfo === nextProps.userInfo;
-  },
+  // function (prevProps, nextProps) {
+  //   return (
+  //     prevProps.userInfo === nextProps.userInfo ||
+  //     prevProps.editUserInfo === nextProps.editUserInfo ||
+  //     prevProps.onEditUserInfo() === nextProps.onEditUserInfo()
+  //   );
+  // },
 );
 
 export default memo(PersonalInformation);