@sanctum-key/react-native-sdk 1.0.37 → 1.0.39

package/src/components/KYCElements/IDCardCapture.tsx

@@ -14,13 +14,12 @@ import pathToBase64 from '../../utils/pathToBase64';
 import { cropByObb, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from '../../utils/cropByObb';
 import REGION_MAPPING from '../../config/region_mapping.json';
 import QRCode from 'react-native-qrcode-svg';
-import { logger } from '../../utils/logger';
-import { cropImageWithBBoxWithTolerance } from '../../utils/cropByObb'; 
+import { cropImageWithBBoxWithTolerance } from '../../utils/cropByObb';
 import kycService, { authentification } from '../../modules/api/KYCService';
 
 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',
+  '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'
 };
 
@@ -41,17 +40,14 @@ interface IDCardCaptureProps {
 }
 
 const SHORT_TO_LONG_REGION: Record<string, string> = {
-  "AB": "Alberta", "BC": "British Columbia", "MB": "Manitoba",
-  "NB": "New Brunswick", "NL": "Newfoundland and Labrador",
-  "NT": "Northwest Territories", "NS": "Nova Scotia", "NU": "Nunavut",
-  "ON": "Ontario", "PE": "Prince Edward Island", "QC": "Quebec",
+  "AB": "Alberta", "BC": "British Columbia", "MB": "Manitoba", "NB": "New Brunswick",
+  "NL": "Newfoundland and Labrador", "NT": "Northwest Territories", "NS": "Nova Scotia",
+  "NU": "Nunavut", "ON": "Ontario", "PE": "Prince Edward Island", "QC": "Quebec",
   "SK": "Saskatchewan", "YT": "Yukon"
 };
 
-// 🚨 Isolates the 1-second re-renders away from the Camera!
 const ExpiringCodeTimer = ({ initialCode, language }: { initialCode: string, language: string }) => {
   const [timeLeft, setTimeLeft] = useState(300);
-
   useEffect(() => {
     if (timeLeft <= 0) return;
     const timer = setInterval(() => setTimeLeft((prev) => prev - 1), 1000);
@@ -65,7 +61,6 @@ const ExpiringCodeTimer = ({ initialCode, language }: { initialCode: string, lan
   };
 
   if (timeLeft <= 0) return null;
-
   return (
     <View style={styles.activeCodeContainer}>
       <Text style={styles.activeCodeText}>{initialCode}</Text>
@@ -83,6 +78,7 @@ 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);
   const [cameraKey, setCameraKey] = useState(0);
@@ -90,46 +86,71 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   const [cameraType, setCameraType] = useState<'back' | 'front'>('back');
   const [showQRModal, setShowQRModal] = useState(false);
   const [currentUrl, setCurrentUrl] = useState('');
+  console.log(currentUrl)
   const [qrPlatform, setQrPlatform] = useState<'android' | 'ios'>('android');
-  
   const [scanPhase, setScanPhase] = useState<'image' | 'barcode'>('image');
   const [pendingCAImage, setPendingCAImage] = useState<{ path: string, templateResponse: any, templatePath: string, bbox?: IBbox } | null>(null);
-  
   const scannedBarcodeRef = useRef<string | null>(null);
-  // Ref mirrors — prevent stale closure reads in handleSilentCapture on iOS
+  const [generatedCode, setGeneratedCode] = useState<string | null>(null);
+  const [isGeneratingCode, setIsGeneratingCode] = useState(false);
+
+  const { actions, state, env, apiKey } = useTemplateKYCFlowContext();
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+
+  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 documentTypeMapping: Record<string, GovernmentDocumentType> = {
+    'nationalId': 'national_id', 'national_id': 'national_id', 'identity_card': 'national_id',
+    'passport': 'passport', 'driversLicense': 'drivers_licence', 'drivers_licence': 'drivers_licence',
+    'residencePermit': 'permanent_residence', 'permanent_residence': 'permanent_residence',
+    'healthInsuranceCard': 'health_insurance_card', 'health_insurance_card': 'health_insurance_card',
+  };
+
+  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]);
+
+  // ==========================================
+  // 🚨 CRITICAL FIX: REF MIRRORS FOR IOS BRIDGE 
+  // Bypass stale native closures by mirroring all state into refs
+  // ==========================================
   const isAnalyzingRef = useRef<boolean>(false);
   const isProcessingCaptureRef = useRef<boolean>(false);
   const scanPhaseRef = useRef<'image' | 'barcode'>('image');
+  const currentSideRef = useRef(currentSide);
+  const capturedImagesRef = useRef(capturedImages);
+  const selectedDocTypeRef = useRef(selectedDocumentType);
+  const countryDataRef = useRef(countryData);
 
-  const [generatedCode, setGeneratedCode] = useState<string | null>(null);
-  const [isGeneratingCode, setIsGeneratingCode] = useState(false);
-
+  useEffect(() => { isAnalyzingRef.current = silentCaptureResult.isAnalyzing ?? false; }, [silentCaptureResult.isAnalyzing]);
+  useEffect(() => { isProcessingCaptureRef.current = isProcessingCapture; }, [isProcessingCapture]);
+  useEffect(() => { scanPhaseRef.current = scanPhase; }, [scanPhase]);
+  useEffect(() => { currentSideRef.current = currentSide; }, [currentSide]);
+  useEffect(() => { capturedImagesRef.current = capturedImages; }, [capturedImages]);
+  useEffect(() => { selectedDocTypeRef.current = selectedDocumentType; }, [selectedDocumentType]);
+  useEffect(() => { countryDataRef.current = countryData; }, [countryData]);
+  // ==========================================
 
   const handleGenerateCode = async () => {
     if (isGeneratingCode) return;
     setIsGeneratingCode(true);
-    
     try {
       if (!apiKey) {
         showAlert('Error', 'API Key is missing.');
-        setIsGeneratingCode(false);
-        return;
-      }
-
-      // Pass the dynamic apiKey to your service
-      const res = await kycService.generateReferralCode(
-        { session_id: state.session.session_id }, 
-        apiKey
-      );
-
-      // Extract the code from the response
-      const newCode = res.code || res.referral_code || res?.data?.code || res?.data?.referral_code; 
-      
-      if (newCode) {
-        setGeneratedCode(newCode);
-      } else {
-        showAlert('Error', 'Failed to parse code from server response.');
+        setIsGeneratingCode(false); return;
       }
+      const res = await kycService.generateReferralCode({ session_id: state.session.session_id }, apiKey);
+      const newCode = res.code || res.referral_code || res?.data?.code || res?.data?.referral_code;
+      if (newCode) setGeneratedCode(newCode);
+      else showAlert('Error', 'Failed to parse code from server response.');
     } catch (error: any) {
       showAlert('Error', error.message || 'Failed to generate code');
     } finally {
@@ -139,56 +160,18 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
 
   useEffect(() => {
     if (typeof window !== 'undefined' && window.location) setCurrentUrl(window.location.href);
-    console.log(currentUrl)
   }, []);
 
-  const documentTypeMapping: Record<string, GovernmentDocumentType> = {
-    'nationalId': 'national_id', 'national_id': 'national_id', 'identity_card': 'national_id',
-    'passport': 'passport', 'driversLicense': 'drivers_licence', 'drivers_licence': 'drivers_licence',
-    'residencePermit': 'permanent_residence', 'permanent_residence': 'permanent_residence',
-    'healthInsuranceCard': 'health_insurance_card', 'health_insurance_card': 'health_insurance_card',
-  };
-
-  const { actions, state, env, apiKey } = 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] || '';
+    if (text && typeof text[currentSide] === 'object' && text[currentSide][locale]) return text[currentSide][locale] || '';
     return "";
   };
 
-  useEffect(() => {
-    if (Platform.OS === 'web' && typeof window !== 'undefined') {
-      const baseUrl = window.location.origin + window.location.pathname;
-      const handoffUrl = `${baseUrl}?session_id=${state.session.session_id}&resume=true`;
-      setCurrentUrl(handoffUrl);
-    }
-  }, [state.session.session_id]);
-
-  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 isWebScanningRestricted = useMemo(() => {
     if (Platform.OS !== 'web') return false;
     if (countryData?.code !== 'CA') return false;
-    
     const docType = selectedDocumentType?.type;
-    return docType === 'drivers_licence' || 
-           docType === 'health_insurance_card' || 
-           docType === 'national_id' || 
-           docType === 'identity_card';
+    return docType === 'drivers_licence' || docType === 'health_insurance_card' || docType === 'national_id' || docType === 'identity_card';
   }, [countryData?.code, selectedDocumentType?.type]);
 
   const targetBarcodeTypes = useMemo<any[]>(() => {
@@ -199,35 +182,14 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
 
   const refreshCamera = () => {
     setIsRebootingCamera(true);
-
     if (scanPhase === 'barcode') {
       setScanPhase('image');
       setPendingCAImage(null);
       scannedBarcodeRef.current = null;
-      
-      setCapturedImages((prev) => {
-        const newState = { ...prev };
-        delete newState[currentSide];
-        return newState;
-      });
-
-      if (value) {
-        const newValue = { ...value };
-        delete newValue[currentSide];
-        onValueChange(newValue);
-      }
-
-      setSilentCaptureResult({
-        success: false,
-        isAnalyzing: false,
-        path: '',
-        error: '',
-        templatePath: '',
-        mrz: '',
-        bbox: undefined
-      });
+      setCapturedImages((prev) => { const newState = { ...prev }; delete newState[currentSide]; return newState; });
+      if (value) { const newValue = { ...value }; delete newValue[currentSide]; onValueChange(newValue); }
+      setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '', templatePath: '', mrz: '', bbox: undefined });
     }
-
     setTimeout(() => {
       setCameraKey(prev => prev + 1);
       setIsRebootingCamera(false);
@@ -240,116 +202,57 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   };
 
   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 || '',
-          }));
-        }
+    if (value && Object.keys(value).length > 0 && 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]);
 
-  // Keep refs in sync with state so handleSilentCapture always reads current values
-  useEffect(() => { isAnalyzingRef.current = silentCaptureResult.isAnalyzing ?? false; }, [silentCaptureResult.isAnalyzing]);
-  useEffect(() => { isProcessingCaptureRef.current = isProcessingCapture; }, [isProcessingCapture]);
-  useEffect(() => { scanPhaseRef.current = scanPhase; }, [scanPhase]);
-
   const cameraConfig = useMemo(() => {
-    let instructions = selectedDocumentType
-      ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr)
-      : getLocalizedText(component.instructions as Record<string, LocalizedText>);
-
-    if (scanPhase === 'barcode') {
-      instructions = '';
-    }
-
+    let instructions = selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions as Record<string, LocalizedText>);
+    if (scanPhase === 'barcode') instructions = '';
+    
     const isLandscape = screenWidth > screenHeight;
     let xMin, xMax, yMin, yMax;
-
+    
     if (Platform.OS === 'web') {
       const boxWidthPercent = isLandscape ? 0.40 : 0.85;
       xMin = isLandscape ? 30 : 7.5;
       xMax = xMin + (boxWidthPercent * 100);
-
       const containerWidth = Math.min(screenWidth * 0.95, 1000);
       const containerHeight = isLandscape ? screenHeight * 0.80 : screenHeight * 0.90;
-
       const boxPixelWidth = containerWidth * boxWidthPercent;
       const boxPixelHeight = boxPixelWidth / 1.59;
-
       const heightPercent = (boxPixelHeight / containerHeight) * 100;
       yMin = (100 - heightPercent) / 2.5;
       yMax = yMin + heightPercent;
     } else {
-      xMin = 5;
-      xMax = 95;
-      yMin = 34;
-      yMax = 66;
+      xMin = 5; xMax = 95; yMin = 34; yMax = 66;
     }
-
-    const platformBbox = {
-      xMin,
-      yMin,
-      xMax,
-      yMax,
-      borderColor: scanPhase === 'barcode' ? '#EAB308' : '#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 }
-    };
+    const platformBbox = { xMin, yMin, xMax, yMax, borderColor: scanPhase === 'barcode' ? '#EAB308' : '#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, scanPhase]);
 
   const retakePicture = (sideToRetake: 'front' | 'back') => {
-    setIsProcessingCapture(false);
-    setProcessingImagePath(null);
-    scannedBarcodeRef.current = null;
-    setScanPhase('image');
-    setPendingCAImage(null);
+    setIsProcessingCapture(false); setProcessingImagePath(null); scannedBarcodeRef.current = null;
+    setScanPhase('image'); setPendingCAImage(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);
-    }
+    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;
+  const getCurrentSideVerification = (side: string, countryKey: string, cData: any) => {
+    const rawDocType = cData?.documentType;
     if (!rawDocType || !countryKey) return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' };
-
-    const jsonDocMap: Record<string, string> = {
-      'nationalId': 'identity_card', 'national_id': 'identity_card', 'passport': 'passport',
-      'driversLicense': 'drivers_licence', 'drivers_licence': 'drivers_licence',
-      'residencePermit': 'permanent_residence', 'healthInsuranceCard': 'health_insurance_card'
-    };
-
+    
+    const jsonDocMap: Record<string, string> = { 'nationalId': 'identity_card', 'national_id': 'identity_card', 'passport': 'passport', 'driversLicense': 'drivers_licence', 'drivers_licence': 'drivers_licence', 'residencePermit': 'permanent_residence', 'healthInsuranceCard': 'health_insurance_card' };
     const searchDocType = jsonDocMap[rawDocType] || rawDocType;
-    const rawCountryName = ISO_TO_COUNTRY_NAME[countryData?.code || ''] || countryData?.code || countryKey;
+    const rawCountryName = ISO_TO_COUNTRY_NAME[cData?.code || ''] || cData?.code || countryKey;
     const baseMapping = (REGION_MAPPING as any).regionMapping || REGION_MAPPING;
     
     let countryMapping = baseMapping[rawCountryName];
@@ -357,22 +260,19 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       const foundKey = Object.keys(baseMapping).find(k => k.toLowerCase() === rawCountryName.toLowerCase() || k.toLowerCase() === countryKey.toLowerCase());
       if (foundKey) countryMapping = baseMapping[foundKey];
     }
-    
     if (!countryMapping || !countryMapping[searchDocType]) return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' };
-
-    const authMethod: string[] = [];
-    const mrzTypes: string[] = [];
-    const rawRegionKey = countrySelectionData.region?.trim()?.length > 0 ? countrySelectionData.region.trim() : 'root';
+    
+    const authMethod: string[] = []; const mrzTypes: string[] = [];
+    const rawRegionKey = cData.region?.trim()?.length > 0 ? cData.region.trim() : 'root';
     const key = SHORT_TO_LONG_REGION[rawRegionKey] || rawRegionKey;
     const regionMapping = countryMapping[searchDocType];
-
+    
     if (regionMapping?.[key] && Array.isArray(regionMapping[key])) {
       regionMapping[key].forEach((item: any) => {
-        if (item[currentSide]) authMethod.push(item[currentSide]);
+        if (item[side]) authMethod.push(item[side]);
         if (item?.mrz_type) mrzTypes.push(item?.mrz_type);
       });
     }
-
     return { authMethod: removeDuplicates(authMethod), mrzTypes: removeDuplicates(mrzTypes), regionMapping, key };
   }
 
@@ -397,119 +297,88 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   const autoCapture = async (capturePath: string, verified: ISilentCaptureResult & { region?: string }) => {
     if (isProcessingCapture) return;
     setIsProcessingCapture(true);
-
-    const safeCapturePath = (Platform.OS === 'ios' && !capturePath.startsWith('file://')) 
-      ? `file://${capturePath}` 
-      : capturePath;
-
+    const safeCapturePath = (Platform.OS === 'ios' && !capturePath.startsWith('file://')) ? `file://${capturePath}` : capturePath;
     setProcessingImagePath(safeCapturePath);
-
+    
     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,
-      };
-
+      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(safeCapturePath, uiCropBbox, 0.06);
       } catch (e) {
         console.warn("Crop failed, falling back to original image", e);
-        imagePathForUpload = safeCapturePath; 
+        imagePathForUpload = safeCapturePath;
       }
-
-      const safeCroppedPath = (Platform.OS === 'ios' && !imagePathForUpload.startsWith('file://')) 
-        ? `file://${imagePathForUpload}` 
-        : imagePathForUpload;
-
+      
+      const safeCroppedPath = (Platform.OS === 'ios' && !imagePathForUpload.startsWith('file://')) ? `file://${imagePathForUpload}` : imagePathForUpload;
       const base64 = await pathToBase64(safeCroppedPath);
+      const side = currentSideRef.current; // Grab live ref
+      
       const newImages = {
-        ...capturedImages,
-        // Store safeCroppedPath (guaranteed file:// on iOS) as dir so
-        // Image source={{ uri }} never receives a bare path on iOS.
-        [currentSide]: { dir: safeCroppedPath, file: base64, mrz: verified.mrz || "", templatePath: verified.templatePath },
+        ...capturedImagesRef.current,
+        [side]: { dir: safeCroppedPath, file: base64, mrz: verified.mrz || "", templatePath: verified.templatePath },
       };
-
+      
       setCapturedImages(newImages);
-
       if (verified.country && verified.documentType) {
         const docType = verified.documentType as string;
         const resolvedDocumentType = GovernmentDocumentTypeBackend[docType] || (Object.values(GovernmentDocumentTypeBackend).includes(docType as GovernmentDocumentType) ? docType : null) || Object.entries(GovernmentDocumentTypeBackend).find(([, v]) => v === docType)?.[1] || docType;
-        onValueChange({
-          ...newImages,
-          country: verified.country,
-          documentType: resolvedDocumentType,
-          ...(verified.region ? { region: verified.region } : {})
-        });
+        onValueChange({ ...newImages, country: verified.country, documentType: resolvedDocumentType, ...(verified.region ? { region: verified.region } : {}) });
       }
-
+      
       setTimeout(() => {
-        setShowCamera(false);
-        actions.showCustomStepper(true);
+        setShowCamera(false); actions.showCustomStepper(true);
         setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
-        setIsProcessingCapture(false);
-        setProcessingImagePath(null);
-        setScanPhase('image');
-        setPendingCAImage(null);
+        setIsProcessingCapture(false); setProcessingImagePath(null);
+        setScanPhase('image'); setPendingCAImage(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);
+      setIsProcessingCapture(false); setProcessingImagePath(null);
     }
   };
 
-  const isBarcodeRequired = (): boolean => {
-    if (currentSide !== 'back') return false;
-    if (!countryData?.code || !selectedDocumentType?.type) return false;
-
-    const rawDocType = selectedDocumentType.type;
-    const jsonDocMap: Record<string, string> = {
-      'nationalId': 'identity_card', 'national_id': 'identity_card', 'passport': 'passport',
-      'driversLicense': 'drivers_licence', 'drivers_licence': 'drivers_licence',
-      'residencePermit': 'permanent_residence', 'healthInsuranceCard': 'health_insurance_card'
-    };
+  const isBarcodeRequired = (side: string, cData: any, docType: any): boolean => {
+    if (side !== 'back') return false;
+    if (!cData?.code || !docType?.type) return false;
     
+    const rawDocType = docType.type;
+    const jsonDocMap: Record<string, string> = { 'nationalId': 'identity_card', 'national_id': 'identity_card', 'passport': 'passport', 'driversLicense': 'drivers_licence', 'drivers_licence': 'drivers_licence', 'residencePermit': 'permanent_residence', 'healthInsuranceCard': 'health_insurance_card' };
     const searchDocType = jsonDocMap[rawDocType] || rawDocType;
-    const rawCountryName = ISO_TO_COUNTRY_NAME[countryData.code] || countryData.code;
+    const rawCountryName = ISO_TO_COUNTRY_NAME[cData.code] || cData.code;
     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() === countryData.code.toLowerCase());
+      const foundKey = Object.keys(baseMapping).find(k => k.toLowerCase() === rawCountryName.toLowerCase() || k.toLowerCase() === cData.code.toLowerCase());
       if (foundKey) countryMapping = baseMapping[foundKey];
     }
-    
     if (!countryMapping || !countryMapping[searchDocType]) return false;
-
-    const rawRegionKey = countryData.region?.trim()?.length > 0 ? countryData.region.trim() : 'root';
+    
+    const rawRegionKey = cData.region?.trim()?.length > 0 ? cData.region.trim() : 'root';
     const regionKey = SHORT_TO_LONG_REGION[rawRegionKey] || rawRegionKey;
     const regionData = countryMapping[searchDocType][regionKey];
     
     if (!regionData || !Array.isArray(regionData)) return false;
-
-    const requiresBarcode = regionData.some((item: any) => {
+    return regionData.some((item: any) => {
       const method = String(item['back'] || '').toUpperCase();
       return method.includes('BARCODE') || method.includes('2D');
     });
-
-    logger.log(`[Barcode Check] Dynamic check for ${countryData.code} - ${searchDocType} - ${regionKey}: requiresBarcode=${requiresBarcode}`);
-    return requiresBarcode;
   };
 
   const processCanadianBarcode = async (barcodeString: string) => {
-    if (isProcessingCapture || !pendingCAImage) return;
-    logger.log('[CA Barcode] Valid barcode decoded. Sending to parser...');
-    
+    if (isProcessingCaptureRef.current || !pendingCAImage) return;
     setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: true, error: '' }));
     
     try {
-      const isHIC = selectedDocumentType!.type === 'health_insurance_card';
+      const docType = selectedDocTypeRef.current;
+      const cData = countryDataRef.current;
+      const isHIC = docType!.type === 'health_insurance_card';
       let parsedDictionary;
       
       if (isHIC && barcodeString.length < 50) {
@@ -518,34 +387,22 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
         const token = await authentification();
         parsedDictionary = await kycService.formatBarcodeData({ textInput: barcodeString, token }, env);
       }
-      
       if (!parsedDictionary) throw new Error("Could not parse the barcode data.");
-
+      
       const verifiedResult: ISilentCaptureResult & { region?: string } = {
-        path: pendingCAImage.path,
-        templatePath: pendingCAImage.templatePath,
-        bbox: pendingCAImage.bbox,
-        success: true,
-        mrz: JSON.stringify(parsedDictionary),
-        barcode: barcodeString,
-        isAnalyzing: false,
-        country: countryData?.code,
-        documentType: selectedDocumentType!.type,
-        region: selectedDocumentType!.region !== 'root' ? selectedDocumentType!.region : undefined,
+        path: pendingCAImage.path, templatePath: pendingCAImage.templatePath, bbox: pendingCAImage.bbox, success: true,
+        mrz: JSON.stringify(parsedDictionary), barcode: barcodeString, isAnalyzing: false,
+        country: cData?.code, documentType: docType!.type, region: docType!.region !== 'root' ? docType!.region : undefined,
       };
-
+      
       setSilentCaptureResult(verifiedResult);
       if (pendingCAImage.bbox) {
         const safeBbox = pendingCAImage.bbox as IBbox;
         setBboxBySide(prev => ({ ...prev, ['back']: safeBbox }));
       }
-      
       await autoCapture(pendingCAImage.path, verifiedResult);
     } catch (error: any) {
-      console.error("Barcode processing failed", error);
-      setScanPhase('image');
-      setPendingCAImage(null);
-      scannedBarcodeRef.current = null;
+      setScanPhase('image'); setPendingCAImage(null); scannedBarcodeRef.current = null;
       setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: 'Failed to process barcode. Please retake the photo.' }));
     }
   };
@@ -554,47 +411,39 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     if (isProcessingCaptureRef.current) return;
     if (scanPhaseRef.current === 'barcode') return;
     if (isAnalyzingRef.current) return;
-  
+
+    // USE REFS TO AVOID IOS NATIVE STALE CLOSURE
+    const side = currentSideRef.current;
+    const captured = capturedImagesRef.current;
+    const docType = selectedDocTypeRef.current;
+    const cData = countryDataRef.current;
+
     if (result.success && result.path) {
       setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
-  
+      
       const safeCapturePath = Platform.OS === 'ios' && !result.path.startsWith('file://') ? `file://${result.path}` : result.path;
-      let templatePath = capturedImages[currentSide]?.templatePath || '';
+      let templatePath = captured[side]?.templatePath || '';
       let templateBbox: IBbox | undefined;
       let templateResponse: any;
-  
-      if (!selectedDocumentType) {
+
+      if (!docType) {
         setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Document type not selected' }));
         return;
       }
-  
-      const issuingSubdivision = selectedDocumentType.region !== 'root' ? selectedDocumentType.region : undefined;
-  
-      // Subtle timeout handling without blocking pop-ups
+
+      const issuingSubdivision = docType.region !== 'root' ? docType.region : undefined;
+
       const watchdog = setTimeout(() => {
         if (isAnalyzingRef.current) {
-          setSilentCaptureResult((prev) => ({
-            ...prev,
-            isAnalyzing: false,
-            success: false,
-            error: state.currentLanguage === 'en' ? 'Taking longer than expected. Hold steady.' : 'Traitement long. Veuillez rester immobile.'
-          }));
+          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: state.currentLanguage === 'en' ? 'Taking longer than expected. Hold steady.' : 'Traitement long. Veuillez rester immobile.' }));
         }
       }, 20000);
-  
+
       try {
         if (!templatePath) {
-          const templateType = await checkTemplateType({
-            path: safeCapturePath,
-            docType: selectedDocumentType?.type as GovernmentDocumentType,
-            docRegion: countryData?.code || "",
-            postfix: currentSide,
-            issuingSubdivision: issuingSubdivision
-          }, env);
-  
+          const templateType = await checkTemplateType({ path: safeCapturePath, docType: docType.type as GovernmentDocumentType, docRegion: cData?.code || "", postfix: side, issuingSubdivision: issuingSubdivision }, env);
           templateResponse = templateType;
           if (templateType.template_path) templatePath = templateType.template_path;
-  
           if (templateType.card_obb) {
             const obbConfidence = getObbConfidence((templateType as any).card_obb);
             if (obbConfidence !== null && obbConfidence < OBB_CONFIDENCE_THRESHOLD) {
@@ -602,210 +451,108 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
               setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: t('kyc.idCardCapture.cardNotFullyInFrame') }));
               return;
             }
-            try {
-              const crop = await cropByObb(safeCapturePath, (templateType as any).card_obb);
-              templateBbox = crop.bbox;
-            } catch {}
+            try { const crop = await cropByObb(safeCapturePath, (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);
+
+        const extractedCountryKey = templatePath ? templatePath.split('/')[0] : (ISO_TO_COUNTRY_NAME[cData?.code || ''] || 'root');
+        const regionMappings = getCurrentSideVerification(side, extractedCountryKey, cData);
         let verificationRes: any;
-  
-        if (currentSide === 'front') {
+
+        if (side === 'front') {
           const matchedAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'front');
           const mrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || 'TD1';
-          
-          verificationRes = await frontVerification({
-            path: safeCapturePath,
-            regionMapping: { authMethod: matchedAuthMethod ? [matchedAuthMethod] : [], mrzTypes: mrzType ? [mrzType] : [] },
-            selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type as keyof typeof GovernmentDocumentTypeShorted] || '',
-            code: countryData?.code || '',
-            currentSide,
-            templatePath,
-            mrzType,
-            issuingSubdivision: issuingSubdivision,
-            clientSideBarcodeData: silentCaptureResult.barcode
-          }, env);
+          verificationRes = await frontVerification({ path: safeCapturePath, regionMapping: { authMethod: matchedAuthMethod ? [matchedAuthMethod] : [], mrzTypes: mrzType ? [mrzType] : [] }, selectedDocumentType: GovernmentDocumentTypeShorted[docType.type as keyof typeof GovernmentDocumentTypeShorted] || '', code: cData?.code || '', currentSide: side, templatePath, mrzType, issuingSubdivision: issuingSubdivision, clientSideBarcodeData: silentCaptureResult.barcode }, env);
         } else {
-          logger.log("Attempting backVerification with:", { path: safeCapturePath, templatePath, side: currentSide });
           const matchedBackAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'back');
           const backMrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '';
-          const frontTemplatePath = capturedImages['front']?.templatePath || '';
-          
-          verificationRes = await backVerification({
-            path: safeCapturePath,
-            regionMapping: { authMethod: matchedBackAuthMethod ? [matchedBackAuthMethod] : [], mrzTypes: backMrzType ? [backMrzType] : [] },
-            selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type as keyof typeof GovernmentDocumentTypeShorted] || '',
-            code: countryData?.code || '',
-            currentSide,
-            templatePath,
-            mrzType: backMrzType,
-            templateResponse,
-            issuingSubdivision: issuingSubdivision,
-            frontTemplatePath: frontTemplatePath
-          }, env);
+          const frontTemplatePath = captured['front']?.templatePath || '';
+          verificationRes = await backVerification({ path: safeCapturePath, regionMapping: { authMethod: matchedBackAuthMethod ? [matchedBackAuthMethod] : [], mrzTypes: backMrzType ? [backMrzType] : [] }, selectedDocumentType: GovernmentDocumentTypeShorted[docType.type as keyof typeof GovernmentDocumentTypeShorted] || '', code: cData?.code || '', currentSide: side, templatePath, mrzType: backMrzType, templateResponse, issuingSubdivision: issuingSubdivision, frontTemplatePath: frontTemplatePath }, env);
         }
-  
+
         const bbox = verificationRes?.bbox || templateBbox;
         const verifiedMrz = verificationRes?.mrz ? JSON.stringify(verificationRes.mrz) : "";
-  
-        if (isBarcodeRequired()) {
+
+        if (isBarcodeRequired(side, cData, docType)) {
           const barcodeData = scannedBarcodeRef.current;
-          const docTypeStr = selectedDocumentType!.type;
-          const isHIC = docTypeStr === 'health_insurance_card';
+          const isHIC = docType.type === 'health_insurance_card';
           const isValidScan = typeof barcodeData === 'string' && ((isHIC && barcodeData.length > 0) || barcodeData.length > 50);
-  
+
           if (isValidScan) {
-            logger.log('[CA Barcode] Image captured, verified & barcode ALREADY scanned! Skipping Phase 2.');
             let parsedDictionary;
-  
             if (isHIC && barcodeData.length < 50) {
               parsedDictionary = { data: { card_number: barcodeData, barcode_type: "1D" } };
             } else {
               const token = await authentification();
               parsedDictionary = await kycService.formatBarcodeData({ textInput: barcodeData, token }, env);
             }
-  
-            const verifiedResult: ISilentCaptureResult & { region?: string } = {
-              path: safeCapturePath, templatePath: templatePath, bbox: bbox, success: true,
-              mrz: JSON.stringify(parsedDictionary), barcode: barcodeData, isAnalyzing: false,
-              country: countryData?.code, documentType: selectedDocumentType!.type,
-              region: selectedDocumentType!.region !== 'root' ? selectedDocumentType!.region : undefined,
-            };
+            const verifiedResult: ISilentCaptureResult & { region?: string } = { path: safeCapturePath, templatePath: templatePath, bbox: bbox, success: true, mrz: JSON.stringify(parsedDictionary), barcode: barcodeData, isAnalyzing: false, country: cData?.code, documentType: docType.type, region: docType.region !== 'root' ? docType.region : undefined };
             
-            clearTimeout(watchdog);
-            setSilentCaptureResult(verifiedResult);
-            
-            if (bbox) {
-              const safeBbox = bbox as IBbox;
-              setBboxBySide(prev => ({ ...prev, ['back']: safeBbox }));
-            }
+            clearTimeout(watchdog); setSilentCaptureResult(verifiedResult);
+            if (bbox) setBboxBySide(prev => ({ ...prev, ['back']: bbox as IBbox }));
             await autoCapture(safeCapturePath!, verifiedResult);
             return;
           }
-  
-          logger.log('[CA Barcode] Image captured & template VERIFIED. Switching to Barcode phase.');
+
           clearTimeout(watchdog);
           setPendingCAImage({ path: safeCapturePath!, templateResponse, templatePath, bbox });
           setScanPhase('barcode');
           setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
           return;
         }
-  
-        const verifiedResult: ISilentCaptureResult & { region?: string } = {
-          path: safeCapturePath, templatePath, bbox, success: true, mrz: verifiedMrz,
-          isAnalyzing: false, country: countryData?.code, documentType: selectedDocumentType.type,
-          region: issuingSubdivision
-        };
-        
+
+        const verifiedResult: ISilentCaptureResult & { region?: string } = { path: safeCapturePath, templatePath, bbox, success: true, mrz: verifiedMrz, isAnalyzing: false, country: cData?.code, documentType: docType.type, region: issuingSubdivision };
         clearTimeout(watchdog);
         setSilentCaptureResult(verifiedResult);
-        if (bbox) setBboxBySide(prev => ({ ...prev, [currentSide]: bbox }));
+        if (bbox) setBboxBySide(prev => ({ ...prev, [side]: bbox }));
         await autoCapture(safeCapturePath, verifiedResult);
-  
+
       } catch (error: any) {
         clearTimeout(watchdog);
         const isNetworkError = !error.response || error.message === 'Network Error' || error.code === 'ECONNABORTED' || error.message?.includes('Network');
-        
-        // Keep UI errors extremely brief and actionable
         let hintMessage = '';
-  
         if (isNetworkError) {
           hintMessage = state.currentLanguage === 'en' ? 'Poor connection. Retrying...' : 'Connexion faible. Nouvelle tentative...';
         } else {
           const rawMessage = (error?.message || '').toLowerCase();
-          if (rawMessage.includes('impossible') || rawMessage.includes('unreadable')) {
-            hintMessage = state.currentLanguage === 'en' ? 'Move to better lighting.' : 'Améliorez l\'éclairage.';
-          } else if (rawMessage.includes('country mismatch') || rawMessage.includes('pays sélectionné')) {
-            hintMessage = state.currentLanguage === 'en' ? 'Wrong document type.' : 'Mauvais type de document.';
-          } else if (rawMessage.includes('card_not_fully_in_frame')) {
-            hintMessage = state.currentLanguage === 'en' ? 'Move closer.' : 'Rapprochez-vous.';
-          } else if (rawMessage.includes('ne correspond pas au recto')) {
-            hintMessage = state.currentLanguage === 'en' ? 'Scan the same ID.' : 'Scannez la même pièce.';
-          }
+          if (rawMessage.includes('impossible') || rawMessage.includes('unreadable')) { hintMessage = state.currentLanguage === 'en' ? 'Move to better lighting.' : 'Améliorez l\'éclairage.'; }
+          else if (rawMessage.includes('country mismatch') || rawMessage.includes('pays sélectionné')) { hintMessage = state.currentLanguage === 'en' ? 'Wrong document type.' : 'Mauvais type de document.'; }
+          else if (rawMessage.includes('card_not_fully_in_frame')) { hintMessage = state.currentLanguage === 'en' ? 'Move closer.' : 'Rapprochez-vous.'; }
+          else if (rawMessage.includes('ne correspond pas au recto')) { hintMessage = state.currentLanguage === 'en' ? 'Scan the same ID.' : 'Scannez la même pièce.'; }
         }
-  
         setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: hintMessage }));
       }
     }
   };
-  
+
   useEffect(() => {
     if (scanPhase === 'barcode' && pendingCAImage && silentCaptureResult.barcode) {
       const bData = silentCaptureResult.barcode;
       if (typeof bData === 'string' && bData.length > 50) {
-        logger.log('[CA Barcode] Safety Net Triggered: Processing barcode.');
         processCanadianBarcode(bData);
       }
     }
   }, [scanPhase, pendingCAImage, silentCaptureResult.barcode]);
-  
 
   const handleError = (event: { message: string, name?: string, code?: string }) => {
-    logger.error("Camera Error:", event);
     const errString = `${event.message} ${event.name} ${event.code}`.toLowerCase();
-    
     let friendlyMessage = state.currentLanguage === 'en' ? 'Camera error.' : 'Erreur de caméra.';
-  
-    if (errString.includes('notreadableerror') || errString.includes('trackstarterror') || errString.includes('in use') || errString.includes('concurrent') || errString.includes('camera unavailable')) {
-      friendlyMessage = state.currentLanguage === 'en' ? 'Camera is in use by another app.' : 'Caméra utilisée par une autre application.';
-    } else if (errString.includes('notallowederror') || errString.includes('permission')) {
-      friendlyMessage = state.currentLanguage === 'en' ? 'Allow camera access in settings.' : 'Autorisez l\'accès à la caméra.';
-    } else if (errString.includes('notfounderror') || errString.includes('no camera')) {
-      friendlyMessage = state.currentLanguage === 'en' ? 'No camera detected.' : 'Aucune caméra détectée.';
-    }
-  
+    if (errString.includes('notreadableerror') || errString.includes('trackstarterror') || errString.includes('in use') || errString.includes('concurrent') || errString.includes('camera unavailable')) { friendlyMessage = state.currentLanguage === 'en' ? 'Camera is in use by another app.' : 'Caméra utilisée par une autre application.'; }
+    else if (errString.includes('notallowederror') || errString.includes('permission')) { friendlyMessage = state.currentLanguage === 'en' ? 'Allow camera access in settings.' : 'Autorisez l\'accès à la caméra.'; }
+    else if (errString.includes('notfounderror') || errString.includes('no camera')) { friendlyMessage = state.currentLanguage === 'en' ? 'No camera detected.' : 'Aucune caméra détectée.'; }
     showAlert(state.currentLanguage === 'en' ? 'Camera Error' : 'Erreur', friendlyMessage);
-    setShowCamera(false);
-    setIsProcessingCapture(false);
+    setShowCamera(false); setIsProcessingCapture(false);
   };
 
-  useEffect(() => {
-    actions.showCustomStepper(!showCamera);
-  }, [showCamera]);
-
-  useEffect(() => {
-    if (Platform.OS === 'web' && typeof window !== 'undefined') {
-      try {
-        const url = new URL(window.location.origin);
-        if (url.hostname === 'localhost') {
-          url.hostname = '192.168.0.33';
-        }
-        const params = new URLSearchParams(window.location.search);
-        params.set('session_id', state.session.session_id);
-        params.set('resume', 'true');
-        
-        if (state.currentComponentIndex !== undefined) {
-          params.set('component_index', String(state.currentComponentIndex));
-        }
-        if (countryData?.code) {
-          params.set('country', countryData.code);
-        }
-        if (selectedDocumentType?.type) {
-          params.set('document_type', selectedDocumentType.type);
-        }
-        if (selectedDocumentType?.region && selectedDocumentType.region !== 'root') {
-          params.set('region', selectedDocumentType.region);
-        }
-        
-        url.hash = params.toString();
-        setCurrentUrl(url.toString());
-      } catch (e) {
-        console.error("Failed to construct QR handoff URL", e);
-      }
-    }
-  }, [state.session.session_id, state.currentComponentIndex, countryData, selectedDocumentType]);
+  useEffect(() => { actions.showCustomStepper(!showCamera); }, [showCamera]);
 
+  // Render logic remains identical below...
   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>
+          <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>
     );
@@ -813,7 +560,6 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
 
   if (showCamera) {
     const isBusy = isProcessingCapture;
-
     if (isRebootingCamera) {
       return (
         <View style={[styles.root, { justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' }]}>
@@ -822,46 +568,30 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
         </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>
+            <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>
+              <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>
+                <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}
+              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}
-              isScanningBarcode={currentSide === 'back'}
-              barcodeTypes={targetBarcodeTypes}
+              onError={handleError} onSilentCapture={handleSilentCapture} silentCaptureResult={silentCaptureResult}
+              isScanningBarcode={currentSide === 'back'} barcodeTypes={targetBarcodeTypes}
               onBarcodeScanned={(barcodeString) => {
                 const docTypeStr = selectedDocumentType?.type;
                 const isFullDataDoc = docTypeStr === 'drivers_licence' || docTypeStr === 'national_id' || docTypeStr === 'identity_card';
                 if (isFullDataDoc && barcodeString.length < 50) return;
-
                 if (scannedBarcodeRef.current !== barcodeString) {
                   scannedBarcodeRef.current = barcodeString;
                   if (scanPhase === 'barcode' && pendingCAImage) {
@@ -872,122 +602,70 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                 }
               }}
               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 || scanPhase === 'barcode'}
-                    language={state.currentLanguage}
-                    stepperProps={{
-                      back: () => {
-                        if (currentSide === 'back') {
-                          scannedBarcodeRef.current = null;
-                          setScanPhase('image');
-                          setPendingCAImage(null);
-                          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: '' }));
-                          }
+                <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 || scanPhase === 'barcode'} language={state.currentLanguage}
+                  stepperProps={{
+                    back: () => {
+                      if (currentSide === 'back') {
+                        scannedBarcodeRef.current = null; setScanPhase('image'); setPendingCAImage(null); 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 {
-                          actions.previousComponent();
+                          setSilentCaptureResult((prev) => ({ ...prev, path: '', success: false, isAnalyzing: false, error: '', templatePath: '' }));
                         }
-                      },
-                      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,
-                    }}
-                  />
-                </>
+                      } 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,
+                  }}
+                />
               }
             />
-
             {scanPhase === 'barcode' && !isBusy && (
               <View style={styles.barcodePromptContainer}>
                 <View style={styles.barcodePromptContent}>
-                  <View style={styles.barcodeIconContainer}>
-                    <Text style={styles.barcodeIcon}>✓</Text>
-                  </View>
+                  <View style={styles.barcodeIconContainer}><Text style={styles.barcodeIcon}>✓</Text></View>
                   <View style={styles.barcodeTextContainer}>
-                    <Text style={styles.barcodePromptTitle}>
-                      {state.currentLanguage === 'en' ? 'Image Verified' : 'Image Vérifiée'}
-                    </Text>
-                    <Text style={styles.barcodePromptDesc}>
-                      {state.currentLanguage === 'en' ? 'Move closer to fill the screen with the 2D barcode.' : 'Rapprochez-vous pour scanner le code-barres 2D.'}
-                    </Text>
+                    <Text style={styles.barcodePromptTitle}>{state.currentLanguage === 'en' ? 'Image Verified' : 'Image Vérifiée'}</Text>
+                    <Text style={styles.barcodePromptDesc}>{state.currentLanguage === 'en' ? 'Move closer to fill the screen with the 2D barcode.' : 'Rapprochez-vous pour scanner le code-barres 2D.'}</Text>
                   </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>
+                  <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" />
-                )}
+                {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>
+                  <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>
-                )}
+                {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>
+                  <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>
+                <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>
+              <View style={[styles.floatingErrorBanner, { zIndex: 10000 }]}><Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text></View>
             ) : null}
           </View>
         </View>
@@ -1000,96 +678,36 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       <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>
-
+            <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}
+                {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 }}>
-                  
                   {isWebScanningRestricted ? (
                     <>
                       <View style={styles.restrictionWarningBanner}>
-                        <Text style={styles.restrictionWarningTitle}>
-                          {state.currentLanguage === 'en' ? '⚠️ Web Scanning Unavailable' : '⚠️ Numérisation Web Indisponible'}
-                        </Text>
-                        <Text style={styles.restrictionWarningText}>
-                          {state.currentLanguage === 'en'
-                            ? `This document can only be scanned using our mobile app.`
-                            : `Ce document ne peut être scanné qu'avec notre application mobile.`}
-                        </Text>
+                        <Text style={styles.restrictionWarningTitle}>{state.currentLanguage === 'en' ? '⚠️ Web Scanning Unavailable' : '⚠️ Numérisation Web Indisponible'}</Text>
+                        <Text style={styles.restrictionWarningText}>{state.currentLanguage === 'en' ? `This document can only be scanned using our mobile app.` : `Ce document ne peut être scanné qu'avec notre application mobile.`}</Text>
                       </View>
-                      
-                      <Button 
-                        title={state.currentLanguage === "en" ? "Continue on Phone" : "Continuer sur le téléphone"} 
-                        onPress={() => setShowQRModal(true)} 
-                        variant="primary" 
-                        size="large" 
-                        fullWidth 
-                      />
+                      <Button title={state.currentLanguage === "en" ? "Continue on Phone" : "Continuer sur le téléphone"} onPress={() => setShowQRModal(true)} variant="primary" size="large" fullWidth />
                     </>
                   ) : (
-                    /* 🟢 NORMAL FLOW: Show "Start Scanning" and optional web handoff */
                     <>
-                      <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 
-                        />
-                      )}
+                      <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);
-                      setScanPhase('image');
-                      setPendingCAImage(null);
-                    }
+                    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); setScanPhase('image'); setPendingCAImage(null); }
                   }} variant="primary" size="large" fullWidth />
                 </>
               )}
@@ -1099,96 +717,96 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       </View>
 
       {showQRModal && Platform.OS === 'web' && (
-  <View style={styles.qrModalOverlay}>
-    <View style={styles.qrModalContainer}>
-      <View style={styles.qrModalHeader}>
-        <Text style={styles.qrModalTitle}>
-          {state.currentLanguage === 'en' ? 'Continue on your phone' : 'Continuer sur votre téléphone'}
-        </Text>
-        <Text style={styles.qrModalText}>
-          {state.currentLanguage === 'en'
-            ? "Scan the QR code to download our mobile app and complete the scanning process securely."
-            : "Scannez le code QR pour télécharger notre application et terminer la numérisation en toute sécurité."}
-        </Text>
-      </View>
+          <View style={styles.qrModalOverlay}>
+            <View style={styles.qrModalContainer}>
+              <View style={styles.qrModalHeader}>
+                <Text style={styles.qrModalTitle}>
+                  {state.currentLanguage === 'en' ? 'Continue on your phone' : 'Continuer sur votre téléphone'}
+                </Text>
+                <Text style={styles.qrModalText}>
+                  {state.currentLanguage === 'en'
+                    ? "Scan the QR code to download our mobile app and complete the scanning process securely."
+                    : "Scannez le code QR pour télécharger notre application et terminer la numérisation en toute sécurité."}
+                </Text>
+              </View>
 
-      <View style={styles.qrToggleContainer}>
-        <TouchableOpacity
-          style={[styles.qrToggleButton, qrPlatform === 'android' && styles.qrToggleButtonActive]}
-          onPress={() => setQrPlatform('android')}
-        >
-          <Text style={[styles.qrToggleText, qrPlatform === 'android' && styles.qrToggleTextActive]}>
-            Android
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={[styles.qrToggleButton, qrPlatform === 'ios' && styles.qrToggleButtonActive]}
-          onPress={() => setQrPlatform('ios')}
-        >
-          <Text style={[styles.qrToggleText, qrPlatform === 'ios' && styles.qrToggleTextActive]}>
-            iOS (Apple)
-          </Text>
-        </TouchableOpacity>
-      </View>
+              <View style={styles.qrToggleContainer}>
+                <TouchableOpacity
+                  style={[styles.qrToggleButton, qrPlatform === 'android' && styles.qrToggleButtonActive]}
+                  onPress={() => setQrPlatform('android')}
+                >
+                  <Text style={[styles.qrToggleText, qrPlatform === 'android' && styles.qrToggleTextActive]}>
+                    Android
+                  </Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[styles.qrToggleButton, qrPlatform === 'ios' && styles.qrToggleButtonActive]}
+                  onPress={() => setQrPlatform('ios')}
+                >
+                  <Text style={[styles.qrToggleText, qrPlatform === 'ios' && styles.qrToggleTextActive]}>
+                    iOS (Apple)
+                  </Text>
+                </TouchableOpacity>
+              </View>
 
-      <View style={styles.qrCodeWrapper}>
-        <QRCode
-          value={
-            qrPlatform === 'android'
-              ? 'https://play.google.com/store/apps/details?id=transfergratis.com&hl=en_CA&gl=US'
-              : 'https://apps.apple.com/ca/app/transfergratis-money-transfer/id1605411731'
-          }
-          size={180} 
-          backgroundColor="#FFFFFF"
-          color="#0F172A"
-        />
-      </View>
+              <View style={styles.qrCodeWrapper}>
+                <QRCode
+                  value={
+                    qrPlatform === 'android'
+                      ? 'https://play.google.com/store/apps/details?id=transfergratis.com&hl=en_CA&gl=US'
+                      : 'https://apps.apple.com/ca/app/transfergratis-money-transfer/id1605411731'
+                  }
+                  size={180} 
+                  backgroundColor="#FFFFFF"
+                  color="#0F172A"
+                />
+              </View>
 
-      <View style={styles.linkCodeSection}>
-        <Text style={styles.linkCodeHeader}>
-          {state.currentLanguage === 'en' ? 'Use code below to proceed on the Sanctum Key App.' : 'Vous avez déjà l\'application ? Liez-la :'}
-        </Text>
-        
-          {generatedCode ? (
-            <ExpiringCodeTimer initialCode={generatedCode} language={state.currentLanguage} />
-          ) : (
-            <TouchableOpacity style={styles.generateCodeButton} onPress={handleGenerateCode} disabled={isGeneratingCode}>
-              {isGeneratingCode ? (
-                <ActivityIndicator size="small" color="#0F172A" />
-              ) : (
-                <Text style={styles.generateCodeButtonText}>
-                  {state.currentLanguage === 'en' ? 'Generate 5-Digit Link Code' : 'Générer un code à 5 chiffres'}
+              <View style={styles.linkCodeSection}>
+                <Text style={styles.linkCodeHeader}>
+                  {state.currentLanguage === 'en' ? 'Use code below to proceed on the Sanctum Key App.' : 'Vous avez déjà l\'application ? Liez-la :'}
                 </Text>
+                
+                  {generatedCode ? (
+                    <ExpiringCodeTimer initialCode={generatedCode} language={state.currentLanguage} />
+                  ) : (
+                    <TouchableOpacity style={styles.generateCodeButton} onPress={handleGenerateCode} disabled={isGeneratingCode}>
+                      {isGeneratingCode ? (
+                        <ActivityIndicator size="small" color="#0F172A" />
+                      ) : (
+                        <Text style={styles.generateCodeButtonText}>
+                          {state.currentLanguage === 'en' ? 'Generate 5-Digit Link Code' : 'Générer un code à 5 chiffres'}
+                        </Text>
+                      )}
+                    </TouchableOpacity>
+                  )}
+              </View>
+
+              {isWebScanningRestricted && (
+                <View style={styles.storeLinksContainer}>
+                  <Text style={styles.storeLinksTitle}>
+                    {state.currentLanguage === 'en' ? 'Or click to open directly:' : 'Ou cliquez pour ouvrir directement :'}
+                  </Text>
+                  <View style={styles.storeButtonsRow}>
+                    <TouchableOpacity style={styles.storeButton} onPress={() => window.open('https://play.google.com/store/apps/details?id=transfergratis.com&hl=en_CA&gl=US', '_blank')} >
+                      <Text style={styles.storeButtonText}>Google Play</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={styles.storeButton} onPress={() => window.open('https://apps.apple.com/ca/app/transfergratis-money-transfer/id1605411731', '_blank')} >
+                      <Text style={styles.storeButtonText}>App Store</Text>
+                    </TouchableOpacity>
+                  </View>
+                </View>
               )}
-            </TouchableOpacity>
-          )}
-      </View>
 
-      {isWebScanningRestricted && (
-        <View style={styles.storeLinksContainer}>
-          <Text style={styles.storeLinksTitle}>
-            {state.currentLanguage === 'en' ? 'Or click to open directly:' : 'Ou cliquez pour ouvrir directement :'}
-          </Text>
-          <View style={styles.storeButtonsRow}>
-            <TouchableOpacity style={styles.storeButton} onPress={() => window.open('https://play.google.com/store/apps/details?id=transfergratis.com&hl=en_CA&gl=US', '_blank')} >
-              <Text style={styles.storeButtonText}>Google Play</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.storeButton} onPress={() => window.open('https://apps.apple.com/ca/app/transfergratis-money-transfer/id1605411731', '_blank')} >
-              <Text style={styles.storeButtonText}>App Store</Text>
-            </TouchableOpacity>
+              <Button
+                title={state.currentLanguage === 'en' ? "Cancel & Stay on Laptop" : "Annuler et rester sur l'ordinateur"}
+                onPress={() => setShowQRModal(false)}
+                variant="outline"
+                fullWidth
+              />
+            </View>
           </View>
-        </View>
-      )}
-
-      <Button
-        title={state.currentLanguage === 'en' ? "Cancel & Stay on Laptop" : "Annuler et rester sur l'ordinateur"}
-        onPress={() => setShowQRModal(false)}
-        variant="outline"
-        fullWidth
-      />
-    </View>
-  </View>
-)}
+        )}
     </View>
   );
 };