@transfergratis/react-native-sdk 0.1.22 → 0.1.24

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 } 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';
@@ -11,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';
 
 
@@ -45,24 +46,19 @@ 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 });
+
+  // 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 } = useTemplateKYCFlowContext();
 
 
 
@@ -74,31 +70,30 @@ 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 availableDocumentTypes = useMemo(() => {
-    const newconfig: GovernmentDocumentType[] = [];
+    const backendDocType = countrySelectionData.documentType;
+    const mappedType = documentTypeMapping[backendDocType] || backendDocType as GovernmentDocumentType;
+    const region = countrySelectionData.region || 'root';
 
-    if (countryData) {
-      const countryMapping = Object.keys(countryData?.regionMapping);
-      if (countryMapping && Array.isArray(countryMapping)) {
-        countryMapping.forEach((c) => {
-          newconfig.push(c as GovernmentDocumentType);
-        });
-      }
-    }
-    logger.log("newconfig", truncateFields(newconfig));
-    return newconfig;
-  }, []);
+    return { type: mappedType, region };
+  }, [countrySelectionData, documentTypeMapping]);
+
+  // Récupérer countryData pour compatibilité avec le code existant
+  const countryData = useMemo(() => {
+    return countrySelectionData;
+  }, [countrySelectionData]);
 
 
   useEffect(() => {
@@ -112,28 +107,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 +144,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 +168,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,10 +199,20 @@ 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 {
+          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 });
 
           if (templateType.template_path) {
@@ -232,21 +231,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);
+          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 +272,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,19 +281,29 @@ 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 || '') || '',
+          mrzType: getCorrespondingMrzType(templatePath, backRegionMappings.regionMapping, backRegionMappings.key || '') || '',
         }).then((mrz) => {
           logger.log("back verification result", truncateFields(mrz));
           const bbox = (mrz as any)?.bbox || templateBbox;
@@ -285,7 +311,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
             ...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 +321,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 +330,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);
   };
 
@@ -342,93 +385,18 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
 
 
 
-  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 +438,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 +460,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,
@@ -568,30 +529,50 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
                 />) : 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>
@@ -757,43 +738,4 @@ 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',
-  },
 });