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

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

@@ -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,10 +11,24 @@ 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';
-const ISO_TO_COUNTRY_NAME = { 'KE': 'Kenya', 'CM': 'Cameroon', 'NG': 'Nigeria', 'CA': 'Canada', 'FR': 'France', 'GH': 'Ghana', 'ZA': 'South Africa', 'GB': 'Britain', 'CI': 'Ivory Coast', 'SN': 'Senegal', 'TG': 'Togo', 'ML': 'Mali' };
+import { logger } from '../../utils/logger';
+import { cropImageWithBBoxWithTolerance } from '../../utils/cropByObb';
+import kycService, { authentification } from '../../modules/api/KYCService';
+const ISO_TO_COUNTRY_NAME = {
+    'KE': 'Kenya', 'CM': 'Cameroon', 'NG': 'Nigeria', 'CA': 'Canada',
+    'FR': 'France', 'GH': 'Ghana', 'ZA': 'South Africa', 'GB': 'Britain',
+    'CI': 'Ivory Coast', 'SN': 'Senegal', 'TG': 'Togo', 'ML': 'Mali'
+};
+const SHORT_TO_LONG_REGION = {
+    "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 = ({ component, value = {}, onValueChange, error, language = 'en' }) => {
     const { t, locale } = useI18n();
     const [showCamera, setShowCamera] = useState(false);
@@ -29,12 +43,21 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
     const [cameraType, setCameraType] = useState('back');
     const [showQRModal, setShowQRModal] = useState(false);
     const [currentUrl, setCurrentUrl] = useState('');
+    const [qrPlatform, setQrPlatform] = useState('android');
+    const [scanPhase, setScanPhase] = useState('image');
+    const [pendingCAImage, setPendingCAImage] = useState(null);
+    const scannedBarcodeRef = useRef(null);
     useEffect(() => {
-        if (typeof window !== 'undefined' && window.location) {
+        if (typeof window !== 'undefined' && window.location)
             setCurrentUrl(window.location.href);
-        }
+        console.log(currentUrl);
     }, []);
-    const documentTypeMapping = { 'nationalId': 'national_id', 'passport': 'passport', 'driversLicense': 'drivers_licence', 'residencePermit': 'permanent_residence', 'healthInsuranceCard': 'health_insurance_card', };
+    const documentTypeMapping = {
+        '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) => {
@@ -42,6 +65,13 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             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;
@@ -54,8 +84,49 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
         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';
+    }, [countryData?.code, selectedDocumentType?.type]);
+    const targetBarcodeTypes = useMemo(() => {
+        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);
@@ -73,14 +144,24 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                 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 || '',
                     }));
                 }
             }
         }
     }, [value, currentSide]);
     const cameraConfig = useMemo(() => {
-        const instructions = selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions);
+        let instructions = selectedDocumentType
+            ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr)
+            : getLocalizedText(component.instructions);
+        if (scanPhase === 'barcode') {
+            instructions = '';
+        }
         const isLandscape = screenWidth > screenHeight;
         let xMin, xMax, yMin, yMax;
         if (Platform.OS === 'web') {
@@ -101,21 +182,36 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             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',
             overlay: { guideText: instructions, bbox: platformBbox }
         };
-    }, [selectedDocumentType, locale, component.instructions, cameraType, screenWidth, screenHeight]);
+    }, [selectedDocumentType, locale, component.instructions, cameraType, screenWidth, screenHeight, scanPhase]);
     const retakePicture = (sideToRetake) => {
         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; });
+        setCapturedImages((prev) => {
+            const newState = { ...prev };
+            delete newState[sideToRetake];
+            return newState;
+        });
         if (value) {
             const newValue = { ...value };
             delete newValue[sideToRetake];
@@ -124,9 +220,14 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
     };
     const getCurrentSideVerification = (currentSide, countryKey) => {
         const rawDocType = countrySelectionData?.documentType;
-        if (!rawDocType || !countryKey) {
+        if (!rawDocType || !countryKey)
             return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' };
-        }
+        const jsonDocMap = {
+            '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.regionMapping || REGION_MAPPING;
         let countryMapping = baseMapping[rawCountryName];
@@ -135,23 +236,19 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             if (foundKey)
                 countryMapping = baseMapping[foundKey];
         }
-        if (!countryMapping) {
-            return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' };
-        }
-        const regionMapping = countryMapping[rawDocType];
-        if (!regionMapping) {
+        if (!countryMapping || !countryMapping[searchDocType])
             return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' };
-        }
         const authMethod = [];
         const mrzTypes = [];
-        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) => {
-                if (item[currentSide]) {
+                if (item[currentSide])
                     authMethod.push(item[currentSide]);
-                    if (item?.mrz_type)
-                        mrzTypes.push(item?.mrz_type);
-                }
+                if (item?.mrz_type)
+                    mrzTypes.push(item?.mrz_type);
             });
         }
         return { authMethod: removeDuplicates(authMethod), mrzTypes: removeDuplicates(mrzTypes), regionMapping, key };
@@ -185,8 +282,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             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,
             };
@@ -204,10 +300,12 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             };
             setCapturedImages(newImages);
             if (verified.country && verified.documentType) {
+                const docType = verified.documentType;
+                const resolvedDocumentType = GovernmentDocumentTypeBackend[docType] || (Object.values(GovernmentDocumentTypeBackend).includes(docType) ? docType : null) || Object.entries(GovernmentDocumentTypeBackend).find(([, v]) => v === docType)?.[1] || docType;
                 onValueChange({
                     ...newImages,
                     country: verified.country,
-                    documentType: GovernmentDocumentTypeBackend[verified.documentType] || '',
+                    documentType: resolvedDocumentType,
                     ...(verified.region ? { region: verified.region } : {})
                 });
             }
@@ -217,6 +315,8 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                 setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
                 setIsProcessingCapture(false);
                 setProcessingImagePath(null);
+                setScanPhase('image');
+                setPendingCAImage(null);
             }, 600);
         }
         catch (e) {
@@ -228,8 +328,90 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             setProcessingImagePath(null);
         }
     };
+    const isBarcodeRequired = () => {
+        if (currentSide !== 'back')
+            return false;
+        if (!countryData?.code || !selectedDocumentType?.type)
+            return false;
+        const rawDocType = selectedDocumentType.type;
+        const jsonDocMap = {
+            '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.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) => {
+            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) => {
+        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 = {
+                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;
+                setBboxBySide(prev => ({ ...prev, ['back']: safeBbox }));
+            }
+            await autoCapture(pendingCAImage.path, verifiedResult);
+        }
+        catch (error) {
+            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) => {
-        if (silentCaptureResult.isAnalyzing || isProcessingCapture)
+        if (isProcessingCapture)
+            return;
+        if (scanPhase === 'barcode')
+            return;
+        if (silentCaptureResult.isAnalyzing)
             return;
         if (result.success && result.path) {
             setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
@@ -242,6 +424,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             }
             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 || '',
@@ -274,50 +457,69 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                     const mrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || 'TD1';
                     verificationRes = await frontVerification({
                         path: result.path,
-                        regionMapping: {
-                            authMethod: matchedAuthMethod ? [matchedAuthMethod] : [],
-                            mrzTypes: mrzType ? [mrzType] : []
-                        },
+                        regionMapping: { authMethod: matchedAuthMethod ? [matchedAuthMethod] : [], mrzTypes: mrzType ? [mrzType] : [] },
                         selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type] || '',
-                        code: countryData?.code || '',
-                        currentSide,
-                        templatePath,
-                        mrzType,
-                        issuingSubdivision: issuingSubdivision
+                        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 || '';
+                    // This validates if the back matches the front template!
                     verificationRes = await backVerification({
                         path: result.path,
-                        regionMapping: {
-                            authMethod: matchedBackAuthMethod ? [matchedBackAuthMethod] : [],
-                            mrzTypes: backMrzType ? [backMrzType] : []
-                        },
+                        regionMapping: { authMethod: matchedBackAuthMethod ? [matchedBackAuthMethod] : [], mrzTypes: backMrzType ? [backMrzType] : [] },
                         selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type] || '',
-                        code: countryData?.code || '',
-                        currentSide,
-                        templatePath,
-                        mrzType: backMrzType,
-                        templateResponse,
-                        issuingSubdivision: issuingSubdivision,
-                        frontTemplatePath: frontTemplatePath
+                        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 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 = {
+                            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;
+                            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 = {
-                    path: result.path,
-                    templatePath,
-                    bbox,
-                    success: true,
-                    mrz,
-                    isAnalyzing: false,
-                    country: countryData?.code,
-                    documentType: selectedDocumentType.type,
-                    region: issuingSubdivision
+                    path: result.path, templatePath, bbox, success: true, mrz: verifiedMrz, isAnalyzing: false,
+                    country: countryData?.code, documentType: selectedDocumentType.type, region: issuingSubdivision
                 };
                 setSilentCaptureResult(verifiedResult);
                 if (bbox)
@@ -340,10 +542,20 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                 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) => {
         showAlert('Erreur', event.message);
         setShowCamera(false);
@@ -352,6 +564,36 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
     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]);
     if (!countrySelectionData || !selectedDocumentType) {
         return (<View style={styles.root}>
         <View style={styles.previewContainer}>
@@ -382,25 +624,44 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
               </Text>
             </View>
           </View>
-          
+
           <View style={[styles.cameraFeedContainer, { flex: 1, backgroundColor: '#000' }]}>
             {Platform.OS === 'web' && (<View style={styles.webTopControls}>
                 <TouchableOpacity style={styles.webFlipButton} onPress={toggleCameraLens}>
                   <Text style={styles.webFlipText}>🔄 Flip Lens</Text>
                 </TouchableOpacity>
               </View>)}
-            
-            <EnhancedCameraView key={`${currentSide}-${cameraKey}`} showCamera={true} isProcessing={isBusy} cameraType={cameraConfig.cameraType} style={{ ...StyleSheet.absoluteFillObject, ...(Platform.OS === 'web' ? { width: '100%', height: '100%', left: 0, top: 0 } : {}) }} onError={handleError} onSilentCapture={handleSilentCapture} silentCaptureResult={silentCaptureResult} overlayComponent={<>
-                  <IdCardOverlay xMin={cameraConfig.overlay.bbox.xMin} yMin={cameraConfig.overlay.bbox.yMin} xMax={cameraConfig.overlay.bbox.xMax} yMax={cameraConfig.overlay.bbox.yMax} instructions={cameraConfig.overlay.guideText} cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0} isSuccess={silentCaptureResult.success} language={state.currentLanguage} stepperProps={{
+
+            <EnhancedCameraView key={`${currentSide}-${cameraKey}`} showCamera={true} isProcessing={isBusy} cameraType={cameraConfig.cameraType} style={{ ...StyleSheet.absoluteFillObject, ...(Platform.OS === 'web' ? { width: '100%', height: '100%', left: 0, top: 0 } : {}) }} onError={handleError} onSilentCapture={handleSilentCapture} silentCaptureResult={silentCaptureResult} 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} instructions={cameraConfig.overlay.guideText} cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0} 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'] }));
+                                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: '' }));
@@ -411,10 +672,28 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                         }
                     },
                     selectedDocumentType: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : '',
-                    step: state.currentComponentIndex + 1, totalSteps: state.template.components.length, side: currentSide,
+                    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}>
                   <ActivityIndicator size="small" color="white"/>
@@ -423,7 +702,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                   </Text>
                 </View>
               </View>)}
-            
+
             {isBusy && (<View style={[StyleSheet.absoluteFillObject, { zIndex: 9999 }]}>
                 {processingImagePath && (<Image source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }} style={StyleSheet.absoluteFillObject} resizeMode="cover"/>)}
                 <View style={styles.processingOverlay}>
@@ -433,7 +712,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                   </Text>
                 </View>
               </View>)}
-            
+
             {!isBusy && Platform.OS === 'web' ? (<View style={styles.webBottomControlBar}>
                 {silentCaptureResult.error && (<View style={styles.floatingErrorBanner}>
                     <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
@@ -454,7 +733,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                   <Text style={styles.fallbackRefreshText}>Cancel / Go Back</Text>
                 </TouchableOpacity>
               </View>) : null}
-            
+
             {silentCaptureResult.error && !isBusy && Platform.OS !== 'web' ? (<View style={[styles.floatingErrorBanner, { zIndex: 10000 }]}>
                 <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
               </View>) : null}
@@ -472,14 +751,41 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             <Text style={{ fontSize: 14, color: '#666', textAlign: 'center', marginBottom: 16, lineHeight: 22 }}>
               {getLocalizedText(component.instructions)}
             </Text>
+
             <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "column", gap: 16 }}>
               <View style={styles.imagePreviewWrapper}>
                 {capturedImages[currentSide]?.dir ? (<Image source={{ uri: capturedImages[currentSide].dir }} style={styles.previewImage}/>) : silentCaptureResult.path ? (<Image source={{ uri: silentCaptureResult.path }} style={styles.previewImage}/>) : null}
               </View>
+
               {!capturedImages[currentSide]?.dir && (<View style={{ width: '100%', gap: 12 }}>
-                  <Button title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"} onPress={() => { setShowCamera(true); refreshCamera(); actions.showCustomStepper(false); }} variant="primary" size="large" fullWidth/>
-                  {Platform.OS === 'web' && (<Button title={state.currentLanguage === "en" ? "Continue on Phone" : "Continuer sur le téléphone"} onPress={() => setShowQRModal(true)} variant="outline" size="large" fullWidth/>)}
+                  
+                  {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={() => {
@@ -497,6 +803,8 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                     setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '', templatePath: undefined });
                     setIsProcessingCapture(false);
                     setProcessingImagePath(null);
+                    setScanPhase('image');
+                    setPendingCAImage(null);
                 }
             }} variant="primary" size="large" fullWidth/>
                 </>)}
@@ -504,20 +812,64 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
           </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.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>)}
     </View>);
 };
 const styles = StyleSheet.create({
@@ -556,10 +908,83 @@ 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)' } }) },
-    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)' } }) },
+    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)' }, ios: { backdropFilter: 'blur(8px)' }, }), },
+    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
+    },
 });
 //# sourceMappingURL=IDCardCapture.js.map