@trustchex/react-native-sdk 1.374.0 → 1.409.0

package/lib/module/Screens/Debug/BarcodeTestScreen.js

@@ -0,0 +1,308 @@
+"use strict";
+
+import React, { useState, useRef, useCallback } from 'react';
+import { View, StyleSheet, Text, ScrollView, StatusBar, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { TrustchexCamera } from "../../Shared/Components/TrustchexCamera.js";
+import { useKeepAwake } from "../../Shared/Libs/native-keep-awake.utils.js";
+
+// ML Kit barcode format constants
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BARCODE_FORMAT_NAMES = {
+  1: 'Code 128',
+  2: 'Code 39',
+  4: 'Code 93',
+  8: 'Codabar',
+  16: 'Data Matrix',
+  32: 'EAN-13',
+  64: 'EAN-8',
+  128: 'ITF',
+  256: 'QR Code',
+  512: 'UPC-A',
+  1024: 'UPC-E',
+  2048: 'PDF417',
+  4096: 'Aztec'
+};
+function formatName(format) {
+  return BARCODE_FORMAT_NAMES[format] ?? `Format(${format})`;
+}
+const BarcodeTestScreen = () => {
+  useKeepAwake();
+  const cameraRef = useRef(null);
+  const [barcodes, setBarcodes] = useState([]);
+  const [history, setHistory] = useState([]);
+  const [isPaused, setIsPaused] = useState(false);
+  const [cameraLayout, setCameraLayout] = useState({
+    width: 1,
+    height: 1
+  });
+  const [frameSize, setFrameSize] = useState({
+    width: 1080,
+    height: 1920
+  });
+  const handleCameraLayout = useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setCameraLayout({
+      width,
+      height
+    });
+  }, []);
+  const handleFrame = useCallback(event => {
+    if (isPaused) return;
+    const frame = event.nativeEvent.frame;
+    if (frame.width && frame.height) {
+      setFrameSize({
+        width: frame.width,
+        height: frame.height
+      });
+    }
+    if (frame.barcodes && frame.barcodes.length > 0) {
+      setBarcodes(frame.barcodes);
+      setHistory(prev => {
+        const incoming = frame.barcodes;
+        const next = [...prev];
+        for (const b of incoming) {
+          const alreadyRecent = next.slice(0, 5).some(h => h.rawValue === b.rawValue);
+          if (!alreadyRecent) {
+            next.unshift({
+              rawValue: b.rawValue,
+              displayValue: b.displayValue,
+              format: b.format,
+              timestamp: Date.now()
+            });
+          }
+        }
+        return next.slice(0, 30);
+      });
+    } else {
+      setBarcodes([]);
+    }
+  }, [isPaused]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(StatusBar, {
+      barStyle: "light-content",
+      backgroundColor: "transparent",
+      translucent: true
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.cameraWrapper,
+      onLayout: handleCameraLayout,
+      children: [/*#__PURE__*/_jsx(TrustchexCamera, {
+        ref: cameraRef,
+        style: StyleSheet.absoluteFill,
+        cameraType: "back",
+        enableFrameProcessing: true,
+        enableFaceDetection: false,
+        enableTextRecognition: false,
+        enableBarcodeScanning: true,
+        includeBase64: false,
+        targetFps: 15,
+        onFrameAvailable: handleFrame
+      }), barcodes.map((b, i) => {
+        const bb = b.boundingBox;
+        if (!bb) return null;
+        const scaleX = cameraLayout.width / frameSize.width;
+        const scaleY = cameraLayout.height / frameSize.height;
+        const left = bb.left * scaleX;
+        const top = bb.top * scaleY;
+        const width = (bb.right - bb.left) * scaleX;
+        const height = (bb.bottom - bb.top) * scaleY;
+        return /*#__PURE__*/_jsx(View, {
+          style: [styles.barcodeBoundingBox, {
+            left,
+            top,
+            width,
+            height
+          }],
+          children: /*#__PURE__*/_jsx(View, {
+            style: styles.barcodeBoxLabel,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.barcodeBoxLabelText,
+              children: formatName(b.format)
+            })
+          })
+        }, i);
+      })]
+    }), /*#__PURE__*/_jsx(SafeAreaView, {
+      style: styles.panel,
+      edges: ['bottom'],
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.scrollView,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.panelContent,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.pauseButton,
+            onPress: () => setIsPaused(!isPaused),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.pauseButtonText,
+              children: isPaused ? 'Resume Processing' : 'Pause Processing'
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.title,
+            children: "Barcode Scanner"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.sectionTitle,
+            children: "Live Detections"
+          }), barcodes.length === 0 ? /*#__PURE__*/_jsx(Text, {
+            style: styles.bodyText,
+            children: "No barcode in frame"
+          }) : barcodes.map((b, i) => /*#__PURE__*/_jsxs(View, {
+            style: styles.barcodeRow,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.formatBadge,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.formatBadgeText,
+                children: formatName(b.format)
+              })
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.barcodeValue,
+              children: b.rawValue
+            })]
+          }, i)), /*#__PURE__*/_jsxs(Text, {
+            style: styles.sectionTitle,
+            children: ["History (", history.length, ")"]
+          }), history.length === 0 ? /*#__PURE__*/_jsx(Text, {
+            style: styles.bodyText,
+            children: "No barcodes detected yet"
+          }) : history.map((entry, i) => /*#__PURE__*/_jsxs(View, {
+            style: styles.historyRow,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.historyMeta,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: styles.formatBadge,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.formatBadgeText,
+                  children: formatName(entry.format)
+                })
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.historyTime,
+                children: new Date(entry.timestamp).toLocaleTimeString()
+              })]
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.barcodeValue,
+              children: entry.rawValue
+            })]
+          }, i))]
+        })
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000000'
+  },
+  cameraWrapper: {
+    flex: 2,
+    position: 'relative'
+  },
+  barcodeBoundingBox: {
+    position: 'absolute',
+    borderWidth: 2,
+    borderColor: '#00C853',
+    backgroundColor: 'rgba(0, 200, 83, 0.07)'
+  },
+  barcodeBoxLabel: {
+    position: 'absolute',
+    top: -14,
+    left: 0,
+    backgroundColor: '#00C853',
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 2
+  },
+  barcodeBoxLabelText: {
+    color: '#000000',
+    fontSize: 8,
+    fontWeight: 'bold'
+  },
+  panel: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.95)',
+    borderTopWidth: 2,
+    borderTopColor: '#00C853'
+  },
+  scrollView: {
+    flex: 1
+  },
+  panelContent: {
+    padding: 10
+  },
+  pauseButton: {
+    alignSelf: 'center',
+    borderWidth: 1,
+    borderColor: '#00C853',
+    borderRadius: 4,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    marginBottom: 8
+  },
+  pauseButtonText: {
+    color: '#00C853',
+    fontSize: 10,
+    fontWeight: 'bold'
+  },
+  title: {
+    color: '#00C853',
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    textAlign: 'center'
+  },
+  sectionTitle: {
+    color: '#00C853',
+    fontSize: 10,
+    fontWeight: 'bold',
+    marginTop: 6,
+    marginBottom: 4
+  },
+  bodyText: {
+    color: '#888888',
+    fontSize: 9,
+    fontFamily: 'monospace'
+  },
+  barcodeRow: {
+    marginBottom: 6
+  },
+  historyRow: {
+    marginBottom: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: '#333333',
+    paddingBottom: 6
+  },
+  historyMeta: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 2,
+    gap: 6
+  },
+  formatBadge: {
+    backgroundColor: '#00C853',
+    borderRadius: 3,
+    paddingHorizontal: 5,
+    paddingVertical: 2,
+    alignSelf: 'flex-start',
+    marginBottom: 2
+  },
+  formatBadgeText: {
+    color: '#000000',
+    fontSize: 8,
+    fontWeight: 'bold'
+  },
+  barcodeValue: {
+    color: '#FFFFFF',
+    fontSize: 9,
+    fontFamily: 'monospace',
+    lineHeight: 14
+  },
+  historyTime: {
+    color: '#888888',
+    fontSize: 8,
+    fontFamily: 'monospace'
+  }
+});
+export default BarcodeTestScreen;

package/lib/module/Screens/Debug/MRZTestScreen.js

@@ -5,19 +5,60 @@ import { View, StyleSheet, Text, ScrollView, StatusBar, TouchableOpacity } from
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { TrustchexCamera } from "../../Shared/Components/TrustchexCamera.js";
 import mrzUtils from "../../Shared/Libs/mrz.utils.js";
+import { useKeepAwake } from "../../Shared/Libs/native-keep-awake.utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MRZTestScreen = () => {
+  useKeepAwake();
   const cameraRef = useRef(null);
   const [mrzText, setMrzText] = useState('Waiting for MRZ...');
   const [mrzRawText, setMrzRawText] = useState('');
   const [mrzValid, setMrzValid] = useState(false);
   const [rawHistory, setRawHistory] = useState([]);
   const [isPaused, setIsPaused] = useState(false);
+  const [overlayBlocks, setOverlayBlocks] = useState([]);
+  const [cameraLayout, setCameraLayout] = useState({
+    width: 1,
+    height: 1
+  });
+  const [frameSize, setFrameSize] = useState({
+    width: 1080,
+    height: 1920
+  });
+  const handleCameraLayout = useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setCameraLayout({
+      width,
+      height
+    });
+  }, []);
   const handleFrame = useCallback(event => {
     if (isPaused) {
       return;
     }
     const frame = event.nativeEvent.frame;
+    if (frame.width && frame.height) {
+      setFrameSize({
+        width: frame.width,
+        height: frame.height
+      });
+    }
+    if (frame.textBlocks && frame.textBlocks.length > 0) {
+      const frameHeight = frame.height;
+      const bottomThreshold = frameHeight * 0.5;
+      const blocks = frame.textBlocks.map(block => {
+        const blockText = block.text || '';
+        return {
+          ...block,
+          isMrz: blockText.includes('<') && blockText.length >= 12 && (block.blockFrame ? block.blockFrame.y > bottomThreshold : false)
+        };
+      });
+      setOverlayBlocks(blocks);
+    } else {
+      setOverlayBlocks([]);
+    }
     if (frame.resultText) {
       setRawHistory(prev => {
         if (prev[0] === frame.resultText) {
@@ -62,17 +103,41 @@ const MRZTestScreen = () => {
       barStyle: "light-content",
       backgroundColor: "transparent",
       translucent: true
-    }), /*#__PURE__*/_jsx(TrustchexCamera, {
-      ref: cameraRef,
-      style: styles.camera,
-      cameraType: "back",
-      enableFrameProcessing: true,
-      enableFaceDetection: false,
-      enableTextRecognition: true,
-      enableBarcodeScanning: false,
-      includeBase64: false,
-      targetFps: 10,
-      onFrameAvailable: handleFrame
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.cameraWrapper,
+      onLayout: handleCameraLayout,
+      children: [/*#__PURE__*/_jsx(TrustchexCamera, {
+        ref: cameraRef,
+        style: StyleSheet.absoluteFill,
+        cameraType: "back",
+        enableFrameProcessing: true,
+        enableFaceDetection: false,
+        enableTextRecognition: true,
+        enableBarcodeScanning: false,
+        includeBase64: false,
+        targetFps: 10,
+        onFrameAvailable: handleFrame
+      }), overlayBlocks.map((block, i) => {
+        const bf = block.blockFrame;
+        if (!bf) return null;
+        const scaleX = cameraLayout.width / frameSize.width;
+        const scaleY = cameraLayout.height / frameSize.height;
+        return /*#__PURE__*/_jsx(View, {
+          style: [styles.boundingBox, block.isMrz ? styles.boundingBoxMrz : styles.boundingBoxText, {
+            left: bf.x * scaleX,
+            top: bf.y * scaleY,
+            width: bf.width * scaleX,
+            height: bf.height * scaleY
+          }],
+          children: block.isMrz && /*#__PURE__*/_jsx(View, {
+            style: styles.blockLabel,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.blockLabelText,
+              children: "MRZ"
+            })
+          })
+        }, i);
+      })]
     }), /*#__PURE__*/_jsx(SafeAreaView, {
       style: styles.mrzPanel,
       edges: ['bottom'],
@@ -119,8 +184,35 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#000000'
   },
-  camera: {
-    flex: 2
+  cameraWrapper: {
+    flex: 2,
+    position: 'relative'
+  },
+  boundingBox: {
+    position: 'absolute',
+    borderWidth: 1.5
+  },
+  boundingBoxText: {
+    borderColor: 'rgba(255, 255, 255, 0.25)'
+  },
+  boundingBoxMrz: {
+    borderColor: '#FFA500',
+    borderWidth: 2,
+    backgroundColor: 'rgba(255, 165, 0, 0.07)'
+  },
+  blockLabel: {
+    position: 'absolute',
+    top: -14,
+    left: 0,
+    backgroundColor: '#FFA500',
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 2
+  },
+  blockLabelText: {
+    color: '#000000',
+    fontSize: 8,
+    fontWeight: 'bold'
   },
   mrzPanel: {
     flex: 1,

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
@@ -153,10 +170,13 @@ const styles = StyleSheet.create({
   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,8 +9,10 @@ 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();
@@ -55,6 +57,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, {