@sanctum-key/react-native-sdk 1.0.0

package/src/components/KYCElements/IDCardCapture.tsx

@@ -0,0 +1,1053 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { View, Text, StyleSheet, Image, ScrollView, Platform, Modal, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
+import { EnhancedCameraView } from '../EnhancedCameraView';
+import { 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';
+import { Button } from '../ui/Button';
+import { removeDuplicates } from '../../utils/remove-duplicate';
+import { backVerification, checkTemplateType, frontVerification } from '../../modules/api/CardAuthentification';
+import { getDocumentTypeInfo } from '../../utils/get-document-type-info';
+import pathToBase64 from '../../utils/pathToBase64';
+import kycService, { truncateFields } from '../../modules/api/KYCService';
+import { cropByObb, cropImageWithBBox, cropImageWithBBoxWithTolerance, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from '../../utils/cropByObb';
+import { isMobileWeb } from '../../utils/deviceDetection';
+import { logger } from '../../utils/logger';
+
+
+interface IIDCardPayload {
+  dir: string;
+  file: string;
+  mrz: string;
+  templatePath?: string;
+}
+
+interface IDCardCaptureProps {
+  component: TemplateComponent;
+  value?: Record<string, IIDCardPayload>;
+  onValueChange: (value: Record<string, IIDCardPayload | string>) => void;
+  error?: string;
+  language?: string;
+  currentSide?: string; // Nouveau prop pour spécifier le côté actuel
+}
+
+export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
+  component,
+  value = {},
+  onValueChange,
+  error,
+  language = 'en',
+}) => {
+  const { t, locale } = useI18n();
+  const [showCamera, setShowCamera] = useState(false);
+  const [capturedImages, setCapturedImages] = useState<Record<string, IIDCardPayload>>(value || {});
+  const [cropImageUri, setCropImageUri] = useState<string>('');
+  const [currentSide, setCurrentSide] = useState<'front' | 'back'>('front');
+  const [bboxBySide, setBboxBySide] = useState<Record<string, IBbox>>({});
+  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, env } = useTemplateKYCFlowContext();
+
+
+
+  const getLocalizedText = (text: LocalizedText | Record<string, LocalizedText>): string => {
+    // console.log("text", text, JSON.stringify(component, null, 2));
+    if (text && typeof text[currentSide] === 'object' && text[currentSide][locale]) {
+      return text[currentSide][locale] || '';
+    }
+    return "";
+  };
+
+  // Récupérer les données depuis le composant country_selection
+  const countrySelectionData = useMemo(() => {
+    const countrySelectionComponent = state.template.components.find(c => c.type === 'country_selection');
+    if (countrySelectionComponent) {
+      return state.componentData[countrySelectionComponent.id];
+    }
+    return null;
+  }, [state.template.components, state.componentData]);
+
+  // Extraire selectedDocumentType depuis countrySelectionData
+  const selectedDocumentType = useMemo<{ 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]);
+
+
+  // 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 || '',
+            }));
+          }
+        });
+      }
+    }
+  }, [value]);
+
+  useEffect(() => {
+    logger.log("cropImageUri", JSON.stringify(truncateFields({ box: silentCaptureResult }), null, 2));
+    if (capturedImages[currentSide]?.dir && silentCaptureResult?.bbox) {
+      cropImageWithBBox(capturedImages[currentSide].dir, silentCaptureResult.bbox)?.then((uri) => {
+        setCropImageUri(uri);
+        console.log(cropImageUri)
+      });
+    }
+  }, [capturedImages[currentSide]?.dir, silentCaptureResult?.bbox])
+
+
+
+  const cameraConfig = useMemo(() => {
+    const instructions = selectedDocumentType
+      ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr)
+      : getLocalizedText(component.instructions as Record<string, LocalizedText>);
+
+    return {
+      aspectRatio: 4 / 3,
+      quality: 0.7, 
+      flashMode: 'auto' as const,
+      cameraType: 'back' as const,
+      autoFocus: 'on', 
+      whiteBalance: 'auto', 
+      allowRetake: true,
+      maxRetakes: 3,
+      overlay: {
+        showGuide: true,
+        guideText: instructions,
+        bbox: {
+          xMin: 20,
+          yMin: 140,
+          xMax: 370,
+          yMax: 340,
+          borderColor: '#2DBD60',
+          borderWidth: 3,
+          cornerRadius: 8
+        }
+      }
+    };
+  }, [selectedDocumentType, locale, component.instructions]);
+
+  const retakePicture = (sideToRetake: 'front' | 'back') => {
+    // 1. Turn the camera back on and hide the stepper
+    setShowCamera(true);
+    actions.showCustomStepper(false);
+
+    // 2. WIPE LOCAL STATE: Use functional update to prevent stale closures
+    setCapturedImages((prev) => {
+      const newState = { ...prev };
+      delete newState[sideToRetake]; 
+      return newState;
+    });
+
+    setSilentCaptureResult({
+      path: '',
+      success: false,
+      isAnalyzing: false,
+      error: '',
+      templatePath: '',
+      mrz: '',
+      bbox: undefined,
+    });
+
+    
+    if (value) {
+      const newValue = { ...value };
+      delete newValue[sideToRetake]; 
+      onValueChange(newValue);
+    }
+  };
+
+
+
+  const getCurrentSideVerification = (currentSide: string) => {
+    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';
+
+    if (regionMapping?.[key] && Array.isArray(regionMapping[key])) {
+      regionMapping[key].forEach((item: any) => {
+        if (item[currentSide as keyof typeof item]) {
+          authMethod.push(item[currentSide as keyof typeof item]);
+          if (item?.mrz_type) {
+            mrzTypes.push(item?.mrz_type);
+          }
+        }
+      });
+    }
+
+    logger.log("regionMapping", JSON.stringify(truncateFields({ regionMapping, selectedDocumentType: selectedDocumentType.region, key }), null, 2));
+
+    return { authMethod: removeDuplicates(authMethod), mrzTypes: removeDuplicates(mrzTypes), regionMapping: regionMapping, key: key };
+  }
+
+  const getCorrespondingMrzType = (templatePath: string, mapping: any, selectedDocumentType: string = "root") => {
+    if (!mapping || !mapping[selectedDocumentType]) return null;
+
+    // Extraire le nom du fichier depuis le template_path
+    const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
+
+    if (!fileName) return null;
+
+    // Normaliser en .py
+    const pyName = `${fileName}.py`; // ex: cameroon_id_back_3_1.py
+
+    // Chercher dans la liste
+    const found = mapping[selectedDocumentType].find((item: any) => item.py_file === pyName);
+
+    return found?.mrz_type || null;
+  }
+
+  const handleSilentCapture = async (result: { success: boolean; path?: string; error?: string }) => {
+    if (silentCaptureResult.isAnalyzing) {
+      return;
+    }
+    if (result.success && result.path) {
+      setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
+      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 }, env);
+
+          if (templateType.template_path) {
+            templatePath = templateType.template_path;
+            logger.log("templatePath", templatePath);
+            setSilentCaptureResult((prev) => ({ ...prev, templatePath: templatePath }));
+          }
+          if (templateType.card_obb) {
+            const obbConfidence = getObbConfidence((templateType as any).card_obb);
+            if (obbConfidence !== null && obbConfidence < OBB_CONFIDENCE_THRESHOLD) {
+              setSilentCaptureResult((prev) => ({
+                ...prev,
+                isAnalyzing: false,
+                success: false,
+                error: t('kyc.idCardCapture.cardNotFullyInFrame'),
+              }));
+              return;
+            }
+            let bbox: IBbox | undefined;
+            try {
+              const crop = await cropByObb(result?.path || '', (templateType as any).card_obb);
+              bbox = crop.bbox;
+              templateBbox = bbox;
+            } catch { }
+          }
+        } 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 verification", templatePath, "currentSide", currentSide);
+      if (currentSide === 'front') {
+        logger.log("frontVerification - BEFORE call", {
+          selectedDocumentTypeType: selectedDocumentType?.type,
+          countrySelectionDataDocumentType: countrySelectionData?.documentType,
+          docTypeToSend: selectedDocumentType?.type
+        });
+        logger.log("Calling frontVerification", { templatePath, selectedDocumentType: selectedDocumentType?.type, regionMappings });
+        console.log("About to call frontVerification", typeof frontVerification);
+        try {
+          const mrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '';
+          console.log("mrzType calculated", mrzType);
+          const verificationParams = {
+            path: result.path,
+            regionMapping: {
+              authMethod: regionMappings.authMethod,
+              mrzTypes: regionMappings.mrzTypes,
+            },
+            selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type as keyof typeof GovernmentDocumentTypeShorted] || '',
+            code: countryData?.code || '',
+            currentSide: currentSide,
+            templatePath: templatePath,
+            mrzType: mrzType,
+          };
+          console.log("frontVerification params", verificationParams);
+          console.log("About to call frontVerification function");
+
+          const promise = frontVerification(verificationParams, env);
+          console.log("frontVerification promise created", promise);
+          
+          promise.then((res: any) => {
+            logger.log("front verification result", truncateFields(res));
+            const bbox = res?.bbox || templateBbox;
+            
+            setSilentCaptureResult((prev) => ({
+              ...prev,
+              path: result.path,
+              templatePath: templatePath,
+              bbox: bbox, 
+              success: true,
+              mrz: res?.mrz ? JSON.stringify(res.mrz) : "", 
+              isAnalyzing: false,
+              country: countryData?.code,
+              documentType: selectedDocumentType.type,
+            }));
+            
+            // Stocker le bbox pour ce côté
+            if (bbox && typeof bbox === 'object') {
+              setBboxBySide((prev) => ({ ...prev, [currentSide]: bbox }));
+            }
+
+          }).catch((e: any) => {
+
+          }).catch((e: any) => {
+            console.log("error front verification", e);
+            logger.log("error front verification", truncateFields(e));
+            const isCardNotFullyInFrame =
+              e?.message === 'CARD_NOT_FULLY_IN_FRAME' ||
+              e?.message?.includes('entirement') ||
+              e?.message?.includes('fully in frame');
+            const errorMessage = isCardNotFullyInFrame
+              ? t('kyc.idCardCapture.cardNotFullyInFrame')
+              : (e?.message || 'Erreur de détection du MRZ');
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: errorMessage }));
+          });
+        } catch (error: 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: {
+            authMethod: backRegionMappings.authMethod,
+            mrzTypes: backRegionMappings.mrzTypes,
+          },
+          selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type as keyof typeof GovernmentDocumentTypeShorted] || '',
+          code: countryData?.code || '',
+          currentSide: currentSide,
+          templatePath: templatePath,
+          mrzType: getCorrespondingMrzType(templatePath, backRegionMappings.regionMapping, backRegionMappings.key || '') || '',
+        }, env).then((res: any) => { 
+          logger.log("back verification result", truncateFields(res));
+          const bbox = res?.bbox || templateBbox;
+          
+          setSilentCaptureResult((prev) => ({
+            ...prev, 
+            path: result.path, 
+            bbox: bbox,
+            success: true, 
+            mrz: res?.mrz ? JSON.stringify(res.mrz) : "", 
+            isAnalyzing: false,
+            country: countryData?.code,
+            documentType: selectedDocumentType.type,
+          }));
+          
+          // Stocker le bbox pour ce côté
+          if (bbox && typeof bbox === 'object') {
+            setBboxBySide((prev) => ({ ...prev, [currentSide]: bbox }));
+          }
+        }).catch((e: any) => {
+          logger.log("error back verification", truncateFields(e));
+          const isCardNotFullyInFrame =
+            e?.message === 'CARD_NOT_FULLY_IN_FRAME' ||
+            e?.message?.includes('entirement') ||
+            e?.message?.includes('fully in frame');
+          const errorMessage = isCardNotFullyInFrame
+            ? t('kyc.idCardCapture.cardNotFullyInFrame')
+            : (e?.message || 'Erreur de détection du MRZ');
+          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: errorMessage }));
+        });
+      }
+
+    }
+  }
+
+  const handleCapture = async (result: { success: boolean; path?: string; error?: string }) => {
+    if (silentCaptureResult.path) {
+      let imagePathForUpload = silentCaptureResult.path;
+      if (silentCaptureResult.bbox) {
+        try {
+          imagePathForUpload = await cropImageWithBBoxWithTolerance(silentCaptureResult.path, silentCaptureResult.bbox, 0.05);
+        } catch (error) {
+          imagePathForUpload = silentCaptureResult.path;
+        }
+      }
+
+      const base64 = await pathToBase64(imagePathForUpload);
+
+      // ✅ FIX: Use 'imagePathForUpload' (the cropped image) for the local display directory!
+      const newImages = { 
+          ...capturedImages, 
+          [currentSide]: { 
+              dir: imagePathForUpload, // <--- CHANGED THIS LINE
+              file: base64, 
+              mrz: silentCaptureResult.mrz || "", 
+              templatePath: silentCaptureResult.templatePath 
+          } 
+      };
+      
+      setCapturedImages(newImages);
+      
+      if (silentCaptureResult.country && silentCaptureResult.documentType) {
+        onValueChange({
+          ...newImages,
+          country: silentCaptureResult.country,
+          documentType: GovernmentDocumentTypeBackend[silentCaptureResult.documentType as keyof typeof GovernmentDocumentTypeBackend] || '',
+        });
+      }
+      setShowCamera(false);
+      actions.showCustomStepper(true);
+    } else {
+      showAlert('Erreur', result.error || 'Impossible de prendre la photo');
+    }
+  };
+
+  const handleError = (event: { message: string }) => {
+    showAlert('Erreur', event.message);
+    setShowCamera(false);
+  };
+
+  useEffect(() => {
+    actions.showCustomStepper(!showCamera);
+  }, [showCamera]);
+
+  // Cross-device polling logic
+  useEffect(() => {
+    if (!showQRModal || !state.session.session_id) return;
+
+    const pollInterval = setInterval(async () => {
+      try {
+        const result = await kycService.getVerificationResult(state.session.session_id);
+        const sessionData = result[state.session.session_id]?.data;
+
+        if (sessionData) {
+          // Check if verification is completed or if we have ID card data
+          // Since the requirement is "verification restarts", we might look for overall completion
+          // or we could check if user_data is populated.
+          // For now, let's assume if status is not PENDING/INITIALIZED it might be done.
+          // Or simplier: if the mobile flow completes, the session status updates.
+          logger.log('Polling result:', truncateFields(sessionData));
+
+          if (sessionData.verification_status === 'completed' || sessionData.verification_status === 'approved' || sessionData.verification_status === 'review') {
+            clearInterval(pollInterval);
+            setShowQRModal(false);
+            actions.submitVerification(); // Or handleComplete
+          }
+        }
+      } catch (error) {
+        console.error('Polling error:', error);
+      }
+    }, 5000);
+
+    return () => clearInterval(pollInterval);
+  }, [showQRModal, state.session.session_id, actions]);
+
+  const getQrCodeUrl = (): 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);
+      }
+      currentUrl.searchParams.set('component_index', String(state.currentComponentIndex));
+      if (countrySelectionData?.code) {
+        currentUrl.searchParams.set('country', countrySelectionData.code);
+        if (countrySelectionData.documentType) currentUrl.searchParams.set('document_type', countrySelectionData.documentType);
+        if (countrySelectionData.region) currentUrl.searchParams.set('region', countrySelectionData.region);
+      }
+      return `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${encodeURIComponent(currentUrl.toString())}`;
+    } catch (error) {
+      console.warn('Error generating QR code URL:', error);
+      return '';
+    }
+  };
+
+
+
+
+
+
+
+  // En reprise sur un autre appareil: afficher un chargement tant que les données de session ne sont pas restaurées
+  const isResumingSession = Boolean(state.session.session_id && state.currentComponentIndex > 0);
+  const sessionDataRestored = state.session.sessionDataRestored !== false;
+  if (isResumingSession && !sessionDataRestored && (!countrySelectionData || !selectedDocumentType)) {
+    return (
+      <View style={styles.root}>
+        <View style={[styles.container, { justifyContent: 'center', alignItems: 'center' }]}>
+          <ActivityIndicator size="large" color="#2DBD60" />
+          <Text style={[styles.description, { marginTop: 16 }]}>
+            {state.currentLanguage === 'en' ? 'Loading your session...' : 'Chargement de votre session...'}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  // Vérifier si les données sont disponibles, sinon afficher un message d'erreur
+  if (!countrySelectionData || !selectedDocumentType) {
+    return (
+      <View style={styles.root}>
+        <View style={styles.container}>
+          <Text style={styles.title}>{getLocalizedText(component.labels)}</Text>
+          <Text style={styles.description}>
+            {state.currentLanguage === "en"
+              ? "Please complete the country and document selection first."
+              : "Veuillez d'abord compléter la sélection du pays et du document."}
+          </Text>
+          {error && (
+            <Text style={styles.errorText}>{error}</Text>
+          )}
+        </View>
+      </View>
+    );
+  }
+
+
+
+  if (showCamera) {
+    return (
+      <View style={styles.cameraContainer}>
+        <EnhancedCameraView
+          showCamera={true}
+          cameraType={cameraConfig.cameraType}
+          style={styles.camera}
+          onCapture={handleCapture}
+          onError={handleError}
+          onClose={() => setShowCamera(false)}
+          quality="high"
+          showCaptureButton={true}
+          showSwitchCamera={true}
+          onSilentCapture={handleSilentCapture}
+          silentCaptureResult={silentCaptureResult}
+          captureStabilizationDelayMs={3000}
+          enableFlash={cameraConfig.flashMode === 'auto' || cameraConfig.flashMode === 'on'}
+          overlayComponent={
+            <IdCardOverlay
+              xMin={cameraConfig.overlay.bbox.xMin}
+              yMin={cameraConfig.overlay.bbox.yMin}
+              xMax={cameraConfig.overlay.bbox.xMax}
+              yMax={cameraConfig.overlay.bbox.yMax}
+              instructions={cameraConfig.overlay.guideText}
+              cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0 as number}
+              isSuccess={silentCaptureResult.success}
+              language={state.currentLanguage}
+              stepperProps={{
+                back: () => {
+                  if (currentSide === 'back') {
+                    setCurrentSide('front');
+                    setShowCamera(false);
+                    // Si une image front existe, on la restaure pour l'afficher
+                    if (capturedImages['front']?.dir) {
+                      // Restaurer l'état de capture du front pour afficher l'image
+                      const frontImage = capturedImages['front'];
+                      const frontBbox = bboxBySide['front'];
+                      setSilentCaptureResult((prev) => ({
+                        path: frontImage.dir,
+                        success: true,
+                        isAnalyzing: false,
+                        error: '',
+                        mrz: frontImage.mrz || '',
+                        templatePath: frontImage.templatePath || '',
+                        country: silentCaptureResult.country,
+                        documentType: silentCaptureResult.documentType,
+                        bbox: frontBbox // Restaurer le bbox pour recalculer le cropImageUri
+                      }));
+                    } else {
+                      // Pas d'image front, on réinitialise
+                      setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', templatePath: '' }));
+                    }
+                  } else {
+                    // Retour au composant précédent (country_selection)
+                    actions.previousComponent();
+                  }
+                },
+                selectedDocumentType: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : '',
+                step: state.currentComponentIndex + 1,
+                totalSteps: state.template.components.length,
+                side: currentSide,
+              }}
+            />
+          }
+        />
+        
+        {silentCaptureResult.error ? (
+          <View style={styles.floatingErrorBanner}>
+            <Text style={styles.floatingErrorText}>
+              {silentCaptureResult.error}
+            </Text>
+          </View>
+        ) : null}
+
+      </View>
+    );
+  }
+
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.previewContainer}>
+        <ScrollView style={styles.previewItemContainer} showsVerticalScrollIndicator={false}>
+          <View key={currentSide} style={styles.sideContainer}>
+            <Text style={styles.sideTitle}>
+              {t('kyc.idCardCapture.captureTitle', { side: currentSide === 'front' ? locale === 'en' ? 'Front' : 'Recto' : locale === 'en' ? 'Back' : 'Verso' })}
+            </Text>
+            <Text style={{ fontSize: 14, color: '#666', textAlign: 'center', marginBottom: 16, lineHeight: 22 }}>
+              {getLocalizedText(component.instructions)}
+            </Text>
+
+            <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "column", gap: 16 }}>
+              {silentCaptureResult?.error === 'TOO_FAR_AWAY' && (
+              <View style={{ 
+                backgroundColor: '#FF9500', 
+                padding: 12, 
+                borderRadius: 8, 
+                width: '100%',
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 0.2,
+                shadowRadius: 4,
+                elevation: 4
+              }}>
+                <Text style={{ color: 'white', fontWeight: 'bold', textAlign: 'center', fontSize: 16 }}>
+                  {state.currentLanguage === "en" 
+                    ? "Move the document closer to the camera." 
+                    : "Veuillez rapprocher le document de la caméra."}
+                </Text>
+              </View>
+            )}
+
+            <View
+                style={{
+                  width: '100%',
+                  height: 200,
+                  borderRadius: 12,
+                  padding: 1,
+                  overflow: 'hidden',
+                  shadowColor: '#000',
+                  shadowOffset: { width: 0, height: 4 },
+                  shadowOpacity: 0.18,
+                  shadowRadius: 8,
+                  elevation: 8,
+                  backgroundColor: '#000', 
+                }}
+              >
+                {capturedImages[currentSide]?.dir ? (
+                  <Image
+                    source={{ uri: capturedImages[currentSide].dir }}
+                    style={{
+                      width: '100%',
+                      height: '100%', 
+                      borderRadius: 12,
+                      resizeMode: 'contain', 
+                    }}
+                  />
+                ) : silentCaptureResult.path ? (
+                  <Image
+                    source={{ uri: silentCaptureResult.path }}
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      borderRadius: 12,
+                      resizeMode: 'contain', 
+                    }}
+                  />
+                ) : null}
+              </View>
+              {/* Capture button si aucune image n'a été capturée */}
+              {!capturedImages[currentSide]?.dir && (
+                <Button
+                  title={state.currentLanguage === "en" ? "Take Photo" : "Prendre une photo"}
+                  onPress={() => {
+                    setShowCamera(true);
+                    actions.showCustomStepper(false);
+                  }}
+                  variant="primary"
+                  size="large"
+                  fullWidth
+                />
+              )}
+              {/* retake button si une image a été capturée */}
+              {capturedImages[currentSide]?.dir && (
+                <>
+                  <Button title={t('kyc.idCardCapture.retakeButton')} onPress={() => {
+                    retakePicture(currentSide);
+                  }}
+                    variant="outline"
+                    size="medium"
+                    fullWidth
+                  />
+                  <Button title={t('common.next')} onPress={() => {
+                    if (!selectedDocumentType) {
+                      showAlert('Error', 'Document type not selected');
+                      return;
+                    }
+                    if (currentSide === 'back' || selectedDocumentType.type === 'passport') {
+                      actions.nextComponent();
+                      return;
+                    } else {
+                      setShowCamera(true);
+                      setCurrentSide('back');
+                      setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', mrz: '', templatePath: '' }));
+                      setCropImageUri('');
+                    }
+                  }}
+                    variant="primary"
+                    size="large"
+                    fullWidth
+                  />
+                </>
+              )}
+            </View>
+          </View>
+        </ScrollView>
+
+
+
+        {error && (
+          <Text style={styles.errorText}>{error}</Text>
+        )}
+
+        {/* Cross-Device / Continue on Phone Button (Web Only) */}
+        {Platform.OS === 'web' && !isMobileWeb() && !capturedImages[currentSide]?.dir && (
+          <Button title={t('kyc.idCardCapture.continueOnPhone')} onPress={() => { setShowQRModal(true) }} />
+        )}
+
+        {/* QR Code Modal - Web Only */}
+        {Platform.OS === 'web' && (
+          <Modal
+            visible={showQRModal}
+            transparent={true}
+            animationType="fade"
+            onRequestClose={() => setShowQRModal(false)}
+          >
+            <View style={styles.modalOverlay}>
+              <View style={styles.modalContent}>
+                <Text style={styles.modalTitle}>
+                  {t('kyc.idCardCapture.continueOnMobile')}
+                </Text>
+                <Text style={styles.modalDescription}>
+                  {t('kyc.idCardCapture.scanQrCode')}
+                </Text>
+
+                {showQRModal && getQrCodeUrl() ? (
+                  <Image
+                    source={{ uri: getQrCodeUrl() }}
+                    style={styles.qrCodeImage}
+                  />
+                ) : null}
+
+                <TouchableOpacity
+                  style={styles.closeButton}
+                  onPress={() => setShowQRModal(false)}
+                >
+                  <Text style={styles.closeButtonText}>
+                    {t('common.close')}
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </Modal>
+        )}
+
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    maxWidth: 760,
+    width: '100%',
+  },
+  container: {
+    backgroundColor: 'white',
+    margin: 10,
+    borderRadius: 10,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    // shadow
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.35,
+    shadowRadius: 4.84,
+    elevation: 10,
+    // padding: 16,
+  },
+  cameraContainer: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  previewContainer: {
+    width: '95%',
+    backgroundColor: 'white',
+    margin: 10,
+    borderRadius: 10,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+  previewItemContainer: {
+
+    // marginBottom: 24,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 18,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  sideInfo: {
+    fontSize: 14,
+    color: '#888',
+    textAlign: 'center',
+    marginBottom: 16,
+    fontStyle: 'italic',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  sidesContainer: {
+    flex: 1,
+  },
+  sideContainer: {
+    marginBottom: 24,
+  },
+  sideTitle: {
+    fontSize: 25,
+    fontWeight: 'bold',
+    color: '#000',
+    marginBottom: 12,
+    textAlign: 'center',
+  },
+  captureButton: {
+    borderWidth: 2,
+    borderColor: '#2DBD60',
+    borderStyle: 'dashed',
+    borderRadius: 12,
+    padding: 32,
+    alignItems: 'center',
+    backgroundColor: '#f0f9f0',
+  },
+  captureIcon: {
+    fontSize: 48,
+    marginBottom: 16,
+  },
+  captureText: {
+    fontSize: 16,
+    color: '#2DBD60',
+    fontWeight: '600',
+  },
+  capturedImageContainer: {
+    position: 'relative',
+  },
+  capturedImage: {
+    width: '100%',
+    height: 200,
+    borderRadius: 12,
+    resizeMode: 'contain',
+    backgroundColor: '#f0f0f0',
+  },
+  retakeButton: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 6,
+  },
+  retakeButtonText: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  camera: {
+    flex: 1,
+  },
+  completionContainer: {
+    marginTop: 24,
+    alignItems: 'center',
+  },
+  completionText: {
+    fontSize: 16,
+    color: '#2DBD60',
+    fontWeight: '600',
+    marginBottom: 16,
+  },
+  primaryButton: {
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+    // minWidth: 120,
+    alignItems: 'center',
+    backgroundColor: '#2DBD60',
+  },
+  primaryButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+  crossDeviceButton: {
+    marginTop: 16,
+    padding: 12,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#2DBD60',
+    borderRadius: 8,
+    backgroundColor: '#f0f9f0',
+  },
+  crossDeviceText: {
+    color: '#2DBD60',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    borderRadius: 16,
+    padding: 24,
+    alignItems: 'center',
+    width: '90%',
+    maxWidth: 340,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  modalTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginBottom: 12,
+    color: '#333',
+  },
+  modalDescription: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 20,
+    lineHeight: 22,
+  },
+  qrCodeImage: {
+    width: 200,
+    height: 200,
+    marginBottom: 20,
+  },
+  closeButton: {
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    backgroundColor: '#f5f5f5',
+    borderRadius: 8,
+  },
+  closeButtonText: {
+    fontSize: 16,
+    color: '#666',
+    fontWeight: '600',
+  },
+  floatingErrorBanner: {
+    position: 'absolute',
+    top: 60, // Pushes it down slightly from the very top of the screen
+    left: '10%',
+    right: '10%',
+    backgroundColor: 'rgba(220, 38, 38, 0.95)', // Bright red
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 5,
+    elevation: 8,
+    zIndex: 100,
+  },
+  floatingErrorText: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+});