react-native-timacare 1.0.1 → 1.0.2

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

@@ -0,0 +1,610 @@
+//@ts-nocheck
+import React, { useEffect, 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 KeyboardSpacer from '../../components/keyboardspace';
+import { useNavigation } from '@react-navigation/native';
+
+const residentType = [
+  {
+    id: 14,
+    name: 'KT1',
+  },
+  {
+    id: 15,
+    name: 'KT3',
+  },
+];
+
+export const Step2 = observer(function Step2() {
+  const navigation = useNavigation();
+  const ref = useRef(null);
+
+  const onSubmit = (values) => {
+    digitalLendingStore.body = {
+      ...digitalLendingStore.body,
+      residentType: values?.residentType,
+      provinceId: values?.province?.id,
+      districtId: values?.district?.id,
+      wardId: values?.ward?.id,
+      address: values?.address,
+      customerShareLocation: digitalLendingStore?.data?.customerShareLocation,
+      houseHoldProvinceId: values?.houseHoldProvinceId?.id,
+      houseHoldDistrictId: values?.houseHoldDistrictId?.id,
+      houseHoldWardId: values?.houseHoldWardId?.id,
+      houseHoldAddress: values?.houseHoldAddress,
+      addressNationalCard: values?.addressNationalCard,
+    };
+  };
+
+  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>
+          <LinearGradient
+            colors={['#FF8E4F', '#EF592E']}
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <MText style={{ color: 'white', fontWeight: 'bold' }}>02</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' }}>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 NƠI Ở & HỘ KHẨU</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
+          innerRef={ref}
+          onSubmit={onSubmit}
+          initialValues={{
+            residentType: digitalLendingStore?.data?.residentType,
+            province: digitalLendingStore?.data?.provinceId
+              ? digitalLendingStore?.listProvinces.find(
+                  (p) => p.id === digitalLendingStore?.data?.provinceId
+                )
+              : null,
+            district: digitalLendingStore?.data?.districtId
+              ? digitalLendingStore?.listDistricts.find(
+                  (p) => p.id === digitalLendingStore?.data?.districtId
+                )
+              : null,
+            ward: digitalLendingStore?.data?.wardId
+              ? digitalLendingStore?.listWards.find(
+                  (p) => p.id === digitalLendingStore?.data?.wardId
+                )
+              : null,
+            address: digitalLendingStore?.data?.address,
+            customerShareLocation:
+              digitalLendingStore?.data?.customerShareLocation,
+            houseHoldProvinceId: digitalLendingStore?.data?.houseHoldProvinceId
+              ? {
+                  id: digitalLendingStore?.data?.houseHoldProvinceId,
+                  name: digitalLendingStore?.data?.houseHoldProvinceName,
+                }
+              : null,
+            houseHoldDistrictId: digitalLendingStore?.data?.houseHoldDistrictId
+              ? {
+                  id: digitalLendingStore?.data?.houseHoldDistrictId,
+                  name: digitalLendingStore?.data?.houseHoldDistrictName,
+                }
+              : null,
+            houseHoldWardId: digitalLendingStore?.data?.houseHoldWardId
+              ? {
+                  id: digitalLendingStore?.data?.houseHoldWardId,
+                  name: digitalLendingStore?.data?.houseHoldWardName,
+                }
+              : null,
+            houseHoldAddress: digitalLendingStore?.data?.houseHoldAddress,
+            addressNationalCard: digitalLendingStore?.data?.addressNationalCard,
+          }}
+        >
+          {({ values, handleSubmit, handleChange, setFieldValue }) => (
+            <View style={{ marginTop: 16 }}>
+              <View>
+                <MText style={{ color: '#8A8A8A' }}>Hình thức cư trú</MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Chọn hình thức cư trú',
+                      data: residentType,
+                      callback: (item) => {
+                        setFieldValue('residentType', item?.id);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>
+                    {values.residentType === 14
+                      ? 'KT1'
+                      : values.residentType === 15
+                      ? 'KT3'
+                      : ''}
+                  </MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>
+                  Chọn Tỉnh/ Thành phố (nơi ở)
+                </MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Chọn tỉnh/thành phố',
+                      data: digitalLendingStore.listProvinces,
+                      callback: (item) => {
+                        setFieldValue('province', item);
+                        digitalLendingStore.getDistricts(item?.id);
+                        digitalLendingStore.listWards = [];
+                        setFieldValue('ward', null);
+                        setFieldValue('district', null);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>{values.province ? values.province?.name : ''}</MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>
+                  Chọn Quận/Huyện (nơi ở)
+                </MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Chọn Quận/Huyện',
+                      data: digitalLendingStore.listDistricts,
+                      callback: (item) => {
+                        setFieldValue('district', item);
+                        digitalLendingStore.getWards(item?.id);
+                        setFieldValue('ward', null);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>{values.district ? values.district?.name : ''}</MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>
+                  Chọn Phường/Xã (nơi ở)
+                </MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Chọn Phường/Xã',
+                      data: digitalLendingStore.listWards,
+                      callback: (item) => {
+                        setFieldValue('ward', item);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>{values.ward ? values.ward?.name : ''}</MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>
+                  Địa chỉ chi tiết (nơi ở)
+                </MText>
+                <TextInput
+                  value={values?.address}
+                  onChangeText={handleChange('address')}
+                  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ố (Hộ khẩu)
+                </MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Chọn tỉnh/thành phố',
+                      data: digitalLendingStore.listProvinces,
+                      callback: (item) => {
+                        setFieldValue('houseHoldProvinceId', item);
+                        digitalLendingStore.getDistricts(item?.id, (data) => {
+                          digitalLendingStore.householdListDistricts = data;
+                        });
+                        digitalLendingStore.householdListWards = [];
+                        setFieldValue('houseHoldDistrictId', null);
+                        setFieldValue('houseHoldWardId', null);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>
+                    {values.houseHoldProvinceId
+                      ? values.houseHoldProvinceId?.name
+                      : ''}
+                  </MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>
+                  Chọn Quận/Huyện (Hộ khẩu)
+                </MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Chọn Quận/Huyện',
+                      data: digitalLendingStore.householdListDistricts,
+                      callback: (item) => {
+                        setFieldValue('houseHoldDistrictId', item);
+                        setFieldValue('houseHoldWardId', null);
+                        digitalLendingStore.getWards(item?.id, (data) => {
+                          digitalLendingStore.householdListWards = data;
+                        });
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>
+                    {values.houseHoldDistrictId
+                      ? values.houseHoldDistrictId?.name
+                      : ''}
+                  </MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>
+                  Chọn Phường/Xã (Hộ khẩu)
+                </MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Chọn Phường/Xã',
+                      data: digitalLendingStore.householdListWards,
+                      callback: (item) => {
+                        setFieldValue('houseHoldWardId', item);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>
+                    {values.houseHoldWardId ? values.houseHoldWardId?.name : ''}
+                  </MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>
+                  Địa chỉ chi tiết (Hộ khẩu)
+                </MText>
+                <TextInput
+                  value={values?.houseHoldAddress}
+                  onChangeText={handleChange('houseHoldAddress')}
+                  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' }}>
+                  Địa chỉ trên CCCD/CMND
+                </MText>
+                <TextInput
+                  value={values?.addressNationalCard}
+                  onChangeText={handleChange('addressNationalCard')}
+                  style={{
+                    color: '#33333',
+                    height: 30,
+                    marginVertical: 0,
+                    flex: 1,
+                    padding: 0,
+                  }}
+                />
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <KeyboardSpacer />
+            </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 = 1)}
+          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 = 3;
+            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: {},
+});