@sanctum-key/react-native-sdk 1.0.18 → 1.0.20

package/src/components/KYCElements/IDCardCapture.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { TemplateComponent, LocalizedText, GovernmentDocumentType, ISilentCaptureResult, IBbox, GovernmentDocumentTypeShorted, GovernmentDocumentTypeBackend } from '../../types/KYC.types';
@@ -13,586 +13,622 @@ import { getDocumentTypeInfo } from '../../utils/get-document-type-info';
 import pathToBase64 from '../../utils/pathToBase64';
 import { cropByObb, cropImageWithBBoxWithTolerance, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from '../../utils/cropByObb';
 import REGION_MAPPING from '../../config/region_mapping.json';
+import QRCode from 'react-native-qrcode-svg';
 
 const ISO_TO_COUNTRY_NAME: Record<string, string> = { 'KE': 'Kenya', 'CM': 'Cameroon', 'NG': 'Nigeria', 'CA': 'Canada', 'FR': 'France', 'GH': 'Ghana', 'ZA': 'South Africa', 'GB': 'Britain', 'CI': 'Ivory Coast', 'SN': 'Senegal', 'TG': 'Togo', 'ML': 'Mali' };
 
 interface IIDCardPayload { dir: string; file: string; mrz: string; templatePath?: string; }
-interface IDCardCaptureProps { component: TemplateComponent; value?: Record<string, IIDCardPayload>; onValueChange: (value: Record<string, IIDCardPayload | string>) => void; error?: string; language?: string; currentSide?: string; }
+interface IDCardCaptureProps {
+  component: TemplateComponent;
+  value?: Record<string, IIDCardPayload>;
+  onValueChange: (value: Record<string, IIDCardPayload | string>) => void;
+  error?: string;
+  language?: string;
+  currentSide?: string;
+}
 
 export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value = {}, onValueChange, error, language = 'en' }) => {
-   const { t, locale } = useI18n();
-   const [showCamera, setShowCamera] = useState(false);
-   const [capturedImages, setCapturedImages] = useState<Record<string, IIDCardPayload>>(value || {});
-   const [currentSide, setCurrentSide] = useState<'front' | 'back'>('front');
-   const [bboxBySide, setBboxBySide] = useState<Record<string, IBbox>>({});
-   const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
-   const [isProcessingCapture, setIsProcessingCapture] = useState(false);
-   const [processingImagePath, setProcessingImagePath] = useState<string | null>(null);
-   
-   const [cameraKey, setCameraKey] = useState(0);
-   const [isRebootingCamera, setIsRebootingCamera] = useState(false);
-   // Web specific state
-   const [cameraType, setCameraType] = useState<'back' | 'front'>('back');
-
-   const documentTypeMapping: Record<string, GovernmentDocumentType> = { 'nationalId': 'national_id', 'passport': 'passport', 'driversLicense': 'drivers_licence', 'residencePermit': 'permanent_residence', 'healthInsuranceCard': 'health_insurance_card', };
-   const { actions, state, env } = useTemplateKYCFlowContext();
-
-   const getLocalizedText = (text: LocalizedText | Record<string, LocalizedText>): string => {
-     if (text && typeof text[currentSide] === 'object' && text[currentSide][locale]) return text[currentSide][locale] || '';
-     return "";
-   };
-
-   const countrySelectionData = useMemo(() => {
-     const countrySelectionComponent = state.template.components.find(c => c.type === 'country_selection');
-     return countrySelectionComponent ? state.componentData[countrySelectionComponent.id] : null;
-   }, [state.template.components, state.componentData]);
-
-   const selectedDocumentType = useMemo<{ type: GovernmentDocumentType; region: string } | null>(() => {
-     if (!countrySelectionData?.documentType) return null;
-     const backendDocType = countrySelectionData.documentType;
-     const mappedType = documentTypeMapping[backendDocType] || backendDocType as GovernmentDocumentType;
-     return { type: mappedType, region: countrySelectionData.region || 'root' };
-   }, [countrySelectionData, documentTypeMapping]);
-
-   const countryData = useMemo(() => countrySelectionData, [countrySelectionData]);
-
-   const refreshCamera = () => {
-     setIsRebootingCamera(true);
-     setTimeout(() => {
-       setCameraKey(prev => prev + 1);
-       setIsRebootingCamera(false);
-     }, 500);
-   };
-
-   const toggleCameraLens = () => {
-     setCameraType(prev => prev === 'back' ? 'front' : 'back');
-     refreshCamera();
-   };
-
-   useEffect(() => {
-     if (value && Object.keys(value).length > 0) {
-       if (JSON.stringify(value) !== JSON.stringify(capturedImages)) {
-         const updatedImages = value as Record<string, IIDCardPayload>;
-         setCapturedImages(updatedImages);
-         const currentImageData = updatedImages[currentSide];
-         if (currentImageData?.dir) {
-           setSilentCaptureResult(prev => ({
-             ...prev, path: currentImageData.dir, success: true, isAnalyzing: false, mrz: currentImageData.mrz || '', templatePath: currentImageData.templatePath || '',
-           }));
-         }
-       }
-     }
-   }, [value, currentSide]);
-
-   const cameraConfig = useMemo(() => {
-     const instructions = selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions as Record<string, LocalizedText>);
-     return {
-       cameraType: Platform.OS === 'web' ? cameraType : 'back',
-       flashMode: 'auto' as const,
-       overlay: {
-          guideText: instructions,
-          bbox: { xMin: 5, yMin: 15, xMax: 95, yMax: 85, borderColor: '#2DBD60', borderWidth: 3, cornerRadius: 8 }
-       }
-     };
-   }, [selectedDocumentType, locale, component.instructions, cameraType]);
-
-   const retakePicture = (sideToRetake: 'front' | 'back') => {
-     setIsProcessingCapture(false);
-     setProcessingImagePath(null);
-     setSilentCaptureResult({ path: '', success: false, isAnalyzing: false, error: '', templatePath: '', mrz: '', bbox: undefined });
-     setShowCamera(true);
-     refreshCamera();
-     actions.showCustomStepper(false);
-     setCapturedImages((prev) => { const newState = { ...prev }; delete newState[sideToRetake]; return newState; });
-     if (value) { const newValue = { ...value }; delete newValue[sideToRetake]; onValueChange(newValue); }
-   };
-
-   const getCurrentSideVerification = (currentSide: string, countryKey: string) => {
-     const rawDocType = countrySelectionData?.documentType;
-     if (!rawDocType || !countryKey) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; }
-     const rawCountryName = ISO_TO_COUNTRY_NAME[countryData?.code || ''] || countryData?.code || countryKey;
-     const baseMapping = (REGION_MAPPING as any).regionMapping || REGION_MAPPING;
-     let countryMapping = baseMapping[rawCountryName];
-     if (!countryMapping) {
-       const foundKey = Object.keys(baseMapping).find(k => k.toLowerCase() === rawCountryName.toLowerCase() || k.toLowerCase() === countryKey.toLowerCase());
-       if (foundKey) countryMapping = baseMapping[foundKey];
-     }
-     if (!countryMapping) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; }
-     const regionMapping = countryMapping[rawDocType];
-     if (!regionMapping) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; }
-     const authMethod: string[] = [];
-     const mrzTypes: string[] = [];
-     const key = countrySelectionData.region?.trim()?.length > 0 ? countrySelectionData.region.trim() : 'root';
-     if (regionMapping?.[key] && Array.isArray(regionMapping[key])) {
-       regionMapping[key].forEach((item: any) => {
-         if (item[currentSide]) {
-           authMethod.push(item[currentSide]);
-           if (item?.mrz_type) mrzTypes.push(item?.mrz_type);
-         }
-       });
-     }
-     return { authMethod: removeDuplicates(authMethod), mrzTypes: removeDuplicates(mrzTypes), regionMapping, key };
-   }
-
-   const getCorrespondingMrzType = (templatePath: string, mapping: any, selectedDocumentType: string = "root") => {
-     if (!mapping || !mapping[selectedDocumentType]) return null;
-     const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
-     if (!fileName) return null;
-     const pyName = `${fileName}.py`;
-     const found = mapping[selectedDocumentType].find((item: any) => item.py_file === pyName);
-     return found?.mrz_type || null;
-   }
-
-   const getCorrespondingAuthMethod = (templatePath: string, mapping: any, selectedDocumentType: string = "root", side: 'front' | 'back') => {
-     if (!mapping || !mapping[selectedDocumentType]) return null;
-     const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
-     if (!fileName) return null;
-     const pyName = `${fileName}.py`;
-     const found = mapping[selectedDocumentType].find((item: any) => item.py_file === pyName);
-     return found?.[side] || null;
-   }
-
-   const autoCapture = async (capturePath: string, verified: ISilentCaptureResult) => {
-     if (isProcessingCapture) return;
-     setIsProcessingCapture(true);
-     setProcessingImagePath(capturePath);
-
-     try {
-       let imagePathForUpload = capturePath;
-       
-       const overlayBbox = cameraConfig.overlay.bbox;
-       const uiCropBbox = {
-         minX: overlayBbox.xMin / 100,
-         minY: overlayBbox.yMin / 100,
-         width: (overlayBbox.xMax - overlayBbox.xMin) / 100,
-         height: (overlayBbox.yMax - overlayBbox.yMin) / 100,
-       };
-
-       try {
-         // Apply the crop using the UI percentages and a tight 2% tolerance
-         // NOTE: If you integrated the Kotlin centered crop function earlier, replace this with cropToCenterScanArea
-         imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, uiCropBbox, 0.02);
-       } catch (e) {
-         console.warn("Crop failed, falling back to original image", e);
-         imagePathForUpload = capturePath; 
-       }
-       
-       const base64 = await pathToBase64(imagePathForUpload);
-       const newImages = {
-         ...capturedImages,
-         [currentSide]: { dir: imagePathForUpload, file: base64, mrz: verified.mrz || "", templatePath: verified.templatePath },
-       };
-       
-       setCapturedImages(newImages);
-       
-       if (verified.country && verified.documentType) {
-         onValueChange({
-           ...newImages,
-           country: verified.country,
-           documentType: GovernmentDocumentTypeBackend[verified.documentType as keyof typeof GovernmentDocumentTypeBackend] || '',
-         });
-       }
-       
-       setTimeout(() => {
-         setShowCamera(false);
-         actions.showCustomStepper(true);
-         setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
-         setIsProcessingCapture(false);
-         setProcessingImagePath(null);
-       }, 600);
-       
-     } catch (e: any) {
-       console.error("Backend Error:", e);
-       const friendlyError = state.currentLanguage === 'en' ? 'Unable to process document. Please try again.' : 'Impossible de traiter le document. Veuillez réessayer.';
-       showAlert('Error', friendlyError);
-       setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false }));
-       setIsProcessingCapture(false);
-       setProcessingImagePath(null);
-     }
-   };
-
-   const handleSilentCapture = async (result: { success: boolean; path?: string; error?: string }) => {
-     if (silentCaptureResult.isAnalyzing || isProcessingCapture) 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;
-       }
-       try {
-         if (!templatePath) {
-           const templateType = await checkTemplateType({ path: result.path || '', docType: selectedDocumentType?.type as GovernmentDocumentType, docRegion: countryData?.code || "", postfix: currentSide }, 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) {
-               setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: t('kyc.idCardCapture.cardNotFullyInFrame') }));
-               return;
-             }
-             try {
-               const crop = await cropByObb(result.path, (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: result.path, regionMapping: { authMethod: matchedAuthMethod ? [matchedAuthMethod] : regionMappings.authMethod, mrzTypes: regionMappings.mrzTypes }, selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type as keyof typeof GovernmentDocumentTypeShorted] || '', code: countryData?.code || '', currentSide, templatePath, mrzType }, env);
-         } else {
-           let matchedBackAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'back');
-           if (!matchedBackAuthMethod && currentSide === 'back') {
-             matchedBackAuthMethod = 'MRZ';
-           }
-           const backMrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || 'TD1';
-           verificationRes = await backVerification({ path: result.path, regionMapping: { authMethod: matchedBackAuthMethod ? [matchedBackAuthMethod] : regionMappings.authMethod, mrzTypes: regionMappings.mrzTypes }, selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type as keyof typeof GovernmentDocumentTypeShorted] || '', code: countryData?.code || '', currentSide, templatePath, mrzType: backMrzType, templateResponse }, env);
-         }
-         const bbox = verificationRes?.bbox || templateBbox;
-         const mrz = verificationRes?.mrz ? JSON.stringify(verificationRes.mrz) : "";
-         const verifiedResult: ISilentCaptureResult = { path: result.path, templatePath, bbox, success: true, mrz, isAnalyzing: false, country: countryData?.code, documentType: selectedDocumentType.type };
-         setSilentCaptureResult(verifiedResult);
-         if (bbox) setBboxBySide(prev => ({ ...prev, [currentSide]: bbox }));
-         await autoCapture(result.path, verifiedResult);
-       } catch (error: any) {
-         console.log("Backend Verification Error:", error);
-         
-         // 2. Define a map of technical keywords to user-friendly messages
-         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')) { 
-           // 🚨 REMOVED 'too far' CHECK FROM HERE
-           userFriendlyMessage = 'Move closer to the document and ensure all corners are visible.';
-         }
-         
-         // 3. Set ONLY the friendly message to the UI state
-         setSilentCaptureResult(prev => ({ 
-            ...prev, 
-            isAnalyzing: false, 
-            success: false, 
-            error: userFriendlyMessage 
+  const { t, locale } = useI18n();
+  const [showCamera, setShowCamera] = useState(false);
+  const [capturedImages, setCapturedImages] = useState<Record<string, IIDCardPayload>>(value || {});
+  const [currentSide, setCurrentSide] = useState<'front' | 'back'>('front');
+  const [bboxBySide, setBboxBySide] = useState<Record<string, IBbox>>({});
+  const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
+  const [isProcessingCapture, setIsProcessingCapture] = useState(false);
+  const [processingImagePath, setProcessingImagePath] = useState<string | null>(null);
+  const [cameraKey, setCameraKey] = useState(0);
+  const [isRebootingCamera, setIsRebootingCamera] = useState(false);
+  const [cameraType, setCameraType] = useState<'back' | 'front'>('back');
+  const [showQRModal, setShowQRModal] = useState(false);
+  const [currentUrl, setCurrentUrl] = useState('');
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.location) {
+      setCurrentUrl(window.location.href);
+    }
+  }, []);
+
+  const documentTypeMapping: Record<string, GovernmentDocumentType> = { 'nationalId': 'national_id', 'passport': 'passport', 'driversLicense': 'drivers_licence', 'residencePermit': 'permanent_residence', 'healthInsuranceCard': 'health_insurance_card', };
+
+  const { actions, state, env } = useTemplateKYCFlowContext();
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+
+  const getLocalizedText = (text: LocalizedText | Record<string, LocalizedText>): string => {
+    if (text && typeof text[currentSide] === 'object' && text[currentSide][locale]) return text[currentSide][locale] || '';
+    return "";
+  };
+
+  const countrySelectionData = useMemo(() => {
+    const countrySelectionComponent = state.template.components.find(c => c.type === 'country_selection');
+    return countrySelectionComponent ? state.componentData[countrySelectionComponent.id] : null;
+  }, [state.template.components, state.componentData]);
+
+  const selectedDocumentType = useMemo<{ type: GovernmentDocumentType; region: string } | null>(() => {
+    if (!countrySelectionData?.documentType) return null;
+    const backendDocType = countrySelectionData.documentType;
+    const mappedType = documentTypeMapping[backendDocType] || backendDocType as GovernmentDocumentType;
+    return { type: mappedType, region: countrySelectionData.region || 'root' };
+  }, [countrySelectionData, documentTypeMapping]);
+
+  const countryData = useMemo(() => countrySelectionData, [countrySelectionData]);
+
+  const refreshCamera = () => {
+    setIsRebootingCamera(true);
+    setTimeout(() => {
+      setCameraKey(prev => prev + 1);
+      setIsRebootingCamera(false);
+    }, 500);
+  };
+
+  const toggleCameraLens = () => {
+    setCameraType(prev => prev === 'back' ? 'front' : 'back');
+    refreshCamera();
+  };
+
+  useEffect(() => {
+    if (value && Object.keys(value).length > 0) {
+      if (JSON.stringify(value) !== JSON.stringify(capturedImages)) {
+        const updatedImages = value as Record<string, IIDCardPayload>;
+        setCapturedImages(updatedImages);
+        const currentImageData = updatedImages[currentSide];
+        if (currentImageData?.dir) {
+          setSilentCaptureResult(prev => ({
+            ...prev, path: currentImageData.dir, success: true, isAnalyzing: false, mrz: currentImageData.mrz || '', templatePath: currentImageData.templatePath || '',
           }));
-       }
-     }
-   };
-
-   const handleError = (event: { message: string }) => {
-     showAlert('Erreur', event.message);
-     setShowCamera(false);
-     setIsProcessingCapture(false);
-   };
-
-   useEffect(() => {
-     actions.showCustomStepper(!showCamera);
-   }, [showCamera]);
-
-   if (!countrySelectionData || !selectedDocumentType) {
-     return (
-       <View style={styles.root}>
-         <View style={styles.previewContainer}>
-           <Text style={styles.title}>{getLocalizedText(component.labels)}</Text>
-           <Text style={styles.description}>
-             {state.currentLanguage === "en" ? "Please complete the country and document selection first." : "Veuillez d'abord compléter la sélection du pays et du document."}
-           </Text>
-         </View>
-       </View>
-     );
-   }
-
-   // --- CAMERA RENDER ---
-   if (showCamera) {
-     const isBusy = isProcessingCapture;
-
-     if (isRebootingCamera) {
-       return (
-         <View style={[styles.root, { justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' }]}>
-           <ActivityIndicator size="large" color="#2DBD60" />
-           <Text style={{ color: 'white', marginTop: 20, fontSize: 16 }}>Initializing Camera...</Text>
-         </View>
-       );
-     }
-
-     return (
-       <View style={styles.root}>
-         <View style={[styles.cameraWrapper, { flex: 1 }]}>
-           
-           <View style={styles.headerContainer}>
-             <Text style={styles.headerTitle}>
-               {selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : ''}
-             </Text>
-             <View style={styles.stepBadge}>
-               <Text style={styles.stepText}>
-                 {t('kyc.idCardCapture.captureTitle', { side: currentSide === 'front' ? locale === 'en' ? 'Front' : 'Recto' : locale === 'en' ? 'Back' : 'Verso' })}
-               </Text>
-             </View>
-           </View>
-           
-           <View style={[styles.cameraFeedContainer, { flex: 1, backgroundColor: '#000' }]}>
-             
-             {/* WEB ONLY: Flip Camera Top Button */}
-             {Platform.OS === 'web' && (
-               <View style={styles.webTopControls}>
-                  <TouchableOpacity style={styles.webFlipButton} onPress={toggleCameraLens}>
-                     <Text style={styles.webFlipText}>🔄 Flip Lens</Text>
+        }
+      }
+    }
+  }, [value, currentSide]);
+
+  const cameraConfig = useMemo(() => {
+    const instructions = selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions as Record<string, LocalizedText>);
+    const isLandscape = screenWidth > screenHeight;
+    let xMin, xMax, yMin, yMax;
+
+    if (Platform.OS === 'web') {
+      const boxWidthPercent = isLandscape ? 0.40 : 0.85;
+      xMin = isLandscape ? 30 : 7.5;
+      xMax = xMin + (boxWidthPercent * 100);
+      const containerWidth = Math.min(screenWidth * 0.95, 1000);
+      const containerHeight = isLandscape ? screenHeight * 0.80 : screenHeight * 0.90;
+      const boxPixelWidth = containerWidth * boxWidthPercent;
+      const boxPixelHeight = boxPixelWidth / 1.59;
+      const heightPercent = (boxPixelHeight / containerHeight) * 100;
+      yMin = (100 - heightPercent) / 2.5;
+      yMax = yMin + heightPercent;
+    } else {
+      xMin = 5; xMax = 95; yMin = 34; yMax = 66;
+    }
+    const platformBbox = { xMin, yMin, xMax, yMax, borderColor: '#2DBD60', borderWidth: Platform.OS === 'web' ? 2 : 3, cornerRadius: 8 };
+    return {
+      cameraType: Platform.OS === 'web' ? cameraType : 'back',
+      flashMode: 'auto' as const,
+      overlay: { guideText: instructions, bbox: platformBbox }
+    };
+  }, [selectedDocumentType, locale, component.instructions, cameraType, screenWidth, screenHeight]);
+
+  const retakePicture = (sideToRetake: 'front' | 'back') => {
+    setIsProcessingCapture(false);
+    setProcessingImagePath(null);
+    setSilentCaptureResult({ path: '', success: false, isAnalyzing: false, error: '', templatePath: '', mrz: '', bbox: undefined });
+    setShowCamera(true);
+    refreshCamera();
+    actions.showCustomStepper(false);
+    setCapturedImages((prev) => { const newState = { ...prev }; delete newState[sideToRetake]; return newState; });
+    if (value) { const newValue = { ...value }; delete newValue[sideToRetake]; onValueChange(newValue); }
+  };
+
+  const getCurrentSideVerification = (currentSide: string, countryKey: string) => {
+    const rawDocType = countrySelectionData?.documentType;
+    if (!rawDocType || !countryKey) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; }
+    const rawCountryName = ISO_TO_COUNTRY_NAME[countryData?.code || ''] || countryData?.code || countryKey;
+    const baseMapping = (REGION_MAPPING as any).regionMapping || REGION_MAPPING;
+    let countryMapping = baseMapping[rawCountryName];
+    if (!countryMapping) {
+      const foundKey = Object.keys(baseMapping).find(k => k.toLowerCase() === rawCountryName.toLowerCase() || k.toLowerCase() === countryKey.toLowerCase());
+      if (foundKey) countryMapping = baseMapping[foundKey];
+    }
+    if (!countryMapping) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; }
+    const regionMapping = countryMapping[rawDocType];
+    if (!regionMapping) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; }
+    const authMethod: string[] = [];
+    const mrzTypes: string[] = [];
+    const key = countrySelectionData.region?.trim()?.length > 0 ? countrySelectionData.region.trim() : 'root';
+    if (regionMapping?.[key] && Array.isArray(regionMapping[key])) {
+      regionMapping[key].forEach((item: any) => {
+        if (item[currentSide]) {
+          authMethod.push(item[currentSide]);
+          if (item?.mrz_type) mrzTypes.push(item?.mrz_type);
+        }
+      });
+    }
+    return { authMethod: removeDuplicates(authMethod), mrzTypes: removeDuplicates(mrzTypes), regionMapping, key };
+  }
+
+  const getCorrespondingMrzType = (templatePath: string, mapping: any, selectedDocumentType: string = "root") => {
+    if (!mapping || !mapping[selectedDocumentType]) return null;
+    const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
+    if (!fileName) return null;
+    const pyName = `${fileName}.py`;
+    const found = mapping[selectedDocumentType].find((item: any) => item.py_file === pyName);
+    return found?.mrz_type || null;
+  }
+
+  const getCorrespondingAuthMethod = (templatePath: string, mapping: any, selectedDocumentType: string = "root", side: 'front' | 'back') => {
+    if (!mapping || !mapping[selectedDocumentType]) return null;
+    const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
+    if (!fileName) return null;
+    const pyName = `${fileName}.py`;
+    const found = mapping[selectedDocumentType].find((item: any) => item.py_file === pyName);
+    return found?.[side] || null;
+  }
+
+  const autoCapture = async (capturePath: string, verified: ISilentCaptureResult & { region?: string }) => {
+    if (isProcessingCapture) return;
+    setIsProcessingCapture(true);
+    setProcessingImagePath(capturePath);
+    try {
+      let imagePathForUpload = capturePath;
+      const overlayBbox = cameraConfig.overlay.bbox;
+      const uiCropBbox = {
+        minX: overlayBbox.xMin / 100,
+        minY: overlayBbox.yMin / 100,
+        width: (overlayBbox.xMax - overlayBbox.xMin) / 100,
+        height: (overlayBbox.yMax - overlayBbox.yMin) / 100,
+      };
+      try {
+        imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, uiCropBbox, 0.06);
+      } catch (e) {
+        console.warn("Crop failed, falling back to original image", e);
+        imagePathForUpload = capturePath;
+      }
+      const base64 = await pathToBase64(imagePathForUpload);
+      const newImages = {
+        ...capturedImages,
+        [currentSide]: { dir: imagePathForUpload, file: base64, mrz: verified.mrz || "", templatePath: verified.templatePath },
+      };
+      setCapturedImages(newImages);
+
+      if (verified.country && verified.documentType) {
+        onValueChange({
+          ...newImages,
+          country: verified.country,
+          documentType: GovernmentDocumentTypeBackend[verified.documentType as keyof typeof GovernmentDocumentTypeBackend] || '',
+          ...(verified.region ? { region: verified.region } : {}) 
+        });
+      }
+
+      setTimeout(() => {
+        setShowCamera(false);
+        actions.showCustomStepper(true);
+        setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
+        setIsProcessingCapture(false);
+        setProcessingImagePath(null);
+      }, 600);
+    } catch (e: any) {
+      console.error("Backend Error:", e);
+      const friendlyError = state.currentLanguage === 'en' ? 'Unable to process document. Please try again.' : 'Impossible de traiter le document. Veuillez réessayer.';
+      showAlert('Error', friendlyError);
+      setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false }));
+      setIsProcessingCapture(false);
+      setProcessingImagePath(null);
+    }
+  };
+
+  const handleSilentCapture = async (result: { success: boolean; path?: string; error?: string }) => {
+    if (silentCaptureResult.isAnalyzing || isProcessingCapture) 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;
+
+      try {
+        if (!templatePath) {
+          const templateType = await checkTemplateType({ 
+            path: result.path || '', 
+            docType: selectedDocumentType?.type as GovernmentDocumentType, 
+            docRegion: countryData?.code || "", 
+            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) {
+              setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: t('kyc.idCardCapture.cardNotFullyInFrame') }));
+              return;
+            }
+            try {
+              const crop = await cropByObb(result.path, (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: result.path, 
+            regionMapping: { authMethod: matchedAuthMethod ? [matchedAuthMethod] : regionMappings.authMethod, mrzTypes: regionMappings.mrzTypes }, 
+            selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type as keyof typeof GovernmentDocumentTypeShorted] || '', 
+            code: countryData?.code || '', 
+            currentSide, 
+            templatePath, 
+            mrzType,
+            issuingSubdivision: issuingSubdivision 
+          }, env);
+        } else {
+          let matchedBackAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'back');
+          if (!matchedBackAuthMethod && currentSide === 'back') { matchedBackAuthMethod = 'MRZ'; }
+          const backMrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '';
+          
+          // 🚨 EXTRACT FRONT TEMPLATE TO VALIDATE AGAINST BACK TEMPLATE
+          const frontTemplatePath = capturedImages['front']?.templatePath || '';
+
+          verificationRes = await backVerification({ 
+            path: result.path, 
+            regionMapping: { authMethod: matchedBackAuthMethod ? [matchedBackAuthMethod] : regionMappings.authMethod, mrzTypes: regionMappings.mrzTypes }, 
+            selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type as keyof typeof GovernmentDocumentTypeShorted] || '', 
+            code: countryData?.code || '', 
+            currentSide, 
+            templatePath, 
+            mrzType: backMrzType, 
+            templateResponse,
+            issuingSubdivision: issuingSubdivision,
+            frontTemplatePath: frontTemplatePath // 🚨 PASSED DOWN TO TRIGGER VALIDATION
+          }, env);
+        }
+
+        const bbox = verificationRes?.bbox || templateBbox;
+        const mrz = verificationRes?.mrz ? JSON.stringify(verificationRes.mrz) : "";
+        
+        const verifiedResult: ISilentCaptureResult & { region?: string } = { 
+          path: result.path, 
+          templatePath, 
+          bbox, 
+          success: true, 
+          mrz, 
+          isAnalyzing: false, 
+          country: countryData?.code, 
+          documentType: selectedDocumentType.type,
+          region: issuingSubdivision 
+        };
+        
+        setSilentCaptureResult(verifiedResult);
+        if (bbox) setBboxBySide(prev => ({ ...prev, [currentSide]: bbox }));
+        
+        await autoCapture(result.path, verifiedResult);
+
+      } catch (error: any) {
+        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')) { // 🚨 New Security Error Handler
+          userFriendlyMessage = 'The back of the document does not match the front. You must scan the same ID.';
+        }
+        
+        setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: userFriendlyMessage }));
+      }
+    }
+  };
+
+  const handleError = (event: { message: string }) => {
+    showAlert('Erreur', event.message);
+    setShowCamera(false);
+    setIsProcessingCapture(false);
+  };
+
+  useEffect(() => {
+    actions.showCustomStepper(!showCamera);
+  }, [showCamera]);
+
+  if (!countrySelectionData || !selectedDocumentType) {
+    return (
+      <View style={styles.root}>
+        <View style={styles.previewContainer}>
+          <Text style={styles.title}>{getLocalizedText(component.labels)}</Text>
+          <Text style={styles.description}>
+            {state.currentLanguage === "en" ? "Please complete the country and document selection first." : "Veuillez d'abord compléter la sélection du pays et du document."}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  if (showCamera) {
+    const isBusy = isProcessingCapture;
+    if (isRebootingCamera) {
+      return (
+        <View style={[styles.root, { justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' }]}>
+          <ActivityIndicator size="large" color="#2DBD60" />
+          <Text style={{ color: 'white', marginTop: 20, fontSize: 16 }}>Initializing Camera...</Text>
+        </View>
+      );
+    }
+    return (
+      <View style={styles.root}>
+        <View style={[styles.cameraWrapper, { flex: 1 }]}>
+          <View style={styles.headerContainer}>
+            <Text style={styles.headerTitle}>
+              {selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : ''}
+            </Text>
+            <View style={styles.stepBadge}>
+              <Text style={styles.stepText}>
+                {t('kyc.idCardCapture.captureTitle', { side: currentSide === 'front' ? locale === 'en' ? 'Front' : 'Recto' : locale === 'en' ? 'Back' : 'Verso' })}
+              </Text>
+            </View>
+          </View>
+          
+          <View style={[styles.cameraFeedContainer, { flex: 1, backgroundColor: '#000' }]}>
+            {Platform.OS === 'web' && (
+              <View style={styles.webTopControls}>
+                <TouchableOpacity style={styles.webFlipButton} onPress={toggleCameraLens}>
+                  <Text style={styles.webFlipText}>🔄 Flip Lens</Text>
+                </TouchableOpacity>
+              </View>
+            )}
+            
+            <EnhancedCameraView
+              key={`${currentSide}-${cameraKey}`}
+              showCamera={true}
+              isProcessing={isBusy}
+              cameraType={cameraConfig.cameraType}
+              style={{ ...StyleSheet.absoluteFillObject, ...(Platform.OS === 'web' ? { width: '100%', height: '100%', left: 0, top: 0 } as any : {}) }}
+              onError={handleError}
+              onSilentCapture={handleSilentCapture}
+              silentCaptureResult={silentCaptureResult}
+              overlayComponent={
+                <>
+                  <IdCardOverlay
+                    xMin={cameraConfig.overlay.bbox.xMin} yMin={cameraConfig.overlay.bbox.yMin} xMax={cameraConfig.overlay.bbox.xMax} yMax={cameraConfig.overlay.bbox.yMax}
+                    instructions={cameraConfig.overlay.guideText}
+                    cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0 as number}
+                    isSuccess={silentCaptureResult.success}
+                    language={state.currentLanguage}
+                    stepperProps={{
+                      back: () => {
+                        if (currentSide === 'back') {
+                          setCurrentSide('front'); setShowCamera(false); setIsProcessingCapture(false); setProcessingImagePath(null);
+                          if (capturedImages['front']?.dir) {
+                            const frontImage = capturedImages['front'];
+                            setSilentCaptureResult((prev) => ({ ...prev, path: frontImage.dir, success: true, isAnalyzing: false, error: '', mrz: frontImage.mrz || '', templatePath: frontImage.templatePath || '', bbox: bboxBySide['front'] }));
+                          } else { setSilentCaptureResult((prev) => ({ ...prev, path: '', success: false, isAnalyzing: false, error: '', templatePath: '' })); }
+                        } else { actions.previousComponent(); }
+                      },
+                      selectedDocumentType: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : '',
+                      step: state.currentComponentIndex + 1, totalSteps: state.template.components.length, side: currentSide,
+                    }}
+                  />
+                </>
+              }
+            />
+            
+            {!isBusy && silentCaptureResult.isAnalyzing && (
+              <View style={styles.topAnalyzingPillContainer}>
+                <View style={styles.topAnalyzingPill}>
+                  <ActivityIndicator size="small" color="white" />
+                  <Text style={styles.analyzingPillText}>
+                    {state.currentLanguage === 'en' ? 'Scanning...' : 'Analyse...'}
+                  </Text>
+                </View>
+              </View>
+            )}
+            
+            {isBusy && (
+              <View style={[StyleSheet.absoluteFillObject, { zIndex: 9999 }]}>
+                {processingImagePath && (
+                  <Image
+                    source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }}
+                    style={StyleSheet.absoluteFillObject}
+                    resizeMode="cover"
+                  />
+                )}
+                <View style={styles.processingOverlay}>
+                  <ActivityIndicator size="large" color="#2DBD60" />
+                  <Text style={styles.processingText}>
+                    {state.currentLanguage === 'en' ? 'Perfect!\nProcessing Document...' : 'Parfait!\nTraitement du document...'}
+                  </Text>
+                </View>
+              </View>
+            )}
+            
+            {!isBusy && Platform.OS === 'web' ? (
+              <View style={styles.webBottomControlBar}>
+                {silentCaptureResult.error && (
+                  <View style={styles.floatingErrorBanner}>
+                    <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
+                  </View>
+                )}
+                <View style={styles.webActionButtonsRow}>
+                  <TouchableOpacity style={styles.webSecondaryButton} onPress={() => setShowCamera(false)}>
+                    <Text style={styles.webSecondaryButtonText}>Cancel</Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity style={styles.webPrimaryButton} onPress={refreshCamera}>
+                    <Text style={styles.webPrimaryButtonText}>↻ Refresh Camera</Text>
                   </TouchableOpacity>
-               </View>
-             )}
-
-             <EnhancedCameraView
-               key={`${currentSide}-${cameraKey}`}
-               showCamera={true}
-               isProcessing={isBusy}
-               cameraType={cameraConfig.cameraType}
-               style={StyleSheet.absoluteFillObject}
-               onError={handleError}
-               onSilentCapture={handleSilentCapture}
-               silentCaptureResult={silentCaptureResult}
-               overlayComponent={
-                 <>
-                   <IdCardOverlay
-                     xMin={cameraConfig.overlay.bbox.xMin} yMin={cameraConfig.overlay.bbox.yMin} xMax={cameraConfig.overlay.bbox.xMax} yMax={cameraConfig.overlay.bbox.yMax}
-                     instructions={cameraConfig.overlay.guideText}
-                     cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0 as number}
-                     isSuccess={silentCaptureResult.success}
-                     language={state.currentLanguage}
-                     stepperProps={{
-                       back: () => {
-                         if (currentSide === 'back') {
-                           setCurrentSide('front');
-                           setShowCamera(false);
-                           setIsProcessingCapture(false);
-                           setProcessingImagePath(null);
-                           if (capturedImages['front']?.dir) {
-                             const frontImage = capturedImages['front'];
-                             setSilentCaptureResult((prev) => ({ ...prev, path: frontImage.dir, success: true, isAnalyzing: false, error: '', mrz: frontImage.mrz || '', templatePath: frontImage.templatePath || '', bbox: bboxBySide['front'] }));
-                           } else { setSilentCaptureResult((prev) => ({ ...prev, path: '', success: false, isAnalyzing: false, error: '', templatePath: '' })); }
-                         } else { actions.previousComponent(); }
-                       },
-                       selectedDocumentType: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : '',
-                       step: state.currentComponentIndex + 1, totalSteps: state.template.components.length, side: currentSide,
-                     }}
-                   />
-                 </>
-               }
-             />
-
-             {!isBusy && silentCaptureResult.isAnalyzing && (
-               <View style={styles.topAnalyzingPillContainer}>
-                 <View style={styles.topAnalyzingPill}>
-                   <ActivityIndicator size="small" color="white" />
-                   <Text style={styles.analyzingPillText}>
-                     {state.currentLanguage === 'en' ? 'Scanning...' : 'Analyse...'}
-                   </Text>
-                 </View>
-               </View>
-             )}
-
-             {isBusy && (
-               <View style={[StyleSheet.absoluteFillObject, { zIndex: 9999 }]}>
-                 {processingImagePath && (
-                   <Image
-                     source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }}
-                     style={StyleSheet.absoluteFillObject}
-                     resizeMode="cover"
-                   />
-                 )}
-                 <View style={styles.processingOverlay}>
-                   <ActivityIndicator size="large" color="#2DBD60" />
-                   <Text style={styles.processingText}>
-                     {state.currentLanguage === 'en' ? 'Perfect!\nProcessing Document...' : 'Parfait!\nTraitement du document...'}
-                   </Text>
-                 </View>
-               </View>
-             )}
-
-             {/* 🚨 THE ESCAPE HATCH: Branching UI for Web vs Mobile */}
-             {!isBusy && Platform.OS === 'web' ? (
-                <View style={styles.webBottomControlBar}>
-                   {silentCaptureResult.error ? (
-                     <View style={styles.floatingErrorBanner}>
-                       <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
-                     </View>
-                   ) : <View style={{ height: 10 }} />}
-
-                   <View style={styles.webActionButtonsRow}>
-                     <TouchableOpacity style={styles.webSecondaryButton} onPress={() => setShowCamera(false)}>
-                       <Text style={styles.webSecondaryButtonText}>Cancel</Text>
-                     </TouchableOpacity>
-                     <TouchableOpacity style={styles.webPrimaryButton} onPress={refreshCamera}>
-                       <Text style={styles.webPrimaryButtonText}>↻ Refresh Camera</Text>
-                     </TouchableOpacity>
-                   </View>
                 </View>
-             ) : !isBusy ? (
-                <View style={styles.escapeHatchContainer}>
-                   <TouchableOpacity style={styles.fallbackRefreshButton} onPress={refreshCamera}>
-                     <Text style={styles.fallbackRefreshText}>↻ Refresh Camera</Text>
-                   </TouchableOpacity>
-                   <TouchableOpacity 
-                     style={[styles.fallbackRefreshButton, { marginTop: 15, backgroundColor: 'rgba(220, 38, 38, 0.8)', borderColor: '#DC2626' }]} 
-                     onPress={() => setShowCamera(false)}
-                   >
-                     <Text style={styles.fallbackRefreshText}>Cancel / Go Back</Text>
-                   </TouchableOpacity>
+              </View>
+            ) : !isBusy ? (
+              <View style={styles.escapeHatchContainer}>
+                <TouchableOpacity style={styles.fallbackRefreshButton} onPress={refreshCamera}>
+                  <Text style={styles.fallbackRefreshText}>↻ Refresh Camera</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[styles.fallbackRefreshButton, { marginTop: 15, backgroundColor: 'rgba(220, 38, 38, 0.8)', borderColor: '#DC2626' }]}
+                  onPress={() => setShowCamera(false)}
+                >
+                  <Text style={styles.fallbackRefreshText}>Cancel / Go Back</Text>
+                </TouchableOpacity>
+              </View>
+            ) : null}
+            
+            {silentCaptureResult.error && !isBusy && Platform.OS !== 'web' ? (
+              <View style={[styles.floatingErrorBanner, { zIndex: 10000 }]}>
+                <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
+              </View>
+            ) : null}
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.previewContainer}>
+        <ScrollView style={styles.previewItemContainer} showsVerticalScrollIndicator={false}>
+          <View key={currentSide} style={styles.sideContainer}>
+            <Text style={styles.sideTitle}>
+              {t('kyc.idCardCapture.captureTitle', { side: currentSide === 'front' ? locale === 'en' ? 'Front' : 'Recto' : locale === 'en' ? 'Back' : 'Verso' })}
+            </Text>
+            <Text style={{ fontSize: 14, color: '#666', textAlign: 'center', marginBottom: 16, lineHeight: 22 }}>
+              {getLocalizedText(component.instructions)}
+            </Text>
+            <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "column", gap: 16 }}>
+              <View style={styles.imagePreviewWrapper}>
+                {capturedImages[currentSide]?.dir ? (
+                  <Image source={{ uri: capturedImages[currentSide].dir }} style={styles.previewImage} />
+                ) : silentCaptureResult.path ? (
+                  <Image source={{ uri: silentCaptureResult.path }} style={styles.previewImage} />
+                ) : null}
+              </View>
+              {!capturedImages[currentSide]?.dir && (
+                <View style={{ width: '100%', gap: 12 }}>
+                  <Button
+                    title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"}
+                    onPress={() => { setShowCamera(true); refreshCamera(); actions.showCustomStepper(false); }}
+                    variant="primary" size="large" fullWidth
+                  />
+                  {Platform.OS === 'web' && (
+                    <Button
+                      title={state.currentLanguage === "en" ? "Continue on Phone" : "Continuer sur le téléphone"}
+                      onPress={() => setShowQRModal(true)}
+                      variant="outline" size="large" fullWidth
+                    />
+                  )}
                 </View>
-             ) : null}
-
-             {silentCaptureResult.error && !isBusy && Platform.OS !== 'web' ? (
-               <View style={[styles.floatingErrorBanner, { zIndex: 10000 }]}>
-                 <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
-               </View>
-             ) : null}
-
-           </View>
-         </View>
-       </View>
-     );
-   }
-
-   // --- PREVIEW RENDER ---
-   return (
-     <View style={styles.root}>
-       <View style={styles.previewContainer}>
-         <ScrollView style={styles.previewItemContainer} showsVerticalScrollIndicator={false}>
-           <View key={currentSide} style={styles.sideContainer}>
-             <Text style={styles.sideTitle}>
-               {t('kyc.idCardCapture.captureTitle', { side: currentSide === 'front' ? locale === 'en' ? 'Front' : 'Recto' : locale === 'en' ? 'Back' : 'Verso' })}
-             </Text>
-             <Text style={{ fontSize: 14, color: '#666', textAlign: 'center', marginBottom: 16, lineHeight: 22 }}>
-               {getLocalizedText(component.instructions)}
-             </Text>
-             
-             <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "column", gap: 16 }}>
-               
-               {/* 🚨 REMOVED THE ORANGE WARNING BANNER ENTIRELY */}
-               
-               {/* 🚨 PREVIEW CONTAINER WITH PLATFORM OVERRIDES */}
-               <View style={styles.imagePreviewWrapper}>
-                 {capturedImages[currentSide]?.dir ? (
-                   <Image source={{ uri: capturedImages[currentSide].dir }} style={styles.previewImage} />
-                 ) : silentCaptureResult.path ? (
-                   <Image source={{ uri: silentCaptureResult.path }} style={styles.previewImage} />
-                 ) : null}
-               </View>
-
-               {!capturedImages[currentSide]?.dir && (
-                 <Button
-                   title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"}
-                   onPress={() => { setShowCamera(true); refreshCamera(); actions.showCustomStepper(false); }}
-                   variant="primary" size="large" fullWidth
-                 />
-               )}
-               {capturedImages[currentSide]?.dir && (
-                 <>
-                   <Button title={t('kyc.idCardCapture.retakeButton')} onPress={() => retakePicture(currentSide)} variant="outline" size="medium" fullWidth />
-                   <Button title={t('common.next')} onPress={() => {
-                     if (!selectedDocumentType) { showAlert('Error', 'Document type not selected'); return; }
-                     if (currentSide === 'back' || selectedDocumentType.type === 'passport') {
-                       actions.nextComponent();
-                     } else {
-                       setShowCamera(true);
-                       refreshCamera();
-                       setCurrentSide('back');
-                       setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '', templatePath: undefined });
-                       setIsProcessingCapture(false);
-                       setProcessingImagePath(null);
-                     }
-                   }} variant="primary" size="large" fullWidth />
-                 </>
-               )}
-             </View>
-           </View>
-         </ScrollView>
-       </View>
-     </View>
-   );
+              )}
+              {capturedImages[currentSide]?.dir && (
+                <>
+                  <Button title={t('kyc.idCardCapture.retakeButton')} onPress={() => retakePicture(currentSide)} variant="outline" size="medium" fullWidth />
+                  <Button title={t('common.next')} onPress={() => {
+                    if (!selectedDocumentType) { showAlert('Error', 'Document type not selected'); return; }
+                    if (currentSide === 'back' || selectedDocumentType.type === 'passport') {
+                      actions.nextComponent();
+                    } else {
+                      setShowCamera(true); refreshCamera(); setCurrentSide('back'); setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '', templatePath: undefined }); setIsProcessingCapture(false); setProcessingImagePath(null);
+                    }
+                  }} variant="primary" size="large" fullWidth />
+                </>
+              )}
+            </View>
+          </View>
+        </ScrollView>
+      </View>
+      {showQRModal && Platform.OS === 'web' && (
+        <View style={styles.qrModalOverlay}>
+          <View style={styles.qrModalContainer}>
+            <Text style={styles.qrModalTitle}>
+              {state.currentLanguage === 'en' ? 'Scan to continue' : 'Scannez pour continuer'}
+            </Text>
+            <Text style={styles.qrModalText}>
+              {state.currentLanguage === 'en' ? "Point your phone's camera at this QR code to seamlessly continue the process on your mobile device." : "Pointez l'appareil photo de votre téléphone vers ce code QR pour continuer le processus en toute fluidité sur votre appareil mobile."}
+            </Text>
+            <View style={styles.qrCodeWrapper}>
+              <QRCode value={currentUrl} size={220} backgroundColor="transparent" />
+            </View>
+            <Button title={state.currentLanguage === 'en' ? "Close" : "Fermer"} onPress={() => setShowQRModal(false)} variant="outline" fullWidth />
+          </View>
+        </View>
+      )}
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
-   root: {
-     flex: 1, width: '100%', backgroundColor: 'transparent', alignSelf: 'center',
-     ...Platform.select({
-       web: { minHeight: '85vh', justifyContent: 'center', alignItems: 'center', backdropFilter: 'blur(8px)' } as any,
-     })
-   },
-   cameraWrapper: {
-     width: '100%', backgroundColor: '#000000', overflow: 'hidden',
-     ...Platform.select({
-       web: { maxWidth: 550, height: '80vh', minHeight: 600, borderRadius: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 20 }, shadowOpacity: 0.25, shadowRadius: 35, elevation: 24 } as any,
-       default: { flex: 1 }
-     })
-   },
-   headerContainer: {
-     flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24, paddingVertical: 18, backgroundColor: '#FFFFFF', borderBottomWidth: 1, borderBottomColor: '#F1F5F9', zIndex: 10,
-     ...Platform.select({ web: { display: 'flex' }, default: { display: 'none' } })
-   },
-   headerTitle: { fontSize: 18, fontWeight: '700', color: '#0F172A', },
-   stepBadge: { backgroundColor: '#F1F5F9', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20, },
-   stepText: { fontSize: 13, fontWeight: '600', color: '#64748B', },
-   cameraFeedContainer: { flex: 1, position: 'relative', backgroundColor: '#000', },
-   camera: { flex: 1, },
-   
-   // MOBILE: Escape Hatch layout
-   escapeHatchContainer: { position: 'absolute', bottom: 40, left: 0, right: 0, alignItems: 'center', justifyContent: 'center', zIndex: 99999 },
-   fallbackRefreshButton: { backgroundColor: 'rgba(0, 0, 0, 0.8)', borderWidth: 1, borderColor: 'rgba(255, 255, 255, 0.5)', paddingVertical: 12, paddingHorizontal: 24, borderRadius: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 5, elevation: 8 },
-   fallbackRefreshText: { color: '#FFFFFF', fontWeight: 'bold', fontSize: 16 },
-   
-   // WEB: Control Bar layout
-   webBottomControlBar: { position: 'absolute', bottom: 0, left: 0, right: 0, paddingHorizontal: 20, paddingBottom: 20, paddingTop: 20, backgroundColor: 'rgba(0,0,0,0.6)', zIndex: 99999 },
-   webActionButtonsRow: { flexDirection: 'row', justifyContent: 'space-between', gap: 12, marginTop: 12 },
-   webPrimaryButton: { flex: 1, backgroundColor: '#2DBD60', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
-   webPrimaryButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
-   webSecondaryButton: { flex: 1, backgroundColor: 'rgba(255,255,255,0.2)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.4)', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
-   webSecondaryButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
-   
-   // WEB: Flip Controls
-   webTopControls: { position: 'absolute', top: 20, right: 20, zIndex: 9999 },
-   webFlipButton: { backgroundColor: 'rgba(0,0,0,0.5)', paddingHorizontal: 16, paddingVertical: 10, borderRadius: 20, borderWidth: 1, borderColor: 'rgba(255,255,255,0.3)' },
-   webFlipText: { color: 'white', fontWeight: 'bold', fontSize: 14 },
-   
-   previewContainer: {
-     width: '100%', backgroundColor: 'white', borderRadius: 12, paddingVertical: 24, paddingHorizontal: 20, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 12, elevation: 8,
-     ...Platform.select({ web: { alignSelf: 'center', maxWidth: 600 }, default: { margin: 10, width: '95%' }})
-   },
-   previewItemContainer: { flexGrow: 1, },
-   title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, textAlign: 'center' },
-   description: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22 },
-   sideContainer: { marginBottom: 24 },
-   sideTitle: { fontSize: 25, fontWeight: 'bold', color: '#000', marginBottom: 12, textAlign: 'center' },
-   
-   imagePreviewWrapper: { 
-     width: '100%', borderRadius: 12, padding: 1, overflow: 'hidden', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.18, shadowRadius: 8, elevation: 8, backgroundColor: '#f0f0f0',
-     ...Platform.select({
-       web: { aspectRatio: 1.59, height: 'auto' } as any,
-       default: { height: 220 } 
-     })
-   },
-   previewImage: { width: '100%', height: '100%', borderRadius: 12, resizeMode: 'cover' },
-   
-   floatingErrorBanner: {
-     backgroundColor: '#FEF2F2', borderWidth: 1, borderColor: '#FCA5A5', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 12, alignItems: 'center', justifyContent: 'center', width: '100%',
-     ...Platform.select({
-        default: { position: 'absolute', top: Platform.OS === 'ios' ? 90 : 70, left: 24, right: 24, zIndex: 10000 }
-      })
-   },
-   floatingErrorText: { color: '#991B1B', fontSize: 14, fontWeight: '700', textAlign: 'center' },
-   processingOverlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.6)', justifyContent: 'center', alignItems: 'center', zIndex: 9999 },
-   processingText: { color: '#FFF', fontSize: 18, fontWeight: 'bold', marginTop: 16, textAlign: 'center' },
-  
-   errorText: { color: '#dc2626', fontSize: 14, marginTop: 8, textAlign: 'center' },
-   topAnalyzingPillContainer: { position: 'absolute', top: Platform.OS === 'android' ? 60 : 50, left: 0, right: 0, alignItems: 'center', zIndex: 100 },
-   topAnalyzingPill: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.6)', paddingVertical: 8, paddingHorizontal: 16, borderRadius: 20, gap: 8 },
-   analyzingPillText: { color: 'white', fontSize: 14, fontWeight: 'bold' }
+  root: { flex: 1, width: '100%', backgroundColor: 'transparent', alignSelf: 'center', ...Platform.select({ web: { minHeight: '85vh', justifyContent: 'center', alignItems: 'center' } as any, }) },
+  cameraWrapper: { width: '100%', backgroundColor: '#000000', overflow: 'hidden', ...Platform.select({ web: { maxWidth: 1000, width: '95%', height: '80vh', minHeight: 600, borderRadius: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.15, shadowRadius: 30, elevation: 24 } as any, default: { flex: 1 } }) },
+  headerContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, paddingHorizontal: 20, paddingVertical: 18, backgroundColor: '#FFFFFF', borderBottomWidth: 1, borderBottomColor: '#F1F5F9', zIndex: 10, ...Platform.select({ web: { display: 'flex' }, default: { display: 'none' } }) },
+  headerTitle: { fontSize: 18, fontWeight: '700', color: '#0F172A', flexShrink: 1 },
+  stepBadge: { backgroundColor: '#F1F5F9', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20, },
+  stepText: { fontSize: 13, fontWeight: '600', color: '#64748B', },
+  cameraFeedContainer: { flex: 1, position: 'relative', backgroundColor: '#000', },
+  escapeHatchContainer: { position: 'absolute', bottom: 40, left: 0, right: 0, alignItems: 'center', justifyContent: 'center', zIndex: 99999 },
+  fallbackRefreshButton: { backgroundColor: 'rgba(0, 0, 0, 0.8)', borderWidth: 1, borderColor: 'rgba(255, 255, 255, 0.5)', paddingVertical: 12, paddingHorizontal: 24, borderRadius: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 5, elevation: 8 },
+  fallbackRefreshText: { color: '#FFFFFF', fontWeight: 'bold', fontSize: 16 },
+  webBottomControlBar: { position: 'absolute', bottom: 0, left: 0, right: 0, paddingHorizontal: 24, paddingBottom: 24, paddingTop: 30, backgroundColor: 'rgba(0,0,0,0.6)', zIndex: 99999 },
+  webActionButtonsRow: { flexDirection: 'row', justifyContent: 'center', gap: 16, marginTop: 12, maxWidth: 500, alignSelf: 'center', width: '100%' },
+  webPrimaryButton: { flex: 1, backgroundColor: '#2DBD60', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
+  webPrimaryButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
+  webSecondaryButton: { flex: 1, backgroundColor: 'rgba(255,255,255,0.15)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.3)', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
+  webSecondaryButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
+  webTopControls: { position: 'absolute', top: Platform.OS === 'ios' ? 70 : 20, right: 20, zIndex: 9999 },
+  webFlipButton: { backgroundColor: 'rgba(0,0,0,0.6)', paddingHorizontal: 16, paddingVertical: 10, borderRadius: 20, borderWidth: 1, borderColor: 'rgba(255,255,255,0.4)', ...Platform.select({ web: { backdropFilter: 'blur(4px)' } as any }) },
+  webFlipText: { color: 'white', fontWeight: 'bold', fontSize: 14 },
+  previewContainer: { width: '100%', backgroundColor: 'white', borderRadius: 12, paddingVertical: 30, paddingHorizontal: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.08, shadowRadius: 16, elevation: 8, ...Platform.select({ web: { alignSelf: 'center', maxWidth: 650 }, default: { margin: 10, width: '95%' }}) },
+  previewItemContainer: { flexGrow: 1, },
+  title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, textAlign: 'center' },
+  description: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22 },
+  sideContainer: { marginBottom: 24 },
+  sideTitle: { fontSize: 22, fontWeight: 'bold', color: '#000', marginBottom: 12, textAlign: 'center' },
+  imagePreviewWrapper: { width: '100%', borderRadius: 12, padding: 1, overflow: 'hidden', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.12, shadowRadius: 8, elevation: 8, backgroundColor: '#f0f0f0', ...Platform.select({ web: { aspectRatio: 1.59, height: 'auto', maxWidth: 450, alignSelf: 'center' } as any, default: { height: 220 } }) },
+  previewImage: { width: '100%', height: '100%', borderRadius: 12, resizeMode: 'cover' },
+  floatingErrorBanner: { backgroundColor: '#FEF2F2', borderWidth: 1, borderColor: '#FCA5A5', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 12, alignItems: 'center', justifyContent: 'center', width: '100%', ...Platform.select({ web: { position: 'absolute', bottom: '100%', marginBottom: 16, maxWidth: 500, alignSelf: 'center', zIndex: 100000, boxShadow: '0 4px 12px rgba(0,0,0,0.15)' } as any, default: { position: 'absolute', top: Platform.OS === 'ios' ? 90 : 70, left: 24, right: 24, zIndex: 10000 } }) },
+  floatingErrorText: { color: '#991B1B', fontSize: 14, fontWeight: '700', textAlign: 'center' },
+  processingOverlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.7)', justifyContent: 'center', alignItems: 'center', zIndex: 9999, ...Platform.select({ web: { backdropFilter: 'blur(4px)' } as any }) },
+  processingText: { color: '#FFF', fontSize: 18, fontWeight: 'bold', marginTop: 16, textAlign: 'center' },
+  errorText: { color: '#dc2626', fontSize: 14, marginTop: 8, textAlign: 'center' },
+  topAnalyzingPillContainer: { position: 'absolute', top: Platform.OS === 'android' ? 60 : 75, left: 0, right: 0, alignItems: 'center', zIndex: 100 },
+  topAnalyzingPill: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.7)', paddingVertical: 10, paddingHorizontal: 20, borderRadius: 30, gap: 10, shadowColor: '#000', shadowOffset: {width: 0, height: 4}, shadowOpacity: 0.3, shadowRadius: 8 },
+  analyzingPillText: { color: 'white', fontSize: 14, fontWeight: 'bold' },
+  qrModalOverlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center', zIndex: 999999, ...Platform.select({ web: { backdropFilter: 'blur(5px)' } as any }) },
+  qrModalContainer: { backgroundColor: '#FFFFFF', borderRadius: 24, padding: 32, width: '90%', maxWidth: 400, alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.15, shadowRadius: 30, elevation: 24, },
+  qrModalTitle: { fontSize: 22, fontWeight: 'bold', color: '#0F172A', marginBottom: 12, textAlign: 'center' },
+  qrModalText: { fontSize: 15, color: '#64748B', textAlign: 'center', marginBottom: 24, lineHeight: 22, },
+  qrCodeWrapper: { padding: 16, backgroundColor: '#FFFFFF', borderRadius: 16, borderWidth: 1, borderColor: '#E2E8F0', marginBottom: 24, }
 });