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

package/src/components/KYCElements/IDCardCapture.tsx

@@ -20,587 +20,579 @@ interface IIDCardPayload { dir: string; file: string; mrz: string; templatePath?
 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 || '',
+   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 
           }));
-        }
-      }
-    }
-  }, [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;
-      
-      // 🚨 THE FIX: Ignore the backend's broken absolute pixels. 
-      // Calculate the crop using the Green UI Frame percentages (0.0 to 1.0)
-      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
-        imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, uiCropBbox, 0.02);
-        // imagePathForUpload = await cropToCenterScanArea(capturePath, 0.91, 1.59);
-      } catch (e) {
-        console.warn("Crop failed, falling back to original image", e);
-        imagePathForUpload = capturePath; // Fallback to raw image if crop fails
-      }
-      
-      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) {
-        // 1. Keep the technical log for your debugging console
-        console.error("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('too far') || rawMessage.includes('card_not_fully_in_frame')) {
-          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 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>
-                 </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>
+       }
+     }
+   };
+
+   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>
+                  </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>
-              </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>
+             ) : !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>
-              </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>
+             ) : null}
+
+             {silentCaptureResult.error && !isBusy && Platform.OS !== 'web' ? (
+               <View style={[styles.floatingErrorBanner, { zIndex: 10000 }]}>
+                 <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
                </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>
+             ) : 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>
-            ) : 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 }}>
-              {silentCaptureResult?.error === 'TOO_FAR_AWAY' && (
-                <View style={styles.warningBanner}>
-                  <Text style={styles.warningText}>
-                    {state.currentLanguage === "en" ? "Move the document closer to the camera and place it on a flat surface." : "Veuillez rapprocher le document de la caméra et le poser à plat."}
-                  </Text>
-                </View>
-              )}
-              
-              {/* 🚨 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={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>
+   );
 };
 
 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' },
+   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' },
   
-  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, // 🚨 Perfect ID ratio on web
-      default: { height: 220 } // 🚨 Strict original height on mobile
-    })
-  },
-  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' },
-  warningBanner: { backgroundColor: '#FF9500', padding: 12, borderRadius: 8, width: '100%', shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4, elevation: 4 },
-  warningText: { color: 'white', fontWeight: 'bold', textAlign: 'center', fontSize: 16 },
-  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' }
+   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' }
 });