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

package/src/screens/DocumentCaptureFront.tsx

@@ -1,54 +1,176 @@
-import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image, Alert } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import getStyles from '../styles/DocumentCaptureStyles';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
+import { useIDM } from '../context/IDMConfigurationContext';
 import Loader from '../components/common/Loader';
+import { captureDocumentFront } from '../apis';
+import { processImageToBase64, validateImagePath } from '../utils/imageProcessor';
+import { createFlowManager } from '../utils/flowManager';
 
 export default function DocumentCaptureFront() {
   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);
+
+  // Initialize camera
+  useEffect(() => {
+    const initializeCamera = async () => {
+      try {
+        // Try to import camera libraries
+        const { Camera, useCameraDevice, useCameraPermission } = require('react-native-vision-camera');
+        
+        // Check permission
+        const { hasPermission: hasPerm, requestPermission } = useCameraPermission();
+        
+        if (!hasPerm) {
+          const granted = await requestPermission();
+          if (!granted) {
+            navigation.navigate('CameraPermission' as never);
+            return;
+          }
+        }
+        
+        setHasPermission(true);
+        
+        // Get back camera device
+        const backDevice = useCameraDevice('back');
+        if (!backDevice) {
+          navigation.navigate('NoCameraFound' as never);
+          return;
+        }
+        
+        setDevice(backDevice);
+      } catch (error) {
+        console.warn('Camera initialization failed:', error);
+        // Fallback for testing without camera
+        setHasPermission(true);
+      }
+    };
+
+    initializeCamera();
+  }, [navigation]);
+
+  // Determine next navigation step based on metadata
+  const handleNextStep = () => {
+    const metaData = idmConf?.selectedCountryDetails?.selectedMetaData;
+    
+    if (!metaData) {
+      navigation.navigate('ThankYou' as never);
+      return;
+    }
+
+    const flowManager = createFlowManager(metaData);
+    const nextScreen = flowManager.getNextScreenAfterFront();
+    navigation.navigate(nextScreen as never);
+  };
 
   const takePhoto = async () => {
+    if (!cameraRef.current) {
+      // Fallback for testing without camera
+      Alert.alert('Camera Not Available', 'Camera is not available in this environment.');
+      return;
+    }
+
     try {
       setLoading(true);
-      // Static implementation - simulate photo capture
-      setTimeout(() => {
+      
+      const photo = await cameraRef.current.takePhoto();
+
+      if (!validateImagePath(photo?.path)) {
+        Alert.alert('Error', 'Failed to capture image');
         setLoading(false);
-        // Navigate to BackDocumentAdvice after capturing front
-        navigation.navigate('BackDocumentAdvice' as never);
-      }, 1000);
-    } catch (error) {
+        return;
+      }
+
+      // Process image to base64
+      const base64Image = await processImageToBase64(photo.path);
+
+      // Prepare photo data for API
+      const photoData = {
+        latitude: String(idmConf.userDetails?.location?.coords?.latitude || ''),
+        longitude: String(idmConf.userDetails?.location?.coords?.longitude || ''),
+        token: String(idmConf.verificationCode || ''),
+        persistLoc: 'false',
+        metadataIndex: String(idmConf.selectedCountryDetails?.selectedMetaData?.id || ''),
+        file: base64Image,
+      };
+
+      // Call API to capture document front
+      const result = await captureDocumentFront(idmConf, photoData);
+
+      if (result.status) {
+        // Update configuration with response
+        setIDMConf({
+          ...idmConf,
+          requestConfiguration: result,
+        });
+
+        // Navigate to next step based on metadata
+        handleNextStep();
+      } else {
+        // Handle error - navigate to retake screen
+        navigation.navigate('RetakeSelfie' as never, {
+          errorMessage: result.errorMessage || 'Failed to process document',
+        });
+      }
+    } catch (error: any) {
       console.error('Error taking photo:', error);
+      Alert.alert('Error', 'Failed to capture or process the image.');
+    } finally {
       setLoading(false);
     }
   };
 
+  // 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={{ color: '#fff', textAlign: 'center', marginTop: 100 }}>
+          Camera Preview
+        </Text>
+      </View>
+    );
+  };
+
   return (
     <View style={styles.container}>
       <Text style={styles.topLabel}>Document Front Side</Text>
 
-      {/* Camera placeholder */}
-      <View style={StyleSheet.absoluteFill}>
-        <View
-          style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}
-        ></View>
-      </View>
+      {renderCamera()}
 
-      {/* Card overlay placeholder */}
-      <View
-        style={[
-          styles.cardoverlay,
-          {
-            borderWidth: 2,
-            borderColor: '#fff',
-            backgroundColor: 'transparent',
-          },
-        ]}
+      {/* Card overlay */}
+      <Image
+        source={require('../../assets/images/card-overlay.png')}
+        style={styles.cardoverlay}
+        resizeMode="cover"
       />
 
       <Text style={styles.bottomLabel}>

package/src/screens/MrzCapture.tsx

@@ -1,36 +1,88 @@
-import React, { useState } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import React, { useState, useEffect } 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);
 
-  // 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();
+  };
+
+  // Handle MRZ scan
+  const handleMRZScan = async (mrzCode: string) => {
+    if (loading || !mrzCode) return;
+
+    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');
+        setLoading(false);
+      }
+    } catch (error: any) {
+      console.error('Error processing MRZ:', error);
+      Alert.alert('Error', 'Failed to process MRZ');
+      setLoading(false);
+    }
+  };
+
+  // Simulate MRZ scanning (replace with actual MRZ scanner library)
+  useEffect(() => {
+    // TODO: Integrate actual MRZ scanning library (e.g., @react-native-ml-kit/text-recognition)
+    // For now, simulate scanning after 3 seconds
+    const timer = setTimeout(() => {
+      const simulatedMRZ =
+        'P<UTOERIKSSON<<ANNA<MARIA<<<<<<<<<<<<<<<<<<<<\nL898902C36UTO7408122F1204159ZE184226B<<<<<10';
+      setScannedData(simulatedMRZ);
+      handleMRZScan(simulatedMRZ);
     }, 3000);
 
     return () => clearTimeout(timer);
-  }, [navigation]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <View style={styles.container}>
       <Text style={styles.topLabel}>Align the MRZ code in the box</Text>
 
-      {/* Camera placeholder */}
+      {/* Camera placeholder - Replace with actual camera view */}
       <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
         <Text
           style={{
@@ -40,8 +92,21 @@ 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>
 
       {/* MRZ overlay box */}
@@ -53,7 +118,7 @@ export default function MrzCapture() {
           width: 380,
           height: 78,
           borderWidth: 2,
-          borderColor: '#00ff00',
+          borderColor: scannedData ? '#00ff00' : '#ffffff',
           backgroundColor: 'transparent',
         }}
       />

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