react-native-timacare 1.0.1 → 1.0.2

package/lib/commonjs/screens/digital-lending/Step1.js.flow

@@ -0,0 +1,661 @@
+//@ts-nocheck
+import React, { useEffect, useRef, useState } from 'react';
+import { observer, 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 { formatDDMMYYY } from '../../utils';
+import DatePicker from 'react-native-date-picker';
+import KeyboardSpacer from '../../components/keyboardspace';
+import { useNavigation } from '@react-navigation/native';
+import moment from 'moment';
+
+const EnumGender = [
+  {
+    id: 0,
+    name: 'Nam',
+  },
+  {
+    id: 1,
+    name: 'Nữ',
+  },
+];
+
+const EnumMarries = [
+  {
+    id: 0,
+    name: 'Chưa có',
+  },
+  {
+    id: 1,
+    name: 'Đã có',
+  },
+];
+
+export const Step1 = observer(function Step1() {
+  const ref = useRef(null);
+  const navigation = useNavigation();
+  const [showDatePicker, setShowDatePicker] = useState(false);
+  const [typePicker, setTypePicker] = useState(0); // 0 là chọn ngày sinh, 1 chọn ngày cấp
+
+  useEffect(() => {
+    setTimeout(() => {
+      ref.current.setFieldValue(
+        'fullName',
+        digitalLendingStore?.data?.fullName
+      );
+      ref.current.setFieldValue('phone', digitalLendingStore?.data?.phone);
+      ref.current.setFieldValue(
+        'nationalCardNumber',
+        digitalLendingStore?.data?.nationalCard
+      );
+      ref.current.setFieldValue(
+        'birthDate',
+        digitalLendingStore?.data?.dob
+          ? formatDDMMYYY(digitalLendingStore?.data?.dob)
+          : ''
+      );
+      ref.current.setFieldValue(
+        'passport',
+        digitalLendingStore?.data?.passport
+      );
+      ref.current.setFieldValue('gender', digitalLendingStore?.data?.gender);
+      ref.current.setFieldValue(
+        'facebook',
+        digitalLendingStore?.data?.facebookAddress
+      );
+      ref.current.setFieldValue(
+        'marriage',
+        digitalLendingStore?.data?.isMerried
+      );
+      ref.current.setFieldValue('taxCode', digitalLendingStore?.data?.taxCode);
+      ref.current.setFieldValue(
+        'nationalCardPlace',
+        digitalLendingStore?.data?.nationalCard_Issue
+      );
+      ref.current.setFieldValue(
+        'dateNationalId',
+        digitalLendingStore?.data?.dateNationalId
+          ? formatDDMMYYY(digitalLendingStore?.data?.dateNationalId)
+          : ''
+      );
+      ref.current.setFieldValue(
+        'socialInsuranceNumber',
+        digitalLendingStore?.data?.socialInsuranceNumber
+      );
+    }, 50);
+  }, []);
+
+  const onSubmit = (values: any) => {
+    digitalLendingStore.body = {
+      ...digitalLendingStore.body,
+      loanBriefId: digitalLendingStore?.data?.loanBriefId,
+      fullName: values?.fullName,
+      phone: digitalLendingStore?.data?.phone,
+      nationalCard: digitalLendingStore?.data?.nationalCard,
+      dob: moment(values.birthDate, 'DD/MM/YYYY').format('YYYY-MM-DD'),
+      gender: values?.gender,
+      passport: values?.passport,
+      facebookAddress: values?.facebook,
+      socialInsuranceNumber: values?.socialInsuranceNumber,
+      taxCode: values?.taxCode,
+      isMerried: values?.marriage,
+      dateNationalId: moment(values.dateNationalId, 'DD/MM/YYYY').format(
+        'YYYY-MM-DD'
+      ),
+      nationalCard_Issue: values?.nationalCardPlace,
+    };
+  };
+
+  return (
+    <Observer>
+      {() => (
+        <View style={{ flex: 1 }}>
+          <ScrollView style={{ paddingHorizontal: 12 }}>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                paddingVertical: 16,
+              }}
+            >
+              <LinearGradient
+                colors={['#FF8E4F', '#EF592E']}
+                style={{
+                  width: 40,
+                  height: 40,
+                  borderRadius: 40,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <MText style={{ color: 'white', fontWeight: 'bold' }}>01</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' }}>
+                  02
+                </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' }}>
+                  03
+                </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' }}>
+                  04
+                </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' }}>
+                  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 CÁ NHÂN</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={{
+                fullName: digitalLendingStore?.data?.fullName,
+                phone: digitalLendingStore?.data?.phone,
+                nationalCardNumber: digitalLendingStore?.data?.nationalCard,
+                birthDate: digitalLendingStore?.data?.dob
+                  ? formatDDMMYYY(digitalLendingStore?.data?.dob)
+                  : '',
+                passport: digitalLendingStore?.data?.passport,
+                gender: digitalLendingStore?.data?.gender,
+                facebook: digitalLendingStore?.data?.facebookAddress,
+                marriage: digitalLendingStore?.data?.isMerried,
+                taxCode: digitalLendingStore?.data?.taxCode,
+                nationalCardPlace:
+                  digitalLendingStore?.data?.nationalCard_Issue,
+                dateNationalId: digitalLendingStore?.data?.dateNationalId
+                  ? formatDDMMYYY(digitalLendingStore?.data?.dateNationalId)
+                  : '',
+                socialInsuranceNumber:
+                  digitalLendingStore?.data?.socialInsuranceNumber,
+              }}
+            >
+              {({ values, handleSubmit, handleChange, setFieldValue }) => (
+                <View style={{ marginTop: 16 }}>
+                  <View>
+                    <MText style={{ color: '#8A8A8A' }}>Họ tên</MText>
+                    <TextInput
+                      value={values.fullName}
+                      onChangeText={handleChange('fullName')}
+                      style={{
+                        color: '#33333',
+                        height: 30,
+                        marginVertical: 0,
+                        flex: 1,
+                        padding: 0,
+                      }}
+                    />
+                  </View>
+                  <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+                  <View
+                    style={{
+                      marginTop: 12,
+                      backgroundColor: '#F2F2F2',
+                      borderRadius: 4,
+                      padding: 8,
+                    }}
+                  >
+                    <MText style={{ color: '#8A8A8A' }}>Số điện thoại</MText>
+                    <MText>{values.phone}</MText>
+                  </View>
+                  <View
+                    style={{
+                      height: 1,
+                      backgroundColor: '#E0E0E0',
+                      marginTop: 12,
+                    }}
+                  />
+                  <View
+                    style={{
+                      marginTop: 12,
+                      backgroundColor: '#F2F2F2',
+                      borderRadius: 4,
+                      padding: 8,
+                    }}
+                  >
+                    <MText style={{ color: '#8A8A8A' }}>Số CMND 1</MText>
+                    <MText>{values.nationalCardNumber}</MText>
+                  </View>
+                  <View
+                    style={{
+                      height: 1,
+                      backgroundColor: '#E0E0E0',
+                      marginTop: 12,
+                    }}
+                  />
+                  <View style={{ marginTop: 12 }}>
+                    <MText style={{ color: '#8A8A8A' }}>Ngày sinh</MText>
+                    <TouchableOpacity
+                      onPress={() => {
+                        setTypePicker(0);
+                        setShowDatePicker(true);
+                      }}
+                      style={{
+                        height: 30,
+                        flex: 1,
+                        marginTop: 5,
+                      }}
+                    >
+                      <MText>{values.birthDate}</MText>
+                    </TouchableOpacity>
+                  </View>
+                  <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+                  <View style={{ marginTop: 12 }}>
+                    <MText style={{ color: '#8A8A8A' }}>Giới tính</MText>
+                    <TouchableOpacity
+                      onPress={() => {
+                        navigation.push('CommonSelect', {
+                          title: 'Chọn giới tính',
+                          data: EnumGender,
+                          callback: (item) => {
+                            setFieldValue('gender', item?.id);
+                          },
+                        });
+                      }}
+                      style={{
+                        height: 30,
+                        flex: 1,
+                        marginTop: 5,
+                      }}
+                    >
+                      <MText>{values.gender === 1 ? 'Nữ' : 'Nam'}</MText>
+                    </TouchableOpacity>
+                  </View>
+                  <View
+                    style={{
+                      height: 1,
+                      backgroundColor: '#E0E0E0',
+                    }}
+                  />
+                  <View style={{ marginTop: 12 }}>
+                    <MText style={{ color: '#8A8A8A' }}>
+                      Ngày cấp CCCD/CMND
+                    </MText>
+                    <TouchableOpacity
+                      onPress={() => {
+                        setTypePicker(1);
+                        setShowDatePicker(true);
+                      }}
+                      style={{
+                        height: 30,
+                        flex: 1,
+                        marginTop: 5,
+                      }}
+                    >
+                      <MText>{values.dateNationalId}</MText>
+                    </TouchableOpacity>
+                  </View>
+                  <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+                  <View style={{ marginTop: 12 }}>
+                    <MText style={{ color: '#8A8A8A' }}>Passport</MText>
+                    <TextInput
+                      value={values.passport}
+                      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' }}>Facebook</MText>
+                    <TextInput
+                      value={values.facebook}
+                      onChangeText={handleChange('facebook')}
+                      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' }}>Mã số BHXH</MText>
+                    <TextInput
+                      value={values.socialInsuranceNumber}
+                      onChangeText={handleChange('socialInsuranceNumber')}
+                      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' }}>Mã số thuế</MText>
+                    <TextInput
+                      value={values?.taxCode}
+                      onChangeText={handleChange('taxCode')}
+                      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ôn nhân</MText>
+                    <TouchableOpacity
+                      onPress={() => {
+                        navigation.push('CommonSelect', {
+                          title: 'Hôn nhân',
+                          data: EnumMarries,
+                          callback: (item) => {
+                            setFieldValue('marriage', item?.id);
+                          },
+                        });
+                      }}
+                      style={{
+                        height: 30,
+                        flex: 1,
+                        marginTop: 5,
+                      }}
+                    >
+                      <MText>
+                        {values.marriage === 1 ? 'Đã có' : 'Chưa có'}
+                      </MText>
+                    </TouchableOpacity>
+                  </View>
+
+                  <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+                  <View style={{ marginTop: 12 }}>
+                    <MText style={{ color: '#8A8A8A' }}>
+                      Nơi cấp CCCD/CMND
+                    </MText>
+                    <TextInput
+                      numberOfLines={1}
+                      value={values.nationalCardPlace}
+                      onChangeText={handleChange('nationalCardPlace')}
+                      style={{
+                        color: '#33333',
+                        height: 30,
+                        flex: 1,
+                        padding: 0,
+                      }}
+                    />
+                  </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);
+                      if (typePicker === 0) {
+                        setFieldValue('birthDate', formatDDMMYYY(date));
+                      }
+                      if (typePicker === 1) {
+                        setFieldValue('dateNationalId', 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',
+            }}
+          >
+            <View
+              style={{
+                paddingHorizontal: 12,
+                paddingVertical: 8,
+                borderRadius: 40,
+                flexDirection: 'row',
+                alignItems: 'center',
+                borderWidth: 1,
+                borderColor: 'white',
+              }}
+            >
+              {/* <Back2Icon /> */}
+              <MText
+                style={{
+                  marginLeft: 5,
+                  color: 'white',
+                  fontSize: 16,
+                  fontWeight: '500',
+                }}
+              >
+                Trở lại
+              </MText>
+            </View>
+            <StepIcon />
+            <TouchableOpacity
+              onPress={() => {
+                digitalLendingStore.step = 2;
+                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>
+      )}
+    </Observer>
+  );
+});