@test-web/react-native-sdk 2.2.0 → 2.4.0

package/src/screens/MrzCapture.tsx

@@ -1,253 +1,280 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { View, Text, StyleSheet, Alert } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useEffect, useRef, useState } from 'react';
+import { View, Text, ScrollView, Image } from 'react-native';
+import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
+import TextRecognition from '@react-native-ml-kit/text-recognition';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
 import { useIDM } from '../context/IDMConfigurationContext';
 import getStyles from '../styles/ScannerStyles';
-import Loader from '../components/common/Loader';
 import { captureMRZ } from '../apis';
-import { createFlowManager } from '../utils/flowManager';
+import { useNavigation } from '@react-navigation/native';
+import Loader from '../components/common/Loader';
+import Header from '../components/common/Header';
+import Button from '../components/ui/Button';
+import ThemedText from '../components/ui/ThemedText';
+import getPermissionStyles from '../styles/PermissionStyle';
+const overlayImage = require('../../assets/images/MRZOverlay.png');
 
-export default function MrzCapture() {
+function MrzCapture() {
   const { theme } = useTheme();
-  const { idmConf, setIDMConf } = useIDM();
   const orientation = useOrientation();
   const styles = getStyles(theme, orientation);
+  const permissionStyles = getPermissionStyles(theme, orientation);
   const navigation = useNavigation();
-  const [loading, setLoading] = useState(false);
-  const [scannedData, setScannedData] = useState<string | null>(null);
-  const [isScanning, setIsScanning] = useState(true);
-  const [hasPermission, setHasPermission] = useState(false);
-  const [device, setDevice] = useState<any>(null);
-  const cameraRef = useRef<any>(null);
-  const frameProcessorRef = useRef<any>(null);
-
-  // Get MRZ engine type from metadata
-  const getMRZEngine = () => {
-    const metadata = idmConf?.selectedCountryDetails?.selectedMetaData;
-    if (!metadata) return 'TD3';
-
-    const flowManager = createFlowManager(metadata);
-    return flowManager.getMRZEngine();
-  };
+  const { idmConf } = useIDM();
 
-  // Initialize camera with ML Kit
-  useEffect(() => {
-    let isMounted = true;
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const device = useCameraDevice('back');
+  const cameraRef = useRef<Camera>(null);
 
-    const initializeCamera = async () => {
-      try {
-        const { Camera, useCameraDevice, useCameraPermission } = require('react-native-vision-camera');
-        
-        const { hasPermission: hasPerm, requestPermission } = useCameraPermission();
-        
-        if (!hasPerm) {
-          const granted = await requestPermission();
-          if (!granted) {
-            navigation.navigate('CameraPermission' as never);
-            return;
-          }
-        }
-        
-        if (isMounted) {
-          setHasPermission(true);
-          
-          const backDevice = useCameraDevice('back');
-          if (!backDevice) {
-            navigation.navigate('NoCameraFound' as never);
-            return;
-          }
-          
-          setDevice(backDevice);
-        }
-      } catch (error) {
-        console.warn('Camera initialization failed:', error);
-        if (isMounted) {
-          simulateMRZScan();
-        }
-      }
-    };
+  const [isCallingAPI, setIsCallingAPI] = useState(false);
+  const [autoScan, setAutoScan] = useState(true);
+  const scanIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const isProcessingRef = useRef(false);
+  const apiCalledRef = useRef(false);
 
-    initializeCamera();
+  useEffect(() => {
+    if (!device) {
+      navigation.navigate('NoCameraFound' as never);
+    }
 
     return () => {
-      isMounted = false;
-      setIsScanning(false);
+      // Cleanup on unmount
+      if (scanIntervalRef.current) {
+        clearInterval(scanIntervalRef.current);
+      }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [device, navigation]);
 
-  // Process MRZ with ML Kit Text Recognition
-  const processMRZWithMLKit = async (frame: any) => {
-    if (!isScanning) return;
+  // Normalize MRZ text - same as demo-testing-sdk
+  const normalizeMrz = (text: string) => {
+    return text
+      .replace(/[«]/g, '<')
+      .replace(/0/g, 'O')
+      .replace(/[^A-Z0-9<]/gi, '');
+  };
 
+  // Extract MRZ - improved to get only MRZ lines
+  const extractMRZ = async (imagePath: string): Promise<string | null> => {
     try {
-      const { recognizeText } = require('@react-native-ml-kit/text-recognition');
-      
-      const result = await recognizeText(frame);
+      const result = await TextRecognition.recognize(imagePath);
       
-      if (result && result.text) {
-        // Check if text contains MRZ pattern
-        const lines = result.text.split('\n');
-        const mrzLines = lines.filter((line: string) => 
-          line.length >= 30 && /^[A-Z0-9<]+$/.test(line)
-        );
-
-        if (mrzLines.length >= 2) {
-          const mrzCode = mrzLines.join('\n');
-          handleMRZScanned(mrzCode);
+      // Get all normalized lines
+      const allLines = result.blocks
+        .flatMap(block => block.lines)
+        .map(line => normalizeMrz(line.text))
+        .filter(text => text.length > 0);
+
+      // Filter only MRZ lines (30-44 characters, only A-Z, 0-9, <)
+      const mrzLines = allLines.filter(text => /^[A-Z0-9<]{30,44}$/.test(text));
+
+      console.log('All lines:', allLines.length);
+      console.log('MRZ lines found:', mrzLines.length);
+      mrzLines.forEach((line, idx) => {
+        console.log(`MRZ ${idx + 1}:`, line, `(${line.length} chars)`);
+      });
+
+      if (mrzLines.length === 0) {
+        return null;
+      }
+
+      // Determine document type and extract correct MRZ
+      let finalMRZ = '';
+
+      // TD1: 3 lines of 30 characters (ID cards) - Total: 90 characters
+      if (mrzLines.length >= 3) {
+        const td1Lines = mrzLines.filter(l => l.length === 30);
+        if (td1Lines.length >= 3) {
+          const combined = td1Lines.slice(0, 3).join('');
+          // Check if total matches: 30 + 30 + 30 = 90
+          if (combined.length === 90) {
+            finalMRZ = combined;
+            console.log('TD1 detected (3x30):', finalMRZ.length, 'chars - MATCH!');
+            return finalMRZ;
+          }
         }
       }
-    } catch (error) {
-      console.warn('ML Kit text recognition error:', error);
+
+      // TD3: 2 lines of 44 characters (Passports) - Total: 88 characters
+      if (mrzLines.length >= 2) {
+        const td3Lines = mrzLines.filter(l => l.length === 44);
+        if (td3Lines.length >= 2) {
+          const combined = td3Lines.slice(0, 2).join('');
+          // Check if total matches: 44 + 44 = 88
+          if (combined.length === 88) {
+            finalMRZ = combined;
+            console.log('TD3 detected (2x44):', finalMRZ.length, 'chars - MATCH!');
+            return finalMRZ;
+          }
+        }
+      }
+
+      // TD2: 2 lines of 36 characters - Total: 72 characters
+      if (mrzLines.length >= 2) {
+        const td2Lines = mrzLines.filter(l => l.length === 36);
+        if (td2Lines.length >= 2) {
+          const combined = td2Lines.slice(0, 2).join('');
+          // Check if total matches: 36 + 36 = 72
+          if (combined.length === 72) {
+            finalMRZ = combined;
+            console.log('TD2 detected (2x36):', finalMRZ.length, 'chars - MATCH!');
+            return finalMRZ;
+          }
+        }
+      }
+
+      // If character count doesn't match expected totals, return null to continue scanning
+      console.log('MRZ lines found but character count does not match expected format');
+      return null;
+    } catch (err) {
+      console.warn('Text recognition failed:', err);
+      return null;
     }
   };
 
-  // Handle MRZ scan result
-  const handleMRZScanned = async (mrzCode: string) => {
-    if (loading || !mrzCode || !isScanning) return;
-
-    setIsScanning(false);
-    setScannedData(mrzCode);
+  // Take photo - same as demo-testing-sdk
+  const takePhoto = async () => {
+    if (!cameraRef.current || isProcessingRef.current || apiCalledRef.current) {
+      return;
+    }
 
     try {
-      setLoading(true);
+      isProcessingRef.current = true;
 
-      const mrzData = {
-        token: String(idmConf.verificationCode || ''),
-        code: mrzCode,
-        engine: getMRZEngine(),
-      };
+      const photo = await cameraRef.current.takePhoto({
+        flash: 'off',
+        enableShutterSound: false,
+      });
+
+      const mrzData = await extractMRZ('file://' + photo.path);
+
+      if (mrzData) {
+        // Stop auto-scanning immediately
+        setAutoScan(false);
+        if (scanIntervalRef.current) {
+          clearInterval(scanIntervalRef.current);
+          scanIntervalRef.current = null;
+        }
+
+        // Mark that API is being called
+        apiCalledRef.current = true;
+        setIsCallingAPI(true);
+
+        try {
+          const requestData = {
+            code: mrzData,
+            token: idmConf.verificationCode ?? '',
+            engine: 'idmerit',
+          };
 
-      // Call API to submit MRZ
-      const result = await captureMRZ(idmConf, mrzData);
-
-      if (result.status) {
-        // Update configuration with response
-        setIDMConf({
-          ...idmConf,
-          requestConfiguration: { ...idmConf.requestConfiguration, ...result },
-        });
-
-        // Navigate to ThankYou
-        navigation.navigate('ThankYou' as never);
-      } else {
-        Alert.alert('Error', result.errorMessage || 'Failed to process MRZ', [
-          {
-            text: 'Retry',
-            onPress: () => {
-              setIsScanning(true);
-              setScannedData(null);
-              setLoading(false);
-            },
-          },
-        ]);
+          const response = await captureMRZ(idmConf, requestData);
+          
+          console.log('API Response:', response);
+          
+          // Check if response has a valid status field (string)
+          if (response && typeof response.status === 'string') {
+            console.log('Valid response with status:', response.status);
+            // Navigate to ThankYou only if we have a valid response
+            navigation.navigate('ThankYou' as never);
+          } else {
+            console.log('Invalid response - no status field, retrying...');
+            // Reset and allow retry if response is invalid
+            apiCalledRef.current = false;
+            setIsCallingAPI(false);
+            setAutoScan(true);
+          }
+        } catch (apiError) {
+          console.error('API call failed:', apiError);
+          
+          // Reset on error to allow retry
+          apiCalledRef.current = false;
+          setIsCallingAPI(false);
+          setAutoScan(true);
+        }
+
+        console.log(mrzData);
       }
-    } catch (error: any) {
-      console.error('Error processing MRZ:', error);
-      Alert.alert('Error', 'Failed to process MRZ', [
-        {
-          text: 'Retry',
-          onPress: () => {
-            setIsScanning(true);
-            setScannedData(null);
-            setLoading(false);
-          },
-        },
-      ]);
+    } catch (err: any) {
+      console.error('MRZ scan error:', err);
+    } finally {
+      isProcessingRef.current = false;
     }
   };
 
-  // Fallback simulation if ML Kit not available
-  const simulateMRZScan = () => {
-    const timer = setTimeout(() => {
-      if (isScanning) {
-        const simulatedMRZ =
-          'P<UTOERIKSSON<<ANNA<MARIA<<<<<<<<<<<<<<<<<<<<\nL898902C36UTO7408122F1204159ZE184226B<<<<<10';
-        handleMRZScanned(simulatedMRZ);
-      }
-    }, 3000);
-
-    return () => clearTimeout(timer);
-  };
+  // Auto-scan effect
+  useEffect(() => {
+    if (device && autoScan && !isCallingAPI) {
+      // Start auto-scanning after 1 second delay
+      const startDelay = setTimeout(() => {
+        scanIntervalRef.current = setInterval(() => {
+          takePhoto();
+        }, 1000); // Scan every 1 second
+      }, 1000);
 
-  // Render camera with frame processor
-  const renderCamera = () => {
-    try {
-      const { Camera } = require('react-native-vision-camera');
-      
-      if (hasPermission && device) {
-        return (
-          <Camera
-            ref={cameraRef}
-            style={StyleSheet.absoluteFill}
-            device={device}
-            isActive={isScanning}
-            frameProcessor={(frame) => {
-              'worklet';
-              if (isScanning) {
-                processMRZWithMLKit(frame);
-              }
-            }}
-          />
-        );
-      }
-    } catch (error) {
-      console.warn('Camera render failed:', error);
+      return () => {
+        clearTimeout(startDelay);
+        if (scanIntervalRef.current) {
+          clearInterval(scanIntervalRef.current);
+        }
+      };
     }
+  }, [device, autoScan, isCallingAPI]);
 
-    // Fallback UI
+  // Show permission request screen
+  if (!hasPermission) {
     return (
-      <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
-        <Text
-          style={{
-            color: '#fff',
-            textAlign: 'center',
-            marginTop: 200,
-            fontSize: 16,
-          }}
-        >
-          {loading ? 'Processing...' : `Scanning MRZ (${getMRZEngine()})...`}
-        </Text>
-        {scannedData && (
-          <Text
-            style={{
-              color: '#0f0',
-              textAlign: 'center',
-              marginTop: 20,
-              fontSize: 10,
-              paddingHorizontal: 20,
-            }}
-          >
-            Detected MRZ
+      <ScrollView contentContainerStyle={permissionStyles.container}>
+        <Header />
+        
+        <ThemedText style={permissionStyles.maintitle} type="title">
+          Camera Access Required
+        </ThemedText>
+
+        <View style={{ padding: 20 }}>
+          <Text style={{ color: theme.colors.text, textAlign: 'center', marginBottom: 20 }}>
+            This app needs access to your camera to scan MRZ. Please grant camera permission.
           </Text>
-        )}
-      </View>
+        </View>
+
+        <Button
+          title="Grant Permission"
+          style={permissionStyles.buttonplace}
+          textStyle={permissionStyles.button}
+          onPress={async () => {
+            await requestPermission();
+          }}
+        />
+      </ScrollView>
     );
-  };
+  }
+
+  if (!device) return null;
 
   return (
     <View style={styles.container}>
       <Text style={styles.topLabel}>Align the MRZ code in the box</Text>
-
-      {renderCamera()}
-
-      {/* MRZ overlay box */}
-      <View
-        style={{
-          position: 'absolute',
-          top: '40%',
-          alignSelf: 'center',
-          width: 380,
-          height: 78,
-          borderWidth: 2,
-          borderColor: scannedData ? '#00ff00' : '#ffffff',
-          backgroundColor: 'transparent',
-        }}
+      
+      <Camera
+        ref={cameraRef}
+        style={styles.camera}
+        device={device}
+        isActive={true}
+        photo
       />
-
-      {loading && <Loader message="Processing MRZ..." />}
+      
+      <Image
+        source={overlayImage}
+        style={styles.overlay}
+        resizeMode="stretch"
+      />
+      
+      <Text style={styles.bottomLabel}>
+        {isCallingAPI ? 'Processing...' : 'Scanning...'}
+      </Text>
+      
+      {isCallingAPI && <Loader />}
     </View>
   );
 }
+
+export default MrzCapture;

package/src/screens/SelectDocuments.tsx

@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Alert,
   Pressable,
@@ -24,105 +24,92 @@ export default function SelectDocuments() {
   const orientation = useOrientation();
   const styles = getStyles(theme, orientation);
   const navigation = useNavigation();
-  
+
   const [filteredCountries, setFilteredCountries] = useState<any[]>([]);
   const [search, setSearch] = useState('');
   const [selectedCountry, setSelectedCountry] = useState<string | null>(null);
   const [dropdownVisible, setDropdownVisible] = useState(false);
   const [selectedIdType, setSelectedIdType] = useState<string | null>(null);
   const [idTypeDropdownVisible, setIdTypeDropdownVisible] = useState(false);
+  const [idCardTypes, setIdCardTypes] = useState<any[]>([]);
 
-  // Initialize filtered countries from context
-  useEffect(() => {
-    if (idmConf.countryDetails) {
-      setFilteredCountries(idmConf.countryDetails);
-    }
-  }, [idmConf.countryDetails]);
-
-  // Memoize ID card types based on selected country
-  const idCardTypes = useMemo(() => {
-    if (!selectedCountry || !idmConf.countryDetails) return [];
-    
-    const country = idmConf.countryDetails.find((c) => String(c.value) === String(selectedCountry));
-    return country?.metadata.map((doc) => ({
-      label: getDocumentLabel(doc.type),
-      value: doc.type,
-      metadata: doc,
-    })) || [];
-  }, [selectedCountry, idmConf.countryDetails]);
-
-  // Memoize selected country label
-  const selectedCountryLabel = useMemo(() => {
-    if (!idmConf.countryDetails) return null;
-    return idmConf.countryDetails.find((c) => String(c.value) === String(selectedCountry))?.label;
-  }, [selectedCountry, idmConf.countryDetails]);
-
-  // Memoize selected ID type label
-  const selectedIdTypeLabel = useMemo(() => {
-    return idCardTypes.find((i) => i.value === selectedIdType)?.label;
-  }, [idCardTypes, selectedIdType]);
-
-  const toggleDropdown = useCallback(() => {
+  const toggleDropdown = () => {
     setDropdownVisible((prev) => !prev);
     setIdTypeDropdownVisible(false);
-  }, []);
+  };
 
-  const toggleIdTypeDropdown = useCallback(() => {
+  const toggleIdTypeDropdown = () => {
     setIdTypeDropdownVisible((prev) => !prev);
     setDropdownVisible(false);
-  }, []);
+  };
 
-  const selectCountry = useCallback((value: string) => {
+  const selectCountry = (value: string) => {
     setSelectedCountry(value);
     setDropdownVisible(false);
     setSearch('');
-    setSelectedIdType(null);
-    
-    if (idmConf.countryDetails) {
-      setFilteredCountries(idmConf.countryDetails);
-    }
 
-    const selectedCountryData = idmConf.countryDetails?.find((c) => String(c.value) === String(value));
-    updateIDMConf({ selectedCountryDetails: selectedCountryData || null });
-  }, [idmConf.countryDetails, updateIDMConf]);
+    const selectedCountryData = idmConf.countryDetails?.find((c: any) => c.value === value);
+    updateIDMConf({
+      selectedCountryDetails: selectedCountryData || null,
+    });
 
-  const selectIdType = useCallback((value: string) => {
+    if (selectedCountryData?.metadata) {
+      const types = selectedCountryData.metadata.map((doc: any) => ({
+        label: getDocumentLabel(doc.type),
+        value: doc.type,
+      }));
+      setIdCardTypes(types);
+    } else {
+      setIdCardTypes([]);
+    }
+    setSelectedIdType(null);
+    setFilteredCountries(idmConf.countryDetails || []);
+  };
+
+  const selectIdType = (value: string) => {
     setSelectedIdType(value);
-    
-    const selectedCountryData = idmConf.countryDetails?.find((c) => String(c.value) === String(selectedCountry));
-    const selectedMetaData = selectedCountryData?.metadata?.find((c) => c.type === value);
-    
     updateIDMConf({
       selectedCountryDetails: {
-        ...selectedCountryData,
-        selectedMetaData,
+        ...idmConf.selectedCountryDetails,
+        selectedMetaData: idmConf.selectedCountryDetails?.metadata?.find((c: any) => c.type === value),
       },
     });
     setIdTypeDropdownVisible(false);
-  }, [selectedCountry, idmConf.countryDetails, updateIDMConf]);
+  };
 
-  const handleContinue = useCallback(() => {
+  const handleContinue = () => {
     if (!selectedCountry || !selectedIdType) {
       Alert.alert('Missing Fields', 'Please select both country and ID card type.');
       return;
     }
-    navigation.navigate('FrontDocumentAdvice' as never);
-  }, [selectedCountry, selectedIdType, navigation]);
 
-  const handleSearch = useCallback((text: string) => {
+    // Check document flow to determine initial navigation
+    const metaData = idmConf?.selectedCountryDetails?.selectedMetaData;
+    const flow = metaData?.document_flow;
+
+    if (flow && flow[0] === 'B') {
+      navigation.navigate('BackDocumentAdvice' as never);
+    } else {
+      navigation.navigate('FrontDocumentAdvice' as never);
+    }
+  };
+
+  useEffect(() => {
+    setFilteredCountries(idmConf.countryDetails || []);
+  }, [idmConf.countryDetails]);
+
+  const handleSearch = (text: string) => {
     setSearch(text);
-    if (!idmConf.countryDetails) return;
-    
-    const filtered = idmConf.countryDetails.filter((c) =>
+    const filtered = (idmConf.countryDetails || []).filter((c: any) =>
       c.label.toLowerCase().includes(text.toLowerCase())
     );
     setFilteredCountries(filtered);
-  }, [idmConf.countryDetails]);
+  };
 
-  const closeDropdowns = useCallback(() => {
+  const closeDropdowns = () => {
     setDropdownVisible(false);
     setIdTypeDropdownVisible(false);
-  }, []);
+  };
 
   return (
     <View style={{ flex: 1, backgroundColor: theme.colors.background }}>
@@ -143,7 +130,9 @@ export default function SelectDocuments() {
                     color: selectedCountry ? theme.colors.text : theme.colors.subtitle,
                   }}
                 >
-                  {selectedCountryLabel || 'Select a country'}
+                  {selectedCountry
+                    ? idmConf.countryDetails?.find((c: any) => c.value === selectedCountry)?.label
+                    : 'Select a country'}
                 </Text>
                 <Text style={styles.downArrow}>▼</Text>
               </Pressable>
@@ -160,7 +149,7 @@ export default function SelectDocuments() {
                     {filteredCountries.map((item) => (
                       <Pressable
                         key={item.value}
-                        onPress={() => selectCountry(String(item.value))}
+                        onPress={() => selectCountry(item.value)}
                         style={styles.dropdownItem}
                       >
                         <Text style={styles.dopDownLable}>{item.label}</Text>
@@ -183,7 +172,9 @@ export default function SelectDocuments() {
                       color: selectedIdType ? theme.colors.text : theme.colors.subtitle,
                     }}
                   >
-                    {selectedIdTypeLabel || 'Select ID Card Type'}
+                    {selectedIdType
+                      ? idCardTypes.find((i) => i.value === selectedIdType)?.label
+                      : 'Select ID Card Type'}
                   </Text>
                   <Text style={styles.downArrow}>▼</Text>
                 </Pressable>