react-native-timacare 3.1.12-beta → 3.1.14-beta

package/lib/commonjs/screens/toan-trinh-so/ReviewInformation.js.flow

@@ -1,5 +1,5 @@
 //@ts-nocheck
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Alert,
   ScrollView,
@@ -328,7 +328,7 @@ export default function ReviewInformation(props) {
               nationalCard: yup.string().required('Vui lòng nhập CCCD/CMND'),
               dateNationalId: yup
                 .string()
-                .required('Vui lòng nhập cấp')
+                .required('Vui lòng nhập ngày cấp')
                 .nullable(),
               phone: yup
                 .string()
@@ -354,89 +354,141 @@ export default function ReviewInformation(props) {
               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={{
+            }) => {
+              const renderView = useMemo(
+                () => (
+                  <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',
-                        }}
-                      >
-                        {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>
+                        },
+                      ]}
+                      value={values.fullName}
+                      onChangeText={handleChange('fullName')}
+                    />
+                    {errors && errors.fullName && (
+                      <MText style={$error}>{errors.fullName}</MText>
                     )}
-                  </View>
-                </View>
+                    <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>
+                    <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:
+                                values.dateNationalId !== ''
+                                  ? '#333333'
+                                  : '#BDBDBD',
+                              fontSize: 16,
+                              fontWeight: '500',
+                              flex: 1,
+                            }}
+                          >
+                            {values.dateNationalId !== ''
+                              ? values.dateNationalId
+                              : 'DD/MM/YYYY'}
+                          </MText>
+                        </TouchableOpacity>
+                        {errors && errors.dateNationalId && (
+                          <MText style={$error}>{errors.dateNationalId}</MText>
+                        )}
+                      </View>
+                    </View>
+                    <MText style={$label}>Số điện thoại</MText>
                     <TextInput
+                      editable={false}
                       keyboardType="number-pad"
                       style={[
                         $textInput,
@@ -446,94 +498,128 @@ export default function ReviewInformation(props) {
                           fontWeight: '500',
                         },
                       ]}
-                      value={values.nationalCard}
-                      onChangeText={handleChange('nationalCard')}
+                      value={values.phone}
+                      onChangeText={handleChange('phone')}
                     />
-                    {errors && errors.nationalCard && (
-                      <MText style={$error}>{errors.nationalCard}</MText>
+                    {errors && errors.phone && (
+                      <MText style={$error}>{errors.phone}</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={{
+
+                    {/* <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',
-                          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
-                  editable={false}
-                  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')}
-                />
+                        },
+                      ]}
+                      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>
+                    <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('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: 'Phường/ Xã',
+                              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,
+                              fontFamily: 'Be Vietnam Pro Medium',
+                            }}
+                          >
+                            {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: 'Tỉnh/ Thành phố',
-                          data: ttsStore.listProvince,
+                          title: 'Phường/ Xã',
+                          data: ttsStore.listWard2,
                           callback: (item) => {
-                            setFieldValue('houseHoldProvinceId', item.id);
-                            setFieldValue('houseHoldProvinceName', item.name);
-                            setFieldValue('houseHoldDistrictId', null);
-                            setFieldValue('houseHoldDistrictName', '');
-                            setFieldValue('houseHoldWardId', null);
-                            setFieldValue('houseHoldWardName', '');
-                            ttsStore.getDistrict2(item.id);
+                            setFieldValue('houseHoldWardId', item?.id);
+                            setFieldValue('houseHoldWardName', item?.name);
                           },
                         });
                       }}
@@ -548,223 +634,254 @@ export default function ReviewInformation(props) {
                           fontFamily: 'Be Vietnam Pro Medium',
                         }}
                       >
-                        {values.houseHoldProvinceName}
+                        {values.houseHoldWardName}
                       </MText>
                       <DropDown2 />
                     </TouchableOpacity>
-                    {errors && errors.houseHoldProvinceName && (
-                      <MText style={$error}>
-                        {errors.houseHoldProvinceName}
-                      </MText>
+                    {errors && errors.houseHoldWardName && (
+                      <MText style={$error}>{errors.houseHoldWardName}</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.listDistrict2,
-                          callback: (item) => {
-                            setFieldValue('houseHoldDistrictId', item.id);
-                            setFieldValue('houseHoldDistrictName', item.name);
-                            setFieldValue('houseHoldWardId', null);
-                            setFieldValue('houseHoldWardName', '');
-                            ttsStore.getWard2(item.id);
-                          },
-                        });
-                      }}
-                    >
-                      <MText
-                        numberOfLines={1}
-                        style={{
+                    <MText style={[$label, { marginTop: 16 }]}>
+                      Địa chỉ chi tiết
+                    </MText>
+                    <TextInput
+                      numberOfLines={1}
+                      style={[
+                        $textInput,
+                        {
                           color: '#333333',
                           fontSize: 16,
                           fontWeight: '500',
-                          flex: 1,
-                          fontFamily: 'Be Vietnam Pro Medium',
+                        },
+                      ]}
+                      value={values.houseHoldAddress}
+                      onChangeText={handleChange('houseHoldAddress')}
+                    />
+                    {errors && errors.houseHoldAddress && (
+                      <MText style={$error}>{errors.houseHoldAddress}</MText>
+                    )}
+                    <View style={[$row, { marginTop: 16 }]}>
+                      <MText
+                        style={{
+                          fontSize: 14,
+                          color: '#333333',
                         }}
                       >
-                        {values.houseHoldDistrictName}
-                      </MText>
-                      <DropDown2 />
-                    </TouchableOpacity>
-                    {errors && errors.houseHoldDistrictName && (
-                      <MText style={$error}>
-                        {errors.houseHoldDistrictName}
+                        A/C đã có gia đình chưa
                       </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
-                  numberOfLines={1}
-                  style={[
-                    $textInput,
-                    {
-                      color: '#333333',
-                      fontSize: 16,
-                      fontWeight: '500',
-                    },
-                  ]}
-                  value={values.houseHoldAddress}
-                  onChangeText={handleChange('houseHoldAddress')}
-                />
-                {errors && errors.houseHoldAddress && (
-                  <MText style={$error}>{errors.houseHoldAddress}</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)}
+                      <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={{
-                        flexDirection: 'row',
-                        gap: 5,
-                        alignItems: 'center',
+                        fontSize: 14,
+                        color: '#333333',
                       }}
                     >
-                      {values.isMerried === 1 ? (
-                        <RadioCheckIcon />
-                      ) : (
-                        <RadioIcon />
-                      )}
-                      <MText>Đã có</MText>
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                      onPress={() => setFieldValue('isMerried', 0)}
+                      Nơi ở có trùng với địa chỉ hộ khẩu không?
+                    </MText>
+                    <View
                       style={{
+                        flex: 1,
                         flexDirection: 'row',
-                        gap: 5,
-                        alignItems: 'center',
+                        gap: 16,
+                        marginTop: 5,
                       }}
                     >
-                      {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>Có trùng</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>
+                      <TouchableOpacity
+                        onPress={() => {
+                          setFieldValue('residentType', 14);
+                          setFieldValue(
+                            'provinceId',
+                            values.houseHoldProvinceId
+                          );
+                          setFieldValue(
+                            'provinceName',
+                            values.houseHoldProvinceName
+                          );
+                          setFieldValue(
+                            'districtId',
+                            values.houseHoldDistrictId
+                          );
+                          setFieldValue(
+                            'districtName',
+                            values.houseHoldDistrictName
+                          );
+                          setFieldValue('wardId', values.houseHoldWardId);
+                          setFieldValue('wardName', values.houseHoldWardName);
+                          if (values.houseHoldDistrictId) {
+                            ttsStore.getWard(values.houseHoldDistrictId);
+                          }
+                          if (values.houseHoldProvinceId) {
+                            ttsStore.getDistrict(values.houseHoldProvinceId);
+                          }
+                          setFieldValue('address', values.houseHoldAddress);
+                        }}
+                        style={{
+                          flexDirection: 'row',
+                          gap: 5,
+                          alignItems: 'center',
+                          flex: 1,
+                        }}
+                      >
+                        {values.residentType === 14 ? (
+                          <RadioCheckIcon />
+                        ) : (
+                          <RadioIcon />
+                        )}
+                        <MText>Có trùng</MText>
+                      </TouchableOpacity>
+                      <TouchableOpacity
+                        onPress={() => {
+                          setFieldValue('residentType', 15);
+                          setFieldValue('provinceId', null);
+                          setFieldValue('provinceName', '');
+                          setFieldValue('districtId', null);
+                          setFieldValue('districtName', '');
+                          setFieldValue('wardId', null);
+                          setFieldValue('wardName', '');
+                          setFieldValue('address', '');
+                        }}
+                        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>
+                    <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('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: 'Quận/ Huyện',
+                              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,
+                            }}
+                          >
+                            {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: 'Tỉnh/ Thành phố',
-                          data: ttsStore.listProvince,
+                          title: 'Phường/ Xã',
+                          data: ttsStore.listWard,
                           callback: (item) => {
-                            setFieldValue('provinceId', item.id);
-                            setFieldValue('provinceName', item?.name);
-                            setFieldValue('districtId', null);
-                            setFieldValue('districtName', '');
-                            setFieldValue('wardId', null);
-                            setFieldValue('wardName', '');
-                            ttsStore.getDistrict(item.id);
+                            setFieldValue('wardId', item.id);
+                            setFieldValue('wardName', item?.name);
                           },
                         });
                       }}
@@ -779,152 +896,91 @@ export default function ReviewInformation(props) {
                           fontFamily: 'Be Vietnam Pro Medium',
                         }}
                       >
-                        {values.provinceName}
+                        {values.wardName}
                       </MText>
                       <DropDown2 />
                     </TouchableOpacity>
-                    {errors && errors.provinceName && (
-                      <MText style={$error}>{errors.provinceName}</MText>
+                    {errors && errors.wardName && (
+                      <MText style={$error}>{errors.wardName}</MText>
                     )}
-                  </View>
-                  <View style={[commonStyles.fill]}>
-                    <MText style={$label}>Quận/ Huyện</MText>
-                    <TouchableOpacity
-                      style={$select}
+                    <MText style={[$label, { marginTop: 16 }]}>
+                      Địa chỉ chi tiết
+                    </MText>
+                    <TextInput
+                      style={[
+                        $textInput,
+                        {
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                        },
+                      ]}
+                      value={values.address}
+                      onChangeText={handleChange('address')}
+                    />
+                    {errors && errors.address && (
+                      <MText style={$error}>{errors.address}</MText>
+                    )}
+                    <MButton
                       onPress={() => {
-                        navigation.push(ScreenNames.CommonSelect, {
-                          title: 'Quận/ Huyện',
-                          data: ttsStore.listDistrict,
-                          callback: (item) => {
-                            setFieldValue('districtId', item?.id);
-                            setFieldValue('districtName', item?.name);
-                            setFieldValue('wardId', null);
-                            setFieldValue('wardName', '');
-                            ttsStore.getWard(item.id);
-                          },
-                        });
+                        handleSubmit();
+                      }}
+                      style={{
+                        marginVertical: 24,
                       }}
                     >
-                      <MText
-                        numberOfLines={1}
+                      <LinearGradient
+                        start={{ x: 1, y: 0 }}
+                        end={{ x: 0, y: 1 }}
                         style={{
-                          color: '#333333',
-                          fontSize: 16,
-                          fontWeight: '500',
-                          flex: 1,
+                          height: 40,
+                          marginVertical: 16,
+                          borderRadius: 30,
+                          alignItems: 'center',
+                          justifyContent: 'center',
                         }}
+                        colors={['#FF7A00', '#EF4123']}
                       >
-                        {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',
+                        <MText
+                          style={{
+                            color: 'white',
+                            fontSize: 16,
+                          }}
+                        >
+                          Tiếp tục
+                        </MText>
+                      </LinearGradient>
+                    </MButton>
+                  </ScrollView>
+                ),
+                [values, errors]
+              );
+              return (
+                <>
+                  {renderView}
+                  <DatePicker
+                    mode="date"
+                    open={showDate}
+                    modal
+                    title="Chọn thời gian"
+                    locale="vi"
+                    date={new Date()}
+                    onCancel={() => {
+                      setShowDate(false);
                     }}
-                  >
-                    {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
-                  style={[
-                    $textInput,
-                    {
-                      color: '#333333',
-                      fontSize: 16,
-                      fontWeight: '500',
-                    },
-                  ]}
-                  value={values.address}
-                  onChangeText={handleChange('address')}
-                />
-                {errors && errors.address && (
-                  <MText style={$error}>{errors.address}</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',
+                    onConfirm={(date) => {
+                      setShowDate(false);
+                      if (typeDate === 1) {
+                        setFieldValue('dob', formatDDMMYYY(date));
+                      }
+                      if (typeDate === 2) {
+                        setFieldValue('dateNationalId', formatDDMMYYY(date));
+                      }
                     }}
-                    colors={['#FF7A00', '#EF4123']}
-                  >
-                    <MText
-                      style={{
-                        color: 'white',
-                        fontSize: 16,
-                      }}
-                    >
-                      Tiếp tục
-                    </MText>
-                  </LinearGradient>
-                </MButton>
-
-                <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>
           <KeyboardSpacer />
         </View>