@sanctum-key/react-native-sdk 1.0.9 → 1.0.10

package/src/components/KYCElements/IDCardCapture.tsx

@@ -12,6 +12,14 @@ import { backVerification, checkTemplateType, frontVerification } from '../../mo
 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';
+
+// 🌍 Map ISO codes to exact JSON root keys to ensure perfect dictionary lookups
+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 {
@@ -30,7 +38,6 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, 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);
 
@@ -65,23 +72,26 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       if (JSON.stringify(value) !== JSON.stringify(capturedImages)) {
         const updatedImages = value as Record<string, IIDCardPayload>;
         setCapturedImages(updatedImages);
-        Object.keys(updatedImages).forEach((side) => {
-          const imageData = updatedImages[side];
-          if (imageData?.dir) {
-            setSilentCaptureResult(prev => ({
-              ...prev, path: imageData.dir, success: true, isAnalyzing: false, mrz: imageData.mrz || '', templatePath: imageData.templatePath || '',
-            }));
-          }
-        });
+        
+        const currentImageData = updatedImages[currentSide];
+        if (currentImageData?.dir) {
+          setSilentCaptureResult(prev => ({
+            ...prev, 
+            path: currentImageData.dir, 
+            success: true, 
+            isAnalyzing: false, 
+            mrz: currentImageData.mrz || '', 
+            templatePath: currentImageData.templatePath || '',
+          }));
+        }
       }
     }
-  }, [value]);
+  }, [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: 'back' as const, flashMode: 'auto' as const,
       overlay: { guideText: instructions, bbox: { xMin: 15, yMin: 20, xMax: 85, yMax: 70, borderColor: '#2DBD60', borderWidth: 3, cornerRadius: 8 } }
@@ -89,31 +99,55 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   }, [selectedDocumentType, locale, component.instructions]);
 
   const retakePicture = (sideToRetake: 'front' | 'back') => {
-    // Completely wipe all processing states to prevent leakage
     setIsProcessingCapture(false);
     setProcessingImagePath(null);
     setSilentCaptureResult({ path: '', success: false, isAnalyzing: false, error: '', templatePath: '', mrz: '', bbox: undefined });
-    
-    setShowCamera(true); 
+    setShowCamera(true);
     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) => {
-    if (!selectedDocumentType || !countryData?.regionMapping) return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' };
-    const regionMapping = countryData.regionMapping[selectedDocumentType.type as GovernmentDocumentType];
-    const authMethod: string[] = []; const mrzTypes: string[] = [];
-    const key = selectedDocumentType.region?.trim()?.length > 0 ? selectedDocumentType.region.trim() : 'root';
+  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];
+    
+    // Fallback search in case of case mismatches
+    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 as keyof typeof item]) {
-          authMethod.push(item[currentSide as keyof typeof item]);
+        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 };
   }
 
@@ -121,7 +155,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     if (!mapping || !mapping[selectedDocumentType]) return null;
     const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
     if (!fileName) return null;
-    const pyName = `${fileName}.py`; 
+    const pyName = `${fileName}.py`;
     const found = mapping[selectedDocumentType].find((item: any) => item.py_file === pyName);
     return found?.mrz_type || null;
   }
@@ -137,10 +171,8 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
 
   const autoCapture = async (capturePath: string, verified: ISilentCaptureResult) => {
     if (isProcessingCapture) return;
-    
-    setIsProcessingCapture(true); 
+    setIsProcessingCapture(true);
     setProcessingImagePath(capturePath);
-
     try {
       let imagePathForUpload = capturePath;
       if (verified.bbox) {
@@ -150,13 +182,11 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
           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({
@@ -165,15 +195,13 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
           documentType: GovernmentDocumentTypeBackend[verified.documentType as keyof typeof GovernmentDocumentTypeBackend] || '',
         });
       }
-
       setTimeout(() => {
         setShowCamera(false);
         actions.showCustomStepper(true);
         setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
         setIsProcessingCapture(false);
-        setProcessingImagePath(null); 
+        setProcessingImagePath(null);
       }, 600);
-
     } catch (e: any) {
       showAlert('Error', e?.message || 'Impossible de capturer la photo');
       setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false }));
@@ -184,25 +212,23 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
 
   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 = silentCaptureResult.templatePath || '';
+      
+      // 🚨 Force a template fetch if we haven't successfully saved the current side yet
+      let templatePath = capturedImages[currentSide]?.templatePath || '';
       let templateBbox: IBbox | undefined;
       let templateResponse: any;
-
+      
       if (!selectedDocumentType) {
         setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Document type not selected' })); return;
       }
 
-      const regionMappings = getCurrentSideVerification(currentSide);
-      
       try {
-        if (templatePath.length === 0) {
+        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) {
@@ -216,26 +242,46 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
           }
         }
 
+        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 || '') || '';
+          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 {
-          const matchedBackAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'back');
-          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);
-        }
+          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) {
         const isCardNotFullyInFrame = error?.message === 'CARD_NOT_FULLY_IN_FRAME' || error?.message?.includes('entirement');
         const errorMessage = isCardNotFullyInFrame ? t('kyc.idCardCapture.cardNotFullyInFrame') : (error?.message || 'Erreur de détection');
@@ -253,7 +299,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   if (!countrySelectionData || !selectedDocumentType) {
     return (
       <View style={styles.root}>
-        <View style={styles.container}>
+        <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."}
@@ -265,84 +311,96 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
 
   // --- CAMERA RENDER ---
   if (showCamera) {
-    const isBusy = isProcessingCapture; 
-
+    const isBusy = isProcessingCapture;
     return (
-      <View style={styles.cameraContainer}>
-        <EnhancedCameraView
-          key={currentSide} // 🚨 BUG FIX: Forces the camera instance to completely reset when switching sides
-          showCamera={true}
-          isProcessing={isBusy}
-          cameraType={cameraConfig.cameraType}
-          style={styles.camera}
-          onError={handleError}
-          onSilentCapture={handleSilentCapture}
-          silentCaptureResult={silentCaptureResult}
-          overlayComponent={
-            <>
-              {!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>
-              )}
+      <View style={styles.root}>
+        <View style={styles.cameraWrapper}>
+          
+          {/* Web/Desktop Clean Header */}
+          <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>
 
-              {isBusy && (
-                <View style={StyleSheet.absoluteFillObject}>
-                  {processingImagePath && (
-                    <Image 
-                      source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }} 
-                      style={StyleSheet.absoluteFillObject} 
-                      resizeMode="cover" 
-                    />
+          <View style={styles.cameraFeedContainer}>
+            <EnhancedCameraView
+              key={currentSide}
+              showCamera={true}
+              isProcessing={isBusy}
+              cameraType={cameraConfig.cameraType}
+              style={styles.camera}
+              onError={handleError}
+              onSilentCapture={handleSilentCapture}
+              silentCaptureResult={silentCaptureResult}
+              overlayComponent={
+                <>
+                  {!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>
                   )}
-                  <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>
-              )}
-
-              <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);
-                      // 🚨 Clean up any residual state when going backwards
-                      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,
-                }}
-              />
-            </>
-          }
-        />
-        
-        {silentCaptureResult.error && !isBusy ? (
-          <View style={styles.floatingErrorBanner}>
-            <Text style={styles.floatingErrorText}>{silentCaptureResult.error}</Text>
+                  {isBusy && (
+                    <View style={StyleSheet.absoluteFillObject}>
+                      {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>
+                  )}
+                  <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,
+                    }}
+                  />
+                </>
+              }
+            />
+            {/* Elegant Floating Error Banner below the cutout */}
+            {silentCaptureResult.error && !isBusy ? (
+              <View style={styles.floatingErrorBanner}>
+                <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
+              </View>
+            ) : null}
           </View>
-        ) : null}
+        </View>
       </View>
     );
   }
@@ -359,7 +417,6 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
               {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}>
@@ -367,7 +424,6 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                   </Text>
                 </View>
               )}
-
               <View style={styles.imagePreviewWrapper}>
                 {capturedImages[currentSide]?.dir ? (
                   <Image source={{ uri: capturedImages[currentSide].dir }} style={styles.previewImage} />
@@ -375,7 +431,6 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                   <Image source={{ uri: silentCaptureResult.path }} style={styles.previewImage} />
                 ) : null}
               </View>
-
               {!capturedImages[currentSide]?.dir && (
                 <Button
                   title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"}
@@ -383,22 +438,19 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                   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; }
-                    
-                    // 🚨 BUG FIX: Clear all state before moving forward
-                    if (currentSide === 'back' || selectedDocumentType.type === 'passport') { 
-                        actions.nextComponent(); 
-                    } else { 
-                        setShowCamera(true); 
-                        setCurrentSide('back'); 
-                        setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '' }); 
-                        setIsProcessingCapture(false);
-                        setProcessingImagePath(null);
+                    if (currentSide === 'back' || selectedDocumentType.type === 'passport') {
+                      actions.nextComponent();
+                    } else {
+                      setShowCamera(true);
+                      setCurrentSide('back');
+                      setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '', templatePath: undefined });
+                      setIsProcessingCapture(false);
+                      setProcessingImagePath(null);
                     }
                   }} variant="primary" size="large" fullWidth />
                 </>
@@ -412,28 +464,130 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
 };
 
 const styles = StyleSheet.create({
-  root: { flex: 1, maxWidth: 760, width: '100%' },
-  container: { backgroundColor: 'white', margin: 10, borderRadius: 10, paddingVertical: 16, paddingHorizontal: 16, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.35, shadowRadius: 4.84, elevation: 10 },
-  cameraContainer: { flex: 1, width: '100%', height: '100%' },
-  previewContainer: { width: '95%', backgroundColor: 'white', margin: 10, borderRadius: 10, paddingVertical: 16, paddingHorizontal: 16 },
-  previewItemContainer: {},
-  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%', height: 200, borderRadius: 12, padding: 1, overflow: 'hidden', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.18, shadowRadius: 8, elevation: 8, backgroundColor: '#000' },
-  previewImage: { width: '100%', height: '100%', borderRadius: 12, resizeMode: 'contain' },
-  floatingErrorBanner: { position: 'absolute', top: 60, left: '10%', right: '10%', backgroundColor: 'rgba(220, 38, 38, 0.95)', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 8, alignItems: 'center', justifyContent: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 5, elevation: 8, zIndex: 100 },
-  floatingErrorText: { color: 'white', 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' },
+  root: { 
+    flex: 1, 
+    width: '100%', 
+    backgroundColor: 'transparent', 
+    alignSelf: 'center',       
+    ...(Platform.OS === 'web' 
+      ? ({ 
+          minHeight: '85vh', 
+          justifyContent: 'center', 
+          alignItems: 'center',
+          // Note: backdropFilter is valid in React Native Web but TS might complain, cast safely
+          backdropFilter: 'blur(8px)' 
+        } as any) 
+      : {}) 
+  },
+  cameraWrapper: {
+    width: '100%',
+    backgroundColor: '#FFFFFF',
+    overflow: 'hidden',
+    ...(Platform.OS === 'web' 
+      ? ({
+          maxWidth: 500,           
+          height: 700,             
+          maxHeight: '90vh', // TypeScript will now ignore this thanks to the cast below
+          borderRadius: 24,        
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: 20 },
+          shadowOpacity: 0.25,
+          shadowRadius: 35,
+          elevation: 24,
+        } as any) // 🚨 CAST TO ANY
+      : {
+          flex: 1,
+        })
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 24,
+    paddingVertical: 18,
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F1F5F9', 
+    zIndex: 10,
+    // Mobile hidden, Web visible to replace floating text
+    ...(Platform.OS !== 'web' ? { 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,
   },
+  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.OS === 'web' ? { alignSelf: 'center', maxWidth: 600 } : { 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%', height: 220, borderRadius: 12, padding: 1, overflow: 'hidden', 
+    shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.18, shadowRadius: 8, elevation: 8, backgroundColor: '#f0f0f0' 
+  }, 
+  previewImage: { width: '100%', height: '100%', borderRadius: 12, resizeMode: 'cover' }, 
+  floatingErrorBanner: { 
+    position: 'absolute', 
+    bottom: 30, // Pushed to the bottom for professional feel
+    left: 24, 
+    right: 24, 
+    backgroundColor: '#FEF2F2', 
+    borderWidth: 1,
+    borderColor: '#FCA5A5',
+    paddingVertical: 12, 
+    paddingHorizontal: 16, 
+    borderRadius: 12, 
+    alignItems: 'center', 
+    justifyContent: 'center', 
+    shadowColor: '#DC2626', 
+    shadowOffset: { width: 0, height: 4 }, 
+    shadowOpacity: 0.1, 
+    shadowRadius: 8, 
+    elevation: 8, 
+    zIndex: 100 
+  }, 
+  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' }
 });