@transfergratis/react-native-sdk 0.1.22 → 0.1.24

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 } 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';
@@ -10,7 +12,7 @@ import { backVerification, checkTemplateType, frontVerification } from '../../mo
 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 { cropByObb, cropImageWithBBox, cropImageWithBBoxWithTolerance } from '../../utils/cropByObb';
 import { logger } from '../../utils/logger';
 export const IDCardCapture = ({ component, value = {}, onValueChange, error, language = 'en', }) => {
     const { t, locale } = useI18n();
@@ -20,18 +22,17 @@ 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 });
+    // 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 } = useTemplateKYCFlowContext();
     const getLocalizedText = (text) => {
         // console.log("text", text, JSON.stringify(component, null, 2));
         if (text && typeof text[currentSide] === 'object' && text[currentSide][locale]) {
@@ -39,27 +40,27 @@ 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);
-                });
-            }
-        }
-        logger.log("newconfig", truncateFields(newconfig));
-        return newconfig;
-    }, []);
+    }, [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]);
     useEffect(() => {
         logger.log("cropImageUri", JSON.stringify(truncateFields({ box: silentCaptureResult }), null, 2));
         if (capturedImages[currentSide]?.dir && silentCaptureResult?.bbox) {
@@ -68,27 +69,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 +103,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 +121,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,10 +145,19 @@ 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 {
+                    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 });
                     if (templateType.template_path) {
                         templatePath = templateType.template_path;
@@ -174,49 +177,79 @@ 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);
+                    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 || '') || '',
+                    mrzType: getCorrespondingMrzType(templatePath, backRegionMappings.regionMapping, backRegionMappings.key || '') || '',
                 }).then((mrz) => {
                     logger.log("back verification result", truncateFields(mrz));
                     const bbox = mrz?.bbox || templateBbox;
@@ -224,7 +257,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                         ...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 +266,65 @@ 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 }));
-    };
-    // 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 +336,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 +360,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,
@@ -430,22 +412,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>
@@ -606,42 +599,5 @@ const styles = StyleSheet.create({
         marginTop: 8,
         textAlign: 'center',
     },
-    documentTypesContainer: {
-        // flex: 1,
-        // marginBottom: 16,
-        // paddingHorizontal: 16,
-        maxHeight: Dimensions.get('window').height - 400,
-    },
-    documentTypeButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: '#F8F9FA',
-        padding: 16,
-        marginBottom: 12,
-        borderRadius: 12,
-        borderWidth: 1,
-        borderColor: '#E9ECEF',
-    },
-    documentTypeIconContainer: {
-        width: 40, height: 40,
-        borderRadius: 10,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginRight: 16,
-    },
-    documentTypeIcon: {
-        fontSize: 24,
-    },
-    documentTypeName: {
-        flex: 1,
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#333',
-    },
-    documentTypeArrow: {
-        fontSize: 18,
-        color: '#666',
-        fontWeight: 'bold',
-    },
 });
 //# sourceMappingURL=IDCardCapture.js.map