@transfergratis/react-native-sdk 0.1.23 → 0.1.25

package/build/components/KYCElements/IDCardCapture.js

@@ -1,6 +1,8 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Image, Alert, ScrollView, Dimensions } from 'react-native';
+import React, { useEffect, useMemo, useState } from 'react';
+import { View, Text, StyleSheet, Image, ScrollView, Platform, Modal, TouchableOpacity } 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';
@@ -9,8 +11,9 @@ 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 { truncateFields } from '../../modules/api/KYCService';
-import { cropByObb, cropImageWithBBox } from '../../utils/cropByObb';
+import kycService, { truncateFields } from '../../modules/api/KYCService';
+import { cropByObb, cropImageWithBBox, cropImageWithBBoxWithTolerance } 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();
@@ -20,18 +23,18 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
     const [currentSide, setCurrentSide] = useState('front');
     // Stocker les bbox par côté pour pouvoir restaurer les images croppées
     const [bboxBySide, setBboxBySide] = useState({});
-    const [selectedDocumentType, setSelectedDocumentType] = useState({
-        type: 'identity_card',
-        region: 'root'
-    });
-    const [showDocumentSelection, setShowDocumentSelection] = useState({
-        documentSelection: true,
-        regionSelection: false
-    });
     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, } = useTemplateKYCFlowContext();
-    const config = component.config;
+    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]) {
@@ -39,27 +42,54 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
         }
         return "";
     };
-    const countryData = useMemo(() => {
-        const geCountryID = Object.keys(state.componentData).find((c) => c === "6");
-        if (geCountryID) {
-            const countryMapping = state.componentData[geCountryID];
-            return countryMapping;
+    // 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.componentData]);
-    const availableDocumentTypes = useMemo(() => {
-        const newconfig = [];
-        if (countryData) {
-            const countryMapping = Object.keys(countryData?.regionMapping);
-            if (countryMapping && Array.isArray(countryMapping)) {
-                countryMapping.forEach((c) => {
-                    newconfig.push(c);
+    }, [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 || '',
+                        }));
+                    }
                 });
             }
         }
-        logger.log("newconfig", truncateFields(newconfig));
-        return newconfig;
-    }, []);
+    }, [value]);
     useEffect(() => {
         logger.log("cropImageUri", JSON.stringify(truncateFields({ box: silentCaptureResult }), null, 2));
         if (capturedImages[currentSide]?.dir && silentCaptureResult?.bbox) {
@@ -68,27 +98,32 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             });
         }
     }, [capturedImages[currentSide]?.dir, silentCaptureResult?.bbox]);
-    const cameraConfig = {
-        aspectRatio: 4 / 3,
-        quality: 0.8,
-        flashMode: 'auto',
-        cameraType: 'back',
-        allowRetake: true,
-        maxRetakes: 3,
-        overlay: {
-            showGuide: true,
-            guideText: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions),
-            bbox: selectedDocumentType && config.bbox_configs[selectedDocumentType.type] ? config.bbox_configs[selectedDocumentType.type] : {
-                xMin: 20,
-                yMin: 140,
-                xMax: 370,
-                yMax: 340,
-                borderColor: '#2DBD60',
-                borderWidth: 3,
-                cornerRadius: 8
+    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.8,
+            flashMode: 'auto',
+            cameraType: 'back',
+            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 = (currentSide) => {
         setShowCamera(true);
         actions.showCustomStepper(false);
@@ -97,26 +132,14 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
         setCropImageUri('');
         onValueChange({ ...value, [currentSide]: { dir: '', file: '', mrz: '' } });
     };
-    const hasRegions = useCallback((documentType) => {
-        const regionMapping = countryData?.regionMapping[documentType];
-        if (regionMapping && Object.keys(regionMapping).length > 1) {
-            return {
-                hasRegions: true,
-                regionMapping: Object.keys(regionMapping)
-            };
-        }
-        return {
-            hasRegions: false,
-            regionMapping: []
-        };
-    }, [countryData]);
     const getCurrentSideVerification = (currentSide) => {
-        const regionMapping = countryData?.regionMapping[selectedDocumentType?.type];
+        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';
-        // console.log("regionMapping", JSON.stringify(regionMapping, null, 2), selectedDocumentType?.region);
-        // const key = selectedDocumentType?.region as keyof typeof regionMapping;
+        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]) {
@@ -127,11 +150,11 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                 }
             });
         }
-        logger.log("regionMapping", JSON.stringify(truncateFields({ regionMapping, selectedDocumentType: selectedDocumentType?.region, key }), null, 2));
+        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[selectedDocumentType])
+        if (!mapping || !mapping[selectedDocumentType])
             return null;
         // Extraire le nom du fichier depuis le template_path
         const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
@@ -151,11 +174,20 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             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 {
-                    const templateType = await checkTemplateType({ path: result.path || '', docType: selectedDocumentType?.type, docRegion: countryData?.code || "", postfix: currentSide });
+                    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);
@@ -174,57 +206,87 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                 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 front verification", templatePath);
+            logger.log("templatePath before verification", templatePath, "currentSide", currentSide);
             if (currentSide === 'front') {
-                frontVerification({
-                    path: result.path,
-                    regionMapping: regionMappings,
-                    selectedDocumentType: selectedDocumentType?.type || '',
-                    code: countryData?.code || '',
-                    currentSide: currentSide,
-                    templatePath: templatePath,
-                    mrzType: getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '',
-                }).then((mrz) => {
-                    logger.log("front verification result", truncateFields(mrz));
-                    const bbox = mrz?.bbox || templateBbox;
-                    setSilentCaptureResult((prev) => ({
-                        ...prev,
+                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,
-                        bbox: bbox, success: true,
-                        mrz: JSON.stringify(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 front verification", truncateFields(e));
-                    setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: e?.message || 'Erreur de détection du MRZ' }));
-                    // Alert.alert('Erreur', e?.message || 'Erreur de détection du MRZ');
-                });
+                        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((mrz) => {
+                        logger.log("front verification result", truncateFields(mrz));
+                        const bbox = mrz?.bbox || templateBbox;
+                        setSilentCaptureResult((prev) => ({
+                            ...prev,
+                            path: result.path,
+                            templatePath: templatePath,
+                            bbox: bbox, success: true,
+                            mrz: JSON.stringify(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) => {
+                        console.log("error front verification", e);
+                        logger.log("error front verification", truncateFields(e));
+                        setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: e?.message || 'Erreur de détection du MRZ' }));
+                        // showAlert('Erreur', e?.message || 'Erreur de détection du MRZ');
+                    });
+                }
+                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: getCurrentSideVerification(currentSide),
-                    selectedDocumentType: selectedDocumentType?.type || '',
+                    regionMapping: {
+                        authMethod: backRegionMappings.authMethod,
+                        mrzTypes: backRegionMappings.mrzTypes,
+                    },
+                    selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type] || '',
                     code: countryData?.code || '',
                     currentSide: currentSide,
                     templatePath: templatePath,
-                    mrzType: getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '',
-                }).then((mrz) => {
+                    mrzType: getCorrespondingMrzType(templatePath, backRegionMappings.regionMapping, backRegionMappings.key || '') || '',
+                }, env).then((mrz) => {
                     logger.log("back verification result", truncateFields(mrz));
                     const bbox = mrz?.bbox || templateBbox;
                     setSilentCaptureResult((prev) => ({
                         ...prev, path: result.path, bbox: bbox,
                         success: true, mrz: JSON.stringify(mrz), isAnalyzing: false,
                         country: countryData?.code,
-                        documentType: selectedDocumentType?.type,
+                        documentType: selectedDocumentType.type,
                     }));
                     // Stocker le bbox pour ce côté
                     if (bbox && typeof bbox === 'object') {
@@ -233,109 +295,115 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                 }).catch((e) => {
                     logger.log("error back verification", truncateFields(e));
                     setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: e?.message || 'Erreur de détection du MRZ' }));
-                    // Alert.alert('Erreur', e?.message || 'Erreur de détection du MRZ');
+                    // showAlert('Erreur', e?.message || 'Erreur de détection du MRZ');
                 });
             }
         }
     };
     // Handle capture
     const handleCapture = async (result) => {
+        console.log("handleCapture", JSON.stringify(truncateFields({ result, silentCaptureResult }), null, 2));
         if (silentCaptureResult.path) {
-            const base64 = await pathToBase64(silentCaptureResult.path);
+            // Créer une image rognée avec tolérance de 10% pour l'envoi
+            let imagePathForUpload = silentCaptureResult.path;
+            if (silentCaptureResult.bbox) {
+                try {
+                    logger.log("Début du rognage avec tolérance, URI original:", silentCaptureResult.path);
+                    imagePathForUpload = await cropImageWithBBoxWithTolerance(silentCaptureResult.path, silentCaptureResult.bbox, 0.05);
+                    logger.log("Image rognée avec tolérance créée pour l'envoi, URI final:", imagePathForUpload);
+                }
+                catch (error) {
+                    logger.log("Erreur lors du rognage avec tolérance, utilisation de l'image originale:", truncateFields(error));
+                    // En cas d'erreur, on utilise l'image originale
+                    imagePathForUpload = silentCaptureResult.path;
+                }
+            }
+            const base64 = await pathToBase64(imagePathForUpload);
             logger.log("silentCaptureResult captured", JSON.stringify(truncateFields(silentCaptureResult), null, 2));
+            // Utiliser l'image originale pour l'affichage (dir) mais l'image rognée avec tolérance pour l'envoi (file)
             const newImages = { ...capturedImages, [currentSide]: { dir: silentCaptureResult.path, file: base64, mrz: silentCaptureResult.mrz || "", templatePath: silentCaptureResult.templatePath } };
             setCapturedImages(newImages);
             if (silentCaptureResult.country && silentCaptureResult.documentType) {
                 onValueChange({
                     ...newImages,
                     country: silentCaptureResult.country,
-                    documentType: silentCaptureResult.documentType,
+                    documentType: GovernmentDocumentTypeBackend[silentCaptureResult.documentType] || '',
                 });
             }
             setShowCamera(false);
             actions.showCustomStepper(true);
         }
         else {
-            Alert.alert('Erreur', result.error || 'Impossible de prendre la photo');
+            showAlert('Erreur', result.error || 'Impossible de prendre la photo');
         }
     };
     const handleError = (event) => {
-        Alert.alert('Erreur', event.message);
+        showAlert('Erreur', event.message);
         setShowCamera(false);
     };
     useEffect(() => {
         actions.showCustomStepper(!showCamera);
     }, [showCamera]);
-    const handleDocumentTypeSelection = (docType) => {
-        setSelectedDocumentType({ type: docType, region: hasRegions(docType) ? '' : 'root' });
-        setSilentCaptureResult((prev) => ({ ...prev, templatePath: '', bbox: undefined, success: false, isAnalyzing: false, error: '', path: '', mrz: '', country: '', documentType: '' }));
-        setCapturedImages((prev) => ({ front: { dir: '', file: '', mrz: '', templatePath: '' }, back: { dir: '', file: '', mrz: '', templatePath: '' } }));
-    };
-    const handleRegionSelection = (region) => {
-        setSelectedDocumentType((prev) => ({ ...prev, region: region }));
+    // 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);
+            }
+            // Ajouter l'étape actuelle pour permettre à l'utilisateur de continuer au bon endroit
+            if (!currentUrl.searchParams.has('step')) {
+                currentUrl.searchParams.set('step', String(state.currentComponentIndex));
+            }
+            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 '';
+        }
     };
-    // Interface de sélection du type de document
-    if (showDocumentSelection.documentSelection || showDocumentSelection.regionSelection) {
+    // 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}>{getLocalizedText(component.instructions)}</Text>
-
-          <ScrollView style={styles.documentTypesContainer} showsVerticalScrollIndicator={false}>
-            {showDocumentSelection.documentSelection ? availableDocumentTypes.map((docType) => {
-                const docInfo = getDocumentTypeInfo(docType);
-                return (<TouchableOpacity key={docType} style={[styles.documentTypeButton, { backgroundColor: selectedDocumentType?.type === docType ? '#2DBD6030' : '#F8F9FA', borderColor: selectedDocumentType?.type === docType ? '#2DBD60' : '#E9ECEF', borderWidth: 2 }]} onPress={() => handleDocumentTypeSelection(docType)}>
-                  <View style={[styles.documentTypeIconContainer, { backgroundColor: 'gray', }]}>
-                    <Text style={styles.documentTypeIcon}>{docInfo.icon}</Text>
-                  </View>
-                  <Text style={styles.documentTypeName}>
-                    {docInfo.name[language] || docInfo.name.en}
-                  </Text>
-                  <Text style={styles.documentTypeArrow}>→</Text>
-                </TouchableOpacity>);
-            }) : null}
-            {showDocumentSelection.regionSelection ?
-                hasRegions(selectedDocumentType?.type || 'identity_card').regionMapping.map((region) => {
-                    return (<TouchableOpacity key={region} onPress={() => handleRegionSelection(region)} style={[styles.documentTypeButton, { backgroundColor: selectedDocumentType?.region === region ? '#2DBD6030' : '#F8F9FA', borderColor: selectedDocumentType?.region === region ? '#2DBD60' : '#E9ECEF', borderWidth: 2 }]}>
-                    <Text>{region}</Text>
-                  </TouchableOpacity>);
-                }) : null}
-          </ScrollView>
-          <Button title={t('common.next')} onPress={() => {
-                if (!selectedDocumentType) {
-                    Alert.alert(t('common.error'), t('validation.required'));
-                    return;
-                }
-                if (showDocumentSelection.regionSelection) {
-                    logger.log("showDocumentSelection", JSON.stringify(truncateFields(showDocumentSelection), null, 2));
-                    setShowDocumentSelection({
-                        documentSelection: false,
-                        regionSelection: false
-                    });
-                    setShowCamera(true);
-                    actions.showCustomStepper(false);
-                    return;
-                }
-                else {
-                    if (hasRegions(selectedDocumentType?.type)?.hasRegions) {
-                        setShowDocumentSelection({
-                            documentSelection: false,
-                            regionSelection: true
-                        });
-                    }
-                    else {
-                        setShowDocumentSelection({
-                            documentSelection: false,
-                            regionSelection: false
-                        });
-                        setShowCamera(true);
-                        actions.showCustomStepper(false);
-                    }
-                }
-            }} variant={selectedDocumentType ? 'primary' : "neutral"} size="large" fullWidth/>
-
-
+          <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>);
@@ -347,10 +415,6 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                         if (currentSide === 'back') {
                             setCurrentSide('front');
                             setShowCamera(false);
-                            setShowDocumentSelection({
-                                documentSelection: false,
-                                regionSelection: 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
@@ -375,14 +439,11 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                             }
                         }
                         else {
-                            setShowDocumentSelection({
-                                documentSelection: true,
-                                regionSelection: false
-                            });
-                            actions.showCustomStepper(true);
+                            // Retour au composant précédent (country_selection)
+                            actions.previousComponent();
                         }
                     },
-                    selectedDocumentType: locale === 'en' ? getDocumentTypeInfo(selectedDocumentType?.type || "identity_card").name.en : getDocumentTypeInfo(selectedDocumentType?.type || "identity_card").name.fr || '',
+                    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,
@@ -422,7 +483,13 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                 borderRadius: 12,
                 resizeMode: 'cover',
             }}/>) : null}
-                {silentCaptureResult.path ? (<Image source={{ uri: silentCaptureResult.path }} style={{
+                {!cropImageUri && silentCaptureResult.path ? (<Image source={{ uri: silentCaptureResult.path }} style={{
+                width: '100%',
+                height: 200,
+                borderRadius: 12,
+                resizeMode: 'cover',
+            }}/>) : null}
+                {!cropImageUri && !silentCaptureResult.path && capturedImages[currentSide]?.dir ? (<Image source={{ uri: capturedImages[currentSide].dir }} style={{
                 width: '100%',
                 height: 200,
                 borderRadius: 12,
@@ -430,22 +497,33 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             }}/>) : null}
 
               </View>
-              {/* retake button */}
-              <Button title={t('kyc.idCardCapture.retakeButton')} onPress={() => {
-            retakePicture(currentSide);
-        }} variant="outline" size="medium" fullWidth/>
-              <Button title={t('common.next')} onPress={() => {
-            if (currentSide === 'back' || selectedDocumentType?.type === 'passport') {
-                actions.nextComponent();
-                return;
-            }
-            else {
+              {/* 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);
-                setCurrentSide('back');
-                setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', mrz: '', templatePath: '' }));
-                setCropImageUri('');
-            }
-        }} variant="primary" size="large" fullWidth/>
+                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>
@@ -453,6 +531,32 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
 
 
         {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>);
 };
@@ -606,42 +710,67 @@ const styles = StyleSheet.create({
         marginTop: 8,
         textAlign: 'center',
     },
-    documentTypesContainer: {
-        // flex: 1,
-        // marginBottom: 16,
-        // paddingHorizontal: 16,
-        maxHeight: Dimensions.get('window').height - 400,
-    },
-    documentTypeButton: {
-        flexDirection: 'row',
+    crossDeviceButton: {
+        marginTop: 16,
+        padding: 12,
         alignItems: 'center',
-        backgroundColor: '#F8F9FA',
-        padding: 16,
-        marginBottom: 12,
-        borderRadius: 12,
         borderWidth: 1,
-        borderColor: '#E9ECEF',
+        borderColor: '#2DBD60',
+        borderRadius: 8,
+        backgroundColor: '#f0f9f0',
     },
-    documentTypeIconContainer: {
-        width: 40, height: 40,
-        borderRadius: 10,
-        alignItems: 'center',
+    crossDeviceText: {
+        color: '#2DBD60',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.5)',
         justifyContent: 'center',
-        marginRight: 16,
+        alignItems: 'center',
     },
-    documentTypeIcon: {
-        fontSize: 24,
+    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,
     },
-    documentTypeName: {
-        flex: 1,
-        fontSize: 16,
-        fontWeight: '600',
+    modalTitle: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        marginBottom: 12,
         color: '#333',
     },
-    documentTypeArrow: {
-        fontSize: 18,
+    modalDescription: {
+        fontSize: 16,
         color: '#666',
-        fontWeight: 'bold',
+        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',
     },
 });
 //# sourceMappingURL=IDCardCapture.js.map