react-native-timacare 2.0.2 → 2.0.3

package/src/screens/liveness-v2/index.tsx

@@ -0,0 +1,598 @@
+//@ts-nocheck
+import React, { useRef, useState } from 'react';
+import { CommonActions, useNavigation } from '@react-navigation/native';
+import { Observer, observer } from 'mobx-react-lite';
+import {
+  ActivityIndicator,
+  Alert,
+  Dimensions,
+  Image,
+  Modal,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import CircularProgress from 'react-native-circular-progress-indicator';
+import RNFS, { CachesDirectoryPath } from 'react-native-fs';
+import { RNFFmpeg } from 'react-native-ffmpeg';
+import {
+  PERMISSIONS,
+  RESULTS,
+  openSettings,
+  request,
+} from 'react-native-permissions';
+import DeviceInfo from 'react-native-device-info';
+import { IconBackWhite, IconEkyc } from '../../assets/icons';
+import { MText } from '../../components/MText';
+import { RNCamera } from 'react-native-camera';
+import livenessStore from '../liveness/LivenessStore';
+import { commonStyles } from '../CommonStyles';
+import { ScreenNames } from '../../navigation';
+import { color } from '../../theme';
+
+const { width: windowWidth } = Dimensions.get('window');
+
+const PREVIEW_SIZE = 320;
+const PREVIEW_RECT = {
+  minX: (windowWidth - PREVIEW_SIZE) / 2,
+  minY: 240,
+  width: PREVIEW_SIZE,
+  height: PREVIEW_SIZE,
+};
+export const LivenessV2 = observer(function LivenessV2(props: any) {
+  const loan = props.route.params?.loan;
+  const navigation = useNavigation();
+  const cameraRef = useRef<any>(null);
+  const interval = useRef<any>(null);
+  const [passPermission, setPassPermission] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const renderHint = (key: string) => {
+    switch (key) {
+      case 'blink':
+        return 'Nhắm mắt trong 3 giây';
+      case 'right':
+        return 'Quay sang phải 3 giây';
+      case 'left':
+        return 'Quay sang trái 3 giây';
+      case 'up':
+        return 'Nhìn lên trên 3 giây';
+      case 'down':
+        return 'Nhìn xuống dưới 3 giây';
+      case 'mouth':
+        return 'Há miệng trong 3 giây';
+      default:
+        return '';
+    }
+  };
+  const renderImg = (key: string) => {
+    switch (key) {
+      case 'blink':
+        return (
+          <Image
+            source={require('../../assets/img/blink.png')}
+            style={{
+              height: 24,
+              width: 50,
+              resizeMode: 'contain',
+              marginTop: 40,
+            }}
+          />
+        );
+      case 'right':
+        return (
+          <Image
+            source={require('../../assets/img/right.png')}
+            style={{
+              height: 24,
+              width: 50,
+              resizeMode: 'contain',
+              marginTop: 40,
+            }}
+          />
+        );
+      case 'left':
+        return (
+          <Image
+            source={require('../../assets/img/left.png')}
+            style={{
+              height: 24,
+              width: 50,
+              resizeMode: 'contain',
+              marginTop: 40,
+            }}
+          />
+        );
+      case 'up':
+        return (
+          <Image
+            source={require('../../assets/img/up.png')}
+            style={{
+              height: 24,
+              width: 50,
+              resizeMode: 'contain',
+              marginTop: 40,
+            }}
+          />
+        );
+      case 'down':
+        return (
+          <Image
+            source={require('../../assets/img/down.png')}
+            style={{
+              height: 24,
+              width: 50,
+              resizeMode: 'contain',
+              marginTop: 40,
+            }}
+          />
+        );
+      case 'mouth':
+        return (
+          <Image
+            source={require('../../assets/img/mouth.png')}
+            style={{
+              height: 24,
+              width: 50,
+              resizeMode: 'contain',
+              marginTop: 40,
+            }}
+          />
+        );
+      default:
+        return <></>;
+    }
+  };
+
+  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.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;
+      }
+    });
+  };
+
+  let second = 3;
+
+  const start = () => {
+    requestPermissions();
+    livenessStore.getListAction(() => {
+      if (passPermission) {
+        interval.current = setInterval(() => {
+          second--;
+          if (second === 0) {
+            clearInterval(interval.current);
+            startLiveness();
+          }
+        }, 1000);
+      }
+    });
+  };
+
+  useEffect(() => {
+    start();
+  }, [passPermission]);
+
+  const uploadLiveness = async (template: any) => {
+    try {
+      const listImage = [];
+      for (let i = 1; i <= 3; i++) {
+        const file = 'file://' + template + `_img_${('000' + i).slice(-4)}.jpg`;
+        const imgBase64 = await RNFS.readFile(file, 'base64');
+        listImage.push(imgBase64);
+      }
+      await livenessStore.verifyLiveness(
+        loan?.id,
+        listImage,
+        () => {
+          setTimeout(() => {
+            startLiveness();
+          }, 2000);
+          setIsLoading(false);
+        },
+        () => {
+          setTimeout(() => {
+            startLiveness();
+          }, 2000);
+          setIsLoading(false);
+        }
+      );
+    } catch (error) {
+      setIsLoading(false);
+    }
+  };
+
+  const captureFromVideo = async (uri: any) => {
+    try {
+      const time = new Date().getTime();
+      const template = CachesDirectoryPath + '/' + time;
+      const output = template + '_img_%04d.jpg';
+      RNFFmpeg.execute(`-i ${uri} -r 2 ${output}`)
+        .then((result) => {
+          console.log(`FFmpeg process exited with rc=${result}.`);
+          if (result === 0) {
+            uploadLiveness(template);
+            console.log('FFmpeg template', template);
+          } else {
+            setIsLoading(false);
+            Alert.alert(
+              'Thông báo',
+              'Quá trình xử lý hình ảnh bị lỗi. Vui lòng thử lại.',
+              [
+                {
+                  text: 'Đồng ý',
+                  onPress: () => {
+                    startLiveness;
+                  },
+                },
+              ]
+            );
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    } catch (error) {
+      setIsLoading(false);
+    }
+  };
+
+  const startLiveness = async () => {
+    livenessStore.ekycSuccess = false;
+    if (livenessStore.listAction.length === 0) {
+      livenessStore.ekycSuccess = true;
+      livenessStore.saveLiveness(loan.id);
+      return;
+    }
+    if (cameraRef) {
+      const videoFile =
+        CachesDirectoryPath + '/' + new Date().getTime() + '.mp4';
+      const options = {
+        quality: RNCamera.Constants.VideoQuality['720p'],
+        maxDuration: 3,
+        path: videoFile,
+        /** iOS only */
+        codec: 'H264',
+        fps: 30,
+      };
+      const data = await cameraRef.current.recordAsync(options);
+      if (data.uri) {
+        setIsLoading(true);
+        captureFromVideo(data.uri);
+      } else {
+        Alert.alert('Thông báo', 'Quá trình xác thực thất bại', [
+          {
+            text: 'Thử lại',
+            onPress: () => {
+              startLiveness();
+            },
+          },
+        ]);
+      }
+    }
+  };
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        onPress={() => {
+          navigation.goBack();
+        }}
+        style={{
+          position: 'absolute',
+          left: 16,
+          top: DeviceInfo.hasNotch() ? 70 : 16,
+          width: 40,
+          height: 40,
+          zIndex: 1000,
+        }}
+      >
+        <IconBackWhite />
+      </TouchableOpacity>
+      <View style={styles.topOverlay}>
+        <MText
+          style={{
+            color: 'white',
+            fontWeight: '600',
+            fontSize: 16,
+          }}
+        >
+          Xác thực khuôn mặt
+        </MText>
+        <Observer>
+          {() => (
+            <>
+              {isLoading ? (
+                <View style={{ marginTop: 24 }}>
+                  <MText
+                    style={{
+                      textAlign: 'center',
+                      fontSize: 16,
+                      color: 'white',
+                    }}
+                  >
+                    Đang xác thực
+                  </MText>
+                  <ActivityIndicator
+                    size={'large'}
+                    color={'white'}
+                    style={{ marginTop: 8 }}
+                  />
+                </View>
+              ) : (
+                <></>
+              )}
+            </>
+          )}
+        </Observer>
+      </View>
+
+      <View style={styles.preview}>
+        <RNCamera
+          playSoundOnCapture={false}
+          ref={cameraRef}
+          style={StyleSheet.absoluteFill}
+          captureAudio={false}
+          type={RNCamera.Constants.Type.front}
+          androidCameraPermissionOptions={{
+            title: 'Permission to use camera',
+            message: 'We need your permission to use your camera',
+            buttonPositive: 'Ok',
+            buttonNegative: 'Cancel',
+          }}
+          androidRecordAudioPermissionOptions={{
+            title: 'Permission to use audio recording',
+            message: 'We need your permission to use your audio',
+            buttonPositive: 'Ok',
+            buttonNegative: 'Cancel',
+          }}
+          autoFocus="on"
+        >
+          <View
+            style={{
+              height: '100%',
+              width: '100%',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            {renderImg(livenessStore.hintAction)}
+            <MText
+              style={{
+                color: 'white',
+                fontSize: 16,
+                marginTop: 8,
+                fontWeight: '400',
+              }}
+            >
+              {renderHint(livenessStore.hintAction)}
+            </MText>
+          </View>
+        </RNCamera>
+      </View>
+
+      <View style={styles.circularProgress}>
+        <CircularProgress
+          dashedStrokeConfig={{
+            count: 100,
+            width: 7,
+          }}
+          value={
+            livenessStore.listAction.length === 3
+              ? 0
+              : livenessStore.listAction.length === 2
+              ? 100 / 3
+              : livenessStore.listAction.length === 1
+              ? (2 / 3) * 100
+              : 100
+          }
+          radius={PREVIEW_SIZE / 2}
+          inActiveStrokeOpacity={0.5}
+          activeStrokeWidth={13}
+          inActiveStrokeWidth={13}
+          showProgressValue={false}
+          activeStrokeColor="#F05123"
+          inActiveStrokeColor="#F05123"
+          duration={800}
+        />
+      </View>
+      <Observer>
+        {() => (
+          <View style={styles.bottomOverlay}>
+            <MText style={styles.instructionText}>
+              Vui lòng điều chỉnh khuôn mặt nằm gọn trong vòng tròn ở trên
+            </MText>
+          </View>
+        )}
+      </Observer>
+
+      <Modal
+        visible={livenessStore.ekycSuccess}
+        animationType={'fade'}
+        transparent
+      >
+        <View
+          style={[
+            commonStyles.alignCenter,
+            commonStyles.justifyCenter,
+            { backgroundColor: 'transparent', height: '100%' },
+          ]}
+        >
+          <View
+            style={[
+              commonStyles.alignCenter,
+              commonStyles.justifyCenter,
+              {
+                backgroundColor: 'white',
+                borderRadius: 8,
+                padding: 16,
+                marginHorizontal: 16,
+              },
+            ]}
+          >
+            <IconEkyc />
+            <MText
+              style={[
+                commonStyles.textNormalBold,
+                { marginTop: 16, textAlign: 'center' },
+              ]}
+            >
+              Chúc mừng bạn đã thực hiện xác thực khách hàng{'\n'}thành công.
+            </MText>
+            <TouchableOpacity
+              style={{
+                marginTop: 16,
+                backgroundColor: color.primary,
+                height: 40,
+                alignItems: 'center',
+                borderRadius: 30,
+                width: 150,
+                justifyContent: 'center',
+              }}
+              onPress={() => {
+                livenessStore.ekycSuccess = false;
+                navigation.dispatch(
+                  CommonActions.reset({
+                    index: 1,
+                    routes: [{ name: ScreenNames.Main }],
+                  })
+                );
+              }}
+            >
+              <MText style={[commonStyles.textNormalBold, { color: 'white' }]}>
+                Đồng ý
+              </MText>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  instructionText: {
+    color: 'white',
+    fontSize: 12,
+    textAlign: 'center',
+    paddingHorizontal: 50,
+    marginTop: 16,
+  },
+  bottomOverlay: {
+    marginTop: 24,
+  },
+  maskedView: {
+    flex: 1,
+    flexDirection: 'row',
+    height: '100%',
+  },
+  maskWrapper: {
+    backgroundColor: 'transparent',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  mask: {
+    borderRadius: PREVIEW_SIZE / 2,
+    height: PREVIEW_SIZE - 10,
+    width: PREVIEW_SIZE - 10,
+    marginTop: PREVIEW_RECT.minY,
+    alignSelf: 'center',
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: '#333333',
+  },
+  topOverlay: {
+    position: 'absolute',
+    top: DeviceInfo.hasNotch() ? 70 : 16,
+    right: 0,
+    left: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  captureFrame: {
+    height: Dimensions.get('window').width - 50,
+    marginHorizontal: 16,
+    marginTop: '50%',
+    borderRadius: 50,
+  },
+  preview: {
+    width: PREVIEW_SIZE - 29,
+    height: PREVIEW_SIZE - 28,
+    marginTop: PREVIEW_RECT.minY + 14,
+    marginLeft: PREVIEW_RECT.minX + 14,
+    borderRadius: PREVIEW_SIZE / 2,
+    overflow: 'hidden',
+  },
+  circularProgress: {
+    width: PREVIEW_SIZE,
+    height: PREVIEW_SIZE,
+    marginTop: PREVIEW_RECT.minY,
+    marginLeft: PREVIEW_RECT.minX,
+    zIndex: 100,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});

package/src/screens/mrz-scanner/index.tsx

@@ -26,6 +26,7 @@ import MButton from '../../components/MButton';
 import { IconBackWhite } from '../../assets/icons';
 import { commonStyles } from '../CommonStyles';
 import nfcStore from './store';
+import { ScreenNames } from '../../navigation';
 
 const { NFCReader } = NativeModules;
 

package/src/screens/selfie/index.tsx

@@ -33,6 +33,7 @@ import selfieStore from './SelfieStore';
 import nationalIDStore from '../nationalID/Store';
 import Loading from '../../components/Loading';
 import LinearGradient from 'react-native-linear-gradient';
+import livenessStore from '../liveness/LivenessStore';
 
 const logoView: ImageStyle = {
   position: 'absolute',
@@ -72,8 +73,17 @@ export const Selfie = observer(function Selfie(props: any) {
 
     selfieStore.checkSelfieImage(formSelfie, loan.id, () => {
       selfieStore.uploadImage(form, () => {
-        //@ts-ignore
-        navigation.push(ScreenNames.LiveNess, { loan });
+        livenessStore.getConfigLiveness((data) => {
+          if (data === 1) {
+            navigation.dispatch(
+              StackActions.push(ScreenNames.LiveNess, { loan })
+            );
+          } else {
+            navigation.dispatch(
+              StackActions.push(ScreenNames.LivenessV2, { loan })
+            );
+          }
+        });
       });
     });
   };

package/src/services/api/api.ts

@@ -2375,4 +2375,72 @@ export class Api {
     }
   }
 
+  async verifyLiveness(body: any) {
+    // make the api call
+    const response: ApiResponse<any> = await this.apisauce.post(`api/v1.0/timacare/livenessv2`, body)
+    myLog(response)
+    // the typical ways to die when calling an api
+    if (!response.ok) {
+      const problem = getGeneralApiProblem(response)
+      if (problem) return problem
+    }
+    // transform the data into the format we are expecting
+    try {
+      return { kind: "ok", data: response.data }
+    } catch {
+      return { kind: "bad-data" }
+    }
+  }
+
+  async saveImages(body: any) {
+    // make the api call
+    const response: ApiResponse<any> = await this.apisauce.post(`api/v1.0/timacare/save_image_liveness`, body)
+    myLog(response)
+    // the typical ways to die when calling an api
+    if (!response.ok) {
+      const problem = getGeneralApiProblem(response)
+      if (problem) return problem
+    }
+    // transform the data into the format we are expecting
+    try {
+      return { kind: "ok", data: response.data }
+    } catch {
+      return { kind: "bad-data" }
+    }
+  }
+
+  async getActionLiveness() {
+    // make the api call
+    const response: ApiResponse<any> = await this.apisauce.get(`api/v1.0/timacare/get_action_liveness`)
+    myLog(response)
+    // the typical ways to die when calling an api
+    if (!response.ok) {
+      const problem = getGeneralApiProblem(response)
+      if (problem) return problem
+    }
+    // transform the data into the format we are expecting
+    try {
+      return { kind: "ok", data: response.data }
+    } catch {
+      return { kind: "bad-data" }
+    }
+  }
+
+  async getConfigLiveness() {
+    // make the api call
+    const response: ApiResponse<any> = await this.apisauce.get(`api/v1.0/timacare/get_config_liveness`)
+    myLog(response)
+    // the typical ways to die when calling an api
+    if (!response.ok) {
+      const problem = getGeneralApiProblem(response)
+      if (problem) return problem
+    }
+    // transform the data into the format we are expecting
+    try {
+      return { kind: "ok", data: response.data }
+    } catch {
+      return { kind: "bad-data" }
+    }
+  }
+
 }