react-native-timacare 3.1.66 → 3.1.67

package/src/screens/v3/AssetInformation.tsx

@@ -0,0 +1,690 @@
+//@ts-nocheck
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Alert,
+  ScrollView,
+  TextInput,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { observer } from 'mobx-react-lite';
+import MHeader from '../../components/MHeader';
+import { DropDown2, IconBack } from '../../assets/icons';
+import { MText } from '../../components/MText';
+import { Formik } from 'formik';
+import { ScreenNames } from '../../navigation';
+import ttsStore from '../toan-trinh-so/store';
+import { CommonActions, useNavigation } from '@react-navigation/native';
+import Loading from '../../components/Loading';
+import MButton from '../../components/MButton';
+import { EnumTypeAsset, EnumTypeCar } from '../../utils';
+import KeyboardSpacer from '../../components/keyboardspace';
+import * as yup from 'yup';
+import { Api } from '../../services/api';
+
+export const AssetInformation = observer(function AssetInformation(props) {
+  const navigation = useNavigation();
+  const formRef = useRef(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const loan = props?.route?.params?.loan;
+
+  const getData = async () => {
+    try {
+      setIsLoading(true);
+      const response = await Api.getInstance().getAssetAutoDE(loan?.id);
+      setIsLoading(false);
+      if (response.kind === 'ok' && response.data?.meta?.errorCode === 200) {
+        formRef.current?.setFieldValue(
+          'brand',
+          response.data.data?.brand ?? ''
+        );
+        formRef.current?.setFieldValue(
+          'yearCar',
+          response.data.data?.yearCar ?? null
+        );
+        formRef.current?.setFieldValue(
+          'vehicles',
+          response.data.data?.vehicles ?? ''
+        );
+        formRef.current?.setFieldValue(
+          'plateNumber',
+          response.data.data?.plateNumber ?? ''
+        );
+        formRef.current?.setFieldValue(
+          'chassis',
+          response.data.data?.chassis ?? ''
+        );
+        formRef.current?.setFieldValue(
+          'engine',
+          response.data.data?.engine ?? ''
+        );
+        formRef.current?.setFieldValue(
+          'ownerFullName',
+          response.data.data?.ownerFullName ?? ''
+        );
+        formRef.current?.setFieldValue(
+          'motobikeCertificateNumber',
+          response.data.data?.motobikeCertificateNumber ?? ''
+        );
+        formRef.current?.setFieldValue(
+          'motobikeCertificateDate',
+          response.data.data?.motobikeCertificateDate ?? ''
+        );
+
+        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
+        );
+      } else {
+        Alert.alert(
+          'Thông báo',
+          response.data?.meta?.errorMessage ||
+            'Có lỗi xảy ra. Vui lòng thử lại sau!'
+        );
+      }
+    } catch (error) {
+      Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau!');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    ttsStore.getListBrand();
+    if (loan) {
+      getData();
+    }
+  }, []);
+
+  const onSubmit = async (values) => {
+    try {
+      setIsLoading(true);
+      const body = {
+        loanBriefId: loan?.id,
+        brand: values?.brand,
+        yearCar: Number(values.yearCar),
+        vehicles: values?.vehicles,
+        plateNumber: values?.plateNumber,
+        chassis: values?.chassis,
+        engine: values?.engine,
+        ownerFullName: values?.ownerFullName,
+        motobikeCertificateNumber: values?.motobikeCertificateNumber,
+        motobikeCertificateDate: values?.motobikeCertificateDate,
+        vehicleInspectionExpirationDate:
+          values?.vehicleInspectionExpirationDate,
+        typeLoanBrief: values?.typeLoanBrief,
+        carTypeId: values?.carTypeId,
+      };
+      const response = await Api.getInstance().updateAssetAutoDE(body);
+      setIsLoading(false);
+      if (response.kind === 'ok') {
+        if (response.data?.meta?.errorCode === 200) {
+          Alert.alert('Thông báo', 'Cập nhật thông tin tài sản thành công', [
+            {
+              text: 'Đồng ý',
+              onPress: () => {
+                navigation.navigate(ScreenNames.Main);
+              },
+            },
+          ]);
+        } 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) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <MHeader title="Vay nhanh 24/7" />
+      <View style={{ flex: 1 }}>
+        <View style={$h} />
+        <View style={$bg}>
+          <View
+            style={{
+              paddingVertical: 16,
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingHorizontal: 16,
+            }}
+          >
+            <TouchableOpacity
+              style={{
+                zIndex: 1000,
+              }}
+              onPress={() => {
+                navigation.navigate(ScreenNames.Main);
+              }}
+            >
+              <IconBack />
+            </TouchableOpacity>
+            <MText style={$title}>Thông tin chi tiết</MText>
+          </View>
+
+          <Formik
+            onSubmit={onSubmit}
+            innerRef={formRef}
+            validateOnBlur={false}
+            validateOnChange={false}
+            initialValues={{
+              brand: '',
+              yearCar: null,
+              vehicles: '',
+              plateNumber: '',
+              chassis: '',
+              engine: '',
+              ownerFullName: '',
+              motobikeCertificateNumber: '',
+              motobikeCertificateDate: '',
+              vehicleInspectionExpirationDate: '',
+              typeLoanBrief: 1,
+              carTypeId: null,
+            }}
+            validationSchema={yup.object().shape({
+              brand: yup.string().required('Vui lòng chọn hãng xe'),
+              yearCar: yup
+                .string()
+                .required('Vui lòng chọn năm sản xuất')
+                .nullable(),
+              vehicles: yup.string().required('Vui lòng chọn xe').nullable(),
+              plateNumber: yup.string().required('Vui lòng nhập biển số'),
+              chassis: yup.string().required('Vui lòng nhập số khung'),
+              engine: yup.string().required('Vui lòng nhập số máy'),
+              ownerFullName: yup.string().required('Vui lòng nhập chủ xe'),
+              motobikeCertificateNumber: yup
+                .string()
+                .required('Vui lòng nhập số đăng ký xe'),
+              motobikeCertificateDate: yup
+                .string()
+                .required('Vui lòng nhập ngày đăng ký'),
+              vehicleInspectionExpirationDate: yup
+                .string()
+                .required('Vui lòng nhập ngày đăng ký'),
+              typeLoanBrief: yup
+                .number()
+                .required('Vui lòng chọn loại tài sản')
+                .nullable(),
+              carTypeId: yup
+                .number()
+                .required('Vui lòng chọn loại xe')
+                .nullable(),
+            })}
+          >
+            {({
+              values,
+              setFieldValue,
+              errors,
+              handleSubmit,
+              handleChange,
+            }) => (
+              <ScrollView style={{ paddingHorizontal: 16, flex: 1 }}>
+                <MText style={$title2}>Thông tin tài sản</MText>
+                <View style={$row}>
+                  <View style={{ flex: 1 }}>
+                    <MText style={$label}>Hãng xe</MText>
+                    <TouchableOpacity
+                      style={$select}
+                      onPress={() => {
+                        navigation.push(ScreenNames.CommonSelect, {
+                          title: 'Hãng xe',
+                          data: ttsStore.listBrand,
+                          callback: (value) => {
+                            setFieldValue('brand', value.name);
+                            setFieldValue('yearCar', null);
+                            setFieldValue('vehicles', null);
+                            ttsStore.getListYearCar(value.name);
+                          },
+                        });
+                      }}
+                    >
+                      <MText
+                        numberOfLines={1}
+                        style={{
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                          flex: 1,
+                          fontFamily: 'BeVietnamPro-Medium',
+                        }}
+                      >
+                        {values?.brand}
+                      </MText>
+                      <DropDown2 />
+                    </TouchableOpacity>
+                    {errors && errors.brand && (
+                      <MText style={$error}>{errors.brand}</MText>
+                    )}
+                  </View>
+                  <View style={{ flex: 1 }}>
+                    <MText style={$label}>Năm sản xuất</MText>
+                    <TouchableOpacity
+                      style={$select}
+                      onPress={() => {
+                        navigation.push(ScreenNames.CommonSelect, {
+                          title: 'Năm sản xuất',
+                          data: ttsStore.listYear,
+                          callback: (value) => {
+                            setFieldValue('yearCar', value.name);
+                            setFieldValue('vehicles', null);
+                            ttsStore.getListCar(values.brand, value.name);
+                          },
+                        });
+                      }}
+                    >
+                      <MText
+                        numberOfLines={1}
+                        style={{
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                          flex: 1,
+                          fontFamily: 'BeVietnamPro-Medium',
+                        }}
+                      >
+                        {values?.yearCar}
+                      </MText>
+                      <DropDown2 />
+                    </TouchableOpacity>
+                    {errors && errors.yearCar && (
+                      <MText style={$error}>{errors.yearCar}</MText>
+                    )}
+                  </View>
+                </View>
+                <MText style={$label}>Tên xe/ Phiên bản xe</MText>
+                <TouchableOpacity
+                  style={$select}
+                  onPress={() => {
+                    navigation.push(ScreenNames.CommonSelect, {
+                      title: 'Tên xe/ Phiên bản xe',
+                      data: ttsStore.listCar,
+                      callback: (value) => {
+                        setFieldValue('vehicles', value.name);
+                      },
+                    });
+                  }}
+                >
+                  <MText
+                    numberOfLines={1}
+                    style={{
+                      color: '#333333',
+                      fontSize: 16,
+                      fontWeight: '500',
+                      flex: 1,
+                      fontFamily: 'BeVietnamPro-Medium',
+                    }}
+                  >
+                    {values.vehicles}
+                  </MText>
+                  <DropDown2 />
+                </TouchableOpacity>
+                {errors && errors.vehicles && (
+                  <MText style={$error}>{errors.vehicles}</MText>
+                )}
+                <View style={[$row, { marginTop: 16 }]}>
+                  <View style={{ flex: 1 }}>
+                    <MText style={$label}>Biển số xe</MText>
+                    <TextInput
+                      placeholder="30A-99999"
+                      placeholderTextColor={'#B3B3B3'}
+                      numberOfLines={1}
+                      style={[
+                        $textInput,
+                        {
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                        },
+                      ]}
+                      value={values.plateNumber}
+                      onChangeText={handleChange('plateNumber')}
+                    />
+                    {errors && errors.plateNumber && (
+                      <MText style={$error}>{errors.plateNumber}</MText>
+                    )}
+                  </View>
+                  <View style={{ flex: 1 }}>
+                    <MText style={$label}>Số đăng ký xe</MText>
+                    <TextInput
+                      placeholder="Nhập số đăng ký xe"
+                      placeholderTextColor={'#B3B3B3'}
+                      numberOfLines={1}
+                      style={[
+                        $textInput,
+                        {
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                        },
+                      ]}
+                      value={values.motobikeCertificateNumber}
+                      onChangeText={handleChange('motobikeCertificateNumber')}
+                    />
+                    {errors && errors.motobikeCertificateNumber && (
+                      <MText style={$error}>
+                        {errors.motobikeCertificateNumber}
+                      </MText>
+                    )}
+                  </View>
+                </View>
+                <View style={[$row, { marginTop: 16 }]}>
+                  <View style={{ flex: 1 }}>
+                    <MText style={$label}>Ngày đăng ký xe</MText>
+                    <TextInput
+                      numberOfLines={1}
+                      style={[
+                        $textInput,
+                        {
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                        },
+                      ]}
+                      placeholder="DD/MM/YYYY"
+                      placeholderTextColor="#BDBDBD"
+                      value={values.motobikeCertificateDate}
+                      onChangeText={handleChange('motobikeCertificateDate')}
+                    />
+                    {errors && errors.motobikeCertificateDate && (
+                      <MText style={$error}>
+                        {errors.motobikeCertificateDate}
+                      </MText>
+                    )}
+                  </View>
+                  <View style={{ flex: 1 }}>
+                    <MText style={$label}>Ngày hết hạn đăng kiểm</MText>
+                    <TextInput
+                      numberOfLines={1}
+                      style={[
+                        $textInput,
+                        {
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                        },
+                      ]}
+                      placeholder="DD/MM/YYYY"
+                      placeholderTextColor="#BDBDBD"
+                      value={values.vehicleInspectionExpirationDate}
+                      onChangeText={handleChange(
+                        'vehicleInspectionExpirationDate'
+                      )}
+                    />
+                    {errors && errors.vehicleInspectionExpirationDate && (
+                      <MText style={$error}>
+                        {errors.vehicleInspectionExpirationDate}
+                      </MText>
+                    )}
+                  </View>
+                </View>
+                <View style={[$row, { marginTop: 16 }]}>
+                  <View style={{ flex: 1 }}>
+                    <MText style={[$label]}>Số khung</MText>
+                    <TextInput
+                      placeholder="Nhập số khung"
+                      placeholderTextColor={'#B3B3B3'}
+                      numberOfLines={1}
+                      style={[
+                        $textInput,
+                        {
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                        },
+                      ]}
+                      value={values.chassis}
+                      onChangeText={handleChange('chassis')}
+                    />
+                    {errors && errors.chassis && (
+                      <MText style={$error}>{errors.chassis}</MText>
+                    )}
+                  </View>
+                  <View style={{ flex: 1 }}>
+                    <MText style={$label}>Số máy</MText>
+                    <TextInput
+                      placeholder="Nhập số máy"
+                      placeholderTextColor={'#B3B3B3'}
+                      numberOfLines={1}
+                      style={[
+                        $textInput,
+                        {
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                        },
+                      ]}
+                      value={values.engine}
+                      onChangeText={handleChange('engine')}
+                    />
+                    {errors && errors.engine && (
+                      <MText style={$error}>{errors.engine}</MText>
+                    )}
+                  </View>
+                </View>
+                <MText style={$label}>Họ tên chủ xe</MText>
+                <TextInput
+                  numberOfLines={1}
+                  style={[
+                    $textInput,
+                    {
+                      color: '#333333',
+                      fontSize: 16,
+                      fontWeight: '500',
+                    },
+                  ]}
+                  placeholder="Nhập họ tên chủ xe"
+                  placeholderTextColor={'#B3B3B3'}
+                  value={values.ownerFullName}
+                  onChangeText={handleChange('ownerFullName')}
+                />
+                {errors && errors.ownerFullName && (
+                  <MText style={$error}>{errors.ownerFullName}</MText>
+                )}
+                <View style={[$row, { marginTop: 16 }]}>
+                  <View style={{ flex: 1 }}>
+                    <MText style={$label}>Loại tài sản</MText>
+                    <TouchableOpacity
+                      style={$select}
+                      onPress={() => {
+                        navigation.push(ScreenNames.MSelect, {
+                          title: 'Loại tài sản',
+                          data: EnumTypeAsset,
+                          callback: (value) => {
+                            setFieldValue('typeLoanBrief', value.id);
+                          },
+                        });
+                      }}
+                    >
+                      <MText
+                        numberOfLines={1}
+                        style={{
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                          flex: 1,
+                          fontFamily: 'BeVietnamPro-Medium',
+                        }}
+                      >
+                        {
+                          EnumTypeAsset.find(
+                            (x) => x.id === values.typeLoanBrief
+                          )?.name
+                        }
+                      </MText>
+                      <DropDown2 />
+                    </TouchableOpacity>
+                    {errors && errors.typeLoanBrief && (
+                      <MText style={$error}>{errors.typeLoanBrief}</MText>
+                    )}
+                  </View>
+                  <View style={{ flex: 1 }}>
+                    <MText style={$label}>Loại xe</MText>
+                    <TouchableOpacity
+                      style={$select}
+                      onPress={() => {
+                        navigation.push(ScreenNames.MSelect, {
+                          title: 'Loại xe',
+                          data: EnumTypeCar,
+                          callback: (value) => {
+                            setFieldValue('carTypeId', value.id);
+                          },
+                        });
+                      }}
+                    >
+                      <MText
+                        numberOfLines={1}
+                        style={{
+                          color: '#333333',
+                          fontSize: 16,
+                          fontWeight: '500',
+                          flex: 1,
+                          fontFamily: 'BeVietnamPro-Medium',
+                        }}
+                      >
+                        {
+                          EnumTypeCar.find((x) => x.id === values.carTypeId)
+                            ?.name
+                        }
+                      </MText>
+                      <DropDown2 />
+                    </TouchableOpacity>
+                    {errors && errors.carTypeId && (
+                      <MText style={$error}>{errors.carTypeId}</MText>
+                    )}
+                  </View>
+                </View>
+              </ScrollView>
+            )}
+          </Formik>
+
+          <MButton
+            onPress={() => {
+              formRef.current?.handleSubmit();
+            }}
+            style={{
+              marginVertical: 24,
+              marginHorizontal: 16,
+            }}
+          >
+            <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 />
+        </View>
+      </View>
+      <Loading isLoading={isLoading} />
+    </View>
+  );
+});
+
+const $error: TextStyle = {
+  color: '#EB5757',
+  fontSize: 14,
+  fontStyle: 'italic',
+  fontFamily: 'BeVietnamPro-Thin',
+  fontWeight: '300',
+  marginTop: 5,
+};
+
+const $label: TextStyle = {
+  fontSize: 14,
+  color: '#333333',
+  paddingBottom: 5,
+};
+
+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 $title2: TextStyle = {
+  fontSize: 16,
+  fontWeight: 'bold',
+  color: '#333333',
+  paddingBottom: 10,
+  marginTop: 6,
+};
+
+const $row: ViewStyle = {
+  flexDirection: 'row',
+  // alignItems: 'center',
+  marginBottom: 16,
+  gap: 16,
+};
+
+const $select: ViewStyle = {
+  flexDirection: 'row',
+  height: 40,
+  alignItems: 'center',
+  paddingHorizontal: 8,
+  borderWidth: 1,
+  borderRadius: 4,
+  borderColor: '#E0E0E0',
+};
+
+const $textInput: ViewStyle = {
+  borderWidth: 1,
+  borderRadius: 4,
+  borderColor: '#E0E0E0',
+  height: 40,
+  paddingHorizontal: 8,
+  fontFamily: 'BeVietnamPro-Medium',
+};