@trustchex/react-native-sdk 1.381.0 → 1.464.0

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

@@ -10,9 +10,12 @@ import { getI18n, useTranslation } from 'react-i18next';
 import StyledButton from "../../Shared/Components/StyledButton.js";
 import NativeDeviceInfo from "../../Shared/Libs/native-device-info.utils.js";
 import { speakWithDebounce } from "../../Shared/Libs/tts.utils.js";
+import { useStatusBarWhiteBackground } from "../../Shared/Libs/status-bar.utils.js";
 import { trackFunnelStep, useScreenTracking, trackConsentGiven, trackVerificationStart, trackVerificationComplete, trackError } from "../../Shared/Libs/analytics.utils.js";
+import { useKeepAwake } from "../../Shared/Libs/native-keep-awake.utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ContractAcceptanceScreen = () => {
+  useKeepAwake();
   const [isEnabled, setIsEnabled] = useState(false);
   const [isReady, setIsReady] = useState(false);
   const appContext = useContext(AppContext);
@@ -27,6 +30,9 @@ const ContractAcceptanceScreen = () => {
 
   // Track screen view and exit
   useScreenTracking('contract_acceptance');
+
+  // Configure status bar for white background
+  useStatusBarWhiteBackground();
   useEffect(() => {
     const contracts = appContext.currentWorkflowStep?.data?.contracts;
     if (!contracts) {
@@ -65,38 +71,49 @@ const ContractAcceptanceScreen = () => {
   const generateHumanReadableIdentifier = useCallback(async () => {
     return await NativeDeviceInfo.generateHumanReadableIdentifier();
   }, []);
+
+  // Early return if workflow step data is not available (after all hooks)
+  if (!appContext.currentWorkflowStep || !appContext.currentWorkflowStep.data) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs(SafeAreaView, {
     style: styles.container,
-    children: [/*#__PURE__*/_jsx(WebView, {
-      source: {
-        uri: contractUrl || ''
-      },
-      javaScriptEnabled: true,
-      domStorageEnabled: false,
-      scalesPageToFit: false,
-      scrollEnabled: true,
-      style: styles.webView,
-      onError: syntheticEvent => {
-        const {
-          nativeEvent
-        } = syntheticEvent;
-        trackError('CONTRACT_WEBVIEW_ERROR', nativeEvent.description || 'Failed to load contract', 'contract_acceptance', 'medium', {
-          recoverable: true,
-          userAction: 'load_contract'
-        });
-      },
-      onLoadEnd: event => {
-        if (event.nativeEvent.url === contractUrl) {
-          setIsReady(true);
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.webViewContainer, {
+        paddingHorizontal: Math.max(insets.left, insets.right),
+        paddingTop: insets.top
+      }],
+      children: /*#__PURE__*/_jsx(WebView, {
+        source: {
+          uri: contractUrl || ''
+        },
+        javaScriptEnabled: true,
+        domStorageEnabled: false,
+        scalesPageToFit: false,
+        scrollEnabled: true,
+        style: styles.webView,
+        onError: syntheticEvent => {
+          const {
+            nativeEvent
+          } = syntheticEvent;
+          trackError('CONTRACT_WEBVIEW_ERROR', nativeEvent.description || 'Failed to load contract', 'contract_acceptance', 'medium', {
+            recoverable: true,
+            userAction: 'load_contract'
+          });
+        },
+        onLoadEnd: event => {
+          if (event.nativeEvent.url === contractUrl) {
+            setIsReady(true);
 
-          // Track contract acceptance started
-          trackVerificationStart('CONTRACT_ACCEPTANCE');
-          if (appContext.currentWorkflowStep?.data?.voiceGuidanceActive) {
-            speakWithDebounce(t('termsOfUseAndDataPrivacyScreen.footerText'));
+            // Track contract acceptance started
+            trackVerificationStart('CONTRACT_ACCEPTANCE');
+            if (appContext.currentWorkflowStep?.data?.voiceGuidanceActive) {
+              speakWithDebounce(t('termsOfUseAndDataPrivacyScreen.footerText'));
+            }
           }
-        }
-      },
-      onScroll: hasReachedEnd
+        },
+        onScroll: hasReachedEnd
+      })
     }), /*#__PURE__*/_jsxs(View, {
       style: [styles.footer, {
         paddingBottom: insets.bottom
@@ -146,17 +163,17 @@ const ContractAcceptanceScreen = () => {
   });
 };
 const styles = StyleSheet.create({
-  safeAreaContainer: {
+  container: {
     flex: 1,
     backgroundColor: 'white'
   },
-  container: {
-    flex: 1
+  webViewContainer: {
+    flex: 1,
+    width: '100%'
   },
   webView: {
     flex: 1,
     width: '100%',
-    height: '100%',
     resizeMode: 'contain'
   },
   footer: {

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

@@ -9,18 +9,33 @@ import AppContext from "../../Shared/Contexts/AppContext.js";
 import IdentityDocumentCamera from "../../Shared/Components/IdentityDocumentCamera.js";
 import { useTranslation } from 'react-i18next';
 import { trackFunnelStep, useScreenTracking, trackVerificationStart, trackVerificationComplete } from "../../Shared/Libs/analytics.utils.js";
+import { useKeepAwake } from "../../Shared/Libs/native-keep-awake.utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const IdentityDocumentEIDScanningScreen = () => {
+  useKeepAwake();
   const appContext = useContext(AppContext);
   const navigationManagerRef = React.useRef(null);
   const insets = useSafeAreaInsets();
   const [idFrontSideData, setIDFrontSideData] = useState(null);
   const [idBackSideData, setIDBackSideData] = useState(null);
   const [passportData, setPassportData] = useState();
-  const [documentNumber, setDocumentNumber] = useState();
-  const [dateOfBirth, setDateOfBirth] = useState();
-  const [dateOfExpiry, setDateOfExpiry] = useState();
-  const [documentType, setDocumentType] = useState();
+  const [documentNumber, setDocumentNumber] = useState(() => {
+    const mrzFields = appContext.identificationInfo.scannedDocument?.mrzFields;
+    return mrzFields?.documentNumber ?? undefined;
+  });
+  const [dateOfBirth, setDateOfBirth] = useState(() => {
+    const mrzFields = appContext.identificationInfo.scannedDocument?.mrzFields;
+    return mrzFields?.birthDate ?? undefined;
+  });
+  const [dateOfExpiry, setDateOfExpiry] = useState(() => {
+    const mrzFields = appContext.identificationInfo.scannedDocument?.mrzFields;
+    return mrzFields?.expirationDate ?? undefined;
+  });
+  const [documentType, setDocumentType] = useState(() => {
+    const dc = appContext.identificationInfo.scannedDocument?.mrzFields?.documentCode;
+    if (!dc) return undefined;
+    return dc === 'I' ? 'ID' : dc === 'P' ? 'PASSPORT' : 'UNKNOWN';
+  });
   const [isNFCSupported, setIsNFCSupported] = useState(false);
   const {
     t
@@ -55,6 +70,9 @@ const IdentityDocumentEIDScanningScreen = () => {
     setAllowedDocumentTypes(appContext.currentWorkflowStep?.data?.allowedDocumentTypes ?? null);
     setAllowedCountries(appContext.currentWorkflowStep?.data?.allowedCountries ?? null);
   }, [appContext.currentWorkflowStep]);
+  if (!appContext.currentWorkflowStep) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs(SafeAreaView, {
     style: styles.safeAreaContainer,
     children: [documentNumber && dateOfBirth && dateOfExpiry ? /*#__PURE__*/_jsx(View, {

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

@@ -8,8 +8,10 @@ import AppContext from "../../Shared/Contexts/AppContext.js";
 import NavigationManager from "../../Shared/Components/NavigationManager.js";
 import { useTranslation } from 'react-i18next';
 import { trackFunnelStep, useScreenTracking, trackVerificationStart, trackVerificationComplete } from "../../Shared/Libs/analytics.utils.js";
+import { useKeepAwake } from "../../Shared/Libs/native-keep-awake.utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const IdentityDocumentScanningScreen = () => {
+  useKeepAwake();
   const [idFrontSideData, setIDFrontSideData] = useState(null);
   const [idBackSideData, setIDBackSideData] = useState(null);
   const [passportData, setPassportData] = useState();
@@ -83,6 +85,9 @@ const IdentityDocumentScanningScreen = () => {
     setAllowedDocumentTypes(appContext.currentWorkflowStep?.data?.allowedDocumentTypes ?? null);
     setAllowedCountries(appContext.currentWorkflowStep?.data?.allowedCountries ?? null);
   }, [appContext.currentWorkflowStep]);
+  if (!appContext.currentWorkflowStep) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs(SafeAreaView, {
     style: styles.container,
     children: [/*#__PURE__*/_jsx(IdentityDocumentCamera, {

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

@@ -3,24 +3,25 @@
 import Svg, { Rect as SvgRect, Circle, Mask } from 'react-native-svg';
 import { useNavigation } from '@react-navigation/native';
 import React, { useState, useReducer, useContext, useEffect, useCallback, useRef } from 'react';
-import { StyleSheet, Text, View, Dimensions, Vibration } from 'react-native';
+import { Animated, Easing, StyleSheet, Text, View, Dimensions, Platform, Vibration, StatusBar } from 'react-native';
 import { useSafeAreaInsets, SafeAreaView } from 'react-native-safe-area-context';
 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 StyledButton from "../../Shared/Components/StyledButton.js";
 import LottieView from 'lottie-react-native';
 import { speak, resetLastMessage } from "../../Shared/Libs/tts.utils.js";
+import { useStatusBarWhiteBackground } from "../../Shared/Libs/status-bar.utils.js";
 import { trackFunnelStep, useScreenTracking, trackVerificationStart, trackVerificationComplete } from "../../Shared/Libs/analytics.utils.js";
+import { useKeepAwake } from "../../Shared/Libs/native-keep-awake.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_SIZE = windowWidth * 0.95;
 const PREVIEW_RECT = {
   minX: (windowWidth - PREVIEW_SIZE) / 2,
   minY: (windowHeight - PREVIEW_SIZE) / 2,
@@ -31,6 +32,7 @@ const PREVIEW_EDGE_OFFSET = 10;
 const TURN_ANGLE_LIMIT = 15;
 const LOOK_STRAIGHT_ANGLE_LIMIT = 10;
 const LivenessDetectionScreen = () => {
+  useKeepAwake();
   const [camera, setCamera] = useState(null);
   const navigation = useNavigation();
   const appContext = useContext(AppContext);
@@ -41,9 +43,32 @@ const LivenessDetectionScreen = () => {
   const [isRecording, setIsRecording] = useState(false);
   const insets = useSafeAreaInsets();
   const referenceFaceTrackingId = useRef(null);
+  const recordingDotOpacity = useRef(new Animated.Value(1)).current;
 
   // Track screen view and exit
   useScreenTracking('liveness_detection');
+  useEffect(() => {
+    if (isRecording) {
+      const pulse = Animated.loop(Animated.sequence([Animated.timing(recordingDotOpacity, {
+        toValue: 0.2,
+        duration: 600,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true
+      }), Animated.timing(recordingDotOpacity, {
+        toValue: 1,
+        duration: 600,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true
+      })]));
+      pulse.start();
+      return () => pulse.stop();
+    } else {
+      recordingDotOpacity.setValue(1);
+    }
+  }, [isRecording, recordingDotOpacity]);
+
+  // Configure status bar for white background
+  useStatusBarWhiteBackground();
   const [initialState, setInitialState] = useState({
     brightnessLow: false,
     faceDetected: false,
@@ -95,7 +120,23 @@ const LivenessDetectionScreen = () => {
   const [instructionList, setInstructionList] = useState([]);
   const [hasGuideShown, setHasGuideShown] = useState(false);
   const stoppingRecordingRef = useRef(false); // Track if we're already stopping to prevent multiple calls
-  const lastVoiceGuidanceMessage = useRef('');
+
+  // Configure status bar for white background
+  useStatusBarWhiteBackground();
+
+  // Update status bar when guide visibility changes
+  useEffect(() => {
+    if (hasGuideShown) {
+      // Camera view - use light icons
+      StatusBar.setBarStyle('light-content', true);
+    } else {
+      // Guide screen with white background - use dark icons
+      StatusBar.setBarStyle('dark-content', true);
+      if (Platform.OS === 'android') {
+        StatusBar.setBackgroundColor('#ffffff', true);
+      }
+    }
+  }, [hasGuideShown]);
   useEffect(() => {
     const il = Object.keys(instructions).filter(instruction => !['START', 'FINISH'].includes(instruction) && (
     // Look straight and blink is always included
@@ -115,7 +156,6 @@ const LivenessDetectionScreen = () => {
       processComplete: false,
       videoPath: ''
     });
-    lastVoiceGuidanceMessage.current = '';
     resetLastMessage();
   }, [instructions, appContext.currentWorkflowStep?.data?.allowedLivenessInstructionTypes]);
   const isCommandInProgress = useRef(false);
@@ -176,6 +216,13 @@ const LivenessDetectionScreen = () => {
     const rightOpen = face.rightEyeOpenProbability ?? 0;
     return leftOpen >= 0.8 && rightOpen >= 0.8;
   };
+  const areEyesVisible = face => {
+    // Relaxed check: eyes just need to be detected (not fully closed).
+    // Smiling naturally causes squinting, so a lower threshold is used.
+    const leftOpen = face.leftEyeOpenProbability ?? 0;
+    const rightOpen = face.rightEyeOpenProbability ?? 0;
+    return leftOpen >= 0.3 && rightOpen >= 0.3;
+  };
   const instructionReducer = (state, action) => {
     switch (action.type) {
       case 'RESET':
@@ -251,7 +298,6 @@ const LivenessDetectionScreen = () => {
           const nextInstruction = state.instructionList[nextInstructionIndex];
 
           // Reset TTS state when moving to any new instruction to ensure it speaks
-          lastVoiceGuidanceMessage.current = '';
           resetLastMessage();
 
           // Calculate progress based on actual action steps (excluding START and FINISH)
@@ -295,8 +341,7 @@ const LivenessDetectionScreen = () => {
     // Let the instruction advance first, then speak the next instruction
 
     // Only speak if message changed and is not empty
-    if (text && text !== lastVoiceGuidanceMessage.current) {
-      lastVoiceGuidanceMessage.current = text;
+    if (text) {
       // Bypass interval for liveness instructions to ensure all instructions are spoken
       speak(text, true);
     }
@@ -369,25 +414,33 @@ const LivenessDetectionScreen = () => {
       });
     }
 
-    // Calculate preview rect in frame coordinates (not screen coordinates)
-    // Preview circle is 80% of frame width, centered
-    const previewSizeInFrame = frameWidth * 0.8;
+    // Map the on-screen circle into frame coordinates.
+    // Camera uses FILL_CENTER / resizeAspectFill (cover): uniform scale filling
+    // the view, cropping overflow symmetrically.
+    const coverScale = Math.max(windowWidth / frameWidth, windowHeight / frameHeight);
+    const offsetX = (frameWidth - windowWidth / coverScale) / 2;
+    const offsetY = (frameHeight - windowHeight / coverScale) / 2;
     const previewRectInFrame = {
-      minX: (frameWidth - previewSizeInFrame) / 2,
-      minY: (frameHeight - previewSizeInFrame) / 2,
-      width: previewSizeInFrame,
-      height: previewSizeInFrame
-    };
-    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
+      minX: PREVIEW_RECT.minX / coverScale + offsetX,
+      minY: PREVIEW_RECT.minY / coverScale + offsetY,
+      width: PREVIEW_RECT.width / coverScale,
+      height: PREVIEW_RECT.height / coverScale
     };
-    const previewContainsFace = contains({
-      outside: previewRectInFrame,
-      inside: faceRectSmaller
-    });
+    const previewSizeInFrame = PREVIEW_RECT.width / coverScale;
+
+    // Check containment using face center + yaw-stable core radius.
+    // When the head turns (yaw), the bounding box grows wider but height stays
+    // constant — so min(width, height)/2 gives a stable size that doesn't
+    // falsely trigger an outside-circle reset during TURN_HEAD_LEFT/RIGHT.
+    const faceCenterX = face.bounds.x + face.bounds.width / 2;
+    const faceCenterY = face.bounds.y + face.bounds.height / 2;
+    const faceCoreRadius = Math.max(0, Math.min(face.bounds.width, face.bounds.height) / 2 - PREVIEW_EDGE_OFFSET / 2);
+    const circleCX = previewRectInFrame.minX + previewRectInFrame.width / 2;
+    const circleCY = previewRectInFrame.minY + previewRectInFrame.height / 2;
+    const circleR = previewSizeInFrame / 2;
+    const faceDx = faceCenterX - circleCX;
+    const faceDy = faceCenterY - circleCY;
+    const previewContainsFace = faceDx * faceDx + faceDy * faceDy <= (circleR - faceCoreRadius) * (circleR - faceCoreRadius);
     const multipleFacesDetected = faces.length > 1;
     if (!isImageBright) {
       // Brightness too low - reset progress if we've started the flow
@@ -547,8 +600,9 @@ const LivenessDetectionScreen = () => {
           // Ensure user is looking at camera (face direction check)
           const isFacingCamera = instructions.SMILE.minAngle < face.yawAngle && face.yawAngle < instructions.SMILE.maxAngle && instructions.SMILE.minAngle < face.pitchAngle && face.pitchAngle < instructions.SMILE.maxAngle;
 
-          // Check if smiling with sufficient probability AND looking at camera AND eyes open
-          if (smilingProb >= instructions.SMILE.minProbability && isFacingCamera && areEyesOpen(face)) {
+          // Check if smiling with sufficient probability AND looking at camera AND eyes visible
+          // Use relaxed eye check — smiling naturally causes squinting
+          if (smilingProb >= instructions.SMILE.minProbability && isFacingCamera && areEyesVisible(face)) {
             instructions.SMILE.photo = image;
             dispatch({
               type: 'NEXT_INSTRUCTION',
@@ -652,6 +706,9 @@ const LivenessDetectionScreen = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Empty array = only run on mount/unmount
 
+  if (!appContext.currentWorkflowStep || !appContext.currentWorkflowStep.data) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [hasGuideShown ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(FaceCamera, {
@@ -691,6 +748,21 @@ const LivenessDetectionScreen = () => {
           fill: "white",
           mask: "url(#hole-mask)"
         })]
+      }), isRecording && /*#__PURE__*/_jsx(View, {
+        style: [styles.recordingIndicatorContainer, {
+          top: PREVIEW_RECT.minY - 40
+        }],
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.recordingIndicator,
+          children: [/*#__PURE__*/_jsx(Animated.View, {
+            style: [styles.recordingDot, {
+              opacity: recordingDotOpacity
+            }]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.recordingText,
+            children: "REC"
+          })]
+        })
       }), /*#__PURE__*/_jsx(View, {
         style: [styles.instructionsContainerBottom, {
           top: PREVIEW_RECT.minY + PREVIEW_SIZE + 20
@@ -816,6 +888,33 @@ const styles = StyleSheet.create({
     width: '100%',
     zIndex: 1
   },
+  recordingIndicatorContainer: {
+    position: 'absolute',
+    width: '100%',
+    alignItems: 'center',
+    zIndex: 2
+  },
+  recordingIndicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 20
+  },
+  recordingDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: '#ef4444'
+  },
+  recordingText: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontWeight: '700',
+    letterSpacing: 1
+  },
   guide: {
     flex: 1,
     display: 'flex',