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

package/src/screens/DocumentCaptureFront.tsx

@@ -1,184 +1,217 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Image, Alert } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, Image, Alert, ScrollView } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import getStyles from '../styles/DocumentCaptureStyles';
+import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
+import ImageResizer from 'react-native-image-resizer';
+import RNFS from 'react-native-fs';
+
+import getStyles from '../styles/DocumentCaptureFrontStyle';
 import { useTheme } from '../context/ThemeContext';
-import { useOrientation } from '../hooks/useOrientation';
 import { useIDM } from '../context/IDMConfigurationContext';
-import Loader from '../components/common/Loader';
+import { useOrientation } from '../hooks/useOrientation';
 import { captureDocumentFront } from '../apis';
-import { processImageToBase64, validateImagePath } from '../utils/imageProcessor';
-import { createFlowManager } from '../utils/flowManager';
+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';
+import { useFailedCount } from '../context/FailedCountContext';
 
 export default function DocumentCaptureFront() {
   const { theme } = useTheme();
   const { idmConf, setIDMConf } = useIDM();
   const orientation = useOrientation();
   const styles = getStyles(theme, orientation);
+  const permissionStyles = getPermissionStyles(theme, orientation);
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const device = useCameraDevice('back');
+  const cameraRef = useRef<Camera>(null);
   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 { failedCount, setFailedCount } = useFailedCount();
 
-  // 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]);
+  const [loading, setLoading] = useState(false);
 
-  // Determine next navigation step based on metadata
+  // Decide next navigation step
   const handleNextStep = () => {
+    setFailedCount(0); // Reset failed count on successful capture
     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 { document_flow, barcode } = metaData;
+
+    // If no flow, just go to ThankYou
+    if (!document_flow || document_flow.length === 0) {
+      navigation.navigate('ThankYou' as never);
+      return;
+    }
+
+    // Decide based on first element in flow
+    const currentStep = document_flow[0];
+
+    if (currentStep === 'F') {
+      if (document_flow.includes('B')) {
+        navigation.navigate('BackDocumentAdvice' as never);
+        return;
+      }
+    }
+
+    // If no more flow, handle barcode
+    if (barcode === 'PDF417 B' || barcode === 'PDF417F') {
+      navigation.navigate('BarcodeAdvice' as never);
+    } else if (['TD3', 'TD2', 'TD1'].includes(barcode)) {
+      navigation.navigate('MrzAdvice' as never);
+    } else {
+      navigation.navigate('ThankYou' as never);
+    }
   };
 
+  // Check for device availability
+  useEffect(() => {
+    if (!device) {
+      navigation.navigate('NoCameraFound' as never);
+    }
+  }, [device, navigation]);
+
+  // Show permission request screen if camera permission is not granted
+  if (!hasPermission) {
+    return (
+      <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 capture documents. Please grant camera permission.
+          </Text>
+        </View>
+
+        <Button
+          title="Grant Permission"
+          style={permissionStyles.buttonplace}
+          textStyle={permissionStyles.button}
+          onPress={async () => {
+            const granted = await requestPermission();
+            if (!granted) {
+              console.log('Camera permission denied');
+            }
+          }}
+        />
+      </ScrollView>
+    );
+  }
+
+  if (!device) return null;
+
+  // Take photo and process
   const takePhoto = async () => {
-    if (!cameraRef.current) {
-      // Fallback for testing without camera
-      Alert.alert('Camera Not Available', 'Camera is not available in this environment.');
+    if (!cameraRef.current || loading) {
+      return;
+    }
+
+    // Validate required data before taking photo
+    if (!idmConf?.selectedCountryDetails?.selectedMetaData) {
+      Alert.alert('Error', 'Please select a document type before capturing.');
       return;
     }
 
     try {
       setLoading(true);
-      
       const photo = await cameraRef.current.takePhoto();
 
-      if (!validateImagePath(photo?.path)) {
-        Alert.alert('Error', 'Failed to capture image');
-        setLoading(false);
+      if (!photo?.path) {
+        console.error('No photo path available');
         return;
       }
 
-      // Process image to base64
-      const base64Image = await processImageToBase64(photo.path);
+      let base64Image;
+
+      try {
+        const resizedImage = await ImageResizer.createResizedImage(
+          `file://${photo.path}`,
+          810,
+          1080,
+          'JPEG',
+          70,
+          0,
+          undefined,
+          false
+        );
+        base64Image = await RNFS.readFile(resizedImage.uri, 'base64');
+      } catch (resizeError: any) {
+        console.warn('Image resizing failed, using original image:', resizeError.message);
+        base64Image = await RNFS.readFile(photo.path, 'base64');
+      }
 
-      // 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 || ''),
+        latitude: String(idmConf?.userDetails?.location?.coords?.latitude || ''),
+        longitude: String(idmConf?.userDetails?.location?.coords?.longitude || ''),
+        token: String(idmConf?.verificationCode || ''),
+        persistLoc: String(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
+      if (typeof result.status === 'string') {
         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',
-        });
+        // Failed document capture
+        setFailedCount((prev) => prev + 1);
+        if (failedCount >= 4) {
+          // After 5 failed attempts (0-4), reset and proceed to ThankYou
+          setFailedCount(0);
+          navigation.navigate('ThankYou' as never);
+        } else {
+          (navigation.navigate as any)('RetakeSelfie', { errorMessage: result.errorMessage });
+        }
       }
     } catch (error: any) {
-      console.error('Error taking photo:', error);
+      console.error('Error taking photo:', error.message);
       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>
 
-      {renderCamera()}
+      {device && (
+        <Camera
+          ref={cameraRef}
+          style={StyleSheet.absoluteFill}
+          device={device}
+          isActive={true}
+          photo={true}
+        />
+      )}
 
-      {/* Card overlay */}
       <Image
         source={require('../../assets/images/card-overlay.png')}
         style={styles.cardoverlay}
         resizeMode="cover"
       />
 
-      <Text style={styles.bottomLabel}>
-        Position your document fully within the frame
-      </Text>
+      <Text style={styles.bottomLabel}>Position your document fully within the frame</Text>
 
       <View style={styles.buttonplace}>
-        <TouchableOpacity style={styles.captureButton} onPress={takePhoto} />
+        <TouchableOpacity 
+          style={styles.captureButton} 
+          onPress={takePhoto}
+          disabled={loading}
+        />
       </View>
 
       {loading && <Loader />}

package/src/screens/FrontDocumentAdvice.tsx

@@ -1,21 +1,21 @@
 import { useNavigation } from '@react-navigation/native';
-import { Image, ScrollView, View } from 'react-native';
+import { Image, ScrollView } from 'react-native';
 import Button from '../components/ui/Button';
 import ThemedText from '../components/ui/ThemedText';
 import getStyles from '../styles/DocumentAdviceStyles';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
+import { useIDM } from '../context/IDMConfigurationContext';
 import { useMemo } from 'react';
+import { getCardScanImage } from '../utils/imagesHelper';
 
 export default function FrontDocumentAdvice() {
   const { theme } = useTheme();
+  const { idmConf } = useIDM();
   const orientation = useOrientation();
   const navigation = useNavigation();
 
-  const styles = useMemo(
-    () => getStyles(theme, orientation),
-    [theme, orientation]
-  );
+  const styles = useMemo(() => getStyles(theme, orientation), [theme, orientation]);
 
   const handleRedirect = () => {
     navigation.navigate('DocumentCaptureFront' as never);
@@ -27,19 +27,14 @@ export default function FrontDocumentAdvice() {
         Capture Your ID Front
       </ThemedText>
 
-      {/* Placeholder for ID card image */}
-      <View
-        style={[
-          styles.idcard,
-          {
-            backgroundColor: '#f0f0f0',
-            justifyContent: 'center',
-            alignItems: 'center',
-          },
-        ]}
-      >
-        <ThemedText>ID Front Image</ThemedText>
-      </View>
+      <Image
+        source={getCardScanImage(
+          idmConf?.selectedCountryDetails?.selectedMetaData?.type,
+          idmConf?.selectedCountryDetails?.selectedMetaData?.countryCode
+        )}
+        style={styles.idcard}
+        resizeMode="contain"
+      />
 
       <Button
         title="Take a photo"

package/src/screens/LocationPermission.tsx

@@ -1,6 +1,14 @@
 import { useNavigation } from '@react-navigation/native';
 import * as React from 'react';
-import { ScrollView, Text, View, PermissionsAndroid, Platform } from 'react-native';
+import { 
+  ScrollView, 
+  Text, 
+  View, 
+  PermissionsAndroid, 
+  Platform, 
+  Linking, 
+  Alert
+} from 'react-native';
 import Button from '../components/ui/Button';
 import ThemedText from '../components/ui/ThemedText';
 import { useTheme } from '../context/ThemeContext';
@@ -12,35 +20,133 @@ export default function LocationPermission() {
   const orientation = useOrientation();
   const styles = getStyles(theme, orientation);
   const navigation = useNavigation();
+  const [isRequesting, setIsRequesting] = React.useState(false);
+
+  const navigateNext = () => {
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+    } else {
+      navigation.navigate('VerifyIdentity' as never);
+    }
+  };
 
   const requestLocationPermission = async () => {
-    if (Platform.OS === 'android') {
-      try {
+    if (isRequesting) {
+      return;
+    }
+    
+    setIsRequesting(true);
+
+    try {
+      if (Platform.OS === 'android') {
+        // Check if permission is already granted
+        const hasPermission = await PermissionsAndroid.check(
+          PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
+        );
+
+        if (hasPermission) {
+          console.log('Location permission already granted');
+          navigateNext();
+          return;
+        }
+
+        // Request permission
         const granted = await PermissionsAndroid.request(
           PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
           {
             title: 'Location Permission',
-            message: 'This app needs access to your location.',
-            buttonPositive: 'OK',
+            message: 'This app needs access to your location to verify your identity.',
+            buttonPositive: 'Allow',
+            buttonNegative: 'Deny',
           }
         );
+
         if (granted === PermissionsAndroid.RESULTS.GRANTED) {
-          if (navigation.canGoBack()) {
-            navigation.goBack();
-          } else {
-            navigation.navigate('VerifyIdentity' as never);
+          console.log('Location permission granted');
+          // Try to get location using Geolocation service
+          try {
+            const Geolocation = require('react-native-geolocation-service');
+            if (Geolocation && typeof Geolocation.getCurrentPosition === 'function') {
+              Geolocation.getCurrentPosition(
+                (position: any) => {
+                  console.log('Location obtained:', position);
+                  navigateNext();
+                },
+                (error: any) => {
+                  console.warn('Location error:', error);
+                  navigateNext();
+                },
+                {
+                  enableHighAccuracy: true,
+                  timeout: 15000,
+                  maximumAge: 10000,
+                }
+              );
+            } else {
+              navigateNext();
+            }
+          } catch (geoError) {
+            console.warn('Geolocation service error:', geoError);
+            navigateNext();
           }
+        } else if (granted === PermissionsAndroid.RESULTS.DENIED) {
+          console.log('Location permission denied');
+          Alert.alert(
+            'Permission Denied',
+            'Location permission is required to continue. Please grant permission.',
+            [{ text: 'OK' }]
+          );
+        } else if (granted === PermissionsAndroid.RESULTS.NEVER_ASK_AGAIN) {
+          console.log('Location permission denied permanently');
+          Alert.alert(
+            'Permission Required',
+            'Location permission is required. Please enable it in app settings.',
+            [
+              { text: 'Cancel', style: 'cancel' },
+              {
+                text: 'Open Settings',
+                onPress: () => Linking.openSettings(),
+              },
+            ]
+          );
         }
-      } catch (err) {
-        console.warn(err);
-      }
-    } else {
-      // For iOS, navigate directly (implement iOS permission separately)
-      if (navigation.canGoBack()) {
-        navigation.goBack();
       } else {
-        navigation.navigate('VerifyIdentity' as never);
+        // For iOS, request location permission through Geolocation
+        try {
+          const Geolocation = require('react-native-geolocation-service');
+          if (Geolocation && typeof Geolocation.requestAuthorization === 'function') {
+            const auth = await Geolocation.requestAuthorization('whenInUse');
+            if (auth === 'granted') {
+              console.log('iOS location permission granted');
+              navigateNext();
+            } else {
+              console.log('iOS location permission denied:', auth);
+              Alert.alert(
+                'Permission Required',
+                'Location permission is required. Please enable it in app settings.',
+                [
+                  { text: 'Cancel', style: 'cancel' },
+                  {
+                    text: 'Open Settings',
+                    onPress: () => Linking.openSettings(),
+                  },
+                ]
+              );
+            }
+          } else {
+            // Fallback for iOS
+            navigateNext();
+          }
+        } catch (err) {
+          console.warn('iOS location permission error:', err);
+          Alert.alert('Error', 'Failed to request location permission. Please try again.');
+        }
       }
+    } catch (err: any) {
+      console.error('Permission request error:', err);
+      Alert.alert('Error', 'Failed to request location permission. Please try again.');
+    } finally {
+      setIsRequesting(false);
     }
   };
 
@@ -68,6 +174,7 @@ export default function LocationPermission() {
         style={styles.buttonplace}
         textStyle={styles.button}
         onPress={requestLocationPermission}
+        disabled={isRequesting}
       />
     </ScrollView>
   );

package/src/screens/MrzAdvice.tsx

@@ -1,22 +1,36 @@
 import { useNavigation } from '@react-navigation/native';
-import { ScrollView, View } from 'react-native';
+import { ScrollView, View, Image } from 'react-native';
 import Button from '../components/ui/Button';
 import ThemedText from '../components/ui/ThemedText';
 import getStyles from '../styles/BarcodeAdviceStyles';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
+import { useIDM } from '../context/IDMConfigurationContext';
+import { getMRZImage } from '../utils/imagesHelper';
 import { useMemo } from 'react';
 
 export default function MrzAdvice() {
   const { theme } = useTheme();
   const orientation = useOrientation();
   const navigation = useNavigation();
+  const { idmConf } = useIDM();
 
   const styles = useMemo(
     () => getStyles(theme, orientation),
     [theme, orientation]
   );
 
+  const mrzImage = useMemo(() => {
+    const metadata = idmConf?.selectedCountryDetails?.selectedMetaData;
+    if (!metadata) return null;
+
+    return getMRZImage(
+      metadata.type || '',
+      metadata.countryCode || '',
+      metadata.barcode || ''
+    );
+  }, [idmConf]);
+
   const handleRedirect = () => {
     navigation.navigate('MrzCapture' as never);
   };
@@ -27,20 +41,20 @@ export default function MrzAdvice() {
         Scan the MRZ of your ID
       </ThemedText>
 
-      {/* Placeholder for MRZ image */}
-      <View
-        style={[
-          styles.idcard,
-          {
-            backgroundColor: '#f0f0f0',
-            justifyContent: 'center',
-            alignItems: 'center',
-          },
-        ]}
-      >
-        <ThemedText>MRZ Zone Image</ThemedText>
+      <View style={styles.idcard}>
+        {mrzImage && (
+          <Image
+            source={mrzImage}
+            style={{ width: '100%', height: '100%' }}
+            resizeMode="contain"
+          />
+        )}
       </View>
 
+      <ThemedText style={[styles.maintitle, { fontSize: 14, marginTop: 20 }]}>
+        Position the MRZ zone (bottom lines) within the frame
+      </ThemedText>
+
       <Button
         title="Scan"
         style={styles.buttonplace}