@sanctum-key/react-native-sdk 1.0.33 → 1.0.34

package/src/components/KYCElements/IDCardCapture.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity, useWindowDimensions } from 'react-native';
+import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity, useWindowDimensions, Alert } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { TemplateComponent, LocalizedText, GovernmentDocumentType, ISilentCaptureResult, IBbox, GovernmentDocumentTypeShorted, GovernmentDocumentTypeBackend } from '../../types/KYC.types';
@@ -96,6 +96,10 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   const [pendingCAImage, setPendingCAImage] = useState<{ path: string, templateResponse: any, templatePath: string, bbox?: IBbox } | null>(null);
   
   const scannedBarcodeRef = useRef<string | null>(null);
+  // Ref mirrors — prevent stale closure reads in handleSilentCapture on iOS
+  const isAnalyzingRef = useRef<boolean>(false);
+  const isProcessingCaptureRef = useRef<boolean>(false);
+  const scanPhaseRef = useRef<'image' | 'barcode'>('image');
 
   const [generatedCode, setGeneratedCode] = useState<string | null>(null);
   const [isGeneratingCode, setIsGeneratingCode] = useState(false);
@@ -256,6 +260,11 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     }
   }, [value, currentSide]);
 
+  // Keep refs in sync with state so handleSilentCapture always reads current values
+  useEffect(() => { isAnalyzingRef.current = silentCaptureResult.isAnalyzing ?? false; }, [silentCaptureResult.isAnalyzing]);
+  useEffect(() => { isProcessingCaptureRef.current = isProcessingCapture; }, [isProcessingCapture]);
+  useEffect(() => { scanPhaseRef.current = scanPhase; }, [scanPhase]);
+
   const cameraConfig = useMemo(() => {
     let instructions = selectedDocumentType
       ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr)
@@ -418,7 +427,9 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       const base64 = await pathToBase64(safeCroppedPath);
       const newImages = {
         ...capturedImages,
-        [currentSide]: { dir: imagePathForUpload, file: base64, mrz: verified.mrz || "", templatePath: verified.templatePath },
+        // Store safeCroppedPath (guaranteed file:// on iOS) as dir so
+        // Image source={{ uri }} never receives a bare path on iOS.
+        [currentSide]: { dir: safeCroppedPath, file: base64, mrz: verified.mrz || "", templatePath: verified.templatePath },
       };
 
       setCapturedImages(newImages);
@@ -540,30 +551,44 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   };
 
   const handleSilentCapture = async (result: { success: boolean; path?: string; error?: string; barcode?: unknown }) => {
-    if (isProcessingCapture) return;
-    if (scanPhase === 'barcode') return;
-    if (silentCaptureResult.isAnalyzing) return;
-  
+    if (isProcessingCaptureRef.current) return;
+    if (scanPhaseRef.current === 'barcode') return;
+    if (isAnalyzingRef.current) return;
+
     if (result.success && result.path) {
       setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
-      
+
       let templatePath = capturedImages[currentSide]?.templatePath || '';
       let templateBbox: IBbox | undefined;
       let templateResponse: any;
-      
+
       if (!selectedDocumentType) {
         setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Document type not selected' }));
         return;
       }
-      
+
       const issuingSubdivision = selectedDocumentType.region !== 'root' ? selectedDocumentType.region : undefined;
-  
-      const safeCapturePath = (Platform.OS === 'ios' && !result.path.startsWith('file://')) 
-        ? `file://${result.path}` 
-        : result.path;
+      const safeCapturePath = (Platform.OS === 'ios' && !result.path.startsWith('file://')) ? `file://${result.path}` : result.path;
+
+      // 🚨 WATCHDOG TIMER: If the iOS network drops and doesn't throw, this guarantees the UI unlocks after 20 seconds.
+      const watchdog = setTimeout(() => {
+        if (isAnalyzingRef.current) {
+          setSilentCaptureResult((prev) => ({
+            ...prev,
+            isAnalyzing: false,
+            success: false,
+            error: state.currentLanguage === 'en' ? 'Connection timeout. Please try again.' : 'Délai de connexion dépassé. Veuillez réessayer.'
+          }));
+          Alert.alert(
+            state.currentLanguage === 'en' ? "Timeout" : "Délai dépassé",
+            state.currentLanguage === 'en' 
+              ? "The request took too long. Please verify your network and try again." 
+              : "La requête a pris trop de temps. Veuillez vérifier votre connexion et réessayer."
+          );
+        }
+      }, 20000);
 
       try {
-        // 1. Check & Crop the Template visually first
         if (!templatePath) {
           const templateType = await checkTemplateType({
             path: safeCapturePath,
@@ -572,63 +597,78 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
             postfix: currentSide,
             issuingSubdivision: issuingSubdivision
           }, env);
-          
+
           templateResponse = templateType;
           if (templateType.template_path) templatePath = templateType.template_path;
-          
           if (templateType.card_obb) {
             const obbConfidence = getObbConfidence((templateType as any).card_obb);
             if (obbConfidence !== null && obbConfidence < OBB_CONFIDENCE_THRESHOLD) {
+              clearTimeout(watchdog);
               setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: t('kyc.idCardCapture.cardNotFullyInFrame') }));
               return;
             }
             try {
-              const crop = await cropByObb(safeCapturePath, (templateType as any).card_obb);              templateBbox = crop.bbox;
+              const crop = await cropByObb(safeCapturePath, (templateType as any).card_obb);
+              templateBbox = crop.bbox;
             } catch {}
           }
         }
-  
+
         const extractedCountryKey = templatePath ? templatePath.split('/')[0] : (ISO_TO_COUNTRY_NAME[countryData?.code || ''] || 'root');
         const regionMappings = getCurrentSideVerification(currentSide, extractedCountryKey);
+
         let verificationRes: any;
-  
         if (currentSide === 'front') {
           const matchedAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'front');
           const mrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || 'TD1';
-          
+
           verificationRes = await frontVerification({
             path: safeCapturePath,
-            regionMapping: { authMethod: matchedAuthMethod ? [matchedAuthMethod] : [], mrzTypes: mrzType ? [mrzType] : [] },
+            regionMapping: {
+              authMethod: matchedAuthMethod ? [matchedAuthMethod] : [],
+              mrzTypes: mrzType ? [mrzType] : []
+            },
             selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type as keyof typeof GovernmentDocumentTypeShorted] || '',
-            code: countryData?.code || '', currentSide, templatePath, mrzType,
-            issuingSubdivision: issuingSubdivision, clientSideBarcodeData: silentCaptureResult.barcode
+            code: countryData?.code || '',
+            currentSide,
+            templatePath,
+            mrzType,
+            issuingSubdivision: issuingSubdivision,
+            clientSideBarcodeData: silentCaptureResult.barcode
           }, env);
+
         } else {
           logger.log("Attempting backVerification with:", { path: safeCapturePath, templatePath, side: currentSide });
           const matchedBackAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'back');
           const backMrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '';
           const frontTemplatePath = capturedImages['front']?.templatePath || '';
-          
-          // This validates if the back matches the front template!
+
           verificationRes = await backVerification({
             path: safeCapturePath,
-            regionMapping: { authMethod: matchedBackAuthMethod ? [matchedBackAuthMethod] : [], mrzTypes: backMrzType ? [backMrzType] : [] },
+            regionMapping: {
+              authMethod: matchedBackAuthMethod ? [matchedBackAuthMethod] : [],
+              mrzTypes: backMrzType ? [backMrzType] : []
+            },
             selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type as keyof typeof GovernmentDocumentTypeShorted] || '',
-            code: countryData?.code || '', currentSide, templatePath, mrzType: backMrzType, templateResponse,
-            issuingSubdivision: issuingSubdivision, frontTemplatePath: frontTemplatePath
+            code: countryData?.code || '',
+            currentSide,
+            templatePath,
+            mrzType: backMrzType,
+            templateResponse,
+            issuingSubdivision: issuingSubdivision,
+            frontTemplatePath: frontTemplatePath
           }, env);
         }
-  
+
         const bbox = verificationRes?.bbox || templateBbox;
         const verifiedMrz = verificationRes?.mrz ? JSON.stringify(verificationRes.mrz) : "";
-  
+
         if (isBarcodeRequired()) {
           const barcodeData = scannedBarcodeRef.current;
           const docTypeStr = selectedDocumentType!.type;
           const isHIC = docTypeStr === 'health_insurance_card';
           const isValidScan = typeof barcodeData === 'string' && ((isHIC && barcodeData.length > 0) || barcodeData.length > 50);
-  
-          // If the barcode was caught extremely fast in the same frame
+
           if (isValidScan) {
             logger.log('[CA Barcode] Image captured, verified & barcode ALREADY scanned! Skipping Phase 2.');
             let parsedDictionary;
@@ -638,14 +678,15 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
               const token = await authentification();
               parsedDictionary = await kycService.formatBarcodeData({ textInput: barcodeData, token }, env);
             }
-  
+
             const verifiedResult: ISilentCaptureResult & { region?: string } = {
               path: safeCapturePath, templatePath: templatePath, bbox: bbox, success: true,
               mrz: JSON.stringify(parsedDictionary), barcode: barcodeData, isAnalyzing: false,
               country: countryData?.code, documentType: selectedDocumentType!.type,
               region: selectedDocumentType!.region !== 'root' ? selectedDocumentType!.region : undefined,
             };
-  
+
+            clearTimeout(watchdog);
             setSilentCaptureResult(verifiedResult);
             if (bbox) {
               const safeBbox = bbox as IBbox;
@@ -654,41 +695,60 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
             await autoCapture(safeCapturePath!, verifiedResult);
             return;
           }
-  
-          // If validation passed but we still need the barcode, trigger the UI phase!
+
           logger.log('[CA Barcode] Image captured & template VERIFIED. Switching to Barcode phase.');
+          clearTimeout(watchdog);
           setPendingCAImage({ path: safeCapturePath!, templateResponse, templatePath, bbox });
           setScanPhase('barcode');
           setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
           return;
         }
-  
-        // 4. NORMAL COMPLETION (For standard MRZ / Passport / Non-barcode documents)
+
         const verifiedResult: ISilentCaptureResult & { region?: string } = {
-          path: safeCapturePath, templatePath, bbox, success: true, mrz: verifiedMrz, isAnalyzing: false,
-          country: countryData?.code, documentType: selectedDocumentType.type, region: issuingSubdivision
+          path: safeCapturePath, templatePath, bbox, success: true, mrz: verifiedMrz,
+          isAnalyzing: false, country: countryData?.code, documentType: selectedDocumentType.type,
+          region: issuingSubdivision
         };
         
+        clearTimeout(watchdog);
         setSilentCaptureResult(verifiedResult);
         if (bbox) setBboxBySide(prev => ({ ...prev, [currentSide]: bbox }));
         await autoCapture(safeCapturePath, verifiedResult);
-  
+
       } catch (error: any) {
+        clearTimeout(watchdog);
         console.log("Backend Verification Error:", error);
-        const rawMessage = (error?.message || '').toLowerCase();
-        let userFriendlyMessage ='Verification failed. Please try again.';
         
-        if (rawMessage.includes('impossible') || rawMessage.includes('unreadable')) {
-          userFriendlyMessage = 'Document unreadable. Please hold the camera steady in good light.';
-        } else if (rawMessage.includes('country mismatch') || rawMessage.includes('pays sélectionné')) {
-          userFriendlyMessage = 'The document does not match your selected country.';
-        } else if (rawMessage.includes('card_not_fully_in_frame')) {
-          userFriendlyMessage = 'Move closer to the document and ensure all corners are visible.';
-        } else if (rawMessage.includes('ne correspond pas au recto')) {
-          userFriendlyMessage = 'The back of the document does not match the front. You must scan the same ID.';
+        const isNetworkError = 
+          !error.response || 
+          error.message === 'Network Error' || 
+          error.code === 'ECONNABORTED' ||
+          error.message?.includes('Network');
+
+        let userFriendlyMessage = 'Verification failed. Please try again.';
+
+        if (isNetworkError) {
+          userFriendlyMessage = state.currentLanguage === 'en' 
+            ? 'Cannot connect to verification server. Please check your internet connection.'
+            : 'Impossible de se connecter au serveur de vérification. Veuillez vérifier votre connexion internet.';
+          
+          Alert.alert(
+            state.currentLanguage === 'en' ? "Connection Failed" : "Échec de connexion", 
+            userFriendlyMessage
+          );
+        } else {
+          const rawMessage = (error?.message || '').toLowerCase();
+          if (rawMessage.includes('impossible') || rawMessage.includes('unreadable')) {
+            userFriendlyMessage = 'Document unreadable. Please hold the camera steady in good light.';
+          } else if (rawMessage.includes('country mismatch') || rawMessage.includes('pays sélectionné')) {
+            userFriendlyMessage = 'The document does not match your selected country.';
+          } else if (rawMessage.includes('card_not_fully_in_frame')) {
+            userFriendlyMessage = 'Move closer to the document and ensure all corners are visible.';
+          } else if (rawMessage.includes('ne correspond pas au recto')) {
+            userFriendlyMessage = 'The back of the document does not match the front. You must scan the same ID.';
+          }
         }
-        
-        // The error is thrown here, completely blocking the switch to 'barcode' phase
+
         setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: userFriendlyMessage }));
       }
     }