@transfergratis/react-native-sdk 0.1.23 → 0.1.25

package/src/components/KYCElements/IDCardCapture.tsx

@@ -1,7 +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 { TemplateComponent, IDCardConfig, LocalizedText, GovernmentDocumentType, ISilentCaptureResult, IBbox } from '../../types/KYC.types';
+import { TemplateComponent, LocalizedText, GovernmentDocumentType, ISilentCaptureResult, IBbox, GovernmentDocumentTypeShorted, GovernmentDocumentTypeBackend } from '../../types/KYC.types';
 import IdCardOverlay from '../OverLay/IdCard';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { useI18n } from '../../hooks/useI18n';
@@ -10,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';
 
 
@@ -45,24 +47,20 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
   const [currentSide, setCurrentSide] = useState<string>('front');
   // Stocker les bbox par côté pour pouvoir restaurer les images croppées
   const [bboxBySide, setBboxBySide] = useState<Record<string, IBbox>>({});
-  const [selectedDocumentType, setSelectedDocumentType] = useState<{
-    type: GovernmentDocumentType;
-    region: string;
-  }>({
-    type: 'identity_card',
-    region: 'root'
-  });
-  const [showDocumentSelection, setShowDocumentSelection] = useState(
-    {
-      documentSelection: true,
-      regionSelection: false
-    }
-  );
   const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
+  const [showQRModal, setShowQRModal] = useState(false);
+
+  // Mapping des types de documents backend vers SDK
+  const documentTypeMapping: Record<string, GovernmentDocumentType> = {
+    '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 as IDCardConfig;
+  const { actions, state, env } = useTemplateKYCFlowContext();
 
 
 
@@ -74,32 +72,60 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     return "";
   };
 
-  const countryData = useMemo(() => {
-    const geCountryID = Object.keys(state.componentData).find((c: string) => 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]);
+  }, [state.template.components, state.componentData]);
 
+  // Extraire selectedDocumentType depuis countrySelectionData
+  const selectedDocumentType = useMemo<{ type: GovernmentDocumentType; region: string } | null>(() => {
+    if (!countrySelectionData?.documentType) return null;
+
+    const backendDocType = countrySelectionData.documentType;
+    const mappedType = documentTypeMapping[backendDocType] || backendDocType as GovernmentDocumentType;
+    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]);
 
-  const availableDocumentTypes = useMemo(() => {
-    const newconfig: GovernmentDocumentType[] = [];
 
-    if (countryData) {
-      const countryMapping = Object.keys(countryData?.regionMapping);
-      if (countryMapping && Array.isArray(countryMapping)) {
-        countryMapping.forEach((c) => {
-          newconfig.push(c as GovernmentDocumentType);
+  // 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 as Record<string, IIDCardPayload>;
+        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));
@@ -112,28 +138,33 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
 
 
 
-  const cameraConfig = {
-    aspectRatio: 4 / 3,
-    quality: 0.8,
-    flashMode: 'auto' as const,
-    cameraType: 'back' as const,
-    allowRetake: true,
-    maxRetakes: 3,
-    overlay: {
-      showGuide: true,
-      guideText: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions as Record<string, LocalizedText>),
-      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 as Record<string, LocalizedText>);
 
-    }
-  };
+    return {
+      aspectRatio: 4 / 3,
+      quality: 0.8,
+      flashMode: 'auto' as const,
+      cameraType: 'back' as const,
+      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: string) => {
     setShowCamera(true);
@@ -144,29 +175,18 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     onValueChange({ ...value, [currentSide]: { dir: '', file: '', mrz: '' } });
   };
 
-  const hasRegions = useCallback((documentType: GovernmentDocumentType): { hasRegions: boolean, regionMapping: string[] } => {
-    const regionMapping = countryData?.regionMapping[documentType as GovernmentDocumentType];
-    if (regionMapping && Object.keys(regionMapping).length > 1) {
-      return {
-        hasRegions: true,
-        regionMapping: Object.keys(regionMapping)
-      };
-    }
-    return {
-      hasRegions: false,
-      regionMapping: []
-    };
-  }, [countryData]);
 
 
   const getCurrentSideVerification = (currentSide: string) => {
-    const regionMapping = countryData?.regionMapping[selectedDocumentType?.type as GovernmentDocumentType];
+    if (!selectedDocumentType || !countryData?.regionMapping) {
+      return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' };
+    }
+
+    const regionMapping = countryData.regionMapping[selectedDocumentType.type as GovernmentDocumentType];
     const authMethod: string[] = [];
     const mrzTypes: string[] = [];
 
-    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: any) => {
@@ -179,13 +199,13 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
       });
     }
 
-    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: string, mapping: any, selectedDocumentType: string = "root") => {
-    if (!mapping[selectedDocumentType]) return null;
+    if (!mapping || !mapping[selectedDocumentType]) return null;
 
     // Extraire le nom du fichier depuis le template_path
     const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
@@ -210,11 +230,21 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
       let templatePath = silentCaptureResult.templatePath || '';
       let templateBbox: IBbox | undefined;
 
+      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 as GovernmentDocumentType, 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 as GovernmentDocumentType, docRegion: countryData?.code || "", postfix: currentSide }, env);
 
           if (templateType.template_path) {
             templatePath = templateType.template_path;
@@ -232,21 +262,38 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
         } catch (e: any) {
           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(
-          {
+        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: regionMappings,
-            selectedDocumentType: selectedDocumentType?.type || '',
+            regionMapping: {
+              authMethod: regionMappings.authMethod,
+              mrzTypes: regionMappings.mrzTypes,
+            },
+            selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type as keyof typeof GovernmentDocumentTypeShorted] || '',
             code: countryData?.code || '',
             currentSide: currentSide,
             templatePath: templatePath,
-            mrzType: getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '',
-          }).then((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 as any)?.bbox || templateBbox;
             setSilentCaptureResult((prev) => ({
@@ -256,7 +303,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
               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é
@@ -265,27 +312,37 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
             }
 
           }).catch((e: any) => {
+            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' }));
-            // Alert.alert('Erreur', e?.message || 'Erreur de détection du MRZ');
-          })
+            // showAlert('Erreur', e?.message || 'Erreur de détection du MRZ');
+          });
+        } catch (error: any) {
+          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 as keyof typeof GovernmentDocumentTypeShorted] || '',
           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 as any)?.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é
@@ -295,7 +352,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
         }).catch((e: any) => {
           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');
         })
       }
 
@@ -304,28 +361,45 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
 
   // Handle capture
   const handleCapture = async (result: { success: boolean; path?: string; error?: string }) => {
+    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 as keyof typeof GovernmentDocumentTypeBackend] || '',
         });
       }
       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: { message: string }) => {
-    Alert.alert('Erreur', event.message);
+    showAlert('Erreur', event.message);
     setShowCamera(false);
   };
 
@@ -337,98 +411,75 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     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 = (): string => {
+    // 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 '';
+    }
+  };
+
 
 
 
 
 
-  const handleDocumentTypeSelection = (docType: GovernmentDocumentType) => {
-    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: string) => {
-    setSelectedDocumentType((prev) => ({ ...prev, region: region }));
-  };
 
-  // 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 as keyof typeof docInfo.name] || 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>
           )}
@@ -470,10 +521,6 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
                 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
@@ -496,14 +543,11 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
                     setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', templatePath: '' }));
                   }
                 } 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,
@@ -557,41 +601,74 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
                     }}
                   />
                 ) : null}
-                {silentCaptureResult.path ? (<Image
-                  source={{ uri: silentCaptureResult.path }}
-                  style={{
-                    width: '100%',
-                    height: 200,
-                    borderRadius: 12,
-                    resizeMode: 'cover',
-                  }}
-                />) : null}
+                {!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,
+                      resizeMode: 'cover',
+                    }}
+                  />
+                ) : 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 {
-                  setShowCamera(true);
-                  setCurrentSide('back');
-                  setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', mrz: '', templatePath: '' }));
-                  setCropImageUri('');
-                }
-              }}
-                variant="primary"
-                size="large"
-                fullWidth
-              />
+              {/* 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>
@@ -601,6 +678,49 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
         {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>
   );
@@ -757,43 +877,66 @@ 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',
   },
 });