@sanctum-key/react-native-sdk 1.0.0

package/build/components/KYCElements/IDCardCapture.js

@@ -0,0 +1,877 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { View, Text, StyleSheet, Image, ScrollView, Platform, Modal, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
+import { EnhancedCameraView } from '../EnhancedCameraView';
+import { GovernmentDocumentTypeShorted, GovernmentDocumentTypeBackend } from '../../types/KYC.types';
+import IdCardOverlay from '../OverLay/IdCard';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { Button } from '../ui/Button';
+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', }) => {
+    const { t, locale } = useI18n();
+    const [showCamera, setShowCamera] = useState(false);
+    const [capturedImages, setCapturedImages] = useState(value || {});
+    const [cropImageUri, setCropImageUri] = useState('');
+    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 documentTypeMapping = {
+        '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]) {
+            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;
+    }, [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 };
+    }, [countrySelectionData, documentTypeMapping]);
+    // Récupérer countryData pour compatibilité avec le code existant
+    const countryData = useMemo(() => {
+        return countrySelectionData;
+    }, [countrySelectionData]);
+    // Synchroniser capturedImages avec value quand les données sont chargées (ex: reprise de session)
+    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));
+                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 || '',
+                        }));
+                    }
+                });
+            }
+        }
+    }, [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);
+                console.log(cropImageUri);
+            });
+        }
+    }, [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
+                }
+            }
+        };
+    }, [selectedDocumentType, locale, component.instructions]);
+    const retakePicture = (sideToRetake) => {
+        // 1. Turn the camera back on and hide the stepper
+        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,
+        });
+        if (value) {
+            const newValue = { ...value };
+            delete newValue[sideToRetake];
+            onValueChange(newValue);
+        }
+    };
+    const getCurrentSideVerification = (currentSide) => {
+        if (!selectedDocumentType || !countryData?.regionMapping) {
+            return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' };
+        }
+        const regionMapping = countryData.regionMapping[selectedDocumentType.type];
+        const authMethod = [];
+        const mrzTypes = [];
+        const key = selectedDocumentType.region?.trim()?.length > 0 ? selectedDocumentType.region.trim() : 'root';
+        if (regionMapping?.[key] && Array.isArray(regionMapping[key])) {
+            regionMapping[key].forEach((item) => {
+                if (item[currentSide]) {
+                    authMethod.push(item[currentSide]);
+                    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 };
+    };
+    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 found = mapping[selectedDocumentType].find((item) => item.py_file === pyName);
+        return found?.mrz_type || null;
+    };
+    const handleSilentCapture = async (result) => {
+        if (silentCaptureResult.isAnalyzing) {
+            return;
+        }
+        if (result.success && result.path) {
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
+            let templatePath = silentCaptureResult.templatePath || '';
+            let templateBbox;
+            if (!selectedDocumentType) {
+                setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Document type not selected' }));
+                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
+                    });
+                    const templateType = await checkTemplateType({ path: result.path || '', docType: selectedDocumentType?.type, docRegion: countryData?.code || "", postfix: currentSide }, env);
+                    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'),
+                            }));
+                            return;
+                        }
+                        let bbox;
+                        try {
+                            const crop = await cropByObb(result?.path || '', templateType.card_obb);
+                            bbox = crop.bbox;
+                            templateBbox = 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 {
+                    const mrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '';
+                    console.log("mrzType calculated", mrzType);
+                    const verificationParams = {
+                        path: result.path,
+                        regionMapping: {
+                            authMethod: regionMappings.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 });
+                backVerification({
+                    path: result.path,
+                    regionMapping: {
+                        authMethod: backRegionMappings.authMethod,
+                        mrzTypes: backRegionMappings.mrzTypes,
+                    },
+                    selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type] || '',
+                    code: countryData?.code || '',
+                    currentSide: currentSide,
+                    templatePath: templatePath,
+                    mrzType: getCorrespondingMrzType(templatePath, backRegionMappings.regionMapping, backRegionMappings.key || '') || '',
+                }, 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);
+                }
+                catch (error) {
+                    imagePathForUpload = silentCaptureResult.path;
+                }
+            }
+            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] || '',
+                });
+            }
+            setShowCamera(false);
+            actions.showCustomStepper(true);
+        }
+        else {
+            showAlert('Erreur', result.error || 'Impossible de prendre la photo');
+        }
+    };
+    const handleError = (event) => {
+        showAlert('Erreur', event.message);
+        setShowCamera(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
+    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."}
+          </Text>
+          {error && (<Text style={styles.errorText}>{error}</Text>)}
+        </View>
+      </View>);
+    }
+    if (showCamera) {
+        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={{
+                    back: () => {
+                        if (currentSide === 'back') {
+                            setCurrentSide('front');
+                            setShowCamera(false);
+                            // Si une image front existe, on la restaure pour l'afficher
+                            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
+                                }));
+                            }
+                            else {
+                                // Pas d'image front, on réinitialise
+                                setSilentCaptureResult((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,
+                }}/>}/>
+        
+        {silentCaptureResult.error ? (<View style={styles.floatingErrorBanner}>
+            <Text style={styles.floatingErrorText}>
+              {silentCaptureResult.error}
+            </Text>
+          </View>) : null}
+
+      </View>);
+    }
+    return (<View style={styles.root}>
+      <View style={styles.previewContainer}>
+        <ScrollView style={styles.previewItemContainer} showsVerticalScrollIndicator={false}>
+          <View key={currentSide} style={styles.sideContainer}>
+            <Text style={styles.sideTitle}>
+              {t('kyc.idCardCapture.captureTitle', { side: currentSide === 'front' ? locale === 'en' ? 'Front' : 'Recto' : locale === 'en' ? 'Back' : 'Verso' })}
+            </Text>
+            <Text style={{ fontSize: 14, color: '#666', textAlign: 'center', marginBottom: 16, lineHeight: 22 }}>
+              {getLocalizedText(component.instructions)}
+            </Text>
+
+            <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "column", gap: 16 }}>
+              {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>)}
+
+            <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>
+              {/* 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={t('kyc.idCardCapture.retakeButton')} onPress={() => {
+                retakePicture(currentSide);
+            }} variant="outline" size="medium" fullWidth/>
+                  <Button title={t('common.next')} onPress={() => {
+                if (!selectedDocumentType) {
+                    showAlert('Error', 'Document type not selected');
+                    return;
+                }
+                if (currentSide === 'back' || selectedDocumentType.type === 'passport') {
+                    actions.nextComponent();
+                    return;
+                }
+                else {
+                    setShowCamera(true);
+                    setCurrentSide('back');
+                    setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', mrz: '', templatePath: '' }));
+                    setCropImageUri('');
+                }
+            }} 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',
+    },
+    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