@sanctum-key/react-native-sdk 1.0.23 → 1.0.25

package/src/components/KYCElements/IDCardCapture.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
@@ -11,13 +11,26 @@ import { removeDuplicates } from '../../utils/remove-duplicate';
 import { backVerification, checkTemplateType, frontVerification } from '../../modules/api/CardAuthentification';
 import { getDocumentTypeInfo } from '../../utils/get-document-type-info';
 import pathToBase64 from '../../utils/pathToBase64';
-import { cropByObb, cropImageWithBBoxWithTolerance, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from '../../utils/cropByObb';
+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 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', 'CI': 'Ivory Coast', 'SN': 'Senegal', 'TG': 'Togo', 'ML': 'Mali' };
+const ISO_TO_COUNTRY_NAME: Record<string, string> = {
+  'KE': 'Kenya', 'CM': 'Cameroon', 'NG': 'Nigeria', 'CA': 'Canada',
+  'FR': 'France', 'GH': 'Ghana', 'ZA': 'South Africa', 'GB': 'Britain',
+  'CI': 'Ivory Coast', 'SN': 'Senegal', 'TG': 'Togo', 'ML': 'Mali'
+};
+
+interface IIDCardPayload {
+  dir: string;
+  file: string;
+  mrz: string;
+  templatePath?: string;
+}
 
-interface IIDCardPayload { dir: string; file: string; mrz: string; templatePath?: string; }
 interface IDCardCaptureProps {
   component: TemplateComponent;
   value?: Record<string, IIDCardPayload>;
@@ -27,6 +40,14 @@ interface IDCardCaptureProps {
   currentSide?: string;
 }
 
+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",
+  "SK": "Saskatchewan", "YT": "Yukon"
+};
+
 export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value = {}, onValueChange, error, language = 'en' }) => {
   const { t, locale } = useI18n();
   const [showCamera, setShowCamera] = useState(false);
@@ -41,23 +62,42 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   const [cameraType, setCameraType] = useState<'back' | 'front'>('back');
   const [showQRModal, setShowQRModal] = useState(false);
   const [currentUrl, setCurrentUrl] = useState('');
+  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);
 
   useEffect(() => {
-    if (typeof window !== 'undefined' && window.location) {
-      setCurrentUrl(window.location.href);
-    }
+    if (typeof window !== 'undefined' && window.location) setCurrentUrl(window.location.href);
+    console.log(currentUrl)
   }, []);
 
-  const documentTypeMapping: Record<string, GovernmentDocumentType> = { 'nationalId': 'national_id', 'passport': 'passport', 'driversLicense': 'drivers_licence', 'residencePermit': 'permanent_residence', 'healthInsuranceCard': 'health_insurance_card', };
+  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 } = 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;
@@ -72,8 +112,54 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
 
   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';
+  }, [countryData?.code, selectedDocumentType?.type]);
+
+  const targetBarcodeTypes = useMemo<any[]>(() => {
+    const docType = selectedDocumentType?.type;
+    if (docType === 'health_insurance_card') return ['code-128', 'code-39', 'pdf-417'];
+    return ['pdf-417'];
+  }, [selectedDocumentType]);
+
   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
+      });
+    }
+
     setTimeout(() => {
       setCameraKey(prev => prev + 1);
       setIsRebootingCamera(false);
@@ -91,9 +177,15 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
         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 || '',
+            ...prev,
+            path: currentImageData.dir,
+            success: true,
+            isAnalyzing: false,
+            mrz: currentImageData.mrz || '',
+            templatePath: currentImageData.templatePath || '',
           }));
         }
       }
@@ -101,7 +193,14 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   }, [value, currentSide]);
 
   const cameraConfig = useMemo(() => {
-    const instructions = selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions as Record<string, LocalizedText>);
+    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;
 
@@ -109,39 +208,74 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       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: '#2DBD60', borderWidth: Platform.OS === 'web' ? 2 : 3, cornerRadius: 8 };
+
+    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]);
+  }, [selectedDocumentType, locale, component.instructions, cameraType, screenWidth, screenHeight, scanPhase]);
 
   const retakePicture = (sideToRetake: 'front' | 'back') => {
     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); }
+    setCapturedImages((prev) => {
+      const newState = { ...prev };
+      delete newState[sideToRetake];
+      return newState;
+    });
+
+    if (value) {
+      const newValue = { ...value };
+      delete newValue[sideToRetake];
+      onValueChange(newValue);
+    }
   };
 
   const getCurrentSideVerification = (currentSide: string, countryKey: string) => {
     const rawDocType = countrySelectionData?.documentType;
-    if (!rawDocType || !countryKey) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; }
-    
+    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 searchDocType = jsonDocMap[rawDocType] || rawDocType;
     const rawCountryName = ISO_TO_COUNTRY_NAME[countryData?.code || ''] || countryData?.code || countryKey;
     const baseMapping = (REGION_MAPPING as any).regionMapping || REGION_MAPPING;
     
@@ -150,25 +284,24 @@ 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) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; }
-    
-    const regionMapping = countryMapping[rawDocType];
-    if (!regionMapping) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; }
     
+    if (!countryMapping || !countryMapping[searchDocType]) return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' };
+
     const authMethod: string[] = [];
     const mrzTypes: string[] = [];
-    const key = countrySelectionData.region?.trim()?.length > 0 ? countrySelectionData.region.trim() : 'root';
-    
+    const rawRegionKey = countrySelectionData.region?.trim()?.length > 0 ? countrySelectionData.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?.mrz_type) mrzTypes.push(item?.mrz_type);
-        }
+        if (item[currentSide]) authMethod.push(item[currentSide]);
+        if (item?.mrz_type) mrzTypes.push(item?.mrz_type);
       });
     }
+
     return { authMethod: removeDuplicates(authMethod), mrzTypes: removeDuplicates(mrzTypes), regionMapping, key };
-  };
+  }
 
   const getCorrespondingMrzType = (templatePath: string, mapping: any, regionKey: string = "root") => {
     if (!mapping || !mapping[regionKey]) return null;
@@ -192,33 +325,38 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     if (isProcessingCapture) return;
     setIsProcessingCapture(true);
     setProcessingImagePath(capturePath);
+
     try {
       let imagePathForUpload = capturePath;
       const overlayBbox = cameraConfig.overlay.bbox;
       const uiCropBbox = {
-        minX: overlayBbox.xMin / 100,
-        minY: overlayBbox.yMin / 100,
+        minX: overlayBbox.xMin / 100, minY: overlayBbox.yMin / 100,
         width: (overlayBbox.xMax - overlayBbox.xMin) / 100,
         height: (overlayBbox.yMax - overlayBbox.yMin) / 100,
       };
+
       try {
         imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, uiCropBbox, 0.06);
       } catch (e) {
         console.warn("Crop failed, falling back to original image", e);
-        imagePathForUpload = capturePath;
+        imagePathForUpload = capturePath; 
       }
+
       const base64 = await pathToBase64(imagePathForUpload);
       const newImages = {
         ...capturedImages,
         [currentSide]: { dir: imagePathForUpload, file: base64, mrz: verified.mrz || "", templatePath: verified.templatePath },
       };
+
       setCapturedImages(newImages);
 
       if (verified.country && verified.documentType) {
+        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: GovernmentDocumentTypeBackend[verified.documentType as keyof typeof GovernmentDocumentTypeBackend] || '',
+          documentType: resolvedDocumentType,
           ...(verified.region ? { region: verified.region } : {})
         });
       }
@@ -229,6 +367,8 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
         setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
         setIsProcessingCapture(false);
         setProcessingImagePath(null);
+        setScanPhase('image');
+        setPendingCAImage(null);
       }, 600);
     } catch (e: any) {
       console.error("Backend Error:", e);
@@ -240,11 +380,100 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     }
   };
 
-  const handleSilentCapture = async (result: { success: boolean; path?: string; error?: string }) => {
-    if (silentCaptureResult.isAnalyzing || isProcessingCapture) return;
+  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 searchDocType = jsonDocMap[rawDocType] || rawDocType;
+    const rawCountryName = ISO_TO_COUNTRY_NAME[countryData.code] || countryData.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());
+      if (foundKey) countryMapping = baseMapping[foundKey];
+    }
+    
+    if (!countryMapping || !countryMapping[searchDocType]) return false;
+
+    const rawRegionKey = countryData.region?.trim()?.length > 0 ? countryData.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) => {
+      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...');
+    
+    setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: true, error: '' }));
+    
+    try {
+      const isHIC = selectedDocumentType!.type === 'health_insurance_card';
+      let parsedDictionary;
+      
+      if (isHIC && barcodeString.length < 50) {
+        parsedDictionary = { data: { card_number: barcodeString, barcode_type: "1D" } };
+      } else {
+        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,
+      };
+
+      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;
+      setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: 'Failed to process barcode. Please retake the photo.' }));
+    }
+  };
+
+  const handleSilentCapture = async (result: { success: boolean; path?: string; error?: string; barcode?: unknown }) => {
+    if (isProcessingCapture) return;
+    if (scanPhase === 'barcode') return;
+    if (silentCaptureResult.isAnalyzing) return;
+  
     if (result.success && result.path) {
       setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
+      
       let templatePath = capturedImages[currentSide]?.templatePath || '';
       let templateBbox: IBbox | undefined;
       let templateResponse: any;
@@ -253,19 +482,20 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
         setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Document type not selected' }));
         return;
       }
-
+      
       const issuingSubdivision = selectedDocumentType.region !== 'root' ? selectedDocumentType.region : undefined;
-
+  
       try {
+        // 1. Check & Crop the Template visually first
         if (!templatePath) {
-          const templateType = await checkTemplateType({ 
-            path: result.path || '', 
-            docType: selectedDocumentType?.type as GovernmentDocumentType, 
-            docRegion: countryData?.code || "", 
+          const templateType = await checkTemplateType({
+            path: result.path || '',
+            docType: selectedDocumentType?.type as GovernmentDocumentType,
+            docRegion: countryData?.code || "",
             postfix: currentSide,
-            issuingSubdivision: issuingSubdivision 
+            issuingSubdivision: issuingSubdivision
           }, env);
-
+          
           templateResponse = templateType;
           if (templateType.template_path) templatePath = templateType.template_path;
           
@@ -278,73 +508,95 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
             try {
               const crop = await cropByObb(result.path, (templateType as any).card_obb);
               templateBbox = crop.bbox;
-            } catch { }
+            } catch {}
           }
         }
-
+  
         const extractedCountryKey = templatePath ? templatePath.split('/')[0] : (ISO_TO_COUNTRY_NAME[countryData?.code || ''] || 'root');
         const regionMappings = getCurrentSideVerification(currentSide, extractedCountryKey);
         let verificationRes: any;
-
+  
         if (currentSide === 'front') {
           const matchedAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'front');
           const mrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || 'TD1';
           
-          verificationRes = await frontVerification({ 
-            path: result.path, 
-            regionMapping: { 
-              authMethod: matchedAuthMethod ? [matchedAuthMethod] : [], 
-              mrzTypes: mrzType ? [mrzType] : [] 
-            }, 
-            selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type as keyof typeof GovernmentDocumentTypeShorted] || '', 
-            code: countryData?.code || '', 
-            currentSide, 
-            templatePath, 
-            mrzType,
-            issuingSubdivision: issuingSubdivision 
+          verificationRes = await frontVerification({
+            path: result.path,
+            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);
         } else {
+          logger.log("Attempting backVerification with:", { path: result.path, 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: result.path, 
-            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 
+          
+          // This validates if the back matches the front template!
+          verificationRes = await backVerification({
+            path: result.path,
+            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 bbox = verificationRes?.bbox || templateBbox;
-        const mrz = verificationRes?.mrz ? JSON.stringify(verificationRes.mrz) : "";
-        
-        const verifiedResult: ISilentCaptureResult & { region?: string } = { 
-          path: result.path, 
-          templatePath, 
-          bbox, 
-          success: true, 
-          mrz, 
-          isAnalyzing: false, 
-          country: countryData?.code, 
-          documentType: selectedDocumentType.type,
-          region: issuingSubdivision 
+        const verifiedMrz = verificationRes?.mrz ? JSON.stringify(verificationRes.mrz) : "";
+  
+        if (isBarcodeRequired()) {
+          const barcodeData = scannedBarcodeRef.current;
+          const docTypeStr = selectedDocumentType!.type;
+          const isHIC = docTypeStr === 'health_insurance_card';
+          const isValidScan = typeof barcodeData === 'string' && ((isHIC && barcodeData.length > 0) || barcodeData.length > 50);
+  
+          // If the barcode was caught extremely fast in the same frame
+          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: result.path, 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,
+            };
+  
+            setSilentCaptureResult(verifiedResult);
+            if (bbox) {
+              const safeBbox = bbox as IBbox;
+              setBboxBySide(prev => ({ ...prev, ['back']: safeBbox }));
+            }
+            await autoCapture(result.path!, verifiedResult);
+            return;
+          }
+  
+          // If validation passed but we still need the barcode, trigger the UI phase!
+          logger.log('[CA Barcode] Image captured & template VERIFIED. Switching to Barcode phase.');
+          setPendingCAImage({ path: result.path!, templateResponse, templatePath, bbox });
+          setScanPhase('barcode');
+          setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
+          return;
+        }
+  
+        // 4. NORMAL COMPLETION (For standard MRZ / Passport / Non-barcode documents)
+        const verifiedResult: ISilentCaptureResult & { region?: string } = {
+          path: result.path, templatePath, bbox, success: true, mrz: verifiedMrz, isAnalyzing: false,
+          country: countryData?.code, documentType: selectedDocumentType.type, region: issuingSubdivision
         };
         
         setSilentCaptureResult(verifiedResult);
         if (bbox) setBboxBySide(prev => ({ ...prev, [currentSide]: bbox }));
-        
         await autoCapture(result.path, verifiedResult);
-
+  
       } catch (error: any) {
         console.log("Backend Verification Error:", error);
         const rawMessage = (error?.message || '').toLowerCase();
@@ -356,15 +608,26 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
           userFriendlyMessage = 'The document does not match your selected country.';
         } else if (rawMessage.includes('card_not_fully_in_frame')) {
           userFriendlyMessage = 'Move closer to the document and ensure all corners are visible.';
-        } else if (rawMessage.includes('ne correspond pas au recto')) { 
+        } else if (rawMessage.includes('ne correspond pas au recto')) {
           userFriendlyMessage = 'The back of the document does not match the front. You must scan the same ID.';
         }
         
+        // The error is thrown here, completely blocking the switch to 'barcode' phase
         setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: userFriendlyMessage }));
       }
     }
   };
 
+  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 }) => {
     showAlert('Erreur', event.message);
     setShowCamera(false);
@@ -375,6 +638,38 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     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]);
+
   if (!countrySelectionData || !selectedDocumentType) {
     return (
       <View style={styles.root}>
@@ -390,6 +685,7 @@ 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' }]}>
@@ -398,6 +694,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
         </View>
       );
     }
+
     return (
       <View style={styles.root}>
         <View style={[styles.cameraWrapper, { flex: 1 }]}>
@@ -411,7 +708,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
               </Text>
             </View>
           </View>
-          
+
           <View style={[styles.cameraFeedContainer, { flex: 1, backgroundColor: '#000' }]}>
             {Platform.OS === 'web' && (
               <View style={styles.webTopControls}>
@@ -420,7 +717,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                 </TouchableOpacity>
               </View>
             )}
-            
+
             <EnhancedCameraView
               key={`${currentSide}-${cameraKey}`}
               showCamera={true}
@@ -430,32 +727,83 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
               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) {
+                    processCanadianBarcode(barcodeString);
+                  } else {
+                    setSilentCaptureResult(prev => ({ ...prev, barcode: barcodeString }));
+                  }
+                }
+              }}
               overlayComponent={
                 <>
                   <IdCardOverlay
-                    xMin={cameraConfig.overlay.bbox.xMin} yMin={cameraConfig.overlay.bbox.yMin} xMax={cameraConfig.overlay.bbox.xMax} yMax={cameraConfig.overlay.bbox.yMax}
+                    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}
+                    isSuccess={silentCaptureResult.success || scanPhase === 'barcode'}
                     language={state.currentLanguage}
                     stepperProps={{
                       back: () => {
                         if (currentSide === 'back') {
-                          setCurrentSide('front'); setShowCamera(false); setIsProcessingCapture(false); setProcessingImagePath(null);
+                          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: '' })); }
-                        } else { actions.previousComponent(); }
+                            setSilentCaptureResult((prev) => ({
+                              ...prev, path: frontImage.dir, success: true, isAnalyzing: false, error: '', mrz: frontImage.mrz || '', templatePath: frontImage.templatePath || '', bbox: bboxBySide['front']
+                            }));
+                          } else {
+                            setSilentCaptureResult((prev) => ({ ...prev, path: '', success: false, isAnalyzing: false, error: '', templatePath: '' }));
+                          }
+                        } else {
+                          actions.previousComponent();
+                        }
                       },
                       selectedDocumentType: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : '',
-                      step: state.currentComponentIndex + 1, totalSteps: state.template.components.length, side: currentSide,
+                      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.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>
+                  </View>
+                </View>
+              </View>
+            )}
+
             {!isBusy && silentCaptureResult.isAnalyzing && (
               <View style={styles.topAnalyzingPillContainer}>
                 <View style={styles.topAnalyzingPill}>
@@ -466,15 +814,11 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                 </View>
               </View>
             )}
-            
+
             {isBusy && (
               <View style={[StyleSheet.absoluteFillObject, { zIndex: 9999 }]}>
                 {processingImagePath && (
-                  <Image
-                    source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }}
-                    style={StyleSheet.absoluteFillObject}
-                    resizeMode="cover"
-                  />
+                  <Image source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }} style={StyleSheet.absoluteFillObject} resizeMode="cover" />
                 )}
                 <View style={styles.processingOverlay}>
                   <ActivityIndicator size="large" color="#2DBD60" />
@@ -484,7 +828,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                 </View>
               </View>
             )}
-            
+
             {!isBusy && Platform.OS === 'web' ? (
               <View style={styles.webBottomControlBar}>
                 {silentCaptureResult.error && (
@@ -506,15 +850,12 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                 <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)}
-                >
+                <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>
@@ -537,6 +878,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
             <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 ? (
@@ -545,31 +887,80 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                   <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
-                    />
+                  
+                  {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>
+                      </View>
+                      
+                      <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 
+                        />
+                      )}
+                    </>
                   )}
+                  
                 </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 (!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);
+                      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 />
                 </>
@@ -578,22 +969,91 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
           </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 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.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={200} // Slightly reduced to accommodate the toggle switch
+                  backgroundColor="#FFFFFF"
+                  color="#0F172A"
+                />
+              </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>
+              )}
+
+              <View style={styles.listeningContainer}>
+                <ActivityIndicator size="small" color="#2DBD60" />
+                <Text style={styles.listeningText}>
+                  {state.currentLanguage === 'en' ? "Waiting for you to complete on mobile..." : "En attente de votre complétion sur mobile..."}
+                </Text>
+              </View>
+
+              <Button
+                title={state.currentLanguage === 'en' ? "Cancel & Stay on Laptop" : "Annuler et rester sur l'ordinateur"}
+                onPress={() => setShowQRModal(false)}
+                variant="outline"
+                fullWidth
+              />
             </View>
-            <Button title={state.currentLanguage === 'en' ? "Close" : "Fermer"} onPress={() => setShowQRModal(false)} variant="outline" fullWidth />
           </View>
-        </View>
-      )}
+)}
     </View>
   );
 };
@@ -634,9 +1094,82 @@ const styles = StyleSheet.create({
   topAnalyzingPillContainer: { position: 'absolute', top: Platform.OS === 'android' ? 60 : 75, left: 0, right: 0, alignItems: 'center', zIndex: 100 },
   topAnalyzingPill: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.7)', paddingVertical: 10, paddingHorizontal: 20, borderRadius: 30, gap: 10, shadowColor: '#000', shadowOffset: {width: 0, height: 4}, shadowOpacity: 0.3, shadowRadius: 8 },
   analyzingPillText: { color: 'white', fontSize: 14, fontWeight: 'bold' },
-  qrModalOverlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center', zIndex: 999999, ...Platform.select({ web: { backdropFilter: 'blur(5px)' } as any }) },
-  qrModalContainer: { backgroundColor: '#FFFFFF', borderRadius: 24, padding: 32, width: '90%', maxWidth: 400, alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.15, shadowRadius: 30, elevation: 24, },
-  qrModalTitle: { fontSize: 22, fontWeight: 'bold', color: '#0F172A', marginBottom: 12, textAlign: 'center' },
-  qrModalText: { fontSize: 15, color: '#64748B', textAlign: 'center', marginBottom: 24, lineHeight: 22, },
-  qrCodeWrapper: { padding: 16, backgroundColor: '#FFFFFF', borderRadius: 16, borderWidth: 1, borderColor: '#E2E8F0', marginBottom: 24, }
+  qrModalOverlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(15, 23, 42, 0.85)', justifyContent: 'center', alignItems: 'center', zIndex: 999999, ...Platform.select({ web: { backdropFilter: 'blur(8px)' } as any }) },
+  qrModalContainer: { backgroundColor: '#FFFFFF', borderRadius: 24, padding: 32, width: '90%', maxWidth: 420, alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 20 }, shadowOpacity: 0.25, shadowRadius: 40, elevation: 24 },
+  qrModalHeader: { alignItems: 'center', marginBottom: 24 },
+  qrModalTitle: { fontSize: 24, fontWeight: '800', color: '#0F172A', marginBottom: 12, textAlign: 'center' },
+  qrModalText: { fontSize: 15, color: '#475569', textAlign: 'center', lineHeight: 22 },
+  qrCodeWrapper: { padding: 20, backgroundColor: '#FFFFFF', borderRadius: 20, borderWidth: 2, borderColor: '#E2E8F0', marginBottom: 16, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.05, shadowRadius: 10 },
+  listeningContainer: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#F0FDF4', paddingVertical: 12, paddingHorizontal: 20, borderRadius: 12, marginBottom: 24, borderWidth: 1, borderColor: '#BBF7D0' },
+  listeningText: { marginLeft: 12, color: '#166534', fontSize: 14, fontWeight: '600' },
+  barcodePromptContainer: { position: 'absolute', top: Platform.OS === 'android' ? 60 : 75, left: 0, right: 0, alignItems: 'center', zIndex: 150, paddingHorizontal: 24, },
+  barcodePromptContent: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(15, 23, 42, 0.85)', paddingVertical: 14, paddingHorizontal: 20, borderRadius: 16, borderWidth: 1, borderColor: 'rgba(255, 255, 255, 0.15)', shadowColor: '#000', shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.3, shadowRadius: 12, elevation: 10, maxWidth: 400, ...Platform.select({ web: { backdropFilter: 'blur(8px)' } as any, ios: { backdropFilter: 'blur(8px)' } as any, }), },
+  barcodeIconContainer: { width: 36, height: 36, borderRadius: 18, backgroundColor: 'rgba(45, 189, 96, 0.2)', justifyContent: 'center', alignItems: 'center', marginRight: 14, borderWidth: 1, borderColor: 'rgba(45, 189, 96, 0.5)', },
+  barcodeIcon: { fontSize: 16, color: '#2DBD60', fontWeight: 'bold', },
+  barcodeTextContainer: { flex: 1, },
+  barcodePromptTitle: { color: '#2DBD60', fontSize: 16, fontWeight: '700', marginBottom: 4, },
+  barcodePromptDesc: { color: '#F8FAFC', fontSize: 14, fontWeight: '500', lineHeight: 20, },
+  storeLinksContainer: { width: '100%', alignItems: 'center', marginBottom: 24, paddingTop: 16, borderTopWidth: 1, borderTopColor: '#E2E8F0' },
+  storeLinksTitle: { fontSize: 14, color: '#64748B', fontWeight: '600', marginBottom: 12 },
+  storeButtonsRow: { flexDirection: 'row', gap: 12, width: '100%', justifyContent: 'center' },
+  storeButton: { flex: 1, backgroundColor: '#0F172A', paddingVertical: 12, borderRadius: 10, alignItems: 'center' },
+  storeButtonText: { color: '#FFFFFF', fontWeight: 'bold', fontSize: 14 },
+  restrictionWarningBanner: {
+    backgroundColor: '#FFFBEB', // Light amber background
+    borderWidth: 1,
+    borderColor: '#F59E0B', // Amber border
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 4,
+    width: '100%',
+    shadowColor: '#F59E0B',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+  },
+  restrictionWarningTitle: {
+    color: '#B45309', // Dark amber text
+    fontSize: 15,
+    fontWeight: '800',
+    marginBottom: 6,
+    textAlign: 'center'
+  },
+  restrictionWarningText: {
+    color: '#D97706',
+    fontSize: 13,
+    fontWeight: '500',
+    textAlign: 'center',
+    lineHeight: 18
+  },
+  qrToggleContainer: {
+    flexDirection: 'row',
+    backgroundColor: '#F1F5F9', // Light gray background
+    borderRadius: 12,
+    padding: 4,
+    marginBottom: 20,
+    width: '100%',
+  },
+  qrToggleButton: {
+    flex: 1,
+    paddingVertical: 10,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  qrToggleButtonActive: {
+    backgroundColor: '#FFFFFF',
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  qrToggleText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#64748B', // Inactive text color
+  },
+  qrToggleTextActive: {
+    color: '#0F172A', // Active text color
+  },
 });