@test-web/react-native-sdk 1.0.0 → 2.0.0

package/src/screens/MrzCapture.tsx

@@ -1,36 +1,204 @@
-import React, { useState } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Alert } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 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';
 
 export default function MrzCapture() {
   const { theme } = useTheme();
+  const { idmConf, setIDMConf } = useIDM();
   const orientation = useOrientation();
   const styles = getStyles(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);
 
-  // Static implementation - simulate MRZ scanning
-  React.useEffect(() => {
-    const timer = setTimeout(() => {
+  // Get MRZ engine type from metadata
+  const getMRZEngine = () => {
+    const metadata = idmConf?.selectedCountryDetails?.selectedMetaData;
+    if (!metadata) return 'TD3';
+
+    const flowManager = createFlowManager(metadata);
+    return flowManager.getMRZEngine();
+  };
+
+  // Initialize camera with ML Kit
+  useEffect(() => {
+    let isMounted = true;
+
+    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();
+        }
+      }
+    };
+
+    initializeCamera();
+
+    return () => {
+      isMounted = false;
+      setIsScanning(false);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Process MRZ with ML Kit Text Recognition
+  const processMRZWithMLKit = async (frame: any) => {
+    if (!isScanning) return;
+
+    try {
+      const { recognizeText } = require('@react-native-ml-kit/text-recognition');
+      
+      const result = await recognizeText(frame);
+      
+      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);
+        }
+      }
+    } catch (error) {
+      console.warn('ML Kit text recognition error:', error);
+    }
+  };
+
+  // Handle MRZ scan result
+  const handleMRZScanned = async (mrzCode: string) => {
+    if (loading || !mrzCode || !isScanning) return;
+
+    setIsScanning(false);
+    setScannedData(mrzCode);
+
+    try {
       setLoading(true);
-      setTimeout(() => {
-        setLoading(false);
+
+      const mrzData = {
+        token: String(idmConf.verificationCode || ''),
+        code: mrzCode,
+        engine: getMRZEngine(),
+      };
+
+      // 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);
-      }, 2000);
+      } else {
+        Alert.alert('Error', result.errorMessage || 'Failed to process MRZ', [
+          {
+            text: 'Retry',
+            onPress: () => {
+              setIsScanning(true);
+              setScannedData(null);
+              setLoading(false);
+            },
+          },
+        ]);
+      }
+    } 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);
+          },
+        },
+      ]);
+    }
+  };
+
+  // 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);
-  }, [navigation]);
+  };
 
-  return (
-    <View style={styles.container}>
-      <Text style={styles.topLabel}>Align the MRZ code in the box</Text>
+  // 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);
+    }
 
-      {/* Camera placeholder */}
+    // Fallback UI
+    return (
       <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
         <Text
           style={{
@@ -40,9 +208,30 @@ export default function MrzCapture() {
             fontSize: 16,
           }}
         >
-          MRZ Scanner (Static)
+          {loading ? 'Processing...' : `Scanning MRZ (${getMRZEngine()})...`}
         </Text>
+        {scannedData && (
+          <Text
+            style={{
+              color: '#0f0',
+              textAlign: 'center',
+              marginTop: 20,
+              fontSize: 10,
+              paddingHorizontal: 20,
+            }}
+          >
+            Detected MRZ
+          </Text>
+        )}
       </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.topLabel}>Align the MRZ code in the box</Text>
+
+      {renderCamera()}
 
       {/* MRZ overlay box */}
       <View
@@ -53,12 +242,12 @@ export default function MrzCapture() {
           width: 380,
           height: 78,
           borderWidth: 2,
-          borderColor: '#00ff00',
+          borderColor: scannedData ? '#00ff00' : '#ffffff',
           backgroundColor: 'transparent',
         }}
       />
 
-      {loading && <Loader />}
+      {loading && <Loader message="Processing MRZ..." />}
     </View>
   );
 }

package/src/screens/SelectDocuments.tsx

@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import {
   Alert,
   Pressable,
@@ -15,45 +15,7 @@ import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
 import { useIDM } from '../context/IDMConfigurationContext';
 import { useKeyboard } from '../context/KeyboardContext';
-
-// Static country data for demo
-const STATIC_COUNTRIES = [
-  {
-    label: 'United States',
-    value: 'US',
-    metadata: [
-      { type: 'DL', id: '1' },
-      { type: 'PP', id: '2' },
-      { type: 'NI', id: '3' },
-    ],
-  },
-  {
-    label: 'Canada',
-    value: 'CA',
-    metadata: [
-      { type: 'DL', id: '4' },
-      { type: 'PP', id: '5' },
-    ],
-  },
-  {
-    label: 'United Kingdom',
-    value: 'GB',
-    metadata: [
-      { type: 'DL', id: '6' },
-      { type: 'PP', id: '7' },
-      { type: 'NI', id: '8' },
-    ],
-  },
-];
-
-// Document type labels mapping
-const DOCUMENT_LABELS: Record<string, string> = {
-  DL: "Driver's License",
-  PP: 'Passport',
-  NI: 'National ID',
-  PC: 'Passport Card',
-  GC: 'Green Card',
-};
+import { getDocumentLabel } from '../utils';
 
 export default function SelectDocuments() {
   const { theme } = useTheme();
@@ -62,27 +24,38 @@ export default function SelectDocuments() {
   const orientation = useOrientation();
   const styles = getStyles(theme, orientation);
   const navigation = useNavigation();
-  const [filteredCountries, setFilteredCountries] = useState<any[]>(STATIC_COUNTRIES);
+  
+  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);
 
+  // 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) return [];
-    const country = STATIC_COUNTRIES.find((c) => c.value === selectedCountry);
+    if (!selectedCountry || !idmConf.countryDetails) return [];
+    
+    const country = idmConf.countryDetails.find((c) => String(c.value) === String(selectedCountry));
     return country?.metadata.map((doc) => ({
-      label: DOCUMENT_LABELS[doc.type] || doc.type,
+      label: getDocumentLabel(doc.type),
       value: doc.type,
+      metadata: doc,
     })) || [];
-  }, [selectedCountry]);
+  }, [selectedCountry, idmConf.countryDetails]);
 
   // Memoize selected country label
   const selectedCountryLabel = useMemo(() => {
-    return STATIC_COUNTRIES.find((c) => c.value === selectedCountry)?.label;
-  }, [selectedCountry]);
+    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(() => {
@@ -104,23 +77,29 @@ export default function SelectDocuments() {
     setDropdownVisible(false);
     setSearch('');
     setSelectedIdType(null);
-    setFilteredCountries(STATIC_COUNTRIES);
+    
+    if (idmConf.countryDetails) {
+      setFilteredCountries(idmConf.countryDetails);
+    }
 
-    const selectedCountryData = STATIC_COUNTRIES.find((c) => c.value === value);
+    const selectedCountryData = idmConf.countryDetails?.find((c) => String(c.value) === String(value));
     updateIDMConf({ selectedCountryDetails: selectedCountryData || null });
-  }, [updateIDMConf]);
+  }, [idmConf.countryDetails, updateIDMConf]);
 
   const selectIdType = useCallback((value: string) => {
     setSelectedIdType(value);
-    const selectedCountryData = STATIC_COUNTRIES.find((c) => c.value === selectedCountry);
+    
+    const selectedCountryData = idmConf.countryDetails?.find((c) => String(c.value) === String(selectedCountry));
+    const selectedMetaData = selectedCountryData?.metadata?.find((c) => c.type === value);
+    
     updateIDMConf({
       selectedCountryDetails: {
         ...selectedCountryData,
-        selectedMetaData: selectedCountryData?.metadata?.find((c) => c.type === value),
+        selectedMetaData,
       },
     });
     setIdTypeDropdownVisible(false);
-  }, [selectedCountry, updateIDMConf]);
+  }, [selectedCountry, idmConf.countryDetails, updateIDMConf]);
 
   const handleContinue = useCallback(() => {
     if (!selectedCountry || !selectedIdType) {
@@ -132,11 +111,13 @@ export default function SelectDocuments() {
 
   const handleSearch = useCallback((text: string) => {
     setSearch(text);
-    const filtered = STATIC_COUNTRIES.filter((c) =>
+    if (!idmConf.countryDetails) return;
+    
+    const filtered = idmConf.countryDetails.filter((c) =>
       c.label.toLowerCase().includes(text.toLowerCase())
     );
     setFilteredCountries(filtered);
-  }, []);
+  }, [idmConf.countryDetails]);
 
   const closeDropdowns = useCallback(() => {
     setDropdownVisible(false);
@@ -179,7 +160,7 @@ export default function SelectDocuments() {
                     {filteredCountries.map((item) => (
                       <Pressable
                         key={item.value}
-                        onPress={() => selectCountry(item.value)}
+                        onPress={() => selectCountry(String(item.value))}
                         style={styles.dropdownItem}
                       >
                         <Text style={styles.dopDownLable}>{item.label}</Text>

package/src/screens/SelfieCapture.tsx

@@ -1,38 +1,134 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useNavigation } from '@react-navigation/native';
-import { TouchableOpacity, View, StyleSheet, Text } from 'react-native';
+import { TouchableOpacity, View, StyleSheet, Text, Alert } from 'react-native';
 import getStyles from '../styles/SelfieCaptureStyles';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
+import { useIDM } from '../context/IDMConfigurationContext';
 import Loader from '../components/common/Loader';
+import { processImageToBase64, validateImagePath } from '../utils/imageProcessor';
 
 export default function SelfieCapture() {
   const { theme } = useTheme();
+  const { idmConf, setIDMConf } = useIDM();
   const orientation = useOrientation();
   const styles = getStyles(theme, orientation);
   const navigation = useNavigation();
   const [loading, setLoading] = useState(false);
+  const [hasPermission, setHasPermission] = useState(false);
+  const [device, setDevice] = useState<any>(null);
+  const cameraRef = useRef<any>(null);
 
-  const takePhoto = useCallback(() => {
-    setLoading(true);
-    
-    // Static implementation - simulate photo capture
-    setTimeout(() => {
-      setLoading(false);
-      navigation.navigate('SelectDocuments' as never);
-    }, 1000);
+  // Initialize camera
+  useEffect(() => {
+    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;
+          }
+        }
+        
+        setHasPermission(true);
+        
+        // Get front camera for selfie
+        const frontDevice = useCameraDevice('front');
+        if (!frontDevice) {
+          navigation.navigate('NoCameraFound' as never);
+          return;
+        }
+        
+        setDevice(frontDevice);
+      } catch (error) {
+        console.warn('Camera initialization failed:', error);
+        setHasPermission(true);
+      }
+    };
+
+    initializeCamera();
   }, [navigation]);
 
+  const takePhoto = useCallback(async () => {
+    if (!cameraRef.current) {
+      // Fallback for testing without camera
+      Alert.alert('Camera Not Available', 'Camera is not available. Proceeding to next step.');
+      navigation.navigate('SelectDocuments' as never);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      
+      const photo = await cameraRef.current.takePhoto();
+
+      if (!validateImagePath(photo?.path)) {
+        Alert.alert('Error', 'Failed to capture selfie');
+        setLoading(false);
+        return;
+      }
+
+      // Process image to base64
+      const base64Image = await processImageToBase64(photo.path);
+
+      // TODO: Integrate with liveness detection API
+      // For now, just store the selfie and proceed
+      setIDMConf({
+        ...idmConf,
+        userDetails: {
+          ...idmConf.userDetails,
+          selfieImage: base64Image,
+        },
+      });
+
+      // Navigate to document selection
+      navigation.navigate('SelectDocuments' as never);
+    } catch (error: any) {
+      console.error('Error taking selfie:', error);
+      Alert.alert('Error', 'Failed to capture selfie');
+    } finally {
+      setLoading(false);
+    }
+  }, [idmConf, setIDMConf, navigation]);
+
+  // Render camera if available
+  const renderCamera = () => {
+    try {
+      const { Camera } = require('react-native-vision-camera');
+      
+      if (hasPermission && device) {
+        return (
+          <Camera
+            ref={cameraRef}
+            style={StyleSheet.absoluteFill}
+            device={device}
+            isActive={true}
+            photo={true}
+          />
+        );
+      }
+    } catch (error) {
+      console.warn('Camera render failed:', error);
+    }
+
+    // Fallback placeholder
+    return (
+      <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
+        <Text style={[styles.text, { color: '#fff', marginTop: 100 }]}>
+          Camera Preview
+        </Text>
+      </View>
+    );
+  };
+
   return (
     <View style={styles.container}>
-      {/* Camera placeholder */}
-      <View style={StyleSheet.absoluteFill}>
-        <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
-          <Text style={[styles.text, { color: '#fff', marginTop: 100 }]}>
-            Camera View (Static)
-          </Text>
-        </View>
-      </View>
+      {renderCamera()}
 
       {/* Camera overlay - Add your overlay image to assets/images/photo-overlay.png */}
       {/* <Image

package/src/screens/ThankYou.tsx

@@ -1,14 +1,46 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import ThemedText from '../components/ui/ThemedText';
 import getStyles from '../styles/ThankYouStyles';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
+import { useIDM } from '../context/IDMConfigurationContext';
+import Loader from '../components/common/Loader';
+import { completeVerification } from '../apis';
 
 export default function ThankYou() {
   const { theme } = useTheme();
+  const { idmConf } = useIDM();
   const orientation = useOrientation();
   const styles = getStyles(theme, orientation);
+  const [loading, setLoading] = useState(false);
+  const [completed, setCompleted] = useState(false);
+
+  // Call complete verification API
+  useEffect(() => {
+    const finalizeVerification = async () => {
+      if (completed || !idmConf.verificationCode) return;
+
+      try {
+        setLoading(true);
+        const result = await completeVerification(idmConf);
+        console.log('Verification completed:', result);
+        setCompleted(true);
+      } catch (error: any) {
+        console.error('Error completing verification:', error);
+        // Don't show error to user, just log it
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    // Call after a short delay to ensure all data is submitted
+    const timer = setTimeout(() => {
+      finalizeVerification();
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [idmConf, completed]);
 
   return (
     <View style={styles.container}>
@@ -18,6 +50,7 @@ export default function ThankYou() {
       <ThemedText style={styles.subtitle} type="title">
         Your information{'\n'}has been uploaded
       </ThemedText>
+      {loading && <Loader message="Finalizing verification..." />}
     </View>
   );
 }