react-native-timacare 3.1.2 → 3.1.4-beta

package/src/screens/toan-trinh-so/TTSSignLoan.tsx

@@ -0,0 +1,143 @@
+//@ts-nocheck
+import React from 'react';
+import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
+import { MText } from '../../components/MText';
+import { CheckBoxActive, IconBack } from '../../assets/icons';
+import LinearGradient from 'react-native-linear-gradient';
+import { CommonActions, useNavigation } from '@react-navigation/native';
+import { ScreenNames } from '../../navigation';
+import Pdf from 'react-native-pdf';
+
+export default function TTSSignLoan(props) {
+  const loan = props?.route?.params?.loan;
+  const navigation = useNavigation();
+
+  return (
+    <View
+      style={{
+        backgroundColor: '#ffffff',
+        flex: 1,
+      }}
+    >
+      <SafeAreaView
+        style={{
+          backgroundColor: '#ffffff',
+          flex: 1,
+        }}
+      >
+        <View
+          style={{
+            paddingVertical: 16,
+            borderBottomWidth: 1,
+            borderBottomColor: '#F2F2F2',
+          }}
+        >
+          <TouchableOpacity
+            onPress={() => {
+              navigation.goBack();
+            }}
+            style={{
+              position: 'absolute',
+              left: 10,
+              top: 16,
+              width: 25,
+              height: 25,
+              zIndex: 1000,
+              alignItems: 'center',
+            }}
+          >
+            <IconBack />
+          </TouchableOpacity>
+          <MText
+            style={{
+              fontSize: 16,
+              color: '#333333',
+              fontWeight: 'bold',
+              textAlign: 'center',
+            }}
+          >
+            Đề nghị giao kết thoả thuận cho vay
+          </MText>
+        </View>
+
+        <View style={{ flex: 1 }}>
+          <Pdf
+            source={{
+              uri: 'https://file.tima.vn/uploads/ESignContract/9506778/HD-9506778_borrower_d0a70791-e213-4a83-b760-089df216afa4.pdf',
+            }}
+            onLoadComplete={(numberOfPages, filePath) => {
+              console.log(`Number of pages: ${numberOfPages}`);
+            }}
+            onPageChanged={(page, numberOfPages) => {
+              console.log(`Current page: ${page}`);
+            }}
+            onError={(error) => {
+              console.log(error);
+            }}
+            onPressLink={(uri) => {
+              console.log(`Link pressed: ${uri}`);
+            }}
+            style={{
+              flex: 1,
+            }}
+          />
+        </View>
+
+        <View
+          style={{
+            borderTopWidth: 1,
+            borderTopColor: '#F2F2F2',
+            paddingVertical: 16,
+          }}
+        >
+          <View
+            style={{
+              flexDirection: 'row',
+              gap: 10,
+              paddingHorizontal: 16,
+            }}
+          >
+            <CheckBoxActive />
+            <MText
+              style={{
+                color: '#333333',
+              }}
+            >
+              Tôi đồng ý với tất cả những điều kiện trong hợp đồng.
+            </MText>
+          </View>
+          <TouchableOpacity
+            onPress={() => {
+              navigation.push(ScreenNames.TTSOTP, { loan });
+            }}
+            style={{
+              marginTop: 24,
+              marginHorizontal: 16,
+            }}
+          >
+            <LinearGradient
+              start={{ x: 1, y: 0 }}
+              end={{ x: 0, y: 1 }}
+              style={{
+                height: 40,
+                borderRadius: 6,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              colors={['#FF7A00', '#EF4123']}
+            >
+              <MText
+                style={{
+                  color: 'white',
+                  fontSize: 16,
+                }}
+              >
+                Xác nhận ký
+              </MText>
+            </LinearGradient>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+}

package/src/screens/toan-trinh-so/VehicleCamera.tsx

@@ -0,0 +1,477 @@
+//@ts-nocheck
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Dimensions,
+  Image,
+  ImageStyle,
+  Platform,
+  SafeAreaView,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { CommonActions, useNavigation } from '@react-navigation/native';
+import Modal from 'react-native-modal';
+import { MText } from '../../components/MText';
+import LinearGradient from 'react-native-linear-gradient';
+import {
+  CloseIcon,
+  IconBackWhite,
+  TakePhotoSvg,
+  TimaSmall,
+} from '../../assets/icons';
+import MButton from '../../components/MButton';
+import {
+  request,
+  PERMISSIONS,
+  RESULTS,
+  openSettings,
+} from 'react-native-permissions';
+import { RNCamera } from 'react-native-camera';
+import { commonStyles } from '../CommonStyles';
+import { ScreenNames } from '../../navigation';
+import { load, OCR_V2, save } from '../../utils/storage';
+
+export default function VehicleCamera(props: any) {
+  const navigation = useNavigation();
+  const [showModal, setShowModal] = useState(false);
+  const [title, setTitle] = useState(
+    props?.route?.params?.front
+      ? 'Chụp đăng ký xe mặt trước'
+      : 'Chụp đăng ký xe mặt sau'
+  );
+  const [taking, setTaking] = useState(false);
+  const [passPermission, setPassPermission] = useState(false);
+
+  const myCamera = useRef(null);
+
+  const takePhoto = async () => {
+    setTaking(true);
+    const options = {
+      width: 720,
+      base64: true,
+      pauseAfterCapture: true,
+      fixOrientation: false,
+      forceUpOrientation: false,
+      orientation: RNCamera.Constants.Orientation.portrait,
+    };
+    const data = await myCamera.current.takePictureAsync(options);
+    setTaking(false);
+    if (props?.route?.params?.front) {
+      navigation.push(ScreenNames.VehicleRegistrationFront, {
+        uri: data?.uri,
+        loan: props?.route?.params?.loan,
+      });
+    } else if (props.route?.params?.callback) {
+      navigation.goBack();
+      props.route?.params?.callback(data?.uri);
+    } else {
+      navigation.push(ScreenNames.VehicleRegistrationBack, {
+        uri: data?.uri,
+        loan: props?.route?.params?.loan,
+      });
+    }
+  };
+
+  const requestPermissions = () => {
+    request(
+      Platform.OS === 'ios'
+        ? PERMISSIONS.IOS.CAMERA
+        : PERMISSIONS.ANDROID.CAMERA
+    ).then((result) => {
+      switch (result) {
+        case RESULTS.UNAVAILABLE:
+          console.log(
+            'This feature is not available (on this device / in this context)'
+          );
+          Alert.alert(
+            'Thông báo',
+            'Máy ảnh trên thiết bị không tương thích.\nVui lòng kiểm tra lại thiết bị!',
+            [{ text: 'Đồng ý' }]
+          );
+          break;
+        case RESULTS.DENIED:
+          console.log(
+            'The permission has not been requested / is denied but requestable'
+          );
+          Alert.alert(
+            'Thông báo',
+            'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
+            [
+              {
+                text: 'Đồng ý',
+                onPress: () => {
+                  if (Platform.OS === 'ios') {
+                    openSettings();
+                  } else {
+                    requestPermissions();
+                  }
+                },
+              },
+            ]
+          );
+          break;
+        case RESULTS.LIMITED:
+          console.log('The permission is limited: some actions are possible');
+          Alert.alert(
+            'Thông báo',
+            'Quyền máy ảnh bị hạn chế. Vui lòng kiểm tra lại để tiếp tục!',
+            [
+              {
+                text: 'Đồng ý',
+                onPress: () => {
+                  if (Platform.OS === 'ios') {
+                    openSettings();
+                  } else {
+                    requestPermissions();
+                  }
+                },
+              },
+            ]
+          );
+          break;
+        case RESULTS.GRANTED:
+          console.log('The permission is granted');
+          setPassPermission(true);
+          break;
+        case RESULTS.BLOCKED:
+          console.log('The permission is denied and not requestable anymore');
+          Alert.alert(
+            'Thông báo',
+            'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
+            [
+              {
+                text: 'Đồng ý',
+                onPress: () => {
+                  if (Platform.OS === 'ios') {
+                    openSettings();
+                  } else {
+                    openSettings();
+                  }
+                },
+              },
+            ]
+          );
+          break;
+      }
+    });
+  };
+
+  const loadIntro = async () => {
+    const intro = await load(OCR_V2);
+    if (!intro) {
+      setShowModal(true);
+    }
+  };
+
+  useEffect(() => {
+    requestPermissions();
+    loadIntro();
+  }, []);
+
+  return (
+    <View
+      style={[$flex, { backgroundColor: 'black' }]}
+      pointerEvents={'box-none'}
+    >
+      {passPermission && (
+        <View
+          style={[
+            commonStyles.alignCenter,
+            commonStyles.fill,
+            commonStyles.justifyCenter,
+            {
+              position: 'absolute',
+              width: Dimensions.get('window').width,
+              height: Dimensions.get('window').height,
+            },
+          ]}
+        >
+          <RNCamera
+            ref={myCamera}
+            defaultVideoQuality={RNCamera.Constants.VideoQuality['720p']}
+            style={{
+              width: Dimensions.get('window').width,
+              height: 260,
+              overflow: 'hidden',
+            }}
+            maxZoom={1}
+            androidCameraPermissionOptions={{
+              title: 'Permission to use camera',
+              message: 'We need your permission to use your camera',
+              buttonPositive: 'Ok',
+              buttonNegative: 'Cancel',
+            }}
+          >
+            {({ camera, status, recordAudioPermissionStatus }) => {
+              if (status !== 'READY') return <ActivityIndicator />;
+            }}
+          </RNCamera>
+        </View>
+      )}
+
+      {!showModal && (
+        <SafeAreaView
+          style={[
+            commonStyles.fill,
+            { position: 'absolute', width: '100%', height: '100%' },
+          ]}
+        >
+          <View
+            style={[
+              commonStyles.row,
+              commonStyles.alignCenter,
+              { paddingVertical: 16 },
+            ]}
+          >
+            <MButton
+              onPress={() => {
+                navigation.goBack();
+              }}
+              style={[
+                {
+                  width: 48,
+                  height: 48,
+                  zIndex: 1000,
+                  position: 'absolute',
+                  left: 16,
+                  top: 16,
+                },
+              ]}
+            >
+              <IconBackWhite />
+            </MButton>
+            <View style={{ flex: 1, alignItems: 'center' }}>
+              <MText style={$title}>ĐĂNG KÝ XE</MText>
+            </View>
+          </View>
+          <MText
+            style={{
+              color: 'white',
+              textAlign: 'center',
+            }}
+          >
+            {title}
+          </MText>
+          <View
+            style={{
+              position: 'absolute',
+              bottom: 20,
+              left: 0,
+              right: 0,
+            }}
+          >
+            {!taking && (
+              <>
+                <MText
+                  style={{
+                    color: 'white',
+                    textAlign: 'center',
+                    fontSize: 14,
+                  }}
+                >
+                  Vui lòng đặt giấy tờ nằm vừa khung hình chữ nhật,{'\n'}chụp đủ
+                  ánh sáng và rõ nét.
+                </MText>
+                <View
+                  style={{
+                    alignItems: 'center',
+                    marginVertical: 24,
+                  }}
+                >
+                  <MButton
+                    onPress={() => {
+                      takePhoto();
+                    }}
+                  >
+                    <TakePhotoSvg />
+                  </MButton>
+                </View>
+              </>
+            )}
+          </View>
+        </SafeAreaView>
+      )}
+      <Modal
+        isVisible={showModal}
+        style={$modal}
+        backdropTransitionInTiming={0}
+        nimationOutTiming={200}
+        animationInTiming={200}
+        animationIn={'slideInUp'}
+        animationOut={'fadeOutDown'}
+        useNativeDriverForBackdrop={true}
+        useNativeDriver={true}
+      >
+        <LinearGradient colors={['#FF8E4F', '#EF592E']} style={$container}>
+          <View style={$paddingV}>
+            <TouchableOpacity
+              onPress={() => {
+                navigation.goBack();
+              }}
+              style={{
+                width: 24,
+                height: 24,
+                position: 'absolute',
+                left: 16,
+                top: 24,
+                alignItems: 'center',
+                zIndex: 10000,
+              }}
+            >
+              <CloseIcon />
+            </TouchableOpacity>
+            <MText style={$title}>ĐĂNG KÝ XE</MText>
+            <MText style={$description}>Chụp ảnh 2 mặt đăng ký xe</MText>
+
+            <Image
+              source={require('../../assets/tts/vehicleStep.png')}
+              style={$step}
+            />
+
+            <View style={$bg}>
+              <View
+                style={{
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                }}
+              >
+                <Image
+                  source={require('../../assets/tts/vehicleRegistration.png')}
+                  style={{
+                    width: '60%',
+                    height: 120,
+                    resizeMode: 'contain',
+                    marginVertical: 16,
+                  }}
+                />
+                <MText style={$title2}>
+                  Bạn vui lòng chụp ảnh{'\n'}
+                  Đăng ký xe theo hướng dẫn:
+                </MText>
+              </View>
+              <View style={{ marginTop: 10, paddingHorizontal: 24 }}>
+                <View style={$row}>
+                  <TimaSmall />
+                  <MText style={$txt}>
+                    Nên đặt đăng ký xe lên mặt phẳng để chụp
+                  </MText>
+                </View>
+                <View style={$row}>
+                  <TimaSmall />
+                  <MText style={$txt}>
+                    Đặt Đăng ký xe nằm gọn trong khung hình (Không {'\n'} quá
+                    nhỏ hay quá to làm mất chi tiết)
+                  </MText>
+                </View>
+                <View style={$row}>
+                  <TimaSmall />
+                  <MText style={$txt}>
+                    Chọn nơi ánh sáng tốt, tránh lóa/ chói hình chụp
+                  </MText>
+                </View>
+                <Image
+                  source={require('../../assets/tts/1000009872.png')}
+                  style={{
+                    width: '100%',
+                    height: 100,
+                    resizeMode: 'contain',
+                    marginTop: 10,
+                  }}
+                />
+              </View>
+
+              <MButton
+                onPress={() => {
+                  setShowModal(false);
+                  save(OCR_V2, true);
+                }}
+                style={{
+                  margin: 16,
+                }}
+              >
+                <LinearGradient
+                  start={{ x: 1, y: 0 }}
+                  end={{ x: 0, y: 1 }}
+                  style={{
+                    height: 40,
+                    marginVertical: 16,
+                    borderRadius: 30,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                  colors={['#FF7A00', '#EF4123']}
+                >
+                  <MText style={$title}>Tiếp tục</MText>
+                </LinearGradient>
+              </MButton>
+            </View>
+          </View>
+        </LinearGradient>
+      </Modal>
+    </View>
+  );
+}
+
+const $row: ViewStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  marginTop: 5,
+};
+const $txt: TextStyle = {
+  fontSize: 12,
+  marginLeft: 5,
+};
+const $bg: ViewStyle = {
+  backgroundColor: 'white',
+  borderTopRightRadius: 26,
+  borderTopLeftRadius: 26,
+};
+
+const $step: ImageStyle = {
+  height: 40,
+  width: '100%',
+  resizeMode: 'contain',
+  marginTop: 10,
+  marginBottom: 10,
+};
+
+const $paddingV: ViewStyle = {
+  paddingTop: 16,
+};
+
+const $title: TextStyle = {
+  fontSize: 16,
+  color: 'white',
+  fontWeight: 'bold',
+  textAlign: 'center',
+};
+
+const $title2: TextStyle = {
+  fontSize: 16,
+  color: '#333333',
+  fontWeight: 'bold',
+  textAlign: 'center',
+};
+
+const $description: TextStyle = {
+  fontSize: 12,
+  color: 'white',
+  textAlign: 'center',
+};
+
+const $flex: ViewStyle = {
+  flex: 1,
+};
+
+const $modal: ViewStyle = {
+  justifyContent: 'flex-end',
+  margin: 0,
+};
+
+const $container: ViewStyle = {
+  borderTopRightRadius: 26,
+  borderTopLeftRadius: 26,
+};