react-native-timacare 3.1.2 → 3.1.4-beta

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

@@ -0,0 +1,356 @@
+//@ts-nocheck
+import React, { useEffect, useState } from 'react';
+import {
+  Alert,
+  Image,
+  ImageStyle,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { commonStyles } from '../CommonStyles';
+import { IconBackWhite } from '../../assets/icons';
+import { MText } from '../../components/MText';
+import {
+  CodeField,
+  Cursor,
+  useBlurOnFulfill,
+  useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
+import { Api } from '../../services/api';
+import Loading from '../../components/Loading';
+import { ScreenNames } from '../../navigation';
+
+const logoView: ImageStyle = {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  resizeMode: 'cover',
+};
+
+export default function TTSOTP({ navigation, route }: any) {
+  const loan = route?.params?.loan;
+  const [description, setDescription] = useState(
+    'Vui lòng click “Gửi mã OTP” để nhận mã xác thực được gửi vào số điện thoại của bạn'
+  );
+  const [timeLeft, setTimeLeft] = useState(300);
+  const [isResendEnabled, setIsResendEnabled] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isCounting, setIsCounting] = useState(false);
+  const CELL_COUNT = 6;
+  const [value, setValue] = useState('');
+  const ref = useBlurOnFulfill({ value, cellCount: CELL_COUNT });
+
+  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
+    value,
+    setValue,
+  });
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (isCounting && timeLeft > 0) {
+      interval = setInterval(() => {
+        setTimeLeft((prev) => prev - 1);
+      }, 1000);
+    } else if (timeLeft === 0) {
+      setIsCounting(false);
+      setIsResendEnabled(true);
+    }
+    return () => clearInterval(interval);
+  }, [isCounting, timeLeft]);
+
+  const sendOtp = async () => {
+    setIsLoading(true);
+    const response = await Api.getInstance().signContractForBorrower({
+      loanBriefId: loan.id,
+    });
+    setIsLoading(false);
+    if (response.kind === 'ok' && response.data.meta.errorCode === 200) {
+      setTimeLeft(300);
+      setDescription(
+        'Mã xác thực OTP của bạn sẽ được gửi vào số điện thoại của bạn, vui lòng nhập mã để hoàn thành ký hợp đồng.'
+      );
+      setIsCounting(true);
+    } else {
+      Alert.alert('Thông báo', response.data.meta.errorMessage, [
+        { text: 'Đồng ý' },
+      ]);
+      setValue('');
+    }
+  };
+
+  const resendOtp = async () => {
+    setIsLoading(true);
+    const response = await Api.getInstance().eSignSendOTP({
+      customerId: loan?.id,
+    });
+    setIsLoading(false);
+    if (response.kind === 'ok' && response.data.meta.errorCode === 200) {
+      setDescription(
+        'Mã xác thực OTP đã được gửi lại vào số điện thoại của bạn, vui lòng nhập mã để hoàn thành ký hợp đồng.'
+      );
+      setTimeLeft(300);
+      setIsCounting(true);
+      setIsResendEnabled(false);
+      setValue('');
+    } else {
+      Alert.alert('Thông báo', response.data.meta.errorMessage, [
+        { text: 'Đồng ý' },
+      ]);
+      setValue('');
+    }
+  };
+
+  const onSubmit = async () => {
+    if (value.length === CELL_COUNT) {
+      setIsLoading(true);
+      const response = await Api.getInstance().confirmSignContractForBorrower({
+        loanBriefId: loan.id,
+        otp: value,
+      });
+      setIsLoading(false);
+      if (response.kind === 'ok' && response.data.meta.errorCode === 200) {
+        Alert.alert('Thông báo', 'Ký hợp đồng thành công', [
+          {
+            text: 'Đồng ý',
+            onPress: () => {
+              navigation.dispatch(
+                CommonActions.reset({
+                  index: 1,
+                  routes: [
+                    {
+                      name: ScreenNames.Main,
+                    },
+                  ],
+                })
+              );
+            },
+          },
+        ]);
+      } else {
+        Alert.alert('Thông báo', response.data.meta.errorMessage, [
+          { text: 'Đồng ý' },
+        ]);
+        setValue('');
+      }
+    } else {
+      Alert.alert('Thông báo', 'Vui lòng nhập đầy đủ mã OTP gồm 6 chữ số.', [
+        { text: 'Đồng ý' },
+      ]);
+      setValue('');
+    }
+  };
+
+  const formatTime = (seconds: number) => {
+    const m = Math.floor(seconds / 60)
+      .toString()
+      .padStart(2, '0');
+    const s = (seconds % 60).toString().padStart(2, '0');
+    return `${m}:${s}`;
+  };
+
+  return (
+    <View style={commonStyles.fill}>
+      <Image source={require('../../assets/tts/otp.png')} style={logoView} />
+      <SafeAreaView style={commonStyles.fill}>
+        <View
+          style={{
+            paddingVertical: 16,
+          }}
+        >
+          <TouchableOpacity
+            onPress={() => {
+              navigation.goBack();
+            }}
+            style={{
+              position: 'absolute',
+              left: 10,
+              top: 16,
+              width: 25,
+              height: 25,
+              zIndex: 1000,
+              alignItems: 'center',
+            }}
+          >
+            <IconBackWhite />
+          </TouchableOpacity>
+          <MText
+            style={{
+              fontSize: 16,
+              color: '#FDFDFD',
+              fontWeight: 'bold',
+              textAlign: 'center',
+            }}
+          >
+            Xác thực OTP
+          </MText>
+        </View>
+        <ScrollView>
+          <MText
+            style={{
+              color: '#FFFFFF',
+              textAlign: 'center',
+              marginTop: 16,
+              paddingHorizontal: 24,
+            }}
+          >
+            {description}
+          </MText>
+          <CodeField
+            ref={ref}
+            {...props}
+            value={value}
+            onChangeText={setValue}
+            cellCount={CELL_COUNT}
+            rootStyle={styles.codeFieldRoot}
+            keyboardType="number-pad"
+            textContentType="oneTimeCode"
+            renderCell={({ index, symbol, isFocused }) => (
+              <View
+                key={index}
+                style={[styles.cell, isFocused && styles.focusCell]}
+                onLayout={getCellOnLayoutHandler(index)}
+              >
+                <MText style={styles.cellText}>
+                  {symbol || (isFocused ? <Cursor /> : null)}
+                </MText>
+              </View>
+            )}
+          />
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              marginTop: 40,
+            }}
+          >
+            {isCounting ? (
+              <TouchableOpacity
+                onPress={() => {
+                  onSubmit();
+                }}
+                style={{
+                  backgroundColor: 'white',
+                  borderRadius: 4,
+                  height: 40,
+                  alignItems: 'center',
+                  paddingHorizontal: 20,
+                  justifyContent: 'center',
+                }}
+              >
+                <MText
+                  style={{
+                    color: 'rgba(239, 89, 46, 1)',
+                    fontSize: 16,
+                  }}
+                >
+                  Xác nhận
+                </MText>
+              </TouchableOpacity>
+            ) : isResendEnabled ? (
+              <TouchableOpacity
+                onPress={() => {
+                  resendOtp();
+                }}
+                style={{
+                  backgroundColor: 'white',
+                  borderRadius: 4,
+                  height: 40,
+                  alignItems: 'center',
+                  paddingHorizontal: 20,
+                  justifyContent: 'center',
+                }}
+              >
+                <MText
+                  style={{
+                    color: 'rgba(239, 89, 46, 1)',
+                    fontSize: 16,
+                  }}
+                >
+                  Gửi lại mã OTP
+                </MText>
+              </TouchableOpacity>
+            ) : (
+              <TouchableOpacity
+                onPress={() => {
+                  sendOtp();
+                }}
+                style={{
+                  backgroundColor: 'white',
+                  borderRadius: 4,
+                  height: 40,
+                  alignItems: 'center',
+                  paddingHorizontal: 20,
+                  justifyContent: 'center',
+                }}
+              >
+                <MText
+                  style={{
+                    color: 'rgba(239, 89, 46, 1)',
+                    fontSize: 16,
+                  }}
+                >
+                  Gửi mã OTP
+                </MText>
+              </TouchableOpacity>
+            )}
+          </View>
+          {isCounting && (
+            <MText
+              style={{
+                textAlign: 'center',
+                marginTop: 16,
+                color: '#FFFFFF',
+                fontSize: 14,
+              }}
+            >
+              Gửi lại mã OTP sau{' '}
+              <MText
+                style={{
+                  color: '#FFFFFF',
+                  fontWeight: 'bold',
+                }}
+              >
+                ({formatTime(timeLeft)})
+              </MText>
+            </MText>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+      <Loading isLoading={isLoading} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  codeFieldRoot: {
+    width: '85%',
+    alignSelf: 'center',
+    marginTop: 24,
+  },
+
+  cell: {
+    width: 50,
+    height: 50,
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(253, 253, 253, 0.3)',
+  },
+  focusCell: {
+    // backgroundColor: '#FFFFFF',
+    // borderRadius: 8,
+    // borderWidth: 1,
+    // borderColor: '#EF592E',
+  },
+
+  cellText: {
+    fontSize: 24,
+    textAlign: 'center',
+    color: '#FFFFFF',
+    fontWeight: 'bold',
+  },
+});

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

@@ -0,0 +1,267 @@
+//@ts-nocheck
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Dimensions,
+  Platform,
+  View,
+} from 'react-native';
+import { CommonActions, useNavigation } from '@react-navigation/native';
+import {
+  request,
+  PERMISSIONS,
+  RESULTS,
+  openSettings,
+} from 'react-native-permissions';
+import { RNCamera } from 'react-native-camera';
+import { MText } from '../../components/MText';
+import MButton from '../../components/MButton';
+import { commonStyles } from '../CommonStyles';
+import { IconBackWhite, TakePhotoSvg } from '../../assets/icons';
+import Loading from '../../components/Loading';
+import { Api } from '../../services/api';
+import { ScreenNames } from '../../navigation';
+
+export default function TTSSelfie(props: any) {
+  const navigation = useNavigation();
+  const [taking, setTaking] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [passPermission, setPassPermission] = useState(false);
+
+  const myCamera = useRef(null);
+
+  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;
+      }
+    });
+  };
+
+  useEffect(() => {
+    requestPermissions();
+  }, []);
+
+  const takePhoto = async () => {
+    setTaking(true);
+    const options = {
+      pauseAfterCapture: true,
+      fixOrientation: false,
+      forceUpOrientation: false,
+      orientation: RNCamera.Constants.Orientation.portrait,
+    };
+    const data = await myCamera.current.takePictureAsync(options);
+    setTaking(false);
+    if (data.uri) {
+      setIsLoading(true);
+      const formData = new FormData();
+      formData.append('LoanBriefId', props?.route?.params?.loan?.id);
+      formData.append('TypeDocumentId', 125); // Anh selfie
+      formData.append('image', {
+        uri: data.uri,
+        type: 'image/jpg',
+        name: 'image.jpg',
+      });
+      const response = await Api.getInstance().uploadImageOcr(formData);
+      setIsLoading(false);
+      if (response.kind === 'ok') {
+        if (response.data?.meta.errorCode === 200) {
+          navigation.push(ScreenNames.VehicleCamera, {
+            front: true,
+            loan: props?.route?.params?.loan,
+          });
+        } else {
+          Alert.alert('Thông báo', response.data?.meta?.errorMessage);
+        }
+      } else {
+        Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
+      }
+    }
+  };
+
+  return (
+    <View
+      style={{ flex: 1, backgroundColor: 'black' }}
+      pointerEvents={'box-none'}
+    >
+      {passPermission && (
+        <View
+          style={[
+            commonStyles.fill,
+            {
+              width: Dimensions.get('window').width,
+              height: Dimensions.get('window').height,
+            },
+          ]}
+        >
+          <View
+            style={{
+              marginVertical: 24,
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <MButton
+              onPress={() => {
+                navigation.goBack();
+              }}
+              style={{
+                position: 'absolute',
+                left: 16,
+              }}
+            >
+              <IconBackWhite />
+            </MButton>
+            <MText
+              style={{
+                color: 'white',
+                fontWeight: 'bold',
+                textAlgin: 'center',
+              }}
+            >
+              Xác thực khuôn mặt
+            </MText>
+          </View>
+          <RNCamera
+            ref={myCamera}
+            defaultVideoQuality={RNCamera.Constants.VideoQuality['720p']}
+            style={{
+              width: Dimensions.get('window').width,
+              height: (Dimensions.get('window').width * 4) / 3.1,
+            }}
+            type={RNCamera.Constants.Type.front}
+            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
+            style={{
+              position: 'absolute',
+              bottom: 20,
+              left: 0,
+              right: 0,
+            }}
+          >
+            {!taking && (
+              <>
+                <MText
+                  style={{
+                    color: 'white',
+                    textAlign: 'center',
+                    fontSize: 14,
+                  }}
+                >
+                  Xin vui lòng nhìn thẳng, khuôn mặt ở trong khung hình, ánh
+                  sáng đủ rõ nét khuôn mặt
+                </MText>
+                <View
+                  style={{
+                    alignItems: 'center',
+                    marginVertical: 24,
+                  }}
+                >
+                  <MButton
+                    onPress={() => {
+                      takePhoto();
+                    }}
+                  >
+                    <TakePhotoSvg />
+                  </MButton>
+                </View>
+              </>
+            )}
+          </View>
+        </View>
+      )}
+
+      <Loading isLoading={isLoading} />
+    </View>
+  );
+}