@trustchex/react-native-sdk 1.161.0

package/lib/module/Shared/Components/EIDScanner.js

@@ -0,0 +1,372 @@
+"use strict";
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Alert, View, Text, Image, StyleSheet } from 'react-native';
+import NFCManager from 'react-native-nfc-manager';
+import { eidReader } from "../EIDReader/eidReader.js";
+import NativeProgressBar from "./NativeProgressBar.js";
+import { useTranslation } from 'react-i18next';
+import AppContext from "../Contexts/AppContext.js";
+import { Button } from 'react-native-paper';
+import LottieView from 'lottie-react-native';
+import { useKeepAwake } from "../Libs/native-keep-awake.utils.js";
+import { speakWithDebounce } from "../Libs/tts.utils.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const EIDScanner = ({
+  documentNumber,
+  dateOfBirth,
+  dateOfExpiry,
+  documentType,
+  onScanSuccess,
+  isNFCSupported
+}) => {
+  useKeepAwake();
+  const [isScanning, setIsScanning] = React.useState(false);
+  const [hasNfc, setHasNFC] = React.useState(false);
+  const [isEnabled, setIsEnabled] = React.useState(false);
+  const [documentFaceImage, setDocumentFaceImage] = React.useState();
+  const [documentMRZInfo, setDocumentMRZInfo] = React.useState();
+  const [documentFaceImageMimeType, setDocumentFaceImageMimeType] = React.useState();
+  const [progress, setProgress] = React.useState(0);
+  const [isScanned, setIsScanned] = React.useState(false);
+  const [hasGuideShown, setHasGuideShown] = React.useState(false);
+  const {
+    t
+  } = useTranslation();
+  const appContext = React.useContext(AppContext);
+  const [voiceGuidanceMessage, setVoiceGuidanceMessage] = useState();
+  const readNFC = useCallback(async () => {
+    setIsScanning(true);
+    setIsScanned(false);
+    setProgress(0);
+    try {
+      if (documentNumber && dateOfBirth && dateOfExpiry) {
+        const passportData = await eidReader(documentNumber, dateOfBirth, dateOfExpiry, progressValue => {
+          setProgress(progressValue);
+        });
+        if (passportData) {
+          setDocumentFaceImage(passportData.faceImage);
+          setDocumentMRZInfo(passportData.mrz);
+          setDocumentFaceImageMimeType(passportData.mimeType);
+          setIsScanned(true);
+        }
+      } else {
+        Alert.alert(t('general.error'), t('eidScannerScreen.invalidMRZFields'));
+      }
+    } catch (error) {
+      console.debug(error);
+      // Ignore error
+    } finally {
+      setIsScanning(false);
+      setProgress(0);
+      setHasGuideShown(false);
+    }
+  }, [documentNumber, dateOfBirth, dateOfExpiry, t]);
+  const getFieldsFromMRZ = useCallback(mrz => {
+    return {
+      documentCode: mrz.getDocumentCode(),
+      personalNumber: mrz.getPersonalNumber() || mrz.getOptionalData1(),
+      documentNumber: mrz.getDocumentNumber(),
+      firstName: mrz.getSecondaryIdentifier(),
+      lastName: mrz.getPrimaryIdentifier(),
+      birthDate: mrz.getDateOfBirth(),
+      expirationDate: mrz.getDateOfExpiry(),
+      issuingState: mrz.getIssuingState(),
+      sex: mrz.getGender().getStrCode(),
+      nationality: mrz.getNationality()
+    };
+  }, []);
+  useEffect(() => {
+    const checkIsSupported = async () => {
+      const deviceIsSupported = await NFCManager.isSupported();
+      setHasNFC(deviceIsSupported);
+      isNFCSupported && isNFCSupported(deviceIsSupported);
+      const deviceIsEnabled = await NFCManager.isEnabled();
+      setIsEnabled(deviceIsEnabled);
+    };
+    checkIsSupported();
+  }, [isNFCSupported, isScanning]);
+  useEffect(() => {
+    if (hasGuideShown) {
+      let message = '';
+      if (!hasNfc) {
+        message = t('eidScannerScreen.nfcNotSupported');
+      }
+      if (hasNfc && !isEnabled) {
+        message = t('eidScannerScreen.nfcNotEnabled');
+      }
+      if (hasNfc && isEnabled && isScanning && progress === 0) {
+        if (documentType === 'ID') {
+          message = t('eidScannerScreen.placeIDCardOnNFC');
+        } else if (documentType === 'PASSPORT') {
+          message = t('eidScannerScreen.placeDocumentOnNFC');
+        } else if (documentType === 'UNKNOWN') {
+          message = t('eidScannerScreen.placeDocumentOnNFC');
+        }
+      }
+      if (hasNfc && isEnabled && isScanning && progress > 0) {
+        message = t('eidScannerScreen.readingDocument');
+      }
+      if (hasNfc && isEnabled && isScanned) {
+        message = t('eidScannerScreen.checkYourInformation');
+      }
+      setVoiceGuidanceMessage(message);
+    }
+  }, [hasGuideShown, hasNfc, isEnabled, isScanning, progress, isScanned, documentType, t, appContext.currentWorkflowStep?.data?.voiceGuidanceActive]);
+  useEffect(() => {
+    if (voiceGuidanceMessage && appContext.currentWorkflowStep?.data?.voiceGuidanceActive) {
+      speakWithDebounce(voiceGuidanceMessage);
+    }
+  }, [voiceGuidanceMessage, appContext.currentWorkflowStep?.data?.voiceGuidanceActive]);
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: !hasGuideShown && !isScanned ? /*#__PURE__*/_jsxs(View, {
+      style: styles.guide,
+      children: [/*#__PURE__*/_jsx(LottieView, {
+        source: require('../../Shared/Animations/nfc.json'),
+        style: styles.guideAnimation,
+        loop: true,
+        autoPlay: true
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.guideHeader,
+        children: t('eidScannerScreen.guideHeader')
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.guidePoints,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.guideText,
+          children: t('eidScannerScreen.guideText')
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        mode: "contained",
+        onPress: () => {
+          setHasGuideShown(true);
+          readNFC();
+        },
+        children: t('eidScannerScreen.startScanning')
+      })]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [isScanned && documentFaceImage && documentFaceImageMimeType === 'image/jpeg' && /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri: `data:${documentFaceImageMimeType};base64,${documentFaceImage}`
+        },
+        style: styles.faceImage
+      }), isScanned && documentFaceImage &&
+      // TODO Add support for jp2 images
+      documentFaceImageMimeType === 'image/jp2' && /*#__PURE__*/_jsx(Text, {
+        style: styles.mainText,
+        children: t('eidScannerScreen.imageCannotBeShown')
+      }), isScanned && !documentFaceImage && /*#__PURE__*/_jsx(Text, {
+        style: styles.mainText,
+        children: t('eidScannerScreen.faceImageNotFound')
+      }), isScanned && documentMRZInfo && /*#__PURE__*/_jsxs(View, {
+        style: styles.mrzInfo,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.mrzInfoItem,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.mrzInfoLabel,
+            children: [t('eidScannerScreen.documentCode'), ":"]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.mrzInfoText,
+            children: documentMRZInfo.getDocumentCode()
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.mrzInfoItem,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.mrzInfoLabel,
+            children: [t('eidScannerScreen.nationality'), ":"]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.mrzInfoText,
+            children: documentMRZInfo.getNationality()
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.mrzInfoItem,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.mrzInfoLabel,
+            children: [t('eidScannerScreen.personalNumber'), ":"]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.mrzInfoText,
+            children: documentMRZInfo.getOptionalData1()
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.mrzInfoItem,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.mrzInfoLabel,
+            children: [t('eidScannerScreen.documentNumber'), ":"]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.mrzInfoText,
+            children: documentMRZInfo.getDocumentNumber()
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.mrzInfoItem,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.mrzInfoLabel,
+            children: [t('eidScannerScreen.name'), ":"]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.mrzInfoText,
+            children: documentMRZInfo.getSecondaryIdentifier()
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.mrzInfoItem,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.mrzInfoLabel,
+            children: [t('eidScannerScreen.surname'), ":"]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.mrzInfoText,
+            children: documentMRZInfo.getPrimaryIdentifier()
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.mrzInfoItem,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.mrzInfoLabel,
+            children: [t('eidScannerScreen.birthDate'), ":"]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.mrzInfoText,
+            children: documentMRZInfo.getDateOfBirth()
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.mrzInfoItem,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.mrzInfoLabel,
+            children: [t('eidScannerScreen.gender'), ":"]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.mrzInfoText,
+            children: documentMRZInfo.getGender().getStrCode()
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.mrzInfoItem,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.mrzInfoLabel,
+            children: [t('eidScannerScreen.expirationDate'), ":"]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.mrzInfoText,
+            children: documentMRZInfo.getDateOfExpiry()
+          })]
+        })]
+      }), !hasNfc && /*#__PURE__*/_jsx(Text, {
+        style: styles.mainText,
+        children: t('eidScannerScreen.nfcNotSupported')
+      }), hasNfc && !isEnabled && /*#__PURE__*/_jsxs(View, {
+        style: styles.buttonsContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.mainText,
+          children: t('eidScannerScreen.nfcNotEnabled')
+        }), /*#__PURE__*/_jsx(Button, {
+          mode: "contained",
+          onPress: async () => {
+            await NFCManager.goToNfcSetting();
+            await readNFC();
+          },
+          children: t('eidScannerScreen.enableNFC')
+        })]
+      }), hasNfc && isEnabled && isScanning && progress === 0 && /*#__PURE__*/_jsx(LottieView, {
+        source: require('../../Shared/Animations/nfc-scan.json'),
+        style: styles.guideAnimation,
+        loop: true,
+        autoPlay: true
+      }), hasNfc && isEnabled && isScanning && progress === 0 && (documentType === 'ID' && /*#__PURE__*/_jsx(Text, {
+        style: styles.mainText,
+        children: t('eidScannerScreen.placeIDCardOnNFC')
+      }) || documentType === 'PASSPORT' && /*#__PURE__*/_jsx(Text, {
+        style: styles.mainText,
+        children: t('eidScannerScreen.placePassportOnNFC')
+      }) || documentType === 'UNKNOWN' && /*#__PURE__*/_jsx(Text, {
+        style: styles.mainText,
+        children: t('eidScannerScreen.placeDocumentOnNFC')
+      })), hasNfc && isEnabled && isScanning && progress > 0 && /*#__PURE__*/_jsx(Text, {
+        style: styles.mainText,
+        children: t('eidScannerScreen.readingDocument')
+      }), hasNfc && !isScanned && progress > 0 && /*#__PURE__*/_jsx(NativeProgressBar, {
+        progress: progress / 100,
+        width: null,
+        height: 30,
+        borderRadius: 8,
+        color: appContext.branding.primaryColor
+      }), hasNfc && isEnabled && isScanned && /*#__PURE__*/_jsx(View, {
+        style: styles.buttonsContainer,
+        children: /*#__PURE__*/_jsx(Button, {
+          mode: "contained",
+          disabled: !documentFaceImage || !documentMRZInfo,
+          onPress: () => {
+            if (onScanSuccess && documentMRZInfo && documentFaceImage && documentFaceImageMimeType) {
+              onScanSuccess(getFieldsFromMRZ(documentMRZInfo), documentFaceImage, documentFaceImageMimeType);
+            }
+          },
+          children: t('eidScannerScreen.approveAndContinue')
+        })
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    gap: 10,
+    padding: 20
+  },
+  buttonsContainer: {
+    flexDirection: 'column',
+    gap: 10
+  },
+  mainText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: 'black',
+    textAlign: 'center'
+  },
+  faceImage: {
+    width: 150,
+    height: 150,
+    borderRadius: 150,
+    borderColor: 'lightgray',
+    borderWidth: 1,
+    alignSelf: 'center'
+  },
+  mrzInfo: {
+    flexDirection: 'column',
+    width: '100%'
+  },
+  mrzInfoItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderBottomColor: 'lightgray',
+    borderBottomWidth: 1,
+    paddingVertical: 5
+  },
+  mrzInfoLabel: {
+    color: 'black',
+    fontWeight: 'bold'
+  },
+  mrzInfoText: {
+    color: 'black'
+  },
+  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 EIDScanner;

package/lib/module/Shared/Components/FaceCamera.js

@@ -0,0 +1,223 @@
+"use strict";
+
+import { useIsFocused } from '@react-navigation/native';
+import { useKeepAwake } from "../Libs/native-keep-awake.utils.js";
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, View, Platform, Linking, Dimensions } from 'react-native';
+import { useCameraDevice, useCameraPermission, Camera, useFrameProcessor, useCameraFormat, runAtTargetFps, useMicrophonePermission, runAsync } from 'react-native-vision-camera';
+import { useFaceDetector } from "../VisionCameraPlugins/FaceDetector/index.js";
+import { Worklets, useSharedValue } from 'react-native-worklets-core';
+import { crop } from "../VisionCameraPlugins/Cropper/index.js";
+import { isFrameBright } from "../Libs/camera.utils.js";
+import { useTranslation } from 'react-i18next';
+import { ActivityIndicator, Button } from 'react-native-paper';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VIDEO_WIDTH = 1280;
+const VIDEO_HEIGHT = 720;
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+const FaceCamera = ({
+  onFacesDetected,
+  onCameraInitialized
+}) => {
+  useKeepAwake();
+  const cameraPermission = useCameraPermission();
+  const microphonePermission = useMicrophonePermission();
+  const [permissionsRequested, setPermissionsRequested] = useState(false);
+  const cameraRef = React.useRef(null);
+  const isFocused = useIsFocused();
+  const [isActive, setIsActive] = useState(false);
+  const device = useCameraDevice('front');
+  const format = useCameraFormat(device, [{
+    videoResolution: {
+      width: VIDEO_WIDTH,
+      height: VIDEO_HEIGHT
+    },
+    iso: 'max',
+    photoHdr: false,
+    videoHdr: false,
+    fps: 30
+  }]);
+  const isCameraInitialized = useSharedValue(false);
+  const {
+    detectFaces
+  } = useFaceDetector({
+    contourMode: 'none',
+    landmarkMode: 'none',
+    classificationMode: 'all',
+    performanceMode: 'accurate',
+    trackingEnabled: false,
+    autoScale: true,
+    windowWidth: windowWidth,
+    windowHeight: windowHeight
+  });
+  const {
+    t
+  } = useTranslation();
+  useEffect(() => {
+    const requestPermissions = async () => {
+      if (!cameraPermission.hasPermission) {
+        await cameraPermission.requestPermission();
+      }
+      if (!microphonePermission.hasPermission) {
+        await microphonePermission.requestPermission();
+      }
+      setPermissionsRequested(true);
+    };
+    requestPermissions();
+  }, [cameraPermission, microphonePermission]);
+  const handleFaces = Worklets.createRunOnJS((faces, image, isBright) => {
+    if (faces.length > 0) {
+      onFacesDetected(faces, image, isBright);
+    }
+  });
+  useEffect(() => {
+    if (!!device && !!format && isFocused) {
+      setIsActive(true);
+    } else {
+      setIsActive(false);
+    }
+    return () => {
+      setIsActive(false);
+    };
+  }, [device, format, isFocused]);
+  const handleWorklet = frame => {
+    'worklet';
+
+    try {
+      const isBright = isFrameBright(frame);
+      const image = crop(frame, {
+        cropRegion: {
+          top: 0,
+          left: 0,
+          width: 100,
+          height: 100
+        },
+        includeImageBase64: true,
+        saveAsFile: false
+      });
+      if (image && image.base64) {
+        const faces = detectFaces(frame);
+        handleFaces(faces, image.base64, isBright);
+      }
+    } catch (error) {
+      console.error('Face detection error:', error);
+    }
+  };
+  const frameProcessor = useFrameProcessor(frame => {
+    'worklet';
+
+    if (!isCameraInitialized.value) {
+      return;
+    }
+    // iOS: Run at target 6 FPS using runAtTargetFps
+    if (Platform.OS === 'ios') {
+      runAtTargetFps(6, () => {
+        'worklet';
+
+        handleWorklet(frame);
+      });
+    } else {
+      // Android: Run async without throttling
+      runAsync(frame, () => {
+        'worklet';
+
+        handleWorklet(frame);
+      });
+    }
+  }, [handleFaces, isCameraInitialized]);
+  if (!permissionsRequested) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.permissionContainer,
+      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "large"
+      })
+    });
+  }
+  if (!cameraPermission.hasPermission) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.permissionContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.permissionText,
+        children: t('general.noCameraPermissionGiven')
+      }), /*#__PURE__*/_jsx(Button, {
+        mode: "contained",
+        onPress: () => {
+          Linking.openSettings();
+        },
+        children: t('general.openSettings')
+      })]
+    });
+  }
+  if (!microphonePermission.hasPermission) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.permissionContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.permissionText,
+        children: t('general.noMicrophonePermissionGiven')
+      }), /*#__PURE__*/_jsx(Button, {
+        mode: "contained",
+        onPress: () => {
+          Linking.openSettings();
+        },
+        children: t('general.openSettings')
+      })]
+    });
+  }
+  if (device == null) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.permissionContainer,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.permissionText,
+        children: t('general.noCameraDetected')
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: StyleSheet.absoluteFill,
+    children: /*#__PURE__*/_jsx(Camera, {
+      ref: cameraRef,
+      frameProcessor: frameProcessor,
+      style: StyleSheet.absoluteFill,
+      device: device,
+      format: format,
+      isActive: isActive,
+      video: true,
+      photo: false,
+      audio: true,
+      videoBitRate: 'extra-low',
+      fps: Math.max(format?.minFps ?? 0, 30),
+      onInitialized: () => {
+        isCameraInitialized.value = true;
+        onCameraInitialized(cameraRef.current);
+      }
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center'
+  },
+  permissionContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 100,
+    backgroundColor: 'white',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 20,
+    padding: 20
+  },
+  permissionText: {
+    color: 'black',
+    fontSize: 20,
+    textAlign: 'center',
+    fontWeight: 'bold'
+  }
+});
+export default FaceCamera;