react-native-timacare 3.1.2 → 3.1.4-beta

package/src/screens/toan-trinh-so/ReviewInformation.tsx

@@ -0,0 +1,1007 @@
+//@ts-nocheck
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Alert,
+  ScrollView,
+  TextInput,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import MHeader from '../../components/MHeader';
+import { commonStyles } from '../CommonStyles';
+import { MText } from '../../components/MText';
+import StepIndicator from '../../components/StepIndicator';
+import { IconBack } from '../../assets/svgs';
+import { CommonActions, useNavigation } from '@react-navigation/native';
+import { ScreenNames } from '../../navigation';
+import { Formik } from 'formik';
+import { DropDown2, RadioCheckIcon, RadioIcon } from '../../assets/icons';
+import LinearGradient from 'react-native-linear-gradient';
+import MButton from '../../components/MButton';
+import KeyboardSpacer from '../../components/keyboardspace';
+import * as yup from 'yup';
+import { EnumGender, formatDDMMYYY } from '../../utils';
+import ttsStore from './store';
+import DatePicker from 'react-native-date-picker';
+import { Api } from '../../services/api';
+import Loading from '../../components/Loading';
+import moment from 'moment';
+
+export default function ReviewInformation(props) {
+  const navigation = useNavigation();
+  const formRef = useRef(null);
+  const [showDate, setShowDate] = useState(false);
+  const [typeDate, setTypeDate] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onSubmit = async (values) => {
+    const body = {
+      LoanBriefId: props?.route?.params?.loan?.id,
+      FullName: values.fullName,
+      Dob: moment(values.dob, 'DD/MM/YYYY').format('YYYY-MM-DD'),
+      Gender: values.gender,
+      NationalCard: values.nationalCard,
+      DateNationalId: moment(values.dateNationalId, 'DD/MM/YYYY').format(
+        'YYYY-MM-DD'
+      ),
+      Phone: values.phone,
+      Passport: values.passport,
+      ProvinceId: values.provinceId,
+      DistrictId: values.districtId,
+      WardId: values.wardId,
+      Address: values.address,
+      IsMerried: values.isMerried,
+      ResidentType: values.residentType,
+      HouseHoldProvinceId: values.houseHoldProvinceId,
+      HouseHoldDistrictId: values.houseHoldDistrictId,
+      HouseHoldWardId: values.houseHoldWardId,
+      HouseHoldAddress: values.houseHoldAddress,
+    };
+    try {
+      setIsLoading(true);
+      const response = await Api.getInstance().updateInfoCustomer(body);
+      setIsLoading(false);
+      if (response.kind === 'ok') {
+        if (response.data?.meta?.errorCode === 200) {
+          navigation.push(ScreenNames.ReviewLoan, {
+            loan: props.route?.params?.loan,
+          });
+        } else {
+          Alert.alert('Thông báo', response.data?.meta?.errorMessage);
+        }
+      } else {
+        Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
+      }
+    } catch (error) {
+      setIsLoading(false);
+    }
+  };
+
+  const getData = async () => {
+    try {
+      setIsLoading(true);
+      const response = await Api.getInstance().getInfoCustomer(
+        props.route?.params?.loan?.id
+      );
+      setIsLoading(false);
+      if (response.kind === 'ok') {
+        if (response.data?.meta.errorCode === 200) {
+          formRef.current.setFieldValue(
+            'fullName',
+            response?.data?.data?.fullName
+          );
+          formRef.current.setFieldValue(
+            'dob',
+            response?.data?.data?.dob
+              ? formatDDMMYYY(response?.data?.data?.dob)
+              : ''
+          );
+          formRef.current.setFieldValue('gender', response?.data?.data?.gender);
+          formRef.current.setFieldValue(
+            'nationalCard',
+            response?.data?.data?.nationalCard
+              ? response?.data?.data?.nationalCard
+              : ''
+          );
+          formRef.current.setFieldValue(
+            'dateNationalId',
+            response?.data?.data?.dateNationalId
+              ? formatDDMMYYY(response?.data?.data?.dateNationalId)
+              : ''
+          );
+          formRef.current.setFieldValue(
+            'phone',
+            response?.data?.data?.phone ? response?.data?.data?.phone : ''
+          );
+          formRef.current.setFieldValue(
+            'passport',
+            response?.data?.data?.passport ? response?.data?.data?.passport : ''
+          );
+          formRef.current.setFieldValue(
+            'provinceId',
+            response?.data?.data?.provinceId
+              ? response?.data?.data?.provinceId
+              : null
+          );
+          formRef.current.setFieldValue(
+            'provinceName',
+            response?.data?.data?.provinceName
+              ? response?.data?.data?.provinceName
+              : ''
+          );
+          if (response?.data?.data?.provinceId) {
+            ttsStore.getDistrict(response?.data?.data?.provinceId);
+          }
+
+          formRef.current.setFieldValue(
+            'districtId',
+            response?.data?.data?.districtId
+              ? response?.data?.data?.districtId
+              : null
+          );
+          formRef.current.setFieldValue(
+            'districtName',
+            response?.data?.data?.districtName
+              ? response?.data?.data?.districtName
+              : ''
+          );
+          if (response?.data?.data?.districtId) {
+            ttsStore.getWard(response?.data?.data?.districtId);
+          }
+
+          formRef.current.setFieldValue(
+            'wardId',
+            response?.data?.data?.wardId ? response?.data?.data?.wardId : null
+          );
+          formRef.current.setFieldValue(
+            'wardName',
+            response?.data?.data?.wardName ? response?.data?.data?.wardName : ''
+          );
+
+          formRef.current.setFieldValue(
+            'address',
+            response?.data?.data?.address ? response?.data?.data?.address : ''
+          );
+
+          formRef.current.setFieldValue(
+            'isMerried',
+            response?.data?.data?.isMerried
+              ? response?.data?.data?.isMerried
+              : null
+          );
+
+          formRef.current.setFieldValue(
+            'residentType',
+            response?.data?.data?.residentType
+              ? response?.data?.data?.residentType
+              : null
+          );
+
+          formRef.current.setFieldValue(
+            'houseHoldProvinceId',
+            response?.data?.data?.houseHoldProvinceId
+              ? response?.data?.data?.houseHoldProvinceId
+              : null
+          );
+          formRef.current.setFieldValue(
+            'houseHoldProvinceName',
+            response?.data?.data?.houseHoldProvinceName
+              ? response?.data?.data?.houseHoldProvinceName
+              : ''
+          );
+          if (response?.data?.data?.houseHoldProvinceId) {
+            ttsStore.getDistrict2(response?.data?.data?.houseHoldProvinceId);
+          }
+
+          formRef.current.setFieldValue(
+            'houseHoldDistrictId',
+            response?.data?.data?.houseHoldDistrictId
+              ? response?.data?.data?.houseHoldDistrictId
+              : null
+          );
+          formRef.current.setFieldValue(
+            'houseHoldDistrictName',
+            response?.data?.data?.houseHoldDistrictName
+              ? response?.data?.data?.houseHoldDistrictName
+              : ''
+          );
+          if (response?.data?.data?.houseHoldDistrictId) {
+            ttsStore.getWard2(response?.data?.data?.houseHoldDistrictId);
+          }
+
+          formRef.current.setFieldValue(
+            'houseHoldWardId',
+            response?.data?.data?.houseHoldWardId
+              ? response?.data?.data?.houseHoldWardId
+              : null
+          );
+          formRef.current.setFieldValue(
+            'houseHoldWardName',
+            response?.data?.data?.houseHoldWardName
+              ? response?.data?.data?.houseHoldWardName
+              : ''
+          );
+
+          formRef.current.setFieldValue(
+            'houseHoldAddress',
+            response?.data?.data?.houseHoldAddress
+              ? response?.data?.data?.houseHoldAddress
+              : ''
+          );
+        } else {
+        }
+      }
+    } catch (error) {
+      setIsLoading(false);
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    getData();
+    ttsStore.getListBank();
+  }, []);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <MHeader title="Vay nhanh 24/7" />
+      <View style={commonStyles.fill}>
+        <View style={$h} />
+        <View style={$bg}>
+          <View
+            style={{
+              paddingVertical: 10,
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingHorizontal: 16,
+            }}
+          >
+            <TouchableOpacity
+              style={{
+                zIndex: 1000,
+              }}
+              onPress={() => {
+                Alert.alert(
+                  'Thoát cập nhật thông tin',
+                  'Bạn có chắc chắn muốn thoát cập nhật thông tin không?',
+                  [
+                    {
+                      text: 'Có',
+                      onPress: () => {
+                        navigation.dispatch(
+                          CommonActions.reset({
+                            index: 1,
+                            routes: [{ name: ScreenNames.Main }],
+                          })
+                        );
+                      },
+                    },
+                    {
+                      text: 'Không',
+                    },
+                  ]
+                );
+              }}
+            >
+              <IconBack />
+            </TouchableOpacity>
+            <MText style={$title}>Thông tin chi tiết</MText>
+          </View>
+          <StepIndicator steps={3} currentStep={0} />
+          <Formik
+            innerRef={formRef}
+            onSubmit={onSubmit}
+            initialValues={{
+              fullName: '',
+              dob: '',
+              gender: 0,
+              nationalCard: '',
+              dateNationalId: '',
+              phone: '',
+              passport: '',
+              provinceId: null,
+              provinceName: '',
+              districtId: null,
+              districtName: '',
+              wardId: null,
+              wardName: '',
+              address: '',
+              isMerried: 1,
+              residentType: 14,
+              houseHoldProvinceId: null,
+              houseHoldProvinceName: '',
+              houseHoldDistrictId: null,
+              houseHoldDistrictName: '',
+              houseHoldWardId: null,
+              houseHoldWardName: '',
+              houseHoldAddress: '',
+            }}
+            validationSchema={yup.object().shape({
+              fullName: yup.string().required('Vui lòng nhập họ tên'),
+              dob: yup.string().required('Vui lòng nhập ngày sinh').nullable(),
+              gender: yup
+                .number()
+                .required('Vui lòng chọn giới tính')
+                .nullable(),
+              nationalCard: yup.string().required('Vui lòng nhập CCCD/CMND'),
+              dateNationalId: yup
+                .string()
+                .required('Vui lòng nhập cấp')
+                .nullable(),
+              phone: yup
+                .string()
+                .required('Vui lòng nhập số điện thoại')
+                .nullable(),
+              provinceName: yup.string().required('Thành phố là bắt buộc'),
+              districtName: yup.string().required('Quận huyện là bắt buộc'),
+              wardName: yup.string().required('Phường xã là bắt buộc'),
+              address: yup.string().required('Địa chỉ là bắt buộc'),
+              houseHoldProvinceName: yup
+                .string()
+                .required('Thành phố là bắt buộc'),
+              houseHoldDistrictName: yup
+                .string()
+                .required('Quận huyện là bắt buộc'),
+              houseHoldWardName: yup.string().required('Phường xã là bắt buộc'),
+              houseHoldAddress: yup.string().required('Địa chỉ là bắt buộc'),
+            })}
+          >
+            {({
+              values,
+              errors,
+              handleChange,
+              handleSubmit,
+              setFieldValue,
+            }) => (
+              <ScrollView
+                style={[commonStyles.fill, { paddingHorizontal: 16 }]}
+              >
+                <MText style={$title2}>1.1 Thông tin cá nhân</MText>
+                <MText style={$label}>Họ và tên</MText>
+                <TextInput
+                  style={[
+                    $textInput,
+                    {
+                      color: '#333333',
+                      fontSize: 16,
+                      fontWeight: '500',
+                      fontFamily: 'Be Vietnam Pro Medium',
+                    },
+                  ]}
+                  value={values.fullName}
+                  onChangeText={handleChange('fullName')}
+                />
+                {errors && errors.fullName && (
+                  <MText style={$error}>{errors.fullName}</MText>
+                )}
+                <View style={[$row, { marginTop: 16 }]}>
+                  <View style={[commonStyles.fill]}>
+                    <MText style={$label}>Sinh ngày</MText>
+                    <TouchableOpacity
+                      style={$select}
+                      onPress={() => {
+                        setTypeDate(1);
+                        setShowDate(true);
+                      }}
+                    >
+                      <MText
+                        style={{
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                          fontFamily: 'Be Vietnam Pro Medium',
+                        }}
+                      >
+                        {values.dob}
+                      </MText>
+                    </TouchableOpacity>
+                    {errors && errors.dob && (
+                      <MText style={$error}>{errors.dob}</MText>
+                    )}
+                  </View>
+                  <View style={[commonStyles.fill]}>
+                    <MText style={$label}>Giới tính</MText>
+                    <TouchableOpacity
+                      style={$select}
+                      onPress={() => {
+                        navigation.push(ScreenNames.MSelect, {
+                          title: 'Chọn giới tính',
+                          data: EnumGender,
+                          callback: (item) => {
+                            setFieldValue('gender', item.id);
+                          },
+                        });
+                      }}
+                    >
+                      <MText
+                        style={{
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                          flex: 1,
+                        }}
+                      >
+                        {values.gender === 0 ? 'Nam' : 'Nữ'}
+                      </MText>
+                      <DropDown2 />
+                    </TouchableOpacity>
+                    {errors && errors.gender && (
+                      <MText style={$error}>{errors.gender}</MText>
+                    )}
+                  </View>
+                </View>
+
+                <View style={[$row]}>
+                  <View style={[commonStyles.fill]}>
+                    <MText style={$label}>Số CCCD/CMND</MText>
+                    <TextInput
+                      keyboardType="number-pad"
+                      style={[
+                        $textInput,
+                        {
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                        },
+                      ]}
+                      value={values.nationalCard}
+                      onChangeText={handleChange('nationalCard')}
+                    />
+                    {errors && errors.nationalCard && (
+                      <MText style={$error}>{errors.nationalCard}</MText>
+                    )}
+                  </View>
+                  <View style={[commonStyles.fill]}>
+                    <MText style={$label}>Ngày cấp</MText>
+                    <TouchableOpacity
+                      style={$select}
+                      onPress={() => {
+                        setTypeDate(2);
+                        setShowDate(true);
+                      }}
+                    >
+                      <MText
+                        numberOfLines={1}
+                        style={{
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                          flex: 1,
+                        }}
+                      >
+                        {values.dateNationalId}
+                      </MText>
+                    </TouchableOpacity>
+                    {errors && errors.dateNationalId && (
+                      <MText style={$error}>{errors.dateNationalId}</MText>
+                    )}
+                  </View>
+                </View>
+                <MText style={$label}>Số điện thoại</MText>
+                <TextInput
+                  keyboardType="number-pad"
+                  style={[
+                    $textInput,
+                    {
+                      color: '#333333',
+                      fontSize: 16,
+                      fontWeight: '500',
+                    },
+                  ]}
+                  value={values.phone}
+                  onChangeText={handleChange('phone')}
+                />
+                {errors && errors.phone && (
+                  <MText style={$error}>{errors.phone}</MText>
+                )}
+
+                <MText style={[$label, { marginTop: 16 }]}>Hộ chiếu</MText>
+                <TextInput
+                  placeholder="Nhập hộ chiếu của bạn"
+                  placeholderTextColor={'#BDBDBD'}
+                  style={[
+                    $textInput,
+                    {
+                      color: '#333333',
+                      fontSize: 16,
+                      fontWeight: '500',
+                    },
+                  ]}
+                  value={values.passport}
+                  onChangeText={handleChange('passport')}
+                />
+
+                <MText style={[$title2, { marginTop: 16 }]}>
+                  1.2 Sổ hộ khẩu
+                </MText>
+                <View style={[$row]}>
+                  <View style={[commonStyles.fill]}>
+                    <MText style={$label}>Tỉnh/ Thành phố</MText>
+                    <TouchableOpacity
+                      style={$select}
+                      onPress={() => {
+                        navigation.push(ScreenNames.CommonSelect, {
+                          title: 'Tỉnh/ Thành phố',
+                          data: ttsStore.listProvince,
+                          callback: (item) => {
+                            setFieldValue('provinceId', item.id);
+                            setFieldValue('provinceName', item.name);
+                            setFieldValue('districtId', null);
+                            setFieldValue('districtName', '');
+                            setFieldValue('wardId', null);
+                            setFieldValue('wardName', '');
+                            ttsStore.getDistrict(item.id);
+                          },
+                        });
+                      }}
+                    >
+                      <MText
+                        numberOfLines={1}
+                        style={{
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                          flex: 1,
+                          fontFamily: 'Be Vietnam Pro Medium',
+                        }}
+                      >
+                        {values.provinceName}
+                      </MText>
+                      <DropDown2 />
+                    </TouchableOpacity>
+                    {errors && errors.provinceName && (
+                      <MText style={$error}>{errors.provinceName}</MText>
+                    )}
+                  </View>
+                  <View style={[commonStyles.fill]}>
+                    <MText style={$label}>Quận/ Huyện</MText>
+                    <TouchableOpacity
+                      style={$select}
+                      onPress={() => {
+                        navigation.push(ScreenNames.CommonSelect, {
+                          title: 'Phường/ Xã',
+                          data: ttsStore.listDistrict,
+                          callback: (item) => {
+                            setFieldValue('districtId', item.id);
+                            setFieldValue('districtName', item.name);
+                            setFieldValue('wardId', null);
+                            setFieldValue('wardName', '');
+                            ttsStore.getWard(item.id);
+                          },
+                        });
+                      }}
+                    >
+                      <MText
+                        numberOfLines={1}
+                        style={{
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                          flex: 1,
+                          fontFamily: 'Be Vietnam Pro Medium',
+                        }}
+                      >
+                        {values.districtName}
+                      </MText>
+                      <DropDown2 />
+                    </TouchableOpacity>
+                    {errors && errors.districtName && (
+                      <MText style={$error}>{errors.districtName}</MText>
+                    )}
+                  </View>
+                </View>
+                <MText style={[$label]}>Phường/ Xã</MText>
+                <TouchableOpacity
+                  style={$select}
+                  onPress={() => {
+                    navigation.push(ScreenNames.CommonSelect, {
+                      title: 'Phường/ Xã',
+                      data: ttsStore.listWard,
+                      callback: (item) => {
+                        setFieldValue('wardId', item?.id);
+                        setFieldValue('wardName', item?.name);
+                      },
+                    });
+                  }}
+                >
+                  <MText
+                    numberOfLines={1}
+                    style={{
+                      color: '#333333',
+                      fontSize: 16,
+                      fontWeight: '500',
+                      flex: 1,
+                      fontFamily: 'Be Vietnam Pro Medium',
+                    }}
+                  >
+                    {values.wardName}
+                  </MText>
+                  <DropDown2 />
+                </TouchableOpacity>
+                {errors && errors.wardName && (
+                  <MText style={$error}>{errors.wardName}</MText>
+                )}
+                <MText style={[$label, { marginTop: 16 }]}>
+                  Địa chỉ chi tiết
+                </MText>
+                <TextInput
+                  numberOfLines={1}
+                  style={[
+                    $textInput,
+                    {
+                      color: '#333333',
+                      fontSize: 16,
+                      fontWeight: '500',
+                    },
+                  ]}
+                  value={values.address}
+                  onChangeText={handleChange('address')}
+                />
+                {errors && errors.address && (
+                  <MText style={$error}>{errors.address}</MText>
+                )}
+                <View style={[$row, { marginTop: 16 }]}>
+                  <MText
+                    style={{
+                      fontSize: 14,
+                      color: '#333333',
+                    }}
+                  >
+                    A/C đã có gia đình chưa
+                  </MText>
+                  <View
+                    style={{
+                      flex: 1,
+                      flexDirection: 'row',
+                      gap: 16,
+                      justifyContent: 'space-between',
+                      marginLeft: 24,
+                    }}
+                  >
+                    <TouchableOpacity
+                      onPress={() => setFieldValue('isMerried', 1)}
+                      style={{
+                        flexDirection: 'row',
+                        gap: 5,
+                        alignItems: 'center',
+                      }}
+                    >
+                      {values.isMerried === 1 ? (
+                        <RadioCheckIcon />
+                      ) : (
+                        <RadioIcon />
+                      )}
+                      <MText>Đã có</MText>
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                      onPress={() => setFieldValue('isMerried', 0)}
+                      style={{
+                        flexDirection: 'row',
+                        gap: 5,
+                        alignItems: 'center',
+                      }}
+                    >
+                      {values.isMerried === 0 ? (
+                        <RadioCheckIcon />
+                      ) : (
+                        <RadioIcon />
+                      )}
+                      <MText>Chưa có</MText>
+                    </TouchableOpacity>
+                  </View>
+                </View>
+                <MText style={[$title2]}>1.3 Nơi ở hiện tại</MText>
+                <MText
+                  style={{
+                    fontSize: 14,
+                    color: '#333333',
+                  }}
+                >
+                  Nơi ở có trùng với địa chỉ hộ khẩu không?
+                </MText>
+                <View
+                  style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    gap: 16,
+                    marginTop: 5,
+                  }}
+                >
+                  <TouchableOpacity
+                    onPress={() => setFieldValue('residentType', 14)}
+                    style={{
+                      flexDirection: 'row',
+                      gap: 5,
+                      alignItems: 'center',
+                      flex: 1,
+                    }}
+                  >
+                    {values.residentType === 14 ? (
+                      <RadioCheckIcon />
+                    ) : (
+                      <RadioIcon />
+                    )}
+                    <MText>Trùng với hiện tại</MText>
+                  </TouchableOpacity>
+                  <TouchableOpacity
+                    onPress={() => setFieldValue('residentType', 15)}
+                    style={{
+                      flexDirection: 'row',
+                      gap: 5,
+                      alignItems: 'center',
+                      flex: 1,
+                    }}
+                  >
+                    {values.residentType === 15 ? (
+                      <RadioCheckIcon />
+                    ) : (
+                      <RadioIcon />
+                    )}
+                    <MText>Không trùng</MText>
+                  </TouchableOpacity>
+                </View>
+
+                <View style={[$row, { marginTop: 16 }]}>
+                  <View style={[commonStyles.fill]}>
+                    <MText style={$label}>Tỉnh/ Thành phố</MText>
+                    <TouchableOpacity
+                      style={$select}
+                      onPress={() => {
+                        navigation.push(ScreenNames.CommonSelect, {
+                          title: 'Tỉnh/ Thành phố',
+                          data: ttsStore.listProvince,
+                          callback: (item) => {
+                            setFieldValue('houseHoldProvinceId', item.id);
+                            setFieldValue('houseHoldProvinceName', item?.name);
+                            setFieldValue('houseHoldDistrictId', null);
+                            setFieldValue('houseHoldDistrictName', '');
+                            setFieldValue('houseHoldWardId', null);
+                            setFieldValue('houseHoldWardName', '');
+                            ttsStore.getDistrict2(item.id);
+                          },
+                        });
+                      }}
+                    >
+                      <MText
+                        numberOfLines={1}
+                        style={{
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                          flex: 1,
+                          fontFamily: 'Be Vietnam Pro Medium',
+                        }}
+                      >
+                        {values.houseHoldProvinceName}
+                      </MText>
+                      <DropDown2 />
+                    </TouchableOpacity>
+                    {errors && errors.houseHoldProvinceName && (
+                      <MText style={$error}>
+                        {errors.houseHoldProvinceName}
+                      </MText>
+                    )}
+                  </View>
+                  <View style={[commonStyles.fill]}>
+                    <MText style={$label}>Quận/ Huyện</MText>
+                    <TouchableOpacity
+                      style={$select}
+                      onPress={() => {
+                        navigation.push(ScreenNames.CommonSelect, {
+                          title: 'Quận/ Huyện',
+                          data: ttsStore.listDistrict2,
+                          callback: (item) => {
+                            setFieldValue('houseHoldDistrictId', item?.id);
+                            setFieldValue('houseHoldDistrictName', item?.name);
+                            setFieldValue('houseHoldWardId', null);
+                            setFieldValue('houseHoldWardName', '');
+                            ttsStore.getWard2(item.id);
+                          },
+                        });
+                      }}
+                    >
+                      <MText
+                        numberOfLines={1}
+                        style={{
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                          flex: 1,
+                        }}
+                      >
+                        {values.houseHoldDistrictName}
+                      </MText>
+                      <DropDown2 />
+                    </TouchableOpacity>
+                    {errors && errors.houseHoldDistrictName && (
+                      <MText style={$error}>
+                        {errors.houseHoldDistrictName}
+                      </MText>
+                    )}
+                  </View>
+                </View>
+                <MText style={[$label]}>Phường/ Xã</MText>
+                <TouchableOpacity
+                  style={$select}
+                  onPress={() => {
+                    navigation.push(ScreenNames.CommonSelect, {
+                      title: 'Phường/ Xã',
+                      data: ttsStore.listWard2,
+                      callback: (item) => {
+                        setFieldValue('houseHoldWardId', item.id);
+                        setFieldValue('houseHoldWardName', item?.name);
+                      },
+                    });
+                  }}
+                >
+                  <MText
+                    numberOfLines={1}
+                    style={{
+                      color: '#333333',
+                      fontSize: 16,
+                      fontWeight: '500',
+                      flex: 1,
+                      fontFamily: 'Be Vietnam Pro Medium',
+                    }}
+                  >
+                    {values.houseHoldWardName}
+                  </MText>
+                  <DropDown2 />
+                </TouchableOpacity>
+                {errors && errors.houseHoldWardName && (
+                  <MText style={$error}>{errors.houseHoldWardName}</MText>
+                )}
+                <MText style={[$label, { marginTop: 16 }]}>
+                  Địa chỉ chi tiết
+                </MText>
+                <TextInput
+                  style={[
+                    $textInput,
+                    {
+                      color: '#333333',
+                      fontSize: 16,
+                      fontWeight: '500',
+                    },
+                  ]}
+                  value={values.houseHoldAddress}
+                  onChangeText={handleChange('houseHoldAddress')}
+                />
+                {errors && errors.houseHoldAddress && (
+                  <MText style={$error}>{errors.houseHoldAddress}</MText>
+                )}
+                <MButton
+                  onPress={() => {
+                    handleSubmit();
+                  }}
+                  style={{
+                    marginVertical: 24,
+                  }}
+                >
+                  <LinearGradient
+                    start={{ x: 1, y: 0 }}
+                    end={{ x: 0, y: 1 }}
+                    style={{
+                      height: 40,
+                      marginVertical: 16,
+                      borderRadius: 30,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                    colors={['#FF7A00', '#EF4123']}
+                  >
+                    <MText
+                      style={{
+                        color: 'white',
+                        fontSize: 16,
+                      }}
+                    >
+                      Tiếp tục
+                    </MText>
+                  </LinearGradient>
+                </MButton>
+
+                <KeyboardSpacer />
+
+                <DatePicker
+                  mode="date"
+                  open={showDate}
+                  modal
+                  title="Chọn thời gian"
+                  locale="vi"
+                  date={new Date()}
+                  onCancel={() => {
+                    setShowDate(false);
+                  }}
+                  onConfirm={(date) => {
+                    setShowDate(false);
+                    if (typeDate === 1) {
+                      setFieldValue('dob', formatDDMMYYY(date));
+                    }
+                    if (typeDate === 2) {
+                      setFieldValue('dateNationalId', formatDDMMYYY(date));
+                    }
+                  }}
+                />
+              </ScrollView>
+            )}
+          </Formik>
+        </View>
+      </View>
+      <Loading isLoading={isLoading} />
+    </View>
+  );
+}
+
+const $row: ViewStyle = {
+  flexDirection: 'row',
+  // alignItems: 'center',
+  marginBottom: 16,
+  gap: 16,
+};
+
+const $textInput: ViewStyle = {
+  borderWidth: 1,
+  borderRadius: 4,
+  borderColor: '#E0E0E0',
+  height: 40,
+  paddingHorizontal: 8,
+  fontFamily: 'Be Vietnam Pro Medium',
+};
+
+const $label: TextStyle = {
+  fontSize: 14,
+  color: '#333333',
+  paddingBottom: 5,
+};
+
+const $title2: TextStyle = {
+  fontSize: 16,
+  fontWeight: 'bold',
+  color: '#333333',
+  paddingBottom: 10,
+  marginTop: 6,
+};
+
+const $title: TextStyle = {
+  fontSize: 16,
+  fontWeight: 'bold',
+  color: '#333333',
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  textAlign: 'center',
+};
+const $h: ViewStyle = {
+  backgroundColor: '#EF592E',
+  position: 'absolute',
+  height: 30,
+  width: '100%',
+};
+
+const $bg: ViewStyle = {
+  borderTopLeftRadius: 30,
+  borderTopRightRadius: 30,
+  backgroundColor: 'white',
+  flex: 1,
+};
+
+const $select: ViewStyle = {
+  flexDirection: 'row',
+  height: 40,
+  alignItems: 'center',
+  paddingHorizontal: 8,
+  borderWidth: 1,
+  borderRadius: 4,
+  borderColor: '#E0E0E0',
+};
+
+const $error: TextStyle = {
+  color: '#EB5757',
+  fontSize: 14,
+  fontStyle: 'italic',
+  fontFamily: 'Be Vietnam Pro Thin',
+  fontWeight: '300',
+  marginTop: 5,
+};