@trustchex/react-native-sdk 1.267.0 → 1.354.0

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

@@ -1,7 +1,8 @@
 "use strict";
 
-import React, { useState, useEffect, useCallback } from 'react';
-import { Alert, View, Text, Image, StyleSheet } from 'react-native';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Alert, View, Text, Image, StyleSheet, Animated } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import NFCManager from 'react-native-nfc-manager';
 import DeviceInfo from 'react-native-device-info';
 import { eidReader } from "../EIDReader/eidReader.js";
@@ -23,6 +24,7 @@ const EIDScanner = ({
   isNFCSupported
 }) => {
   useKeepAwake();
+  const insets = useSafeAreaInsets();
   const [isScanning, setIsScanning] = React.useState(false);
   const [hasNfc, setHasNFC] = React.useState(false);
   const [isEnabled, setIsEnabled] = React.useState(false);
@@ -30,6 +32,39 @@ const EIDScanner = ({
   const [documentMRZInfo, setDocumentMRZInfo] = React.useState();
   const [documentFaceImageMimeType, setDocumentFaceImageMimeType] = React.useState();
   const [progress, setProgress] = React.useState(0);
+  const [progressStage, setProgressStage] = React.useState('');
+
+  // Animation for pulse indicator
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+
+  // Format date from YYMMDD to DD/MM/YYYY (matching Flutter SDK)
+  const formatDate = useCallback(dateStr => {
+    if (!dateStr) return '';
+    try {
+      // Check if it's YYMMDD format (6 digits from NFC)
+      if (dateStr.length === 6 && /^\d{6}$/.test(dateStr)) {
+        const yy = dateStr.substring(0, 2);
+        const mm = dateStr.substring(2, 4);
+        const dd = dateStr.substring(4, 6);
+
+        // Assume 19xx if YY >= 50, else 20xx
+        const year = parseInt(yy) >= 50 ? `19${yy}` : `20${yy}`;
+        return `${dd}/${mm}/${year}`;
+      }
+
+      // Otherwise try to parse as ISO 8601
+      const date = new Date(dateStr);
+      if (!isNaN(date.getTime())) {
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+      }
+      return dateStr;
+    } catch {
+      return dateStr;
+    }
+  }, []);
   const [isScanned, setIsScanned] = React.useState(false);
   const [hasGuideShown, setHasGuideShown] = React.useState(false);
   const {
@@ -45,6 +80,7 @@ const EIDScanner = ({
     setIsScanning(true);
     setIsScanned(false);
     setProgress(0);
+    setProgressStage('');
 
     // Track EID scan start using analytics helper
     const docType = documentType || 'UNKNOWN';
@@ -71,6 +107,16 @@ const EIDScanner = ({
       if (documentNumber && dateOfBirth && dateOfExpiry) {
         const passportData = await eidReader(documentNumber, dateOfBirth, dateOfExpiry, progressValue => {
           setProgress(progressValue);
+          // Update stage message based on progress
+          if (progressValue <= 20) {
+            setProgressStage(t('eidScannerScreen.connecting'));
+          } else if (progressValue <= 30) {
+            setProgressStage(t('eidScannerScreen.readingMRZ'));
+          } else if (progressValue < 100) {
+            setProgressStage(t('eidScannerScreen.readingFaceImage'));
+          } else {
+            setProgressStage(t('eidScannerScreen.completing'));
+          }
         });
         if (passportData) {
           const scanDuration = Date.now() - startTime;
@@ -113,6 +159,7 @@ const EIDScanner = ({
     } finally {
       setIsScanning(false);
       setProgress(0);
+      setProgressStage('');
       setHasGuideShown(false);
     }
   }, [documentNumber, dateOfBirth, dateOfExpiry, documentType, hasNfc, isEnabled, attemptNumber, t]);
@@ -173,14 +220,56 @@ const EIDScanner = ({
       setVoiceGuidanceMessage(message);
     }
   }, [hasGuideShown, hasNfc, isEnabled, isScanning, progress, isScanned, documentType, t, appContext.currentWorkflowStep?.data?.voiceGuidanceActive]);
+
+  // Pulse animation effect when scanning
+  useEffect(() => {
+    if (isScanning && progress > 0) {
+      const animation = Animated.loop(Animated.sequence([Animated.timing(pulseAnim, {
+        toValue: 1.3,
+        duration: 800,
+        useNativeDriver: true
+      }), Animated.timing(pulseAnim, {
+        toValue: 1,
+        duration: 800,
+        useNativeDriver: true
+      })]));
+      animation.start();
+      return () => animation.stop();
+    } else {
+      pulseAnim.setValue(1);
+    }
+  }, [isScanning, progress, pulseAnim]);
   useEffect(() => {
     if (voiceGuidanceMessage && appContext.currentWorkflowStep?.data?.voiceGuidanceActive) {
       speakWithDebounce(voiceGuidanceMessage);
     }
   }, [voiceGuidanceMessage, appContext.currentWorkflowStep?.data?.voiceGuidanceActive]);
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
-    children: !hasGuideShown && !isScanned ? /*#__PURE__*/_jsxs(View, {
+    children: [hasNfc && !isScanned && progress > 0 && /*#__PURE__*/_jsxs(View, {
+      style: [styles.topProgressContainer, {
+        paddingTop: insets.top + 16
+      }],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.progressTextContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.topScanningText,
+          children: progressStage || t('eidScannerScreen.readingDocument')
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: [styles.progressPercentage, {
+            color: appContext.branding.primaryColor
+          }],
+          children: [Math.round(progress), "%"]
+        })]
+      }), /*#__PURE__*/_jsx(NativeProgressBar, {
+        progress: progress / 100,
+        width: null,
+        height: 30,
+        borderRadius: 8,
+        color: appContext.branding.primaryColor,
+        backgroundColor: "#E5E5EA"
+      })]
+    }), !hasGuideShown && !isScanned ? /*#__PURE__*/_jsxs(View, {
       style: styles.guide,
       children: [/*#__PURE__*/_jsx(LottieView, {
         source: require('../../Shared/Animations/nfc.json'),
@@ -281,7 +370,7 @@ const EIDScanner = ({
             children: [t('eidScannerScreen.birthDate'), ":"]
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.mrzInfoText,
-            children: documentMRZInfo.getDateOfBirth()
+            children: formatDate(documentMRZInfo.getDateOfBirth())
           })]
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.mrzInfoItem,
@@ -299,7 +388,7 @@ const EIDScanner = ({
             children: [t('eidScannerScreen.expirationDate'), ":"]
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.mrzInfoText,
-            children: documentMRZInfo.getDateOfExpiry()
+            children: formatDate(documentMRZInfo.getDateOfExpiry())
           })]
         })]
       }), !hasNfc && /*#__PURE__*/_jsx(Text, {
@@ -332,16 +421,7 @@ const EIDScanner = ({
       }) || 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, {
+      })), hasNfc && isEnabled && isScanned && /*#__PURE__*/_jsx(View, {
         style: styles.buttonsContainer,
         children: /*#__PURE__*/_jsx(StyledButton, {
           mode: "contained",
@@ -354,7 +434,7 @@ const EIDScanner = ({
           children: t('eidScannerScreen.approveAndContinue')
         })
       })]
-    })
+    })]
   });
 };
 const styles = StyleSheet.create({
@@ -364,6 +444,51 @@ const styles = StyleSheet.create({
     gap: 10,
     padding: 20
   },
+  topProgressContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1000,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+    gap: 8
+  },
+  progressTextContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%'
+  },
+  topScanningText: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#000',
+    flex: 1
+  },
+  progressPercentage: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginLeft: 12
+  },
+  scanningIndicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8
+  },
+  pulseCircle: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    opacity: 0.8
+  },
+  scanningIndicatorText: {
+    fontSize: 14,
+    color: '#666',
+    fontWeight: '500'
+  },
   buttonsContainer: {
     flexDirection: 'column',
     gap: 10

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

@@ -2,17 +2,18 @@
 
 import { useIsFocused } from '@react-navigation/native';
 import { useKeepAwake } from "../Libs/native-keep-awake.utils.js";
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { StyleSheet, Text, View, Platform, Linking, Dimensions, ActivityIndicator, NativeModules } from 'react-native';
 import { useCameraDevice, useCameraPermission, Camera, useFrameProcessor, useCameraFormat, runAtTargetFps, useMicrophonePermission } from 'react-native-vision-camera';
 import { runAsync } from "../Libs/worklet.utils.js";
 import { useFaceDetector } from "../VisionCameraPlugins/FaceDetector/index.js";
 import { Worklets, useSharedValue } from 'react-native-worklets-core';
 import { crop } from "../VisionCameraPlugins/Cropper/index.js";
-import { isCircularRegionBright } from "../Libs/camera.utils.js";
+import { isCircularRegionBright, isBlurry } from "../Libs/camera.utils.js";
 import { useTranslation } from 'react-i18next';
 import StyledButton from "./StyledButton.js";
 import { useTheme } from "../Contexts/ThemeContext.js";
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const VIDEO_WIDTH = 1280;
 const VIDEO_HEIGHT = 720;
@@ -43,9 +44,7 @@ const FaceCamera = ({
     fps: 30
   }]);
   const isCameraInitialized = useSharedValue(false);
-  const {
-    detectFaces
-  } = useFaceDetector({
+  const faceDetectorOptions = useMemo(() => ({
     contourMode: 'none',
     landmarkMode: 'none',
     classificationMode: 'all',
@@ -54,7 +53,10 @@ const FaceCamera = ({
     autoScale: true,
     windowWidth: windowWidth,
     windowHeight: windowHeight
-  });
+  }), [windowWidth, windowHeight]);
+  const {
+    detectFaces
+  } = useFaceDetector(faceDetectorOptions);
   const {
     t
   } = useTranslation();
@@ -72,6 +74,7 @@ const FaceCamera = ({
   }, [cameraPermission, microphonePermission]);
   const handleFaces = Worklets.createRunOnJS((faces, image, isBright) => {
     if (faces.length > 0) {
+      console.log('[FaceCamera] handleFaces called - faces:', faces.length, 'bright:', isBright);
       onFacesDetected(faces, image, isBright);
     }
   });
@@ -151,6 +154,12 @@ const FaceCamera = ({
         }
         isBright = luminanceSum / pixelCount > 60;
       }
+
+      // Skip blurry frames to ensure sharp face captures
+      // Lower threshold (10) for better frame acceptance
+      if (isBlurry(frame, 10)) {
+        return;
+      }
       const image = crop(frame, {
         cropRegion: {
           top: 0,
@@ -163,10 +172,13 @@ const FaceCamera = ({
       });
       if (image && image.base64) {
         const faces = detectFaces(frame);
+        if (faces.length > 0) {
+          console.log('[FaceCamera] Faces detected:', faces.length);
+        }
         handleFaces(faces, image.base64, isBright);
       }
     } catch (error) {
-      console.error('Face detection error:', error);
+      console.error('[FaceCamera] Face detection error:', error);
     }
   };
   const frameProcessor = useFrameProcessor(frame => {
@@ -192,7 +204,7 @@ const FaceCamera = ({
     }
   }, [handleFaces, isCameraInitialized]);
   if (!permissionsRequested) {
-    return /*#__PURE__*/_jsx(View, {
+    return /*#__PURE__*/_jsx(SafeAreaView, {
       style: styles.permissionContainer,
       children: /*#__PURE__*/_jsx(ActivityIndicator, {
         size: "large",
@@ -202,7 +214,7 @@ const FaceCamera = ({
   }
   if (!cameraPermission.hasPermission) {
     // Camera permission denied by user - their choice, not actionable
-    return /*#__PURE__*/_jsxs(View, {
+    return /*#__PURE__*/_jsxs(SafeAreaView, {
       style: styles.permissionContainer,
       children: [/*#__PURE__*/_jsx(Text, {
         style: styles.permissionText,
@@ -218,7 +230,7 @@ const FaceCamera = ({
   }
   if (!microphonePermission.hasPermission) {
     // Microphone permission denied by user - their choice, not actionable
-    return /*#__PURE__*/_jsxs(View, {
+    return /*#__PURE__*/_jsxs(SafeAreaView, {
       style: styles.permissionContainer,
       children: [/*#__PURE__*/_jsx(Text, {
         style: styles.permissionText,
@@ -234,7 +246,7 @@ const FaceCamera = ({
   }
   if (device == null) {
     // No camera device - device limitation, not actionable
-    return /*#__PURE__*/_jsx(View, {
+    return /*#__PURE__*/_jsx(SafeAreaView, {
       style: styles.permissionContainer,
       children: /*#__PURE__*/_jsx(Text, {
         style: styles.permissionText,