@trustchex/react-native-sdk 1.161.0

package/lib/module/Screens/Dynamic/LivenessDetectionScreen.js

@@ -0,0 +1,596 @@
+"use strict";
+
+import Svg, { Rect as SvgRect, Circle, Mask } from 'react-native-svg';
+import { useNavigation } from '@react-navigation/native';
+import React, { useState, useReducer, useContext, useEffect, useCallback } from 'react';
+import { Dimensions, Text, View, StyleSheet, Platform, Vibration } from 'react-native';
+import NativeCircularProgress from "../../Shared/Components/NativeCircularProgress.js";
+import FaceCamera from "../../Shared/Components/FaceCamera.js";
+import NavigationManager from "../../Shared/Components/NavigationManager.js";
+import AppContext from "../../Shared/Contexts/AppContext.js";
+import { contains } from "../../Shared/Libs/contains.js";
+import { useTranslation } from 'react-i18next';
+import { Button } from 'react-native-paper';
+import LottieView from 'lottie-react-native';
+import { speakWithDebounce } from "../../Shared/Libs/tts.utils.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const {
+  width: windowWidth,
+  height: windowHeight
+} = Dimensions.get('window');
+const PREVIEW_SIZE = windowWidth * 0.8;
+const PREVIEW_RECT = {
+  minX: (windowWidth - PREVIEW_SIZE) / 2,
+  minY: (windowHeight - PREVIEW_SIZE) / 2,
+  width: PREVIEW_SIZE,
+  height: PREVIEW_SIZE
+};
+const PREVIEW_EDGE_OFFSET = 10;
+const TURN_ANGLE_LIMIT = 15;
+const LOOK_STRAIGHT_ANGLE_LIMIT = 10;
+const LivenessDetectionScreen = () => {
+  const [camera, setCamera] = useState(null);
+  const navigation = useNavigation();
+  const appContext = useContext(AppContext);
+  const navigationManagerRef = React.useRef(null);
+  const {
+    t
+  } = useTranslation();
+  const [isRecording, setIsRecording] = useState(false);
+  const [initialState, setInitialState] = useState({
+    brightnessLow: false,
+    faceDetected: false,
+    multipleFacesDetected: false,
+    faceTooBig: false,
+    instructionList: [],
+    previousInstruction: '',
+    currentInstruction: '',
+    progressFill: 0,
+    processComplete: false,
+    videoPath: ''
+  });
+  const [instructions, _setInstructions] = useState({
+    START: {
+      instruction: t('livenessDetectionScreen.start')
+    },
+    SMILE: {
+      instruction: t('livenessDetectionScreen.smile'),
+      minProbability: 0.7
+    },
+    LOOK_STRAIGHT_AND_BLINK: {
+      instruction: t('livenessDetectionScreen.lookStraightAndBlink'),
+      minProbability: 0.7,
+      eyesClosed: false,
+      maxAngle: LOOK_STRAIGHT_ANGLE_LIMIT,
+      minAngle: -LOOK_STRAIGHT_ANGLE_LIMIT
+    },
+    TURN_HEAD_LEFT: {
+      instruction: t('livenessDetectionScreen.turnHeadLeft'),
+      minAngle: TURN_ANGLE_LIMIT,
+      maxAngle: -TURN_ANGLE_LIMIT
+    },
+    TURN_HEAD_RIGHT: {
+      instruction: t('livenessDetectionScreen.turnHeadRight'),
+      minAngle: -TURN_ANGLE_LIMIT,
+      maxAngle: TURN_ANGLE_LIMIT
+    },
+    LOOK_UP: {
+      instruction: t('livenessDetectionScreen.lookUp'),
+      minAngle: TURN_ANGLE_LIMIT
+    },
+    FINISH: {
+      instruction: t('livenessDetectionScreen.finish')
+    }
+  });
+  const [instructionList, setInstructionList] = useState([]);
+  const [hasGuideShown, setHasGuideShown] = useState(false);
+  useEffect(() => {
+    const il = Object.keys(instructions).filter(instruction => !['START', 'FINISH'].includes(instruction) && (
+    // Look straight and blink is always included
+    instruction === 'LOOK_STRAIGHT_AND_BLINK' || !appContext.currentWorkflowStep?.data?.allowedLivenessInstructionTypes || appContext.currentWorkflowStep?.data?.allowedLivenessInstructionTypes.length === 0 || appContext.currentWorkflowStep?.data?.allowedLivenessInstructionTypes.includes(instruction))).sort(() => Math.random() - 0.5);
+    il.unshift('START');
+    il.push('FINISH');
+    setInstructionList(il);
+    setInitialState({
+      brightnessLow: false,
+      faceDetected: false,
+      multipleFacesDetected: false,
+      faceTooBig: false,
+      instructionList: il,
+      previousInstruction: '',
+      currentInstruction: 'START',
+      progressFill: 0,
+      processComplete: false,
+      videoPath: ''
+    });
+  }, [instructions, appContext.currentWorkflowStep?.data?.allowedLivenessInstructionTypes]);
+  const startRecording = useCallback(async () => {
+    if (isRecording) {
+      try {
+        await camera?.cancelRecording();
+        setIsRecording(false);
+      } catch (e) {
+        // Ignore error
+      }
+    }
+    setTimeout(() => {
+      camera?.startRecording({
+        fileType: 'mp4',
+        videoCodec: 'h265',
+        onRecordingError() {
+          setIsRecording(false);
+        },
+        onRecordingFinished(video) {
+          setTimeout(() => {
+            dispatch({
+              type: 'VIDEO_RECORDED',
+              payload: video.path
+            });
+            setIsRecording(false);
+          }, 500);
+        }
+      });
+    }, 500);
+    setIsRecording(true);
+  }, [camera, isRecording]);
+  const stopRecording = useCallback(async () => {
+    try {
+      await camera?.stopRecording();
+      setIsRecording(false);
+    } catch (e) {
+      // Ignore error
+    }
+  }, [camera]);
+  const areEyesOpen = face => face.leftEyeOpenProbability >= 0.8 && face.rightEyeOpenProbability >= 0.8;
+  const instructionReducer = (state, action) => {
+    switch (action.type) {
+      case 'BRIGHTNESS_LOW':
+        if (action.payload) {
+          return {
+            ...state,
+            brightnessLow: action.payload,
+            progressFill: 0
+          };
+        }
+        return initialState;
+      case 'MULTIPLE_FACES_DETECTED':
+        if (action.payload) {
+          return {
+            ...state,
+            multipleFacesDetected: action.payload,
+            progressFill: 0
+          };
+        }
+        return initialState;
+      case 'FACE_TOO_BIG':
+        if (action.payload) {
+          return {
+            ...state,
+            faceTooBig: action.payload
+          };
+        }
+        return initialState;
+      case 'FACE_DETECTED':
+        if (action.payload) {
+          return {
+            ...state,
+            faceDetected: action.payload,
+            progressFill: 100 / (state.instructionList.length + 1)
+          };
+        }
+        return initialState;
+      case 'VIDEO_RECORDED':
+        return {
+          ...state,
+          videoPath: action.payload
+        };
+      case 'NEXT_INSTRUCTION':
+        if (action.payload === 'FINISH') {
+          return {
+            ...state,
+            processComplete: true,
+            progressFill: 100
+          };
+        }
+        const nextInstructionIndex = instructionList.findIndex(instruction => instruction === action.payload) + 1;
+        const nextInstruction = state.instructionList[nextInstructionIndex];
+        const progressMultiplier = nextInstructionIndex + 1;
+        const newProgressFill = 100 / (state.instructionList.length + 1) * progressMultiplier;
+        return {
+          ...state,
+          currentInstruction: nextInstruction,
+          progressFill: newProgressFill
+        };
+      default:
+        throw new Error('Unexpected action type.');
+    }
+  };
+  const [state, dispatch] = useReducer(instructionReducer, initialState);
+  const onFacesDetected = useCallback(async (faces, image, isImageBright) => {
+    const face = faces[0];
+    const faceRectSmaller = {
+      width: face.bounds.width - PREVIEW_EDGE_OFFSET,
+      height: face.bounds.height - PREVIEW_EDGE_OFFSET,
+      minY: face.bounds.y + PREVIEW_EDGE_OFFSET / 2,
+      minX: face.bounds.x + PREVIEW_EDGE_OFFSET / 2
+    };
+    const previewContainsFace = contains({
+      outside: PREVIEW_RECT,
+      inside: faceRectSmaller
+    });
+    const multipleFacesDetected = faces.length > 1;
+    if (!isImageBright) {
+      dispatch({
+        type: 'BRIGHTNESS_LOW',
+        payload: true
+      });
+      return;
+    }
+    if (!previewContainsFace) {
+      dispatch({
+        type: 'FACE_DETECTED',
+        payload: false
+      });
+      return;
+    }
+    if (state.brightnessLow) {
+      dispatch({
+        type: 'BRIGHTNESS_LOW',
+        payload: false
+      });
+    }
+    if (!state.multipleFacesDetected && multipleFacesDetected) {
+      dispatch({
+        type: 'MULTIPLE_FACES_DETECTED',
+        payload: true
+      });
+      return;
+    }
+    if (state.multipleFacesDetected && !multipleFacesDetected) {
+      dispatch({
+        type: 'MULTIPLE_FACES_DETECTED',
+        payload: false
+      });
+    }
+    if (!state.faceDetected) {
+      if (face.bounds.width >= PREVIEW_SIZE && face.bounds.height >= PREVIEW_SIZE) {
+        dispatch({
+          type: 'FACE_TOO_BIG',
+          payload: true
+        });
+        return;
+      }
+      if (state.faceTooBig) {
+        dispatch({
+          type: 'FACE_TOO_BIG',
+          payload: false
+        });
+        return;
+      }
+    }
+    if (!state.faceDetected) {
+      dispatch({
+        type: 'FACE_DETECTED',
+        payload: true
+      });
+    }
+    if (state.currentInstruction !== state.previousInstruction) {
+      state.previousInstruction = state.currentInstruction;
+      Vibration.vibrate(100);
+      if (appContext.currentWorkflowStep?.data?.voiceGuidanceActive) {
+        speakWithDebounce(instructions[state.currentInstruction]?.instruction ?? '');
+      }
+    }
+    switch (state.currentInstruction) {
+      case 'START':
+        if (state.faceDetected) {
+          await startRecording();
+          dispatch({
+            type: 'NEXT_INSTRUCTION',
+            payload: 'START'
+          });
+        }
+        return;
+      case 'LOOK_STRAIGHT_AND_BLINK':
+        if (instructions.LOOK_STRAIGHT_AND_BLINK.minAngle < face.yawAngle && face.yawAngle < instructions.LOOK_STRAIGHT_AND_BLINK.maxAngle && instructions.LOOK_STRAIGHT_AND_BLINK.minAngle < face.pitchAngle && face.pitchAngle < instructions.LOOK_STRAIGHT_AND_BLINK.maxAngle) {
+          if (instructions.LOOK_STRAIGHT_AND_BLINK.eyesClosed) {
+            if (areEyesOpen(face)) {
+              instructions.LOOK_STRAIGHT_AND_BLINK.eyesClosed = false;
+              instructions.LOOK_STRAIGHT_AND_BLINK.photo = image;
+              dispatch({
+                type: 'NEXT_INSTRUCTION',
+                payload: 'LOOK_STRAIGHT_AND_BLINK'
+              });
+            }
+          } else if (!areEyesOpen(face)) {
+            instructions.LOOK_STRAIGHT_AND_BLINK.eyesClosed = true;
+          }
+        }
+        return;
+      case 'SMILE':
+        if (face.smilingProbability >= instructions.SMILE.minProbability) {
+          instructions.SMILE.photo = image;
+          dispatch({
+            type: 'NEXT_INSTRUCTION',
+            payload: 'SMILE'
+          });
+        }
+        return;
+      case 'LOOK_UP':
+        if (face.pitchAngle >= instructions.LOOK_UP.minAngle && areEyesOpen(face)) {
+          instructions.LOOK_UP.photo = image;
+          dispatch({
+            type: 'NEXT_INSTRUCTION',
+            payload: 'LOOK_UP'
+          });
+        }
+        return;
+      case 'TURN_HEAD_LEFT':
+        if (Platform.OS === 'ios') {
+          if (face.yawAngle <= instructions.TURN_HEAD_LEFT.maxAngle && areEyesOpen(face)) {
+            instructions.TURN_HEAD_LEFT.photo = image;
+            dispatch({
+              type: 'NEXT_INSTRUCTION',
+              payload: 'TURN_HEAD_LEFT'
+            });
+          }
+        } else {
+          if (face.yawAngle >= instructions.TURN_HEAD_LEFT.minAngle && areEyesOpen(face)) {
+            instructions.TURN_HEAD_LEFT.photo = image;
+            dispatch({
+              type: 'NEXT_INSTRUCTION',
+              payload: 'TURN_HEAD_LEFT'
+            });
+          }
+        }
+        return;
+      case 'TURN_HEAD_RIGHT':
+        if (Platform.OS === 'ios') {
+          if (face.yawAngle >= instructions.TURN_HEAD_RIGHT.maxAngle && areEyesOpen(face)) {
+            instructions.TURN_HEAD_RIGHT.photo = image;
+            dispatch({
+              type: 'NEXT_INSTRUCTION',
+              payload: 'TURN_HEAD_RIGHT'
+            });
+          }
+        } else {
+          if (face.yawAngle <= instructions.TURN_HEAD_RIGHT.minAngle && areEyesOpen(face)) {
+            instructions.TURN_HEAD_RIGHT.photo = image;
+            dispatch({
+              type: 'NEXT_INSTRUCTION',
+              payload: 'TURN_HEAD_RIGHT'
+            });
+          }
+        }
+        return;
+      case 'FINISH':
+        await stopRecording();
+        dispatch({
+          type: 'NEXT_INSTRUCTION',
+          payload: 'FINISH'
+        });
+        return;
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [state.brightnessLow, state.faceDetected, state.multipleFacesDetected, state.faceTooBig, state.currentInstruction, instructions.LOOK_STRAIGHT_AND_BLINK, instructions.SMILE, instructions.LOOK_UP, instructions.TURN_HEAD_LEFT, instructions.TURN_HEAD_RIGHT, stopRecording, startRecording]);
+  useEffect(() => {
+    if (state.processComplete && !!state.videoPath && !!state.instructionList && !!appContext.identificationInfo && !!navigation && !!instructions) {
+      appContext.identificationInfo.livenessDetection = {
+        instructions: [...state.instructionList.map(instruction => ({
+          instruction: instruction,
+          photo: instructions[instruction].photo ?? ''
+        }))],
+        videoPath: state.videoPath
+      };
+      navigationManagerRef.current?.navigateToNextStep();
+    }
+  }, [state.processComplete, state.videoPath, state.instructionList, appContext.identificationInfo, navigation, instructions]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!hasGuideShown ? /*#__PURE__*/_jsxs(View, {
+      style: styles.guide,
+      children: [/*#__PURE__*/_jsx(LottieView, {
+        source: require('../../Shared/Animations/face-scan.json'),
+        style: styles.guideAnimation,
+        loop: true,
+        autoPlay: true
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.guideHeader,
+        children: t('livenessDetectionScreen.guideHeader')
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.guidePoints,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.guideText,
+          children: t('livenessDetectionScreen.guideText')
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('livenessDetectionScreen.guidePoint1')]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('livenessDetectionScreen.guidePoint2')]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('livenessDetectionScreen.guidePoint3')]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('livenessDetectionScreen.guidePoint4')]
+        })]
+      }), /*#__PURE__*/_jsx(Button, {
+        mode: "contained",
+        onPress: () => {
+          setHasGuideShown(true);
+        },
+        children: t('general.letsGo')
+      })]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(FaceCamera, {
+        onFacesDetected: onFacesDetected,
+        onCameraInitialized: setCamera
+      }), /*#__PURE__*/_jsx(NativeCircularProgress, {
+        style: styles.circularProgress,
+        size: PREVIEW_SIZE,
+        width: 10,
+        backgroundWidth: 5,
+        fill: state.progressFill,
+        tintColor: appContext.branding.primaryColor,
+        backgroundColor: "white"
+      }), state.brightnessLow && /*#__PURE__*/_jsx(LottieView, {
+        source: require('../../Shared/Animations/light.json'),
+        style: styles.animation,
+        loop: true,
+        autoPlay: true
+      }), /*#__PURE__*/_jsxs(Svg, {
+        style: styles.svgMask,
+        children: [/*#__PURE__*/_jsxs(Mask, {
+          id: "hole-mask",
+          children: [/*#__PURE__*/_jsx(SvgRect, {
+            width: "100%",
+            height: "100%",
+            fill: "white"
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: "50%",
+            cy: "50%",
+            r: "25%",
+            fill: "black"
+          })]
+        }), /*#__PURE__*/_jsx(SvgRect, {
+          width: "100%",
+          height: "100%",
+          fill: "white",
+          mask: "url(#hole-mask)"
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.instructionsContainerTop,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.instructions,
+          children: (() => {
+            if (state.brightnessLow) {
+              return t('livenessDetectionScreen.brightnessLow');
+            } else if (state.multipleFacesDetected) {
+              return t('livenessDetectionScreen.multipleFacesDetected');
+            } else if (state.faceTooBig) {
+              return t('livenessDetectionScreen.faceTooBig');
+            } else if (state.faceDetected) {
+              return t('livenessDetectionScreen.followInstructions');
+            } else {
+              return t('livenessDetectionScreen.placeFaceInsideCircle');
+            }
+          })()
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.instructionsContainerBottom,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.action,
+          children: state.faceDetected && !state.faceTooBig && !state.multipleFacesDetected && !state.brightnessLow && instructions[state.currentInstruction]?.instruction
+        })
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.footer,
+      children: /*#__PURE__*/_jsx(NavigationManager, {
+        ref: navigationManagerRef
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white'
+  },
+  circularProgress: {
+    width: PREVIEW_SIZE,
+    height: PREVIEW_SIZE,
+    marginTop: PREVIEW_RECT.minY,
+    marginLeft: PREVIEW_RECT.minX
+  },
+  animation: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    zIndex: 1
+  },
+  svgMask: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    zIndex: 1
+  },
+  instructionsContainerTop: {
+    flex: 1,
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    height: windowHeight / 4,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    zIndex: 1,
+    padding: 20
+  },
+  instructionsContainerBottom: {
+    flex: 1,
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    height: windowHeight / 4,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    zIndex: 1,
+    padding: 20,
+    gap: 20
+  },
+  instructions: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: 20,
+    color: 'black'
+  },
+  action: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: 'black'
+  },
+  footer: {
+    position: 'absolute',
+    flex: 0,
+    bottom: 0,
+    width: '100%',
+    zIndex: 1
+  },
+  guide: {
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    gap: 10,
+    backgroundColor: 'white'
+  },
+  guideAnimation: {
+    width: 250,
+    height: 250,
+    alignSelf: 'center'
+  },
+  guideHeader: {
+    color: 'black',
+    fontSize: 18,
+    textAlign: 'center',
+    fontWeight: 'bold'
+  },
+  guidePoints: {
+    display: 'flex',
+    gap: 10,
+    padding: 10
+  },
+  guideText: {
+    color: 'black',
+    fontSize: 14
+  }
+});
+export default LivenessDetectionScreen;

package/lib/module/Screens/Static/QrCodeScanningScreen.js

@@ -0,0 +1,36 @@
+"use strict";
+
+import React from 'react';
+import { SafeAreaView, StyleSheet } from 'react-native';
+import AppContext from "../../Shared/Contexts/AppContext.js";
+import QrCodeScannerCamera from "../../Shared/Components/QrCodeScannerCamera.js";
+import { useNavigation } from '@react-navigation/native';
+import { handleDeepLink } from "../../Shared/Libs/deeplink.utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const QrCodeScanningScreen = () => {
+  const appContext = React.useContext(AppContext);
+  const navigation = useNavigation();
+  const onQrCodeScanned = data => {
+    const [bUrl, sId] = handleDeepLink({
+      url: data
+    });
+    if (bUrl && sId) {
+      appContext.baseUrl = bUrl;
+      appContext.identificationInfo.sessionId = sId;
+      navigation.navigate('VerificationSessionCheckScreen');
+    }
+  };
+  return /*#__PURE__*/_jsx(SafeAreaView, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsx(QrCodeScannerCamera, {
+      onQrCodeScanned: onQrCodeScanned
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white'
+  }
+});
+export default QrCodeScanningScreen;