react-native-timacare 1.0.0 → 1.0.2

package/src/screens/digital-lending/Step4.tsx

@@ -0,0 +1,495 @@
+//@ts-nocheck
+import React, { useRef, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  Platform,
+  ScrollView,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  TextInput,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {
+  Back2Icon,
+  StepIcon,
+  NextIcon,
+  Line2Icon,
+  WarningIcon,
+} from '../../assets/icons';
+import { MText } from '../../components/MText';
+import { Formik } from 'formik';
+import digitalLendingStore from './store';
+import { useNavigation } from '@react-navigation/native';
+import { formatDDMMYYY, formatMoney } from '../../utils';
+import DatePicker from 'react-native-date-picker';
+import KeyboardSpacer from '../../components/keyboardspace';
+
+export const Step4 = observer(function Step4() {
+  const navigation = useNavigation();
+  const [showDatePicker, setShowDatePicker] = useState(false);
+  const ref = useRef();
+
+  const onSubmit = (values) => {
+    digitalLendingStore.body = {
+      ...digitalLendingStore.body,
+      brandId: values?.brandId?.id,
+      vehicles: values?.vehicles?.id,
+      plateNumber: values?.plateNumber,
+      chassis: values?.chassis,
+      engine: values?.engine,
+      ownerFullName: values?.ownerFullName,
+      motobikeCertificateNumber: values?.motobikeCertificateNumber,
+      loanAmountExpertiseAi: digitalLendingStore?.data?.loanAmountExpertiseAi,
+      loanAmountExpertiseLast:
+        digitalLendingStore?.data?.loanAmountExpertiseLast,
+      motobikeCertificateDate: values?.motobikeCertificateDate,
+    };
+  };
+  return (
+    <View style={{ flex: 1 }}>
+      <ScrollView style={{ paddingHorizontal: 12 }}>
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingVertical: 16,
+          }}
+        >
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+              shadowRadius: 40,
+              backgroundColor: '#FFF3E9',
+              borderWidth: 1,
+              borderColor: '#FF8E4F',
+            }}
+          >
+            <MText style={{ fontWeight: 'bold', color: '#FF8E4F' }}>01</MText>
+          </View>
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+              shadowRadius: 40,
+              backgroundColor: '#FFF3E9',
+              borderWidth: 1,
+              borderColor: '#FF8E4F',
+            }}
+          >
+            <MText style={{ color: '#FF8E4F', fontWeight: 'bold' }}>02</MText>
+          </View>
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+              shadowRadius: 40,
+              backgroundColor: '#FFF3E9',
+              borderWidth: 1,
+              borderColor: '#FF8E4F',
+            }}
+          >
+            <MText style={{ color: '#FF8E4F', fontWeight: 'bold' }}>03</MText>
+          </View>
+
+          <LinearGradient
+            colors={['#FF8E4F', '#EF592E']}
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <MText style={{ fontWeight: 'bold', color: 'white' }}>04</MText>
+          </LinearGradient>
+          <Line2Icon />
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+              shadowRadius: 40,
+              backgroundColor: 'white',
+              shadowOffset: {
+                width: 2,
+                height: 1,
+              },
+              ...Platform.select({
+                ios: {
+                  shadowColor: 'rgba(0, 0, 0, 0.10)',
+                  shadowOpacity: 0.2,
+                },
+                android: {
+                  elevation: 10,
+                },
+              }),
+            }}
+          >
+            <MText style={{ fontWeight: 'bold', color: '#333333' }}>05</MText>
+          </View>
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+              shadowRadius: 40,
+              backgroundColor: 'white',
+              shadowOffset: {
+                width: 2,
+                height: 1,
+              },
+              ...Platform.select({
+                ios: {
+                  shadowColor: 'rgba(0, 0, 0, 0.10)',
+                  shadowOpacity: 0.2,
+                },
+                android: {
+                  elevation: 10,
+                },
+              }),
+            }}
+          >
+            <MText style={{ fontWeight: 'bold', color: '#333333' }}>06</MText>
+          </View>
+        </View>
+        <MText style={{ fontWeight: 'bold' }}>THÔNG TIN TÀI SẢN (XE)</MText>
+        <View
+          style={{ height: 1, backgroundColor: '#BDBDBD', marginTop: 16 }}
+        />
+        <View
+          style={{
+            backgroundColor: '#EB5757',
+            flexDirection: 'row',
+            padding: 8,
+            alignItems: 'center',
+            borderRadius: 8,
+            marginTop: 12,
+          }}
+        >
+          <WarningIcon />
+          <MText style={{ flex: 1, color: 'white', marginLeft: 8 }}>
+            Kiểm tra lại thông tin của bạn, nếu chưa chính xác hoặc đã cũ, hãy
+            cập nhật lại thông tin mới nhất nhé!
+          </MText>
+        </View>
+        <Formik
+          onSubmit={onSubmit}
+          innerRef={ref}
+          initialValues={{
+            brandId: digitalLendingStore?.data?.brandId
+              ? {
+                  id: digitalLendingStore?.data?.brandId,
+                  name: digitalLendingStore?.data?.brandName,
+                }
+              : null,
+            plateNumber: digitalLendingStore?.data?.plateNumber,
+            vehicles: digitalLendingStore?.data?.vehicles
+              ? {
+                  id: digitalLendingStore?.data?.vehicles,
+                  name: digitalLendingStore?.data?.vehicleName,
+                }
+              : null,
+            chassis: digitalLendingStore?.data?.chassis,
+            engine: digitalLendingStore?.data?.engine,
+            ownerFullName: digitalLendingStore?.data?.ownerFullName,
+            motobikeCertificateNumber:
+              digitalLendingStore?.data?.motobikeCertificateNumber,
+            motobikeCertificateDate:
+              digitalLendingStore?.data?.motobikeCertificateDate,
+          }}
+        >
+          {({ values, handleSubmit, handleChange, setFieldValue }) => (
+            <View style={{ marginTop: 16 }}>
+              <View>
+                <MText style={{ color: '#8A8A8A' }}>Hãng xe</MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Hãng xe',
+                      data: digitalLendingStore.listBrand,
+                      callback: (item) => {
+                        setFieldValue('brandId', item);
+                        setFieldValue('vehicles', null);
+                        digitalLendingStore.getBrandName(item?.id);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>{values.brandId ? values.brandId?.name : ''}</MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Tên xe</MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Tên xe',
+                      data: digitalLendingStore.listBrandName,
+                      callback: (item) => {
+                        setFieldValue('vehicles', item);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>{values.vehicles ? values.vehicles?.name : ''}</MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Biển số xe</MText>
+                <TextInput
+                  value={values.plateNumber}
+                  onChangeText={handleChange('plateNumber')}
+                  style={{
+                    color: '#33333',
+                    height: 30,
+                    marginVertical: 0,
+                    flex: 1,
+                    padding: 0,
+                  }}
+                />
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Số khung</MText>
+                <TextInput
+                  value={values.chassis}
+                  onChangeText={handleChange('chassis')}
+                  style={{
+                    color: '#33333',
+                    height: 30,
+                    marginVertical: 0,
+                    flex: 1,
+                    padding: 0,
+                  }}
+                />
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Số máy</MText>
+                <TextInput
+                  value={values.engine}
+                  onChangeText={handleChange('engine')}
+                  style={{
+                    color: '#33333',
+                    height: 30,
+                    marginVertical: 0,
+                    flex: 1,
+                    padding: 0,
+                  }}
+                />
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Họ tên chủ xe</MText>
+                <TextInput
+                  value={values.ownerFullName}
+                  onChangeText={handleChange('ownerFullName')}
+                  style={{
+                    color: '#33333',
+                    height: 30,
+                    marginVertical: 0,
+                    flex: 1,
+                    padding: 0,
+                  }}
+                />
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Số đăng ký xe</MText>
+                <TextInput
+                  value={values.motobikeCertificateNumber}
+                  onChangeText={handleChange('motobikeCertificateNumber')}
+                  style={{
+                    color: '#33333',
+                    height: 30,
+                    marginVertical: 0,
+                    flex: 1,
+                    padding: 0,
+                  }}
+                />
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Ngày đăng ký xe</MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    setShowDatePicker(true);
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>{values.motobikeCertificateDate}</MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View
+                style={{
+                  marginTop: 12,
+                  backgroundColor: '#F2F2F2',
+                  borderRadius: 4,
+                  padding: 8,
+                }}
+              >
+                <MText style={{ color: '#8A8A8A' }}>Giá trước thẩm định</MText>
+                <MText>
+                  {formatMoney(digitalLendingStore?.data.loanAmountExpertiseAi)}{' '}
+                  VND
+                </MText>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View
+                style={{
+                  marginTop: 12,
+                  backgroundColor: '#F2F2F2',
+                  borderRadius: 4,
+                  padding: 8,
+                  marginBottom: 12,
+                }}
+              >
+                <MText style={{ color: '#8A8A8A' }}>Giá sau thẩm định</MText>
+                <MText>
+                  {formatMoney(
+                    digitalLendingStore?.data.loanAmountExpertiseLast
+                  )}{' '}
+                  VND
+                </MText>
+              </View>
+              <KeyboardSpacer />
+              <DatePicker
+                mode="date"
+                open={showDatePicker}
+                modal
+                title="Chọn thời gian"
+                locale="vi"
+                date={new Date()}
+                onCancel={() => {
+                  setShowDatePicker(false);
+                }}
+                onConfirm={(date) => {
+                  setShowDatePicker(false);
+                  setFieldValue('motobikeCertificateDate', formatDDMMYYY(date));
+                }}
+              />
+            </View>
+          )}
+        </Formik>
+      </ScrollView>
+      <View
+        style={{
+          backgroundColor: 'white',
+          shadowOffset: {
+            width: 2,
+            height: 1,
+          },
+          ...Platform.select({
+            ios: {
+              shadowColor: 'rgba(0, 0, 0, 0.10)',
+              shadowOpacity: 0.2,
+            },
+            android: {
+              elevation: 10,
+            },
+          }),
+          paddingTop: 12,
+          paddingHorizontal: 12,
+          flexDirection: 'row',
+          paddingBottom: 16,
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <TouchableOpacity
+          onPress={() => (digitalLendingStore.step = 3)}
+          style={{
+            paddingHorizontal: 12,
+            paddingVertical: 8,
+            borderRadius: 40,
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderWidth: 1,
+            borderColor: '#FF8E4F',
+          }}
+        >
+          <Back2Icon />
+          <MText
+            style={{
+              marginLeft: 5,
+              color: '#FF8E4F',
+              fontSize: 16,
+              fontWeight: '500',
+            }}
+          >
+            Trở lại
+          </MText>
+        </TouchableOpacity>
+        <StepIcon />
+        <TouchableOpacity
+          onPress={() => {
+            digitalLendingStore.step = 5;
+            ref.current.handleSubmit();
+          }}
+        >
+          <LinearGradient
+            colors={['#FF8E4F', '#EF592E']}
+            style={{
+              paddingHorizontal: 12,
+              paddingVertical: 8,
+              borderRadius: 40,
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            <MText
+              style={{
+                color: 'white',
+                fontSize: 16,
+                fontWeight: '500',
+                marginRight: 5,
+              }}
+            >
+              Tiếp tục
+            </MText>
+            <NextIcon />
+          </LinearGradient>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  input: {},
+});