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

package/build/src/components/KYCElements/IDCardCapture.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { GovernmentDocumentTypeShorted, GovernmentDocumentTypeBackend } from '../../types/KYC.types';
@@ -13,6 +13,7 @@ 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 = { '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' };
 export const IDCardCapture = ({ component, value = {}, onValueChange, error, language = 'en' }) => {
     const { t, locale } = useI18n();
@@ -25,10 +26,17 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
     const [processingImagePath, setProcessingImagePath] = useState(null);
     const [cameraKey, setCameraKey] = useState(0);
     const [isRebootingCamera, setIsRebootingCamera] = useState(false);
-    // Web specific state
     const [cameraType, setCameraType] = useState('back');
+    const [showQRModal, setShowQRModal] = useState(false);
+    const [currentUrl, setCurrentUrl] = useState('');
+    useEffect(() => {
+        if (typeof window !== 'undefined' && window.location) {
+            setCurrentUrl(window.location.href);
+        }
+    }, []);
     const documentTypeMapping = { '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) => {
         if (text && typeof text[currentSide] === 'object' && text[currentSide][locale])
             return text[currentSide][locale] || '';
@@ -73,15 +81,37 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
     }, [value, currentSide]);
     const cameraConfig = useMemo(() => {
         const instructions = selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions);
+        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',
-            overlay: {
-                guideText: instructions,
-                bbox: { xMin: 5, yMin: 15, xMax: 95, yMax: 85, borderColor: '#2DBD60', borderWidth: 3, cornerRadius: 8 }
-            }
+            overlay: { guideText: instructions, bbox: platformBbox }
         };
-    }, [selectedDocumentType, locale, component.instructions, cameraType]);
+    }, [selectedDocumentType, locale, component.instructions, cameraType, screenWidth, screenHeight]);
     const retakePicture = (sideToRetake) => {
         setIsProcessingCapture(false);
         setProcessingImagePath(null);
@@ -165,9 +195,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                 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);
+                imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, uiCropBbox, 0.06);
             }
             catch (e) {
                 console.warn("Crop failed, falling back to original image", e);
@@ -247,7 +275,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                     if (!matchedBackAuthMethod && currentSide === 'back') {
                         matchedBackAuthMethod = 'MRZ';
                     }
-                    const backMrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || 'TD1';
+                    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] || '', code: countryData?.code || '', currentSide, templatePath, mrzType: backMrzType, templateResponse }, env);
                 }
                 const bbox = verificationRes?.bbox || templateBbox;
@@ -260,7 +288,6 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             }
             catch (error) {
                 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')) {
@@ -270,16 +297,9 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                     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
-                }));
+                setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: userFriendlyMessage }));
             }
         }
     };
@@ -292,49 +312,45 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
         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>);
+        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, { 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} isSuccess={silentCaptureResult.success} language={state.currentLanguage} stepperProps={{
+        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 } : {}) }} 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} isSuccess={silentCaptureResult.success} language={state.currentLanguage} stepperProps={{
                     back: () => {
                         if (currentSide === 'back') {
                             setCurrentSide('front');
@@ -355,84 +371,77 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                     },
                     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>);
+                }}/> 
+                </>}/> 
+                           
+            {!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>);
     }
-    // --- 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={() => {
+    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;
@@ -448,81 +457,70 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                     setIsProcessingCapture(false);
                     setProcessingImagePath(null);
                 }
-            }} variant="primary" size="large" fullWidth/>
-                 </>)}
-             </View>
-           </View>
-         </ScrollView>
-       </View>
-     </View>);
+            }} variant="primary" size="large" fullWidth/> 
+                </>)} 
+            </View> 
+          </View> 
+        </ScrollView> 
+      </View> 
+      {showQRModal && Platform.OS === 'web' && (<View style={styles.qrModalOverlay}> 
+          <View style={styles.qrModalContainer}> 
+            <Text style={styles.qrModalTitle}> 
+              {state.currentLanguage === 'en' ? 'Scan to continue' : 'Scannez pour continuer'} 
+            </Text> 
+            <Text style={styles.qrModalText}> 
+              {state.currentLanguage === 'en' ? "Point your phone's camera at this QR code to seamlessly continue the process on your mobile device." : "Pointez l'appareil photo de votre téléphone vers ce code QR pour continuer le processus en toute fluidité sur votre appareil mobile."} 
+            </Text> 
+            <View style={styles.qrCodeWrapper}> 
+              <QRCode value={currentUrl} size={220} backgroundColor="transparent"/> 
+            </View> 
+            <Button title={state.currentLanguage === 'en' ? "Close" : "Fermer"} onPress={() => setShowQRModal(false)} variant="outline" fullWidth/> 
+          </View> 
+        </View>)} 
+    </View>);
 };
 const styles = StyleSheet.create({
-    root: {
-        flex: 1, width: '100%', backgroundColor: 'transparent', alignSelf: 'center',
-        ...Platform.select({
-            web: { minHeight: '85vh', justifyContent: 'center', alignItems: 'center', backdropFilter: 'blur(8px)' },
-        })
-    },
-    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 },
-            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', },
+    root: { flex: 1, width: '100%', backgroundColor: 'transparent', alignSelf: 'center', ...Platform.select({ web: { minHeight: '85vh', justifyContent: 'center', alignItems: 'center' }, }) },
+    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 }, 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', },
-    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 },
+    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.2)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.4)', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
+    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 },
-    // 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)' },
+    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)' } }) },
     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%' } })
-    },
+    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: 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' },
-            default: { height: 220 }
-        })
-    },
+    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' }, 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 }
-        })
-    },
+    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)' }, 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 },
+    processingOverlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.7)', justifyContent: 'center', alignItems: 'center', zIndex: 9999, ...Platform.select({ web: { backdropFilter: 'blur(4px)' } }) },
     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' }
+    // 🚨 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)' } }) },
+    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, }
 });
 //# sourceMappingURL=IDCardCapture.js.map