react-native-timacare 1.0.1 → 1.0.2

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

@@ -0,0 +1,366 @@
+//@ts-nocheck
+import React, { useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { observer } from 'mobx-react-lite';
+import {
+  Alert,
+  Dimensions,
+  Image,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {
+  Back2Icon,
+  StepIcon,
+  NextIcon,
+  Line2Icon,
+  WarningIcon,
+  ErrorIcon,
+  Check2Icon,
+  Check1Icon,
+  IConCamera,
+} from '../../assets/icons';
+import { MText } from '../../components/MText';
+import digitalLendingStore from './store';
+import { ScreenNames } from '../../navigation';
+
+export const Step6 = observer(function Step6() {
+  const navigation = useNavigation();
+  const [check, setCheck] = useState(1);
+  const [photo, setPhoto] = useState(null);
+  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>
+          <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' }}>04</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' }}>05</MText>
+          </View>
+          <LinearGradient
+            colors={['#FF8E4F', '#EF592E']}
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <MText style={{ fontWeight: 'bold', color: 'white' }}>06</MText>
+          </LinearGradient>
+          <Line2Icon />
+        </View>
+        <MText style={{ fontWeight: 'bold' }}>THÔNG TIN CÀ VẸT XE</MText>
+        <View
+          style={{
+            marginVertical: 8,
+            borderWidth: 1,
+            borderRadius: 8,
+            borderColor: '#EB5757',
+            padding: 12,
+            flexDirection: 'row',
+          }}
+        >
+          <ErrorIcon />
+          <MText style={{ fontSize: 12, flex: 1, marginLeft: 10 }}>
+            Cung cấp hình ảnh đăng ký xe là điều kiện bắt buộc, bạn vui lòng
+            cung cấp hình ảnh đăng ký xe để đơn được đẩy đi nhanh hơn.
+          </MText>
+        </View>
+        <View style={{ height: 1, backgroundColor: '#BDBDBD', marginTop: 8 }} />
+        <View style={{ flexDirection: 'row', marginTop: 12 }}>
+          <TouchableOpacity onPress={() => setCheck(1)}>
+            {check === 1 ? <Check2Icon /> : <Check1Icon />}
+          </TouchableOpacity>
+          <View style={{ flex: 1, marginLeft: 12 }}>
+            <MText style={{ flex: 1 }}>
+              Tôi chưa từng cung cấp hình ảnh đăng ký xe cho Tima
+            </MText>
+            {check === 1 && (
+              <View style={{ flexDirection: 'row', marginTop: 12 }}>
+                {photo === null ? (
+                  <TouchableOpacity
+                    onPress={() => {
+                      navigation.push(ScreenNames.Camera, {
+                        front: false,
+                        callback: (photo) => {
+                          const formData = new FormData();
+                          formData.append(
+                            'loanbriefId',
+                            digitalLendingStore?.data?.loanBriefId
+                          );
+                          formData.append('TypeDocumentId', 314);
+                          formData.append('image', {
+                            uri: photo,
+                            type: 'image/jpg',
+                            name: 'image.jpg',
+                          });
+                          digitalLendingStore.uploadCavet(formData, () => {
+                            setPhoto(photo);
+                          });
+                        },
+                      });
+                    }}
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      padding: 8,
+                      borderWidth: 1,
+                      borderRadius: 6,
+                      borderColor: '#FF8E4F',
+                    }}
+                  >
+                    <IConCamera />
+                    <MText style={{ color: '#FF8E4F', marginLeft: 12 }}>
+                      Chụp ảnh đăng ký xe
+                    </MText>
+                  </TouchableOpacity>
+                ) : (
+                  <View>
+                    <Image
+                      source={{ uri: photo }}
+                      style={{
+                        width: Dimensions.get('window').width - 150,
+                        height:
+                          ((Dimensions.get('window').width - 120) * 216) / 360,
+                        borderWidth: 8,
+                        borderRadius: 6,
+                      }}
+                    />
+                    <View style={{ flexDirection: 'row', marginTop: 12 }}>
+                      <TouchableOpacity
+                        onPress={() => {
+                          navigation.push(ScreenNames.Camera, {
+                            front: false,
+                            callback: (photo) => {
+                              setPhoto(photo);
+                            },
+                          });
+                        }}
+                        style={{
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                          padding: 8,
+                          borderWidth: 1,
+                          borderRadius: 6,
+                          borderColor: '#FF8E4F',
+                        }}
+                      >
+                        <IConCamera />
+                        <MText style={{ color: '#FF8E4F', marginLeft: 12 }}>
+                          Chụp lại
+                        </MText>
+                      </TouchableOpacity>
+                    </View>
+                  </View>
+                )}
+              </View>
+            )}
+          </View>
+        </View>
+        <View style={{ flexDirection: 'row', marginTop: 12 }}>
+          <TouchableOpacity
+            onPress={() => {
+              setCheck(2);
+              setPhoto(null);
+            }}
+          >
+            {check === 2 ? <Check2Icon /> : <Check1Icon />}
+          </TouchableOpacity>
+          <View style={{ flex: 1, marginLeft: 12 }}>
+            <MText style={{ flex: 1 }}>
+              Đăng ký xe của tôi hiện đang được Tima giữ
+            </MText>
+          </View>
+        </View>
+      </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 = 5)}
+          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={() => {
+            Alert.alert(
+              'Vui lòng xác nhận lại',
+              'Những thông tin đã đúng với thông tin của bạn chưa?',
+              [
+                {
+                  text: 'Xác nhận',
+                  onPress: () => {
+                    digitalLendingStore.uploadLoanReborrow(
+                      digitalLendingStore.body,
+                      () => {
+                        Alert.alert('Cập nhật thông tin thành công', '', [
+                          {
+                            text: 'Đồng ý',
+                            onPress: () => navigation.pop(),
+                          },
+                        ]);
+                      }
+                    );
+                  },
+                },
+                {
+                  text: 'Huỷ',
+                },
+              ]
+            );
+          }}
+          disabled={check === 1 && photo === null ? true : false}
+        >
+          <LinearGradient
+            colors={
+              check === 1 && photo === null
+                ? ['#E0E0E0', '#E0E0E0']
+                : ['#FF8E4F', '#EF592E']
+            }
+            style={{
+              paddingHorizontal: 15,
+              paddingVertical: 8,
+              borderRadius: 40,
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            <MText
+              style={{
+                color: 'white',
+                fontSize: 16,
+                fontWeight: '500',
+                marginRight: 5,
+              }}
+            >
+              Lưu
+            </MText>
+            <NextIcon />
+          </LinearGradient>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+});

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

@@ -0,0 +1,110 @@
+//@ts-nocheck
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { commonStyles } from '../CommonStyles';
+import { MText } from '../../components/MText';
+import {
+  Back2Icon,
+  IconBackWhite,
+  NextIcon,
+  StepIcon,
+} from '../../assets/icons';
+import MButton from '../../components/MButton';
+import LinearGradient from 'react-native-linear-gradient';
+import digitalLendingStore from './store';
+import { Step1 } from './Step1';
+import { Step2 } from './Step2';
+import { Step3 } from './Step3';
+import { Step4 } from './Step4';
+import { Step5 } from './Step5';
+import { Step6 } from './Step6';
+import Loading from '../../components/Loading';
+
+export const DigitalLending = observer(function DigitalLending(props: any) {
+  const navigation = useNavigation();
+  const loan = props?.route?.params;
+
+  useEffect(() => {
+    digitalLendingStore.getDetailLoan(loan?.id);
+    digitalLendingStore.getProvinces();
+    digitalLendingStore.getJob();
+    digitalLendingStore.getBrandProduct();
+    digitalLendingStore.getBank();
+  }, []);
+
+  const renderView = (step: number) => {
+    switch (step) {
+      case 1:
+        return <Step1 />;
+      case 2:
+        return <Step2 />;
+      case 3:
+        return <Step3 />;
+      case 4:
+        return <Step4 />;
+      case 5:
+        return <Step5 />;
+      case 6:
+        return <Step6 />;
+      default:
+        null;
+    }
+  };
+
+  return (
+    <View style={[commonStyles.fill, { zIndex: 1, backgroundColor: 'white' }]}>
+      <LinearGradient colors={['#FF8E4F', '#EF592E']}>
+        <SafeAreaView style={{}}>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'center',
+              paddingHorizontal: 16,
+              alignItems: 'center',
+              height: 60,
+            }}
+          >
+            {digitalLendingStore.step === 1 && (
+              <MButton
+                style={{
+                  height: 32,
+                  width: 32,
+                  borderRadius: 30,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  position: 'absolute',
+                  left: 16,
+                }}
+                onPress={() => {
+                  navigation.pop();
+                  digitalLendingStore.clear();
+                }}
+              >
+                <IconBackWhite />
+              </MButton>
+            )}
+            <MText
+              style={{
+                fontWeight: 'bold',
+                color: 'white',
+                fontSize: 16,
+              }}
+            >
+              Thông tin cá nhân
+            </MText>
+          </View>
+        </SafeAreaView>
+      </LinearGradient>
+      {renderView(digitalLendingStore.step)}
+      <Loading isLoading={digitalLendingStore.isLoading} />
+    </View>
+  );
+});