react-native-timacare 1.0.1 → 1.0.2

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

@@ -0,0 +1,602 @@
+//@ts-nocheck
+import React, { useRef } 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 { formatMoney } from '../../utils';
+import { useNavigation } from '@react-navigation/native';
+import QuickSubmitStore from '../quick-submit/store';
+import FullSubmitStore from '../full-submit/store';
+
+const EnumIncomeType = [
+  {
+    id: 1,
+    name: 'Tiền mặt',
+  },
+  {
+    id: 5,
+    name: 'Chuyển khoản',
+  },
+];
+
+const EnumCompanyInsurance = [
+  {
+    id: true,
+    name: 'Có mua',
+  },
+  {
+    id: false,
+    name: 'Không mua',
+  },
+];
+
+export const Step3 = observer(function Step3() {
+  const navigation = useNavigation();
+  const ref = useRef(null);
+
+  const onSubmit = (values) => {
+    digitalLendingStore.body = {
+      ...digitalLendingStore.body,
+      jobId: values?.job?.id,
+      jobDescriptionId: values?.jobDescription?.id,
+      description: values?.description,
+      totalIncome: Number(String(values?.totalIncome).replaceAll(',', '')),
+      imcomeType: values?.incomeType,
+      companyName: values?.companyName,
+      companyProvinceId: values?.companyProvinceId?.id,
+      companyDistrictId: values?.companyDistrictId?.id,
+      companyWardId: values?.companyWardId?.id,
+      companyAddress: values?.companyAddress,
+      companyInsurance: values?.companyInsurance,
+    };
+  };
+  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>
+
+          <LinearGradient
+            colors={['#FF8E4F', '#EF592E']}
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <MText style={{ fontWeight: 'bold', color: 'white' }}>03</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' }}>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 VIỆC LÀM</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={{
+            job: digitalLendingStore?.data?.jobId
+              ? {
+                  id: digitalLendingStore?.data?.jobId,
+                  name: digitalLendingStore?.data?.jobName,
+                }
+              : null,
+            jobDescription: digitalLendingStore?.data?.jobDescriptionId
+              ? {
+                  id: digitalLendingStore?.data?.jobDescriptionId,
+                  name: digitalLendingStore?.data?.jobDescriptionName,
+                }
+              : null,
+            description: digitalLendingStore?.data?.description,
+            totalIncome: digitalLendingStore?.data?.totalIncome,
+            companyInsurance: digitalLendingStore?.data?.companyInsurance,
+            companyName: digitalLendingStore?.data?.companyName,
+            companyAddress: digitalLendingStore?.data?.companyAddress,
+            incomeType: digitalLendingStore?.data?.imcomeType,
+            companyProvinceId: digitalLendingStore?.data?.companyProvinceId
+              ? {
+                  id: digitalLendingStore?.data?.companyProvinceId,
+                  name: digitalLendingStore?.data?.companyProvinceName,
+                }
+              : null,
+            companyDistrictId: digitalLendingStore?.data?.companyDistrictId
+              ? {
+                  id: digitalLendingStore?.data?.companyDistrictId,
+                  name: digitalLendingStore?.data?.companyDistrictName,
+                }
+              : null,
+            companyWardId: digitalLendingStore?.data?.companyWardId
+              ? {
+                  id: digitalLendingStore?.data?.companyWardId,
+                  name: digitalLendingStore?.data?.companyWardName,
+                }
+              : null,
+          }}
+        >
+          {({ values, handleSubmit, handleChange, setFieldValue }) => (
+            <View style={{ marginTop: 16 }}>
+              <View>
+                <MText style={{ color: '#8A8A8A' }}>Nghề nghiệp</MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Chọn Nghề nghiệp',
+                      data: digitalLendingStore.listJob,
+                      callback: (item) => {
+                        setFieldValue('job', item);
+                        setFieldValue('jobDescription', null);
+                        digitalLendingStore.getJobDescription(item?.id);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>{values.job ? values.job?.name : ''}</MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Ngành nghề</MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Chọn Ngành nghề',
+                      data: digitalLendingStore.listJobDescription,
+                      callback: (item) => {
+                        setFieldValue('jobDescription', item);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>
+                    {values.jobDescription ? values.jobDescription?.name : ''}
+                  </MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Vị trí</MText>
+                <TextInput
+                  onChangeText={handleChange('description')}
+                  value={values?.description}
+                  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' }}>Thu nhập</MText>
+                <TextInput
+                  keyboardType="number-pad"
+                  value={formatMoney(values.totalIncome)}
+                  onChangeText={handleChange('totalIncome')}
+                  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ình thức nhận lương</MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Hình thức nhận lương',
+                      data: EnumIncomeType,
+                      callback: (item) => {
+                        setFieldValue('incomeType', item.id);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>
+                    {values.incomeType === 1 ? 'Tiền mặt' : 'Chuyển khoản'}
+                  </MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Tham gia BHXH</MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Tham gia BHXH',
+                      data: EnumCompanyInsurance,
+                      callback: (item) => {
+                        setFieldValue('companyInsurance', item.id);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>
+                    {values.companyInsurance ? 'Có mua' : 'Không mua'}
+                  </MText>
+                </TouchableOpacity>
+              </View>
+
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Tên công ty</MText>
+                <TextInput
+                  value={values.companyName}
+                  onChangeText={handleChange('companyName')}
+                  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' }}>Chọn thành phố</MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Chọn thành phố',
+                      data: digitalLendingStore.listProvinces,
+                      callback: (item) => {
+                        digitalLendingStore.getDistricts(item?.id, (data) => {
+                          digitalLendingStore.companyListDistricts = data;
+                        });
+                        setFieldValue('companyProvinceId', item);
+                        setFieldValue('companyDistrictId', null);
+                        setFieldValue('companyWardId', null);
+                        digitalLendingStore.companyListWards = [];
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>
+                    {values.companyProvinceId
+                      ? values.companyProvinceId?.name
+                      : ''}
+                  </MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Chọn Quận/Huyện</MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Chọn Quận/Huyện',
+                      data: digitalLendingStore.companyListDistricts,
+                      callback: (item) => {
+                        digitalLendingStore.getWards(item?.id, (data) => {
+                          digitalLendingStore.companyListWards = data;
+                        });
+                        setFieldValue('companyDistrictId', item);
+                        setFieldValue('companyWardId', null);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>
+                    {values.companyDistrictId
+                      ? values.companyDistrictId?.name
+                      : ''}
+                  </MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Chọn Phường/Xã</MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Chọn Phường/Xã',
+                      data: digitalLendingStore.companyListWards,
+                      callback: (item) => {
+                        setFieldValue('companyWardId', item);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>
+                    {values.companyWardId ? values.companyWardId?.name : ''}
+                  </MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Địa chỉ chi tiết</MText>
+                <TextInput
+                  value={values.companyAddress}
+                  onChangeText={handleChange('companyAddress')}
+                  style={{
+                    color: '#33333',
+                    height: 30,
+                    marginVertical: 0,
+                    flex: 1,
+                    padding: 0,
+                  }}
+                />
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+            </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 = 2)}
+          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 = 4;
+            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: {},
+});