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

package/src/screens/BarcodeCapture.tsx

@@ -1,168 +1,147 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { View, Text, StyleSheet, Alert } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import React, { useEffect, useRef, useState } from 'react';
+import { View, Text } from 'react-native';
+import getStyles from '../styles/ScannerStyles';
 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 { captureBarcode } from '../apis';
+import { useIDM } from '../context/IDMConfigurationContext';
+import { useNavigation } from '@react-navigation/native';
+import CustomOverlay from '../components/common/CustomOverlay';
 
-export default function BarcodeCapture() {
+// Note: This component requires dynamsoft-capture-vision-react-native
+// Install with: npm install dynamsoft-capture-vision-react-native
+
+const BarcodeCapture: React.FC = () => {
   const { theme } = useTheme();
-  const { idmConf, setIDMConf } = useIDM();
   const orientation = useOrientation();
-  const styles = getStyles(theme, orientation);
+  const { idmConf } = useIDM();
   const navigation = useNavigation();
-  const [loading, setLoading] = useState(false);
-  const [scannedData, setScannedData] = useState<string | null>(null);
-  const [isScanning, setIsScanning] = useState(true);
-  const scannerRef = useRef<any>(null);
+  const styles = getStyles(theme, orientation);
+  const cameraViewRef = useRef<any>(null);
+
+  const [isScanningEnabled, setIsScanningEnabled] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
 
-  // Initialize Dynamsoft Barcode Scanner
   useEffect(() => {
-    let isMounted = true;
+    let cleanupFn: (() => void) | undefined;
 
-    const initializeScanner = async () => {
+    const initialize = async () => {
       try {
-        // Try to import Dynamsoft Capture Vision
-        const { DCVCameraView, DBRRuntimeSettings } = require('dynamsoft-capture-vision-react-native');
-        
-        // License initialization would go here
-        // await DCVBarcodeReader.initLicense('YOUR_LICENSE_KEY');
-        
-        console.log('Dynamsoft Barcode Scanner initialized');
-      } catch (error) {
-        console.warn('Dynamsoft not available, using fallback:', error);
-        // Fallback to simulation if Dynamsoft not installed
-        if (isMounted) {
-          simulateBarcodeScan();
+        // Import Dynamsoft modules
+        const {
+          CameraEnhancer,
+          CameraView,
+          CaptureVisionRouter,
+          EnumPresetTemplate,
+          EnumBarcodeFormat,
+          LicenseManager,
+        } = require('dynamsoft-capture-vision-react-native');
+
+        await LicenseManager.initLicense(
+          'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'
+        );
+        await CameraEnhancer.requestCameraPermission();
+
+        const camera = await CameraEnhancer.getInstance();
+        const router = await CaptureVisionRouter.getInstance();
+
+        if (cameraViewRef.current) {
+          await camera.setCameraView(cameraViewRef.current);
         }
-      }
-    };
-
-    initializeScanner();
-
-    return () => {
-      isMounted = false;
-      setIsScanning(false);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Handle barcode scan result
-  const handleBarcodeScanned = async (barcodeText: string) => {
-    if (loading || !barcodeText || !isScanning) return;
-
-    setIsScanning(false);
-    setScannedData(barcodeText);
-
-    try {
-      setLoading(true);
-
-      const barcodeData = {
-        token: String(idmConf.verificationCode || ''),
-        text: barcodeText,
-      };
 
-      // Call API to submit barcode
-      const result = await captureBarcode(idmConf, barcodeData);
+        await router.setInput(camera);
 
-      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 barcode', [
-          {
-            text: 'Retry',
-            onPress: () => {
-              setIsScanning(true);
-              setScannedData(null);
-              setLoading(false);
-            },
+        const settings = {
+          timeout: 1000,
+          barcodeSettings: {
+            expectedBarcodesCount: 1,
+            barcodeFormats: Number(EnumBarcodeFormat.BF_MICRO_PDF417),
           },
-        ]);
-      }
-    } catch (error: any) {
-      console.error('Error processing barcode:', error);
-      Alert.alert('Error', 'Failed to process barcode', [
-        {
-          text: 'Retry',
-          onPress: () => {
-            setIsScanning(true);
-            setScannedData(null);
-            setLoading(false);
+        };
+
+        await router.updateSettings(
+          settings,
+          EnumPresetTemplate.PT_READ_SINGLE_BARCODE
+        );
+
+        const receiver = router.addResultReceiver({
+          onDecodedBarcodesReceived: async (result: any) => {
+            const firstBarcode = result.items?.[0];
+            if (firstBarcode?.text) {
+              setIsScanningEnabled(false);
+              setIsLoading(true);
+
+              const requestData = {
+                text: firstBarcode.text,
+                token: idmConf.verificationCode ?? '',
+              };
+
+              try {
+                const barcodeScanResp = await captureBarcode(idmConf, requestData);
+                console.log('barcodeScanResp', barcodeScanResp);
+                
+                // Check if verification was already processed (409 status)
+                if (barcodeScanResp.status === 409) {
+                  console.log('Verification already processed, proceeding to ThankYou');
+                }
+                
+                navigation.navigate('ThankYou' as never);
+              } catch (error) {
+                console.error('Barcode capture error:', error);
+                setIsScanningEnabled(true);
+              } finally {
+                setIsLoading(false);
+              }
+            }
           },
-        },
-      ]);
-    }
-  };
+        });
 
-  // Fallback simulation if Dynamsoft not available
-  const simulateBarcodeScan = () => {
-    const timer = setTimeout(() => {
-      if (isScanning) {
-        const simulatedBarcode = 'SIMULATED_PDF417_' + Date.now();
-        handleBarcodeScanned(simulatedBarcode);
+        await camera.open();
+        await router.startCapturing(EnumPresetTemplate.PT_READ_SINGLE_BARCODE);
+
+        cleanupFn = () => {
+          router.removeResultReceiver(receiver);
+          router.stopCapturing();
+          camera.close();
+        };
+      } catch (err) {
+        console.error('Dynamsoft initialization error:', err);
+        console.warn(
+          'Barcode scanning requires dynamsoft-capture-vision-react-native library'
+        );
       }
-    }, 3000);
+    };
 
-    return () => clearTimeout(timer);
-  };
+    initialize();
 
-  // Render Dynamsoft Camera View
-  const renderBarcodeScanner = () => {
-    try {
-      const { DCVCameraView } = require('dynamsoft-capture-vision-react-native');
+    return () => {
+      if (cleanupFn) cleanupFn();
+    };
+  }, [isScanningEnabled, idmConf, navigation]);
 
-      return (
-        <DCVCameraView
-          ref={scannerRef}
-          style={StyleSheet.absoluteFill}
-          scanRegionVisible={true}
-          overlayVisible={true}
-          onBarcodeScanned={(results: any) => {
-            if (results && results.length > 0 && isScanning) {
-              const barcodeText = results[0].barcodeText || results[0].text;
-              handleBarcodeScanned(barcodeText);
-            }
-          }}
-        />
-      );
+  // Render Dynamsoft CameraView or fallback
+  const renderCameraView = () => {
+    try {
+      const { CameraView } = require('dynamsoft-capture-vision-react-native');
+      return <CameraView ref={cameraViewRef} style={styles.camera} />;
     } catch (error) {
-      console.warn('Dynamsoft camera view not available:', error);
-      
-      // Fallback UI
       return (
-        <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
-          <Text
-            style={{
-              color: '#fff',
-              textAlign: 'center',
-              marginTop: 200,
-              fontSize: 16,
-            }}
-          >
-            {loading ? 'Processing...' : 'Scanning for barcode...'}
+        <View
+          style={[
+            styles.camera,
+            {
+              backgroundColor: '#000',
+              justifyContent: 'center',
+              alignItems: 'center',
+            },
+          ]}
+        >
+          <Text style={{ color: '#fff', textAlign: 'center', padding: 20 }}>
+            Barcode scanning requires{'\n'}
+            dynamsoft-capture-vision-react-native{'\n\n'}
+            Install with:{'\n'}npm install dynamsoft-capture-vision-react-native
           </Text>
-          {scannedData && (
-            <Text
-              style={{
-                color: '#0f0',
-                textAlign: 'center',
-                marginTop: 20,
-                fontSize: 12,
-              }}
-            >
-              Detected: {scannedData.substring(0, 30)}...
-            </Text>
-          )}
         </View>
       );
     }
@@ -174,23 +153,13 @@ export default function BarcodeCapture() {
         Fill the box with the barcode{'\n'}until it turns green
       </Text>
 
-      {renderBarcodeScanner()}
-
-      {/* Barcode overlay box */}
-      <View
-        style={{
-          position: 'absolute',
-          top: '40%',
-          alignSelf: 'center',
-          width: 350,
-          height: 100,
-          borderWidth: 2,
-          borderColor: scannedData ? '#00ff00' : '#ffffff',
-          backgroundColor: 'transparent',
-        }}
-      />
-
-      {loading && <Loader message="Processing barcode..." />}
+      {renderCameraView()}
+
+      <CustomOverlay holeWidth={350} holeHeight={100} />
+
+      {isLoading && <Loader />}
     </View>
   );
-}
+};
+
+export default BarcodeCapture;

package/src/screens/DocumentCaptureBack.tsx

@@ -1,158 +1,199 @@
 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/DocumentCaptureBackStyle';
 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 { captureDocumentBack } 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 DocumentCaptureBack() {
   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);
-
-  // 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);
-        
-        const backDevice = useCameraDevice('back');
-        if (!backDevice) {
-          navigation.navigate('NoCameraFound' as never);
-          return;
-        }
-        
-        setDevice(backDevice);
-      } catch (error) {
-        console.warn('Camera initialization failed:', error);
-        setHasPermission(true);
-      }
-    };
+  const { failedCount, setFailedCount } = useFailedCount();
 
-    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.getNextScreenAfterBack();
-    navigation.navigate(nextScreen as never);
+    const { document_flow, barcode } = metaData;
+
+    if (!document_flow || document_flow.length === 0) {
+      // Check if barcode scan is needed even without document flow
+      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);
+      }
+      return;
+    }
+
+    // Decide based on first element in flow
+    const currentStep = document_flow[0];
+
+    if (currentStep === 'B') {
+      if (document_flow.includes('F')) {
+        navigation.navigate('FrontDocumentAdvice' 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) {
-      Alert.alert('Camera Not Available', 'Camera is not available in this environment.');
+    if (!cameraRef.current || loading) {
       return;
     }
 
     try {
       setLoading(true);
-      
       const photo = await cameraRef.current.takePhoto();
 
-      if (!validateImagePath(photo?.path)) {
-        Alert.alert('Error', 'Failed to capture image');
+      if (!photo?.path) {
+        console.error('No photo path available');
         setLoading(false);
         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 = {
         token: String(idmConf.verificationCode || ''),
         file: base64Image,
       };
 
-      // Call API to capture document back
       const result = await captureDocumentBack(idmConf, photoData);
 
-      if (result.status) {
-        // Update configuration with response
-        setIDMConf({
-          ...idmConf,
-          requestConfiguration: { ...idmConf.requestConfiguration, ...result },
-        });
-
-        // Navigate to next step based on metadata
+      if (typeof result.status === 'string') {
+        setIDMConf((prev) => ({
+          ...prev,
+          requestConfiguration: result,
+        }));
         handleNextStep();
       } else {
-        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('RetakeSelfie' as never, { 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);
     }
   };
 
-  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);
-    }
-
-    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 Back Side</Text>
 
-      {renderCamera()}
+      {device && (
+        <Camera
+          ref={cameraRef}
+          style={StyleSheet.absoluteFill}
+          device={device}
+          isActive={true}
+          photo={true}
+        />
+      )}
 
       <Image
         source={require('../../assets/images/card-overlay-back.png')}
@@ -160,12 +201,14 @@ export default function DocumentCaptureBack() {
         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 />}