react-native-timacare 3.1.72 → 3.3.0

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

@@ -29,113 +29,63 @@ import MButton from '../../components/MButton';
 import LinearGradient from 'react-native-linear-gradient';
 import moment from 'moment';
 import * as yup from 'yup';
+import DatePicker from 'react-native-date-picker';
 
 export default function TopupLoanInfo(props) {
   const navigation = useNavigation();
   const formRef = useRef(null);
   const [isLoading, setIsLoading] = useState(false);
-
+  const [showDate, setShowDate] = useState(false);
   const getData = async () => {
     try {
       setIsLoading(true);
-      const response = await Api.getInstance().getInfoLoanTopupTts(
+      const response = await Api.getInstance().getInfoCustomerV2(
         props.route?.params?.loan?.id
       );
       setIsLoading(false);
       if (response.kind === 'ok') {
         if (response.data?.meta.errorCode === 200) {
           formRef.current.setFieldValue(
-            'bankAccountName',
-            response?.data?.data?.bankAccountName ?? ''
-          );
-          formRef.current.setFieldValue(
-            'bankAccountNumber',
-            response?.data?.data?.bankAccountNumber ?? ''
-          );
-          formRef.current.setFieldValue(
-            'bankId',
-            response?.data?.data?.bankId ?? null
-          );
-          formRef.current.setFieldValue(
-            'bankName',
-            response?.data?.data?.bankName ?? ''
+            'fullName',
+            response?.data?.data?.fullName
           );
           formRef.current.setFieldValue(
-            'loanAmount',
-            response?.data?.data?.loanAmount ?? 0
+            'dob',
+            response?.data?.data?.dob
+              ? formatDDMMYYY(response?.data?.data?.dob)
+              : ''
           );
           formRef.current.setFieldValue(
-            'firstPaymentDate',
-            formatDDMMYYY(response?.data?.data?.firstPaymentDate) ?? ''
+            'gender',
+            response?.data?.data?.gender ?? null
           );
           formRef.current.setFieldValue(
-            'rateTypeId',
-            response?.data?.data?.rateTypeId ?? null
+            'nationalCard',
+            response?.data?.data?.nationalCard
+              ? response?.data?.data?.nationalCard
+              : ''
           );
-
-          if (response?.data?.data?.rateTypeId) {
-            appStore.getLoanTimeByType(
-              response?.data?.data?.rateTypeId,
-              props.route?.params?.loan?.typeLoan ?? 0
-            );
-          }
           formRef.current.setFieldValue(
-            'loanTime',
-            response?.data?.data?.loanTime ?? null
+            'dateNationalId',
+            response?.data?.data?.dateNationalId
+              ? formatDDMMYYY(response?.data?.data?.dateNationalId)
+              : ''
           );
           formRef.current.setFieldValue(
-            'moneyInsuranceProperty',
-            response?.data?.data?.moneyInsuranceProperty ?? null
+            'bankAccountName',
+            response?.data?.data?.bankAccountName ?? ''
           );
           formRef.current.setFieldValue(
-            'moneyInsurenceCustomer',
-            response?.data?.data?.moneyInsurenceCustomer ?? null
+            'bankAccountNumber',
+            response?.data?.data?.bankAccountNumber ?? ''
           );
           formRef.current.setFieldValue(
-            'buyInsuranceProperty',
-            response?.data?.data?.buyInsuranceProperty
-              ? response?.data?.data?.buyInsuranceProperty
-              : false
+            'bankId',
+            response?.data?.data?.bankId ?? null
           );
           formRef.current.setFieldValue(
-            'buyInsurenceCustomer',
-            response?.data?.data?.buyInsurenceCustomer
-              ? response?.data?.data?.buyInsurenceCustomer
-              : false
-          );
-
-          const timeInsurenceCustomer = appStore.listInsurenceTimeAll.find(
-            (x) => x.id === response.data.data?.timeInsurenceCustomer
-          );
-          formRef.current?.setFieldValue(
-            'timeInsurenceCustomer',
-            timeInsurenceCustomer
-          );
-          const timeInsuranceProperty = appStore.listInsurenceTimeAll.find(
-            (x) => x.id === response.data.data?.timeInsuranceProperty
-          );
-          formRef.current?.setFieldValue(
-            'timeInsuranceProperty',
-            timeInsuranceProperty
-          );
-
-          if (response.data?.data?.brand) {
-            ttsStore.getListYearCar(response.data?.data?.brand);
-          }
-          if (response.data?.data?.brand && response.data?.data?.yearCar) {
-            ttsStore.getListCar(
-              response.data?.data?.brand,
-              response.data?.data?.yearCar
-            );
-          }
-
-          formRef.current?.setFieldValue(
-            'typeLoanBrief',
-            response.data.data?.typeLoanBrief ?? null
-          );
-          formRef.current?.setFieldValue(
-            'carTypeId',
-            response.data.data?.carTypeId ?? null
+            'bankName',
+            response?.data?.data?.bankName ?? ''
           );
         } else {
         }
@@ -145,93 +95,26 @@ export default function TopupLoanInfo(props) {
       console.log(error);
     }
   };
-  const getInfoInsurence = async (
-    loanAmount,
-    loanTime,
-    rateTypeId,
-    timeInsurenceCustomer,
-    timeInsuranceProperty
-  ) => {
-    try {
-      setIsLoading(true);
-      const response = await Api.getInstance().getInfoInsurence2(
-        props.route.params?.loan?.id,
-        loanAmount,
-        loanTime,
-        rateTypeId,
-        timeInsurenceCustomer,
-        timeInsuranceProperty
-      );
-      setIsLoading(false);
-      if (response.kind === 'ok') {
-        if (response.data?.meta?.errorCode === 200) {
-          formRef.current?.setFieldValue(
-            'moneyInsurenceCustomer',
-            response.data.data?.moneyInsurenceCustomer
-          );
-          formRef.current?.setFieldValue(
-            'moneyInsuranceProperty',
-            response.data.data?.moneyInsuranceProperty
-          );
-          formRef.current?.setFieldValue(
-            'moneyInsurranceHospitalization',
-            response.data.data?.moneyInsurranceHospitalization
-          );
-        } else {
-          Alert.alert('Thông báo', response.data?.meta?.errorMessage);
-        }
-      } else {
-      }
-    } catch (error) {
-      setIsLoading(false);
-    }
-  };
-
-  const debounceCall = useCallback(
-    debounce((textParam) => {
-      getInfoInsurence(
-        Number(textParam.replace(/\D/g, '')),
-        formRef.current.values.loanTime,
-        formRef.current.values?.rateTypeId,
-        formRef.current.values.timeInsurenceCustomer?.id ?? 0,
-        formRef.current.values.timeInsuranceProperty?.id ?? 0
-      );
-    }, 2000),
-    []
-  );
 
-  useEffect(async () => {
+  useEffect(() => {
     getData();
-    ttsStore.getFirstPayment(props.route?.params?.loan?.id);
-    await logEvent('thongtinvay_started', {
-      event: 'thongtinvay_started',
-      createdAt: new Date(),
-      deviceId: appStore.deviceId,
-      loanId: String(props.route?.params?.loan?.id),
-      utmSource: props.route?.params?.loan?.utmSource,
-    });
-    logEventFb('thongtinvay_started');
+    ttsStore.getListBank();
   }, []);
 
   const onSubmit = async (values) => {
     try {
       setIsLoading(true);
       const body = {
-        loanBriefId: props.route?.params?.loan?.id,
-        loanAmount: Number(values.loanAmount),
-        rateTypeId: values.rateTypeId,
-        loanTime: values.loanTime,
-        firstPaymentDate: moment(values.firstPaymentDate, 'DD/MM/YYYY').format(
+        LoanBriefId: props.route?.params?.loan?.id,
+        DateNationalId: moment(values.dateNationalId, 'DD/MM/YYYY').format(
           'YYYY-MM-DD'
         ),
-        buyInsurenceCustomer: values?.buyInsurenceCustomer,
-        buyInsuranceProperty: values?.buyInsuranceProperty,
-        timeInsurenceCustomer: values?.timeInsurenceCustomer?.id ?? 0,
-        timeInsuranceProperty: values?.timeInsuranceProperty?.id ?? 0,
-        moneyInsurenceCustomer: values.moneyInsurenceCustomer,
-        moneyInsuranceProperty: values.moneyInsuranceProperty,
+        bankId: values.bankId,
+        bankAccountName: values?.bankAccountName,
+        bankAccountNumber: values?.bankAccountNumber,
       };
-      const response = await Api.getInstance().updateInfoLoanTopup(body);
+
+      const response = await Api.getInstance().updateInfoLoanTopupV2(body);
       setIsLoading(false);
       if (response.kind === 'ok') {
         if (response.data?.meta?.errorCode === 200) {
@@ -317,16 +200,11 @@ export default function TopupLoanInfo(props) {
             onSubmit={onSubmit}
             innerRef={formRef}
             initialValues={{
-              loanAmount: '',
-              rateTypeId: null,
-              loanTime: null,
-              firstPaymentDate: '',
-              buyInsurenceCustomer: false,
-              buyInsuranceProperty: false,
-              timeInsurenceCustomer: null,
-              timeInsuranceProperty: null,
-              moneyInsurenceCustomer: null,
-              moneyInsuranceProperty: null,
+              fullName: '',
+              dob: '',
+              gender: null,
+              nationalCard: '',
+              dateNationalId: '',
               bankId: null,
               bankName: '',
               bankAccountName: '',
@@ -335,108 +213,162 @@ export default function TopupLoanInfo(props) {
             validateOnBlur={false}
             validateOnChange={false}
             validationSchema={yup.object().shape({
-              loanAmount: yup.string().required('Số tiền là bắt buộc'),
-              rateTypeId: yup
-                .number()
-                .required('Chọn hình thức thanh toán')
-                .nullable(),
-              loanTime: yup
-                .number()
-                .required('Thời gian vay là bắt buộc')
-                .nullable(),
-              firstPaymentDate: yup
+              bankName: yup.string().required('Vui lòng chọn ngân hàng'),
+              bankAccountName: yup.string().required('Vui lòng nhập chủ thẻ'),
+              bankAccountNumber: yup
                 .string()
-                .required('Ngày thanh toán đầu kỳ là bắt buộc'),
+                .required('Vui lòng nhập số tài khoản'),
             })}
           >
-            {({ values, errors, setFieldValue, handleSubmit }) => (
+            {({
+              values,
+              errors,
+              setFieldValue,
+              handleSubmit,
+              handleChange,
+            }) => (
               <View style={{ flex: 1, paddingHorizontal: 16 }}>
                 <ScrollView
                   style={[commonStyles.fill]}
                   showsVerticalScrollIndicator={false}
                 >
-                  <MText style={$title2}>1.1 Thông tin đề nghị khoản vay</MText>
-                  <View style={$row}>
-                    <View style={{ flex: 1 }}>
-                      <MText style={$label}>Số tiền đề nghị vay</MText>
+                  <MText style={$title2}>1.1 Thông tin cá nhân</MText>
+                  <MText style={$label}>Họ và tên</MText>
+                  <TextInput
+                    editable={false}
+                    style={[
+                      $textInput,
+                      {
+                        color: '#333333',
+                        fontSize: 16,
+                        fontWeight: '500',
+                        fontFamily: 'BeVietnamPro-Medium',
+                        backgroundColor: '#EAEAEA',
+                      },
+                    ]}
+                    value={values.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, { backgroundColor: '#EAEAEA' }]}
+                        disabled
+                      >
+                        <MText
+                          style={{
+                            color: '#333333',
+                            fontSize: 16,
+                            fontWeight: '500',
+                            fontFamily: 'BeVietnamPro-Medium',
+                          }}
+                        >
+                          {values.dob}
+                        </MText>
+                      </TouchableOpacity>
+                    </View>
+                    <View style={[commonStyles.fill]}>
+                      <MText style={$label}>Giới tính</MText>
+                      <TouchableOpacity
+                        disabled
+                        style={[$select, { backgroundColor: '#EAEAEA' }]}
+                      >
+                        <MText
+                          style={{
+                            color: '#333333',
+                            fontSize: 16,
+                            fontWeight: '500',
+                            flex: 1,
+                          }}
+                        >
+                          {values.gender === 0
+                            ? 'Nam'
+                            : values.gender === 1
+                            ? 'Nữ'
+                            : ''}
+                        </MText>
+                        <DropDown2 />
+                      </TouchableOpacity>
+                    </View>
+                  </View>
+
+                  <View style={[$row]}>
+                    <View style={[commonStyles.fill]}>
+                      <MText style={$label}>Số CCCD/CMND</MText>
                       <TextInput
-                        numberOfLines={1}
+                        editable={false}
+                        keyboardType="number-pad"
                         style={[
                           $textInput,
                           {
                             color: '#333333',
                             fontSize: 16,
                             fontWeight: '500',
+                            backgroundColor: '#EAEAEA',
                           },
                         ]}
-                        value={formatMoney(values.loanAmount)}
-                        onChangeText={(text) => {
-                          setFieldValue('loanAmount', text.replaceAll(',', ''));
-                          debounceCall(text);
-                        }}
+                        value={values.nationalCard}
+                        onChangeText={handleChange('nationalCard')}
                       />
-                      {errors && errors.loanAmount && (
-                        <MText style={$error}>{errors.loanAmount}</MText>
-                      )}
                     </View>
-                    <View style={{ flex: 1 }}>
-                      <MText style={$label}>Hình thức thanh toán</MText>
+                    <View style={[commonStyles.fill]}>
+                      <MText style={$label}>Ngày cấp</MText>
                       <TouchableOpacity
                         style={$select}
                         onPress={() => {
-                          navigation.push(ScreenNames.MSelect, {
-                            title: 'Chọn hình thức thanh toán',
-                            data: appStore.listRateType,
-                            callback: (value) => {
-                              setFieldValue('rateTypeId', value?.id);
-                              appStore.getLoanTimeByType(
-                                value?.id,
-                                props.route?.params?.loan?.typeLoan ?? 0
-                              );
-                              setFieldValue('loanTime', null);
-                            },
-                          });
+                          setShowDate(true);
                         }}
                       >
                         <MText
                           numberOfLines={1}
                           style={{
-                            color: '#333333',
+                            color:
+                              values.dateNationalId !== ''
+                                ? '#333333'
+                                : '#BDBDBD',
                             fontSize: 16,
                             fontWeight: '500',
                             flex: 1,
-                            fontFamily: 'BeVietnamPro-Medium',
                           }}
                         >
-                          {
-                            appStore.listRateType?.find(
-                              (x) => x?.id === values.rateTypeId
-                            )?.name
-                          }
+                          {values.dateNationalId !== ''
+                            ? values.dateNationalId
+                            : 'DD/MM/YYYY'}
                         </MText>
-                        <DropDown2 />
                       </TouchableOpacity>
-                      {errors && errors.rateTypeId && (
-                        <MText style={$error}>{errors.rateTypeId}</MText>
-                      )}
                     </View>
+
+                    <DatePicker
+                      mode="date"
+                      open={showDate}
+                      modal
+                      title="Chọn thời gian"
+                      locale="vi"
+                      date={new Date()}
+                      onCancel={() => {
+                        setShowDate(false);
+                      }}
+                      onConfirm={(date) => {
+                        setShowDate(false);
+
+                        setFieldValue('dateNationalId', formatDDMMYYY(date));
+                      }}
+                    />
                   </View>
-                  <MText style={$label}>Thời gian vay</MText>
+                  <MText style={[$title2]}>1.2 Thông tin giải ngân</MText>
+                  <MText style={$label}>Ngân hàng</MText>
                   <TouchableOpacity
                     style={$select}
                     onPress={() => {
-                      navigation.push(ScreenNames.MSelect, {
-                        title: 'Chọn thời gian vay',
-                        data: appStore.listLoanTimeByType,
+                      navigation.push(ScreenNames.CommonSelect, {
+                        title: 'Chọn ngân hàng',
+                        data: ttsStore.listBank,
                         callback: (value) => {
-                          setFieldValue('loanTime', value?.id);
-                          getInfoInsurence(
-                            values.loanAmount,
-                            value?.id,
-                            values?.rateTypeId,
-                            values.timeInsurenceCustomer?.id ?? 0,
-                            values.timeInsuranceProperty?.id ?? 0
-                          );
+                          setFieldValue('bankName', value.name);
+                          setFieldValue('bankId', value.id);
                         },
                       });
                     }}
@@ -451,328 +383,62 @@ export default function TopupLoanInfo(props) {
                         fontFamily: 'BeVietnamPro-Medium',
                       }}
                     >
-                      {values?.loanTime ? `${values?.loanTime} tháng` : ''}
+                      {values.bankName}
                     </MText>
                     <DropDown2 />
                   </TouchableOpacity>
-                  {errors && errors.loanTime && (
-                    <MText style={$error}>{errors.loanTime}</MText>
+                  {errors && errors.bankName && (
+                    <MText style={$error}>{errors.bankName}</MText>
                   )}
                   <MText style={[$label, { marginTop: 16 }]}>
-                    Ngày thanh toán kỳ đầu
+                    Tên số tài khoản
                   </MText>
-                  <TouchableOpacity
-                    style={$select}
-                    onPress={() => {
-                      navigation.push(ScreenNames.MSelect, {
-                        title: 'Ngày thanh toán kỳ đầu',
-                        data: ttsStore.listFirstPayment,
-                        callback: (value) => {
-                          setFieldValue('firstPaymentDate', value?.name);
-                        },
-                      });
-                    }}
-                  >
-                    <MText
-                      numberOfLines={1}
-                      style={{
+                  <TextInput
+                    numberOfLines={1}
+                    style={[
+                      $textInput,
+                      {
                         color: '#333333',
                         fontSize: 16,
                         fontWeight: '500',
-                        flex: 1,
-                        fontFamily: 'BeVietnamPro-Medium',
-                      }}
-                    >
-                      {values?.firstPaymentDate}
-                    </MText>
-                    <DropDown2 />
-                  </TouchableOpacity>
-                  {errors && errors.firstPaymentDate && (
-                    <MText style={$error}>{errors.firstPaymentDate}</MText>
+                      },
+                    ]}
+                    value={values.bankAccountName}
+                    onChangeText={handleChange('bankAccountName')}
+                  />
+                  {errors && errors.bankAccountName && (
+                    <MText style={$error}>{errors.bankAccountName}</MText>
                   )}
-
-                  <View
-                    style={{
-                      backgroundColor: '#FFF8F2',
-                      borderLeftWidth: 1,
-                      borderRadius: 8,
-                      padding: 16,
-                      borderColor: color.primary,
-                      marginTop: 10,
-                    }}
-                  >
-                    <MText
-                      style={{
-                        color: color.primary,
-                        fontWeight: 'bold',
-                      }}
-                    >
-                      Bảo hiểm
-                    </MText>
-                    <View
-                      style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 10,
-                        marginTop: 10,
-                      }}
-                    >
-                      <TouchableOpacity
-                        onPress={() => {
-                          setFieldValue(
-                            'buyInsurenceCustomer',
-                            !values.buyInsurenceCustomer
-                          );
-                        }}
-                      >
-                        {values.buyInsurenceCustomer === true ? (
-                          <CheckBoxActive />
-                        ) : (
-                          <CheckBox />
-                        )}
-                      </TouchableOpacity>
-                      <View style={{ flex: 1 }}>
-                        <MText
-                          style={{
-                            color: '#333333',
-                            fontSize: 12,
-                            fontWeight: 'bold',
-                          }}
-                        >
-                          BH sức khoẻ người vay
-                        </MText>
-                        <MText
-                          style={{
-                            color: '#828282',
-                            fontSize: 12,
-                            marginTop: 5,
-                          }}
-                        >
-                          Số tiền{' '}
-                          <MText
-                            style={{
-                              fontSize: 12,
-                              color: '#333333',
-                            }}
-                          >
-                            {formatMoney(values.moneyInsurenceCustomer)} đ
-                          </MText>
-                        </MText>
-                      </View>
-                      <TouchableOpacity
-                        onPress={() => {
-                          navigation.push(ScreenNames.MSelect, {
-                            title: 'Chọn thời gian',
-                            data: appStore.listInsurenceTimeAll,
-                            callback: (value) => {
-                              setFieldValue('timeInsurenceCustomer', value);
-                              getInfoInsurence(
-                                values.loanAmount,
-                                values.loanTime,
-                                values?.rateTypeId,
-                                value?.id,
-                                values.timeInsuranceProperty?.id ?? 0
-                              );
-                            },
-                          });
-                        }}
-                        style={{
-                          backgroundColor: '#FFFFFF',
-                          height: 40,
-                          borderRadius: 6,
-                          alignItems: 'center',
-                          justifyContent: 'space-between',
-                          flexDirection: 'row',
-                          paddingHorizontal: 10,
-                          borderWidth: 1,
-                          borderColor: '#F5F5F5',
-                          width: Dimensions.get('window').width / 3,
-                        }}
-                      >
-                        <MText style={{ fontSize: 12, color: '#333333' }}>
-                          {values.timeInsurenceCustomer?.name ??
-                            'Chọn thời gian'}
-                        </MText>
-                        <DropDown2 />
-                      </TouchableOpacity>
-                    </View>
-                    <View
-                      style={{
-                        height: 1,
-                        backgroundColor: '#EFEFEF',
-                        marginVertical: 8,
-                      }}
-                    />
-                    <View
-                      style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 10,
-                        marginTop: 10,
-                      }}
-                    >
-                      <TouchableOpacity
-                        onPress={() => {
-                          setFieldValue(
-                            'buyInsuranceProperty',
-                            !values.buyInsuranceProperty
-                          );
-                        }}
-                      >
-                        {values.buyInsuranceProperty === true ? (
-                          <CheckBoxActive />
-                        ) : (
-                          <CheckBox />
-                        )}
-                      </TouchableOpacity>
-                      <View style={{ flex: 1 }}>
-                        <MText
-                          style={{
-                            color: '#333333',
-                            fontSize: 12,
-                            fontWeight: 'bold',
-                          }}
-                        >
-                          BH vật chất
-                        </MText>
-                        <MText
-                          style={{
-                            color: '#828282',
-                            fontSize: 12,
-                            marginTop: 5,
-                          }}
-                        >
-                          Số tiền{' '}
-                          <MText
-                            style={{
-                              fontSize: 12,
-                              color: '#333333',
-                            }}
-                          >
-                            {formatMoney(values.moneyInsuranceProperty)} đ
-                          </MText>
-                        </MText>
-                      </View>
-                      <TouchableOpacity
-                        onPress={() => {
-                          navigation.push(ScreenNames.MSelect, {
-                            title: 'Chọn thời gian',
-                            data: appStore.listInsurenceTimeAll,
-                            callback: (value) => {
-                              setFieldValue('timeInsuranceProperty', value);
-                              getInfoInsurence(
-                                values.loanAmount,
-                                values.loanTime,
-                                values?.rateTypeId,
-                                values?.timeInsurenceCustomer?.id ?? 0,
-                                value?.id
-                              );
-                            },
-                          });
-                        }}
-                        style={{
-                          backgroundColor: '#FFFFFF',
-                          height: 40,
-                          borderRadius: 6,
-                          alignItems: 'center',
-                          justifyContent: 'space-between',
-                          flexDirection: 'row',
-                          paddingHorizontal: 10,
-                          borderWidth: 1,
-                          borderColor: '#F5F5F5',
-                          width: Dimensions.get('window').width / 3,
-                        }}
-                      >
-                        <MText style={{ fontSize: 12, color: '#333333' }}>
-                          {values.timeInsuranceProperty?.name ??
-                            'Chọn thời gian'}
-                        </MText>
-                        <DropDown2 />
-                      </TouchableOpacity>
-                    </View>
-                    <View
-                      style={{
-                        height: 1,
-                        backgroundColor: '#BDBDBD',
-                        marginVertical: 8,
-                      }}
-                    />
-                    <View style={{ flexDirection: 'row', gap: 5 }}>
-                      <Tick2 />
-                      <MText
-                        style={{
-                          fontSize: 10,
-                          color: '#828282',
-                        }}
-                      >
-                        Quyền lợi bảo hiểm sức khoẻ lên tới 100% từ Bảo Minh
-                        {'\n'}
-                        (Tai nạn, thương tật,...)
-                      </MText>
-                    </View>
-                    <View
-                      style={{ marginTop: 8, flexDirection: 'row', gap: 5 }}
-                    >
-                      <Tick2 />
-                      <MText
-                        style={{
-                          fontSize: 10,
-                          color: '#828282',
-                        }}
-                      >
-                        Quyền lợi bảo hiểm vật chất 100% từ Bảo Minh
-                      </MText>
-                    </View>
-                  </View>
-
-                  <MText style={[$title2, { marginTop: 10 }]}>
-                    1.2 Thông tin giải ngân
-                  </MText>
-                  <MText style={[$label, { color: 'rgba(125, 125, 125, 1)' }]}>
-                    Ngân hàng
-                  </MText>
-                  <MText
-                    style={{
-                      color: 'rgba(51, 51, 51, 1)',
-                      fontSize: 16,
-                      fontWeight: '500',
-                      flex: 1,
-                      fontFamily: 'BeVietnamPro-Medium',
-                      marginBottom: 16,
-                    }}
-                  >
-                    {values?.bankName}
-                  </MText>
-                  <MText style={[$label, { color: 'rgba(125, 125, 125, 1)' }]}>
-                    Tên chủ thẻ
-                  </MText>
-                  <MText
-                    style={{
-                      color: 'rgba(51, 51, 51, 1)',
-                      fontSize: 16,
-                      fontWeight: '500',
-                      flex: 1,
-                      fontFamily: 'BeVietnamPro-Medium',
-                      marginBottom: 16,
-                    }}
-                  >
-                    {values?.bankAccountName}
-                  </MText>
-                  <MText style={[$label, { color: 'rgba(125, 125, 125, 1)' }]}>
+                  <MText style={[$label, { marginTop: 16 }]}>
                     Số tài khoản
                   </MText>
-                  <MText
-                    style={{
-                      color: 'rgba(51, 51, 51, 1)',
-                      fontSize: 16,
-                      fontWeight: '500',
-                      flex: 1,
-                      fontFamily: 'BeVietnamPro-Medium',
-                      marginBottom: 16,
-                    }}
-                  >
-                    {values?.bankAccountNumber}
-                  </MText>
+                  <TextInput
+                    keyboardType="number-pad"
+                    numberOfLines={1}
+                    style={[
+                      $textInput,
+                      {
+                        color: '#333333',
+                        fontSize: 16,
+                        fontWeight: '500',
+                      },
+                    ]}
+                    value={values.bankAccountNumber}
+                    onChangeText={handleChange('bankAccountNumber')}
+                  />
+                  {errors && errors.bankAccountNumber && (
+                    <MText style={$error}>{errors.bankAccountNumber}</MText>
+                  )}
+                  <View style={{ height: 50 }} />
+                </ScrollView>
+                <View
+                  style={{
+                    position: 'absolute',
+                    bottom: 24,
+                    left: 16,
+                    right: 16,
+                  }}
+                >
                   <MButton
                     onPress={() => {
                       handleSubmit();
@@ -802,7 +468,7 @@ export default function TopupLoanInfo(props) {
                       </MText>
                     </LinearGradient>
                   </MButton>
-                </ScrollView>
+                </View>
               </View>
             )}
           </Formik>