@sanctum-key/react-native-sdk 1.0.6 → 1.0.7

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { View, Text, StyleSheet, Image, ScrollView, Platform, Modal, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { GovernmentDocumentTypeShorted, GovernmentDocumentTypeBackend } from '../../types/KYC.types';
@@ -11,140 +11,71 @@ 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 kycService, { truncateFields } from '../../modules/api/KYCService';
-import { cropByObb, cropImageWithBBox, cropImageWithBBoxWithTolerance, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from '../../utils/cropByObb';
-import { isMobileWeb } from '../../utils/deviceDetection';
-import { logger } from '../../utils/logger';
-export const IDCardCapture = ({ component, value = {}, onValueChange, error, language = 'en', }) => {
+import { cropByObb, cropImageWithBBoxWithTolerance, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from '../../utils/cropByObb';
+export const IDCardCapture = ({ component, value = {}, onValueChange, error, language = 'en' }) => {
     const { t, locale } = useI18n();
     const [showCamera, setShowCamera] = useState(false);
     const [capturedImages, setCapturedImages] = useState(value || {});
-    // const [cropImageUri, setCropImageUri] = useState<string>('');
     const [currentSide, setCurrentSide] = useState('front');
     const [bboxBySide, setBboxBySide] = useState({});
     const [silentCaptureResult, setSilentCaptureResult] = useState({ success: false, isAnalyzing: false });
-    const [showQRModal, setShowQRModal] = useState(false);
-    // Mapping des types de documents backend vers SDK
+    const [isProcessingCapture, setIsProcessingCapture] = useState(false);
+    const [processingImagePath, setProcessingImagePath] = useState(null);
     const documentTypeMapping = {
-        'nationalId': 'national_id',
-        'passport': 'passport',
-        'driversLicense': 'drivers_licence',
-        'residencePermit': 'permanent_residence',
-        'healthInsuranceCard': 'health_insurance_card',
+        'nationalId': 'national_id', 'passport': 'passport', 'driversLicense': 'drivers_licence',
+        'residencePermit': 'permanent_residence', 'healthInsuranceCard': 'health_insurance_card',
     };
-    // const [imageNaturalSize, setImageNaturalSize] = useState<{ width: number; height: number } | null>(null);
     const { actions, state, env } = useTemplateKYCFlowContext();
     const getLocalizedText = (text) => {
-        // console.log("text", text, JSON.stringify(component, null, 2));
-        if (text && typeof text[currentSide] === 'object' && text[currentSide][locale]) {
+        if (text && typeof text[currentSide] === 'object' && text[currentSide][locale])
             return text[currentSide][locale] || '';
-        }
         return "";
     };
-    // Récupérer les données depuis le composant country_selection
     const countrySelectionData = useMemo(() => {
         const countrySelectionComponent = state.template.components.find(c => c.type === 'country_selection');
-        if (countrySelectionComponent) {
-            return state.componentData[countrySelectionComponent.id];
-        }
-        return null;
+        return countrySelectionComponent ? state.componentData[countrySelectionComponent.id] : null;
     }, [state.template.components, state.componentData]);
-    // Extraire selectedDocumentType depuis countrySelectionData
     const selectedDocumentType = useMemo(() => {
         if (!countrySelectionData?.documentType)
             return null;
         const backendDocType = countrySelectionData.documentType;
         const mappedType = documentTypeMapping[backendDocType] || backendDocType;
-        const region = countrySelectionData.region || 'root';
-        return { type: mappedType, region };
+        return { type: mappedType, region: countrySelectionData.region || 'root' };
     }, [countrySelectionData, documentTypeMapping]);
-    // Récupérer countryData pour compatibilité avec le code existant
-    const countryData = useMemo(() => {
-        return countrySelectionData;
-    }, [countrySelectionData]);
-    // console.log();
-    // Synchroniser capturedImages avec value quand les données sont chargées (ex: reprise de session)
+    const countryData = useMemo(() => countrySelectionData, [countrySelectionData]);
     useEffect(() => {
         if (value && Object.keys(value).length > 0) {
-            // Vérifier si les données ont changé
-            const valueChanged = JSON.stringify(value) !== JSON.stringify(capturedImages);
-            if (valueChanged) {
-                logger.log("Updating capturedImages from value:", Object.keys(value));
-                logger.log("Value data sample:", truncateFields(value));
+            if (JSON.stringify(value) !== JSON.stringify(capturedImages)) {
                 const updatedImages = value;
                 setCapturedImages(updatedImages);
-                // Si on a des images chargées, mettre à jour silentCaptureResult pour l'affichage
                 Object.keys(updatedImages).forEach((side) => {
                     const imageData = updatedImages[side];
                     if (imageData?.dir) {
                         setSilentCaptureResult(prev => ({
-                            ...prev,
-                            path: imageData.dir,
-                            success: true,
-                            isAnalyzing: false,
-                            mrz: imageData.mrz || '',
-                            templatePath: imageData.templatePath || '',
+                            ...prev, path: imageData.dir, success: true, isAnalyzing: false, mrz: imageData.mrz || '', templatePath: imageData.templatePath || '',
                         }));
                     }
                 });
             }
         }
     }, [value]);
-    useEffect(() => {
-        logger.log("cropImageUri", JSON.stringify(truncateFields({ box: silentCaptureResult }), null, 2));
-        if (capturedImages[currentSide]?.dir && silentCaptureResult?.bbox) {
-            cropImageWithBBox(capturedImages[currentSide].dir, silentCaptureResult.bbox)?.then((uri) => {
-                // setCropImageUri(uri);
-            });
-        }
-    }, [capturedImages[currentSide]?.dir, silentCaptureResult?.bbox]);
     const cameraConfig = useMemo(() => {
         const instructions = selectedDocumentType
             ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr)
             : getLocalizedText(component.instructions);
         return {
-            aspectRatio: 4 / 3,
-            quality: 0.7,
-            flashMode: 'auto',
-            cameraType: 'back',
-            autoFocus: 'on',
-            whiteBalance: 'auto',
-            allowRetake: true,
-            maxRetakes: 3,
-            overlay: {
-                showGuide: true,
-                guideText: instructions,
-                bbox: {
-                    xMin: 20,
-                    yMin: 140,
-                    xMax: 370,
-                    yMax: 340,
-                    borderColor: '#2DBD60',
-                    borderWidth: 3,
-                    cornerRadius: 8
-                }
-            }
+            cameraType: 'back', flashMode: 'auto',
+            overlay: { guideText: instructions, bbox: { xMin: 15, yMin: 20, xMax: 85, yMax: 70, borderColor: '#2DBD60', borderWidth: 3, cornerRadius: 8 } }
         };
     }, [selectedDocumentType, locale, component.instructions]);
     const retakePicture = (sideToRetake) => {
-        // 1. Turn the camera back on and hide the stepper
+        // Completely wipe all processing states to prevent leakage
+        setIsProcessingCapture(false);
+        setProcessingImagePath(null);
+        setSilentCaptureResult({ path: '', success: false, isAnalyzing: false, error: '', templatePath: '', mrz: '', bbox: undefined });
         setShowCamera(true);
         actions.showCustomStepper(false);
-        // 2. WIPE LOCAL STATE: Use functional update to prevent stale closures
-        setCapturedImages((prev) => {
-            const newState = { ...prev };
-            delete newState[sideToRetake];
-            return newState;
-        });
-        setSilentCaptureResult({
-            path: '',
-            success: false,
-            isAnalyzing: false,
-            error: '',
-            templatePath: '',
-            mrz: '',
-            bbox: undefined,
-        });
+        setCapturedImages((prev) => { const newState = { ...prev }; delete newState[sideToRetake]; return newState; });
         if (value) {
             const newValue = { ...value };
             delete newValue[sideToRetake];
@@ -152,9 +83,8 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
         }
     };
     const getCurrentSideVerification = (currentSide) => {
-        if (!selectedDocumentType || !countryData?.regionMapping) {
+        if (!selectedDocumentType || !countryData?.regionMapping)
             return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' };
-        }
         const regionMapping = countryData.regionMapping[selectedDocumentType.type];
         const authMethod = [];
         const mrzTypes = [];
@@ -163,25 +93,20 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             regionMapping[key].forEach((item) => {
                 if (item[currentSide]) {
                     authMethod.push(item[currentSide]);
-                    if (item?.mrz_type) {
+                    if (item?.mrz_type)
                         mrzTypes.push(item?.mrz_type);
-                    }
                 }
             });
         }
-        logger.log("regionMapping", JSON.stringify(truncateFields({ regionMapping, selectedDocumentType: selectedDocumentType.region, key }), null, 2));
-        return { authMethod: removeDuplicates(authMethod), mrzTypes: removeDuplicates(mrzTypes), regionMapping: regionMapping, key: key };
+        return { authMethod: removeDuplicates(authMethod), mrzTypes: removeDuplicates(mrzTypes), regionMapping, key };
     };
     const getCorrespondingMrzType = (templatePath, mapping, selectedDocumentType = "root") => {
         if (!mapping || !mapping[selectedDocumentType])
             return null;
-        // Extraire le nom du fichier depuis le template_path
         const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
         if (!fileName)
             return null;
-        // Normaliser en .py
-        const pyName = `${fileName}.py`; // ex: cameroon_id_back_3_1.py
-        // Chercher dans la liste
+        const pyName = `${fileName}.py`;
         const found = mapping[selectedDocumentType].find((item) => item.py_file === pyName);
         return found?.mrz_type || null;
     };
@@ -195,10 +120,52 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
         const found = mapping[selectedDocumentType].find((item) => item.py_file === pyName);
         return found?.[side] || null;
     };
-    const handleSilentCapture = async (result) => {
-        if (silentCaptureResult.isAnalyzing) {
+    const autoCapture = async (capturePath, verified) => {
+        if (isProcessingCapture)
             return;
+        setIsProcessingCapture(true);
+        setProcessingImagePath(capturePath);
+        try {
+            let imagePathForUpload = capturePath;
+            if (verified.bbox) {
+                try {
+                    imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, verified.bbox, 0.15);
+                }
+                catch {
+                    imagePathForUpload = capturePath;
+                }
+            }
+            const base64 = await pathToBase64(imagePathForUpload);
+            const newImages = {
+                ...capturedImages,
+                [currentSide]: { dir: imagePathForUpload, file: base64, mrz: verified.mrz || "", templatePath: verified.templatePath },
+            };
+            setCapturedImages(newImages);
+            if (verified.country && verified.documentType) {
+                onValueChange({
+                    ...newImages,
+                    country: verified.country,
+                    documentType: GovernmentDocumentTypeBackend[verified.documentType] || '',
+                });
+            }
+            setTimeout(() => {
+                setShowCamera(false);
+                actions.showCustomStepper(true);
+                setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
+                setIsProcessingCapture(false);
+                setProcessingImagePath(null);
+            }, 600);
         }
+        catch (e) {
+            showAlert('Error', e?.message || 'Impossible de capturer la photo');
+            setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false }));
+            setIsProcessingCapture(false);
+            setProcessingImagePath(null);
+        }
+    };
+    const handleSilentCapture = async (result) => {
+        if (silentCaptureResult.isAnalyzing || isProcessingCapture)
+            return;
         if (result.success && result.path) {
             setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
             let templatePath = silentCaptureResult.templatePath || '';
@@ -209,336 +176,120 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                 return;
             }
             const regionMappings = getCurrentSideVerification(currentSide);
-            // logger.log("regionMappings", JSON.stringify(truncateFields({regionMappings, templatePath}), null, 2));
-            if (templatePath.length === 0) {
-                try {
-                    logger.log("checkTemplateType - BEFORE call", {
-                        selectedDocumentTypeType: selectedDocumentType?.type,
-                        countrySelectionDataDocumentType: countrySelectionData?.documentType,
-                        docTypeToSend: selectedDocumentType?.type
-                    });
+            try {
+                if (templatePath.length === 0) {
                     const templateType = await checkTemplateType({ path: result.path || '', docType: selectedDocumentType?.type, docRegion: countryData?.code || "", postfix: currentSide }, env);
                     templateResponse = templateType;
-                    if (templateType.template_path) {
+                    if (templateType.template_path)
                         templatePath = templateType.template_path;
-                        logger.log("templatePath", templatePath);
-                        setSilentCaptureResult((prev) => ({ ...prev, templatePath: templatePath }));
-                    }
                     if (templateType.card_obb) {
                         const obbConfidence = getObbConfidence(templateType.card_obb);
                         if (obbConfidence !== null && obbConfidence < OBB_CONFIDENCE_THRESHOLD) {
-                            setSilentCaptureResult((prev) => ({
-                                ...prev,
-                                isAnalyzing: false,
-                                success: false,
-                                error: t('kyc.idCardCapture.cardNotFullyInFrame'),
-                            }));
+                            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: t('kyc.idCardCapture.cardNotFullyInFrame') }));
                             return;
                         }
-                        let bbox;
                         try {
-                            const crop = await cropByObb(result?.path || '', templateType.card_obb);
-                            bbox = crop.bbox;
-                            templateBbox = bbox;
+                            const crop = await cropByObb(result.path, templateType.card_obb);
+                            templateBbox = crop.bbox;
                         }
                         catch { }
                     }
                 }
-                catch (e) {
-                    logger.log("error checking template type", truncateFields(e));
-                    setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: e?.message || 'Erreur de vérification du template' }));
-                    return; // Return early if checkTemplateType fails
-                }
-            }
-            logger.log("templatePath before verification", templatePath, "currentSide", currentSide);
-            if (currentSide === 'front') {
-                logger.log("frontVerification - BEFORE call", {
-                    selectedDocumentTypeType: selectedDocumentType?.type,
-                    countrySelectionDataDocumentType: countrySelectionData?.documentType,
-                    docTypeToSend: selectedDocumentType?.type
-                });
-                logger.log("Calling frontVerification", { templatePath, selectedDocumentType: selectedDocumentType?.type, regionMappings });
-                console.log("About to call frontVerification", typeof frontVerification);
-                try {
+                let verificationRes;
+                if (currentSide === 'front') {
                     const matchedAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'front');
-                    const resolvedMrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '');
-                    const mrzType = resolvedMrzType || '';
-                    const authMethod = matchedAuthMethod
-                        ? regionMappings.authMethod.filter((method) => method === matchedAuthMethod)
-                        : regionMappings.authMethod.filter((method) => method !== 'MRZ' && method !== '2D_barcode');
-                    console.log("mrzType calculated", mrzType);
-                    const verificationParams = {
-                        path: result.path,
-                        regionMapping: {
-                            authMethod,
-                            mrzTypes: regionMappings.mrzTypes,
-                        },
-                        selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type] || '',
-                        code: countryData?.code || '',
-                        currentSide: currentSide,
-                        templatePath: templatePath,
-                        mrzType: mrzType,
-                    };
-                    console.log("frontVerification params", verificationParams);
-                    console.log("About to call frontVerification function");
-                    const promise = frontVerification(verificationParams, env);
-                    console.log("frontVerification promise created", promise);
-                    promise.then((res) => {
-                        logger.log("front verification result", truncateFields(res));
-                        const bbox = res?.bbox || templateBbox;
-                        setSilentCaptureResult((prev) => ({
-                            ...prev,
-                            path: result.path,
-                            templatePath: templatePath,
-                            bbox: bbox,
-                            success: true,
-                            mrz: res?.mrz ? JSON.stringify(res.mrz) : "",
-                            isAnalyzing: false,
-                            country: countryData?.code,
-                            documentType: selectedDocumentType.type,
-                        }));
-                        // Stocker le bbox pour ce côté
-                        if (bbox && typeof bbox === 'object') {
-                            setBboxBySide((prev) => ({ ...prev, [currentSide]: bbox }));
-                        }
-                    }).catch((e) => {
-                    }).catch((e) => {
-                        console.log("error front verification", e);
-                        logger.log("error front verification", truncateFields(e));
-                        const isCardNotFullyInFrame = e?.message === 'CARD_NOT_FULLY_IN_FRAME' ||
-                            e?.message?.includes('entirement') ||
-                            e?.message?.includes('fully in frame');
-                        const errorMessage = isCardNotFullyInFrame
-                            ? t('kyc.idCardCapture.cardNotFullyInFrame')
-                            : (e?.message || 'Erreur de détection du MRZ');
-                        setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: errorMessage }));
-                    });
-                }
-                catch (error) {
-                    console.log("Error setting up frontVerification call", error);
-                    setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: error?.message || 'Erreur lors de la configuration de la vérification' }));
-                }
-            }
-            else {
-                const backRegionMappings = getCurrentSideVerification(currentSide);
-                logger.log("Calling backVerification", { templatePath, selectedDocumentType: selectedDocumentType.type, backRegionMappings });
-                const matchedBackAuthMethod = getCorrespondingAuthMethod(templatePath, backRegionMappings.regionMapping, backRegionMappings.key || '', 'back');
-                const backMrzType = getCorrespondingMrzType(templatePath, backRegionMappings.regionMapping, backRegionMappings.key || '') || '';
-                backVerification({
-                    path: result.path,
-                    regionMapping: {
-                        authMethod: matchedBackAuthMethod
-                            ? backRegionMappings.authMethod.filter((method) => method === matchedBackAuthMethod)
-                            : backRegionMappings.authMethod.filter((method) => method !== 'MRZ' && method !== '2D_barcode'),
-                        mrzTypes: backRegionMappings.mrzTypes,
-                    },
-                    selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type] || '',
-                    code: countryData?.code || '',
-                    currentSide: currentSide,
-                    templatePath: templatePath,
-                    mrzType: backMrzType,
-                    templateResponse,
-                }, env).then((res) => {
-                    logger.log("back verification result", truncateFields(res));
-                    const bbox = res?.bbox || templateBbox;
-                    setSilentCaptureResult((prev) => ({
-                        ...prev,
-                        path: result.path,
-                        bbox: bbox,
-                        success: true,
-                        mrz: res?.mrz ? JSON.stringify(res.mrz) : "",
-                        isAnalyzing: false,
-                        country: countryData?.code,
-                        documentType: selectedDocumentType.type,
-                    }));
-                    // Stocker le bbox pour ce côté
-                    if (bbox && typeof bbox === 'object') {
-                        setBboxBySide((prev) => ({ ...prev, [currentSide]: bbox }));
-                    }
-                }).catch((e) => {
-                    logger.log("error back verification", truncateFields(e));
-                    const isCardNotFullyInFrame = e?.message === 'CARD_NOT_FULLY_IN_FRAME' ||
-                        e?.message?.includes('entirement') ||
-                        e?.message?.includes('fully in frame');
-                    const errorMessage = isCardNotFullyInFrame
-                        ? t('kyc.idCardCapture.cardNotFullyInFrame')
-                        : (e?.message || 'Erreur de détection du MRZ');
-                    setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: errorMessage }));
-                });
-            }
-        }
-    };
-    const handleCapture = async (result) => {
-        if (silentCaptureResult.path) {
-            let imagePathForUpload = silentCaptureResult.path;
-            if (silentCaptureResult.bbox) {
-                try {
-                    imagePathForUpload = await cropImageWithBBoxWithTolerance(silentCaptureResult.path, silentCaptureResult.bbox, 0.05);
+                    const mrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '';
+                    verificationRes = await frontVerification({ path: result.path, regionMapping: { authMethod: matchedAuthMethod ? [matchedAuthMethod] : regionMappings.authMethod, mrzTypes: regionMappings.mrzTypes }, selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type] || '', code: countryData?.code || '', currentSide, templatePath, mrzType }, env);
                 }
-                catch (error) {
-                    imagePathForUpload = silentCaptureResult.path;
+                else {
+                    const matchedBackAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'back');
+                    const backMrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '';
+                    verificationRes = await backVerification({ path: result.path, regionMapping: { authMethod: matchedBackAuthMethod ? [matchedBackAuthMethod] : regionMappings.authMethod, mrzTypes: regionMappings.mrzTypes }, selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type] || '', code: countryData?.code || '', currentSide, templatePath, mrzType: backMrzType, templateResponse }, env);
                 }
+                const bbox = verificationRes?.bbox || templateBbox;
+                const mrz = verificationRes?.mrz ? JSON.stringify(verificationRes.mrz) : "";
+                const verifiedResult = { path: result.path, templatePath, bbox, success: true, mrz, isAnalyzing: false, country: countryData?.code, documentType: selectedDocumentType.type };
+                setSilentCaptureResult(verifiedResult);
+                if (bbox)
+                    setBboxBySide(prev => ({ ...prev, [currentSide]: bbox }));
+                await autoCapture(result.path, verifiedResult);
             }
-            const base64 = await pathToBase64(imagePathForUpload);
-            // ✅ FIX: Use 'imagePathForUpload' (the cropped image) for the local display directory!
-            const newImages = {
-                ...capturedImages,
-                [currentSide]: {
-                    dir: imagePathForUpload, // <--- CHANGED THIS LINE
-                    file: base64,
-                    mrz: silentCaptureResult.mrz || "",
-                    templatePath: silentCaptureResult.templatePath
-                }
-            };
-            setCapturedImages(newImages);
-            if (silentCaptureResult.country && silentCaptureResult.documentType) {
-                onValueChange({
-                    ...newImages,
-                    country: silentCaptureResult.country,
-                    documentType: GovernmentDocumentTypeBackend[silentCaptureResult.documentType] || '',
-                });
+            catch (error) {
+                const isCardNotFullyInFrame = error?.message === 'CARD_NOT_FULLY_IN_FRAME' || error?.message?.includes('entirement');
+                const errorMessage = isCardNotFullyInFrame ? t('kyc.idCardCapture.cardNotFullyInFrame') : (error?.message || 'Erreur de détection');
+                setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: errorMessage }));
             }
-            setShowCamera(false);
-            actions.showCustomStepper(true);
-        }
-        else {
-            showAlert('Erreur', result.error || 'Impossible de prendre la photo');
         }
     };
     const handleError = (event) => {
         showAlert('Erreur', event.message);
         setShowCamera(false);
+        setIsProcessingCapture(false);
     };
-    useEffect(() => {
-        actions.showCustomStepper(!showCamera);
-    }, [showCamera]);
-    // Cross-device polling logic
-    useEffect(() => {
-        if (!showQRModal || !state.session.session_id)
-            return;
-        const pollInterval = setInterval(async () => {
-            try {
-                const result = await kycService.getVerificationResult(state.session.session_id);
-                const sessionData = result[state.session.session_id]?.data;
-                if (sessionData) {
-                    // Check if verification is completed or if we have ID card data
-                    // Since the requirement is "verification restarts", we might look for overall completion
-                    // or we could check if user_data is populated.
-                    // For now, let's assume if status is not PENDING/INITIALIZED it might be done.
-                    // Or simplier: if the mobile flow completes, the session status updates.
-                    logger.log('Polling result:', truncateFields(sessionData));
-                    if (sessionData.verification_status === 'completed' || sessionData.verification_status === 'approved' || sessionData.verification_status === 'review') {
-                        clearInterval(pollInterval);
-                        setShowQRModal(false);
-                        actions.submitVerification(); // Or handleComplete
-                    }
-                }
-            }
-            catch (error) {
-                console.error('Polling error:', error);
-            }
-        }, 5000);
-        return () => clearInterval(pollInterval);
-    }, [showQRModal, state.session.session_id, actions]);
-    const getQrCodeUrl = () => {
-        // Only available on web platform
-        if (Platform.OS !== 'web')
-            return '';
-        if (typeof window === 'undefined' || !window.location || !window.location.href)
-            return '';
-        try {
-            const currentUrl = new URL(window.location.href);
-            if (!currentUrl.searchParams.has('kyc_id') && state.session.session_id) {
-                currentUrl.searchParams.set('kyc_id', state.session.session_id);
-            }
-            currentUrl.searchParams.set('component_index', String(state.currentComponentIndex));
-            if (countrySelectionData?.code) {
-                currentUrl.searchParams.set('country', countrySelectionData.code);
-                if (countrySelectionData.documentType)
-                    currentUrl.searchParams.set('document_type', countrySelectionData.documentType);
-                if (countrySelectionData.region)
-                    currentUrl.searchParams.set('region', countrySelectionData.region);
-            }
-            return `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${encodeURIComponent(currentUrl.toString())}`;
-        }
-        catch (error) {
-            console.warn('Error generating QR code URL:', error);
-            return '';
-        }
-    };
-    // En reprise sur un autre appareil: afficher un chargement tant que les données de session ne sont pas restaurées
-    const isResumingSession = Boolean(state.session.session_id && state.currentComponentIndex > 0);
-    const sessionDataRestored = state.session.sessionDataRestored !== false;
-    if (isResumingSession && !sessionDataRestored && (!countrySelectionData || !selectedDocumentType)) {
-        return (<View style={styles.root}>
-        <View style={[styles.container, { justifyContent: 'center', alignItems: 'center' }]}>
-          <ActivityIndicator size="large" color="#2DBD60"/>
-          <Text style={[styles.description, { marginTop: 16 }]}>
-            {state.currentLanguage === 'en' ? 'Loading your session...' : 'Chargement de votre session...'}
-          </Text>
-        </View>
-      </View>);
-    }
-    // Vérifier si les données sont disponibles, sinon afficher un message d'erreur
+    useEffect(() => { actions.showCustomStepper(!showCamera); }, [showCamera]);
     if (!countrySelectionData || !selectedDocumentType) {
         return (<View style={styles.root}>
         <View style={styles.container}>
           <Text style={styles.title}>{getLocalizedText(component.labels)}</Text>
           <Text style={styles.description}>
-            {state.currentLanguage === "en"
-                ? "Please complete the country and document selection first."
-                : "Veuillez d'abord compléter la sélection du pays et du document."}
+            {state.currentLanguage === "en" ? "Please complete the country and document selection first." : "Veuillez d'abord compléter la sélection du pays et du document."}
           </Text>
-          {error && (<Text style={styles.errorText}>{error}</Text>)}
         </View>
       </View>);
     }
+    // --- CAMERA RENDER ---
     if (showCamera) {
+        const isBusy = isProcessingCapture;
         return (<View style={styles.cameraContainer}>
-        <EnhancedCameraView showCamera={true} cameraType={cameraConfig.cameraType} style={styles.camera} onCapture={handleCapture} onError={handleError} onClose={() => setShowCamera(false)} quality="high" showCaptureButton={true} showSwitchCamera={true} onSilentCapture={handleSilentCapture} silentCaptureResult={silentCaptureResult} captureStabilizationDelayMs={3000} enableFlash={cameraConfig.flashMode === 'auto' || cameraConfig.flashMode === 'on'} 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} // 🚨 BUG FIX: Forces the camera instance to completely reset when switching sides
+         showCamera={true} isProcessing={isBusy} cameraType={cameraConfig.cameraType} style={styles.camera} onError={handleError} onSilentCapture={handleSilentCapture} silentCaptureResult={silentCaptureResult} overlayComponent={<>
+              {!isBusy && silentCaptureResult.isAnalyzing && (<View style={styles.topAnalyzingPillContainer}>
+                    <View style={styles.topAnalyzingPill}>
+                      <ActivityIndicator size="small" color="white"/>
+                      <Text style={styles.analyzingPillText}>
+                         {state.currentLanguage === 'en' ? 'Scanning...' : 'Analyse...'}
+                      </Text>
+                    </View>
+                 </View>)}
+
+              {isBusy && (<View style={StyleSheet.absoluteFillObject}>
+                  {processingImagePath && (<Image source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }} style={StyleSheet.absoluteFillObject} resizeMode="cover"/>)}
+                  <View style={styles.processingOverlay}>
+                    <ActivityIndicator size="large" color="#2DBD60"/>
+                    <Text style={styles.processingText}>
+                      {state.currentLanguage === 'en' ? 'Perfect!\nProcessing Document...' : 'Parfait!\nTraitement du document...'}
+                    </Text>
+                  </View>
+                </View>)}
+
+              <IdCardOverlay xMin={cameraConfig.overlay.bbox.xMin} yMin={cameraConfig.overlay.bbox.yMin} xMax={cameraConfig.overlay.bbox.xMax} yMax={cameraConfig.overlay.bbox.yMax} instructions={cameraConfig.overlay.guideText} cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0} isSuccess={silentCaptureResult.success} language={state.currentLanguage} stepperProps={{
                     back: () => {
                         if (currentSide === 'back') {
                             setCurrentSide('front');
                             setShowCamera(false);
-                            // Si une image front existe, on la restaure pour l'afficher
+                            // 🚨 Clean up any residual state when going backwards
+                            setIsProcessingCapture(false);
+                            setProcessingImagePath(null);
                             if (capturedImages['front']?.dir) {
-                                // Restaurer l'état de capture du front pour afficher l'image
                                 const frontImage = capturedImages['front'];
-                                const frontBbox = bboxBySide['front'];
-                                setSilentCaptureResult((prev) => ({
-                                    path: frontImage.dir,
-                                    success: true,
-                                    isAnalyzing: false,
-                                    error: '',
-                                    mrz: frontImage.mrz || '',
-                                    templatePath: frontImage.templatePath || '',
-                                    country: silentCaptureResult.country,
-                                    documentType: silentCaptureResult.documentType,
-                                    bbox: frontBbox // Restaurer le bbox pour recalculer le cropImageUri
-                                }));
+                                setSilentCaptureResult((prev) => ({ ...prev, path: frontImage.dir, success: true, isAnalyzing: false, error: '', mrz: frontImage.mrz || '', templatePath: frontImage.templatePath || '', bbox: bboxBySide['front'] }));
                             }
                             else {
-                                // Pas d'image front, on réinitialise
-                                setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', templatePath: '' }));
+                                setSilentCaptureResult((prev) => ({ ...prev, path: '', success: false, isAnalyzing: false, error: '', templatePath: '' }));
                             }
                         }
                         else {
-                            // Retour au composant précédent (country_selection)
                             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,
+                }}/>
+            </>}/>
         
-        {silentCaptureResult.error ? (<View style={styles.floatingErrorBanner}>
-            <Text style={styles.floatingErrorText}>
-              {silentCaptureResult.error}
-            </Text>
+        {silentCaptureResult.error && !isBusy ? (<View style={styles.floatingErrorBanner}>
+            <Text style={styles.floatingErrorText}>{silentCaptureResult.error}</Text>
           </View>) : null}
-
       </View>);
     }
     return (<View style={styles.root}>
@@ -551,349 +302,70 @@ 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 }}>
-              {silentCaptureResult?.error === 'TOO_FAR_AWAY' && (<View style={{
-                backgroundColor: '#FF9500',
-                padding: 12,
-                borderRadius: 8,
-                width: '100%',
-                shadowColor: '#000',
-                shadowOffset: { width: 0, height: 2 },
-                shadowOpacity: 0.2,
-                shadowRadius: 4,
-                elevation: 4
-            }}>
-                <Text style={{ color: 'white', fontWeight: 'bold', textAlign: 'center', fontSize: 16 }}>
-                  {state.currentLanguage === "en"
-                ? "Move the document closer to the camera."
-                : "Veuillez rapprocher le document de la caméra."}
-                </Text>
-              </View>)}
+              
+              {silentCaptureResult?.error === 'TOO_FAR_AWAY' && (<View style={styles.warningBanner}>
+                  <Text style={styles.warningText}>
+                    {state.currentLanguage === "en" ? "Move the document closer to the camera and place it on a flat surface." : "Veuillez rapprocher le document de la caméra et le poser à plat."}
+                  </Text>
+                </View>)}
 
-            <View style={{
-            width: '100%',
-            height: 200,
-            borderRadius: 12,
-            padding: 1,
-            overflow: 'hidden',
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: 0.18,
-            shadowRadius: 8,
-            elevation: 8,
-            backgroundColor: '#000',
-        }}>
-                {capturedImages[currentSide]?.dir ? (<Image source={{ uri: capturedImages[currentSide].dir }} style={{
-                width: '100%',
-                height: '100%',
-                borderRadius: 12,
-                resizeMode: 'contain',
-            }}/>) : silentCaptureResult.path ? (<Image source={{ uri: silentCaptureResult.path }} style={{
-                width: '100%',
-                height: '100%',
-                borderRadius: 12,
-                resizeMode: 'contain',
-            }}/>) : null}
+              <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>
-              {/* Capture button si aucune image n'a été capturée */}
-              {!capturedImages[currentSide]?.dir && (<Button title={state.currentLanguage === "en" ? "Take Photo" : "Prendre une photo"} onPress={() => {
-                setShowCamera(true);
-                actions.showCustomStepper(false);
-            }} variant="primary" size="large" fullWidth/>)}
-              {/* retake button si une image a été capturée */}
+
+              {!capturedImages[currentSide]?.dir && (<Button title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"} onPress={() => { setShowCamera(true); actions.showCustomStepper(false); }} variant="primary" size="large" fullWidth/>)}
+
               {capturedImages[currentSide]?.dir && (<>
-                  <Button title={t('kyc.idCardCapture.retakeButton')} onPress={() => {
-                retakePicture(currentSide);
-            }} variant="outline" size="medium" fullWidth/>
+                  <Button title={t('kyc.idCardCapture.retakeButton')} onPress={() => retakePicture(currentSide)} variant="outline" size="medium" fullWidth/>
                   <Button title={t('common.next')} onPress={() => {
                 if (!selectedDocumentType) {
                     showAlert('Error', 'Document type not selected');
                     return;
                 }
+                // 🚨 BUG FIX: Clear all state before moving forward
                 if (currentSide === 'back' || selectedDocumentType.type === 'passport') {
                     actions.nextComponent();
-                    return;
                 }
                 else {
                     setShowCamera(true);
                     setCurrentSide('back');
-                    setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', mrz: '', templatePath: '' }));
-                    // setCropImageUri('');
+                    setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '' });
+                    setIsProcessingCapture(false);
+                    setProcessingImagePath(null);
                 }
             }} variant="primary" size="large" fullWidth/>
                 </>)}
             </View>
           </View>
         </ScrollView>
-
-
-
-        {error && (<Text style={styles.errorText}>{error}</Text>)}
-
-        {/* Cross-Device / Continue on Phone Button (Web Only) */}
-        {Platform.OS === 'web' && !isMobileWeb() && !capturedImages[currentSide]?.dir && (<Button title={t('kyc.idCardCapture.continueOnPhone')} onPress={() => { setShowQRModal(true); }}/>)}
-
-        {/* QR Code Modal - Web Only */}
-        {Platform.OS === 'web' && (<Modal visible={showQRModal} transparent={true} animationType="fade" onRequestClose={() => setShowQRModal(false)}>
-            <View style={styles.modalOverlay}>
-              <View style={styles.modalContent}>
-                <Text style={styles.modalTitle}>
-                  {t('kyc.idCardCapture.continueOnMobile')}
-                </Text>
-                <Text style={styles.modalDescription}>
-                  {t('kyc.idCardCapture.scanQrCode')}
-                </Text>
-
-                {showQRModal && getQrCodeUrl() ? (<Image source={{ uri: getQrCodeUrl() }} style={styles.qrCodeImage}/>) : null}
-
-                <TouchableOpacity style={styles.closeButton} onPress={() => setShowQRModal(false)}>
-                  <Text style={styles.closeButtonText}>
-                    {t('common.close')}
-                  </Text>
-                </TouchableOpacity>
-              </View>
-            </View>
-          </Modal>)}
-
       </View>
     </View>);
 };
 const styles = StyleSheet.create({
-    root: {
-        flex: 1,
-        maxWidth: 760,
-        width: '100%',
-    },
-    container: {
-        backgroundColor: 'white',
-        margin: 10,
-        borderRadius: 10,
-        paddingVertical: 16,
-        paddingHorizontal: 16,
-        // shadow
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.35,
-        shadowRadius: 4.84,
-        elevation: 10,
-        // padding: 16,
-    },
-    cameraContainer: {
-        flex: 1,
-        width: '100%',
-        height: '100%',
-    },
-    previewContainer: {
-        width: '95%',
-        backgroundColor: 'white',
-        margin: 10,
-        borderRadius: 10,
-        paddingVertical: 16,
-        paddingHorizontal: 16,
-    },
-    previewItemContainer: {
-    // marginBottom: 24,
-    },
-    title: {
-        fontSize: 24,
-        fontWeight: 'bold',
-        color: '#333',
-        marginBottom: 8,
-        textAlign: 'center',
-    },
-    subtitle: {
-        fontSize: 18,
-        color: '#666',
-        textAlign: 'center',
-        marginBottom: 16,
-    },
-    sideInfo: {
-        fontSize: 14,
-        color: '#888',
-        textAlign: 'center',
-        marginBottom: 16,
-        fontStyle: 'italic',
-    },
-    description: {
-        fontSize: 16,
-        color: '#666',
-        textAlign: 'center',
-        marginBottom: 24,
-        lineHeight: 22,
-    },
-    sidesContainer: {
-        flex: 1,
-    },
-    sideContainer: {
-        marginBottom: 24,
-    },
-    sideTitle: {
-        fontSize: 25,
-        fontWeight: 'bold',
-        color: '#000',
-        marginBottom: 12,
-        textAlign: 'center',
-    },
-    captureButton: {
-        borderWidth: 2,
-        borderColor: '#2DBD60',
-        borderStyle: 'dashed',
-        borderRadius: 12,
-        padding: 32,
-        alignItems: 'center',
-        backgroundColor: '#f0f9f0',
-    },
-    captureIcon: {
-        fontSize: 48,
-        marginBottom: 16,
-    },
-    captureText: {
-        fontSize: 16,
-        color: '#2DBD60',
-        fontWeight: '600',
-    },
-    capturedImageContainer: {
-        position: 'relative',
-    },
-    capturedImage: {
-        width: '100%',
-        height: 200,
-        borderRadius: 12,
-        resizeMode: 'contain',
-        backgroundColor: '#f0f0f0',
-    },
-    retakeButton: {
-        position: 'absolute',
-        top: 8,
-        right: 8,
-        backgroundColor: 'rgba(0, 0, 0, 0.7)',
-        paddingHorizontal: 12,
-        paddingVertical: 6,
-        borderRadius: 6,
-    },
-    retakeButtonText: {
-        color: 'white',
-        fontSize: 12,
-        fontWeight: '600',
-    },
+    root: { flex: 1, maxWidth: 760, width: '100%' },
+    container: { backgroundColor: 'white', margin: 10, borderRadius: 10, paddingVertical: 16, paddingHorizontal: 16, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.35, shadowRadius: 4.84, elevation: 10 },
+    cameraContainer: { flex: 1, width: '100%', height: '100%' },
+    previewContainer: { width: '95%', backgroundColor: 'white', margin: 10, borderRadius: 10, paddingVertical: 16, paddingHorizontal: 16 },
+    previewItemContainer: {},
+    title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, textAlign: 'center' },
+    description: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22 },
+    sideContainer: { marginBottom: 24 },
+    sideTitle: { fontSize: 25, fontWeight: 'bold', color: '#000', marginBottom: 12, textAlign: 'center' },
+    imagePreviewWrapper: { width: '100%', height: 200, borderRadius: 12, padding: 1, overflow: 'hidden', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.18, shadowRadius: 8, elevation: 8, backgroundColor: '#000' },
+    previewImage: { width: '100%', height: '100%', borderRadius: 12, resizeMode: 'contain' },
+    floatingErrorBanner: { position: 'absolute', top: 60, left: '10%', right: '10%', backgroundColor: 'rgba(220, 38, 38, 0.95)', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 8, alignItems: 'center', justifyContent: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 5, elevation: 8, zIndex: 100 },
+    floatingErrorText: { color: 'white', fontSize: 14, fontWeight: '700', textAlign: 'center' },
+    processingOverlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.6)', justifyContent: 'center', alignItems: 'center', zIndex: 9999 },
+    processingText: { color: '#FFF', fontSize: 18, fontWeight: 'bold', marginTop: 16, textAlign: 'center' },
+    warningBanner: { backgroundColor: '#FF9500', padding: 12, borderRadius: 8, width: '100%', shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4, elevation: 4 },
+    warningText: { color: 'white', fontWeight: 'bold', textAlign: 'center', fontSize: 16 },
+    errorText: { color: '#dc2626', fontSize: 14, marginTop: 8, textAlign: 'center' },
+    topAnalyzingPillContainer: { position: 'absolute', top: Platform.OS === 'android' ? 60 : 50, left: 0, right: 0, alignItems: 'center', zIndex: 100 },
+    topAnalyzingPill: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.6)', paddingVertical: 8, paddingHorizontal: 16, borderRadius: 20, gap: 8 },
+    analyzingPillText: { color: 'white', fontSize: 14, fontWeight: 'bold' },
     camera: {
         flex: 1,
     },
-    completionContainer: {
-        marginTop: 24,
-        alignItems: 'center',
-    },
-    completionText: {
-        fontSize: 16,
-        color: '#2DBD60',
-        fontWeight: '600',
-        marginBottom: 16,
-    },
-    primaryButton: {
-        paddingHorizontal: 32,
-        paddingVertical: 16,
-        borderRadius: 8,
-        // minWidth: 120,
-        alignItems: 'center',
-        backgroundColor: '#2DBD60',
-    },
-    primaryButtonText: {
-        color: 'white',
-        fontWeight: '600',
-        fontSize: 16,
-    },
-    errorText: {
-        color: '#dc2626',
-        fontSize: 14,
-        marginTop: 8,
-        textAlign: 'center',
-    },
-    crossDeviceButton: {
-        marginTop: 16,
-        padding: 12,
-        alignItems: 'center',
-        borderWidth: 1,
-        borderColor: '#2DBD60',
-        borderRadius: 8,
-        backgroundColor: '#f0f9f0',
-    },
-    crossDeviceText: {
-        color: '#2DBD60',
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    modalOverlay: {
-        flex: 1,
-        backgroundColor: 'rgba(0,0,0,0.5)',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    modalContent: {
-        backgroundColor: 'white',
-        borderRadius: 16,
-        padding: 24,
-        alignItems: 'center',
-        width: '90%',
-        maxWidth: 340,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.25,
-        shadowRadius: 4,
-        elevation: 5,
-    },
-    modalTitle: {
-        fontSize: 20,
-        fontWeight: 'bold',
-        marginBottom: 12,
-        color: '#333',
-    },
-    modalDescription: {
-        fontSize: 16,
-        color: '#666',
-        textAlign: 'center',
-        marginBottom: 20,
-        lineHeight: 22,
-    },
-    qrCodeImage: {
-        width: 200,
-        height: 200,
-        marginBottom: 20,
-    },
-    closeButton: {
-        paddingVertical: 10,
-        paddingHorizontal: 20,
-        backgroundColor: '#f5f5f5',
-        borderRadius: 8,
-    },
-    closeButtonText: {
-        fontSize: 16,
-        color: '#666',
-        fontWeight: '600',
-    },
-    floatingErrorBanner: {
-        position: 'absolute',
-        top: 60, // Pushes it down slightly from the very top of the screen
-        left: '10%',
-        right: '10%',
-        backgroundColor: 'rgba(220, 38, 38, 0.95)', // Bright red
-        paddingVertical: 12,
-        paddingHorizontal: 16,
-        borderRadius: 8,
-        alignItems: 'center',
-        justifyContent: 'center',
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 5,
-        elevation: 8,
-        zIndex: 100,
-    },
-    floatingErrorText: {
-        color: 'white',
-        fontSize: 14,
-        fontWeight: '700',
-        textAlign: 'center',
-    },
 });
 //# sourceMappingURL=IDCardCapture.js.map