@sanctum-key/react-native-sdk 1.0.17 → 1.0.19

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 React, { useEffect, useMemo, useState } from 'react'; 
+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,565 @@ 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' };
+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; }
-
-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 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>
-             ) : !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>
-     );
-   }
-
-   // --- 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>
-   );
-};
-
-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' }
+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); 
+  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 || '', 
+          })); 
+        } 
+      } 
+    } 
+  }, [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') { 
+      // 🚨 UI FIX: Differentiate Desktop Web (Landscape) vs Mobile Web (Portrait)
+      const boxWidthPercent = isLandscape ? 0.40 : 0.85; 
+      
+      // On wide desktop, shift slightly right. On mobile portrait, center perfectly.
+      xMin = isLandscape ? 30 : 7.5; 
+      xMax = xMin + (boxWidthPercent * 100); 
+
+      // Safely calculate height to guarantee a 1.59 aspect ratio
+      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; 
+
+      // Center vertically
+      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) => { 
+    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] || '', 
+        }); 
+      } 
+      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 || '') || ''; 
+          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); 
+        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.'; 
+        } 
+        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> 
+              </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> 
+              )} 
+              {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' } 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 } }) }, 
+  // 🚨 UI FIX: flexWrap handles overflowing text perfectly on narrow mobile screens
+  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' }, 
+  // 🚨 UI FIX: Dropped the pill slightly lower so it never overlaps the flip lens button
+  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, } 
 });