@transfergratis/react-native-sdk 0.1.24 → 0.1.26

package/src/hooks/useTemplateKYCFlow.tsx

@@ -1,8 +1,11 @@
 import React, { useState, useCallback, useMemo, createContext, useContext, ReactNode, useEffect } from 'react';
 import { KYCTemplate, TemplateState, TemplateActions, UseTemplateReturn, TemplateComponent, GovernmentDocumentType, VerificationState } from '../types/KYC.types';
+import { KycEnvironment } from '../types/env.types';
 import kycService, { authentification, truncateFields } from '../modules/api/KYCService';
 import useI18n from './useI18n';
 import { logger } from '../utils/logger';
+import { countryMapping } from '../config/region_mapping';
+import { countryData } from '../config/countriesData';
 
 // Context pour le provider
 interface TemplateKYCFlowContextType {
@@ -15,6 +18,8 @@ interface TemplateKYCFlowContextType {
   isComplete: boolean;
   getLocalizedText: (text: { en: string; fr: string;[key: string]: string }) => string;
   initializeSession: () => Promise<void>;
+  env: KycEnvironment;
+  apiKey?: string;
 }
 
 const TemplateKYCFlowContext = createContext<TemplateKYCFlowContextType | undefined>(undefined);
@@ -28,6 +33,12 @@ interface TemplateKYCFlowProviderProps {
   onCancel?: () => void;
   initialLanguage?: string;
   apiKey?: string;
+  env?: KycEnvironment;
+  existingSessionId?: string;
+  /** Index in template.components where to resume (0-based). Simple to store in template table. */
+  initialComponentIndex?: number;
+  /** Pays / type de document depuis l'URL de reprise — évite de dépendre du backend pour afficher les pays. */
+  initialCountryResume?: { code: string; documentType: string; region?: string };
 }
 
 export const TemplateKYCFlowProvider: React.FC<TemplateKYCFlowProviderProps> = ({
@@ -38,8 +49,12 @@ export const TemplateKYCFlowProvider: React.FC<TemplateKYCFlowProviderProps> = (
   onCancel,
   initialLanguage = 'en',
   apiKey,
+  env = 'PRODUCTION',
+  existingSessionId,
+  initialComponentIndex,
+  initialCountryResume,
 }) => {
-  const hookResult = useTemplateKYCFlow(template, onComplete, onError, onCancel, initialLanguage, apiKey);
+  const hookResult = useTemplateKYCFlow(template, onComplete, onError, onCancel, initialLanguage, apiKey, env, existingSessionId, initialComponentIndex, initialCountryResume);
 
   return (
     <TemplateKYCFlowContext.Provider value={hookResult}>
@@ -64,6 +79,10 @@ export const useTemplateKYCFlow = (
   onCancel?: () => void,
   initialLanguage: string = 'en',
   apiKey?: string,
+  env: KycEnvironment = 'PRODUCTION',
+  existingSessionId?: string,
+  initialComponentIndex?: number,
+  initialCountryResume?: { code: string; documentType: string; region?: string },
 ): UseTemplateReturn => {
 
   const { setLocale } = useI18n();
@@ -130,30 +149,348 @@ export const useTemplateKYCFlow = (
   const templateWithReview = useMemo(() => ensureReviewSubmitStep(template), [template, ensureReviewSubmitStep, apiKey]);
   const templateWithReviewAndVerification = useMemo(() => ensureVerificationProgressStep(templateWithReview), [templateWithReview, ensureVerificationProgressStep, apiKey]);
 
-  // État initial du flux
-  const buildInitialState = (): TemplateState => ({
-    template: templateWithReviewAndVerification,
-    currentComponentIndex: 0,
-    completedComponents: [],
-    componentData: {},
-    errors: {},
-    isProcessing: false,
-    currentLanguage: initialLanguage,
-    showCustomStepper: true,
-    session: {
-      session_id: '',
-      token: '',
-      isInitialized: false,
+  // État initial du flux (initialComponentIndex = index dans template.components pour reprendre au bon composant)
+  const buildInitialState = (): TemplateState => {
+    let resumeAtIndex = 0;
+    let completedComponents: number[] = [];
+    let initialComponentData: Record<number, unknown> = {};
+
+    logger.log('buildInitialState called', { initialComponentIndex, existingSessionId, initialCountryResume });
+
+    if (initialComponentIndex !== undefined && initialComponentIndex >= 0) {
+      const maxIndex = templateWithReviewAndVerification.components.length - 1;
+      const requestedIndex = Math.min(initialComponentIndex, maxIndex);
+      const requestedComponent = templateWithReviewAndVerification.components[requestedIndex];
+
+      logger.log('Processing initialComponentIndex (component in template)', {
+        initialComponentIndex,
+        requestedIndex,
+        maxIndex,
+        componentType: requestedComponent?.type,
+        componentId: requestedComponent?.id,
+      });
+
+      // Reprendre au composant en cours (id_card, selfie, etc.)
+      if (requestedComponent?.type === 'id_card') {
+        if (existingSessionId) {
+          logger.log('id_card with existing session - staying at id_card');
+          resumeAtIndex = requestedIndex;
+          if (resumeAtIndex > 0) {
+            completedComponents = templateWithReviewAndVerification.components
+              .slice(0, resumeAtIndex)
+              .map(component => component.id);
+          }
+        } else {
+          const countrySelectionIndex = templateWithReviewAndVerification.components.findIndex(
+            c => c.type === 'country_selection'
+          );
+          logger.log('id_card without session - going back to country_selection', { countrySelectionIndex });
+          if (countrySelectionIndex >= 0) {
+            resumeAtIndex = countrySelectionIndex;
+            if (countrySelectionIndex > 0) {
+              completedComponents = templateWithReviewAndVerification.components
+                .slice(0, countrySelectionIndex)
+                .map(component => component.id);
+            }
+          } else {
+            resumeAtIndex = 0;
+          }
+        }
+      } else if (requestedComponent?.type === 'review_submit') {
+        resumeAtIndex = requestedIndex;
+        completedComponents = [];
+      } else {
+        resumeAtIndex = requestedIndex;
+        if (resumeAtIndex > 0) {
+          completedComponents = templateWithReviewAndVerification.components
+            .slice(0, resumeAtIndex)
+            .map(component => component.id);
+        }
+      }
+
+      logger.log('Final initial state (resume at component index)', {
+        resumeAtIndex,
+        completedComponentsCount: completedComponents.length,
+        componentAtResume: templateWithReviewAndVerification.components[resumeAtIndex]?.type,
+      });
+    }
+
+    if (initialCountryResume?.code && initialCountryResume?.documentType) {
+      const countrySel = templateWithReviewAndVerification.components.find(c => c.type === 'country_selection');
+      if (countrySel && countryData[initialCountryResume.code]) {
+        initialComponentData[countrySel.id] = {
+          code: initialCountryResume.code,
+          documentType: initialCountryResume.documentType,
+          region: initialCountryResume.region || 'root',
+          ...countryData[initialCountryResume.code],
+        };
+        logger.log('Prefilled country_selection from URL', { code: initialCountryResume.code, documentType: initialCountryResume.documentType });
+      }
+    }
+
+    return {
+      template: templateWithReviewAndVerification,
+      currentComponentIndex: resumeAtIndex,
+      completedComponents: completedComponents,
+      componentData: initialComponentData,
+      errors: {},
       isProcessing: false,
-      error: null,
-    },
-    verification: {
-      status: 'idle',
-    },
-  });
+      currentLanguage: initialLanguage,
+      showCustomStepper: true,
+      session: {
+        session_id: existingSessionId || '',
+        token: '',
+        isInitialized: false,
+        isProcessing: false,
+        error: null,
+        sessionDataRestored: !existingSessionId || Boolean(initialCountryResume?.code && initialCountryResume?.documentType),
+      },
+      verification: {
+        status: 'idle',
+      },
+    };
+  };
 
   // État du flux
   const [state, setState] = useState<TemplateState>(() => buildInitialState());
+  
+  // Fonction utilitaire pour convertir base64 en data URI pour l'affichage
+  const base64ToDataUri = useCallback((base64: string, mimeType: string = 'image/jpeg'): string => {
+    // Si c'est déjà une data URI, retourner tel quel
+    if (base64.startsWith('data:')) {
+      return base64;
+    }
+    // Sinon, créer une data URI
+    return `data:${mimeType};base64,${base64}`;
+  }, []);
+
+  // Charger les données de session si on reprend une session existante
+  useEffect(() => {
+    const loadSessionData = async () => {
+      // Ne charger que si on a une session existante
+      if (!existingSessionId) {
+        logger.log('No existingSessionId, skipping data load');
+        return;
+      }
+
+      // Si initialComponentIndex n'est pas défini ou est 0, on ne charge pas (début de session)
+      if (initialComponentIndex === undefined || initialComponentIndex === 0) {
+        logger.log('initialComponentIndex is 0 or undefined, skipping data load');
+        return;
+      }
+
+      // Attendre que la session soit initialisée
+      if (!state.session.isInitialized || !state.session.session_id) {
+        logger.log('Session not initialized yet, waiting...', {
+          isInitialized: state.session.isInitialized,
+          sessionId: state.session.session_id
+        });
+        return;
+      }
+
+      try {
+        logger.log('Loading session data for resume:', { sessionId: existingSessionId, componentIndex: initialComponentIndex });
+        const result = await kycService.getVerificationResult(state.session.session_id);
+        const sessionData = result[state.session.session_id]?.data;
+
+        if (sessionData) {
+          // Restaurer les données des composants depuis la session
+          // Utiliser 'as any' car VerificationResult peut avoir des propriétés dynamiques
+          const data: any = sessionData;
+          const restoredComponentData: Record<number, any> = {};
+
+          // Parcourir les composants jusqu'au composant de reprise (inclu) pour restaurer leurs données
+          templateWithReviewAndVerification.components
+            .slice(0, initialComponentIndex + 1)
+            .forEach((component) => {
+              // Essayer de restaurer les données selon le type de composant
+              if (component.type === 'id_card' || component.type === 'file_upload') {
+                // Les documents peuvent être dans différentes structures
+                let documents: any = null;
+                
+                // Chercher dans différentes structures possibles
+                if (data.documents) {
+                  documents = data.documents;
+                } else if (data.user_data?.documents) {
+                  documents = data.user_data.documents;
+                } else if (data.document_images) {
+                  documents = data.document_images;
+                }
+
+                if (documents) {
+                  // Convertir les images base64 en format utilisable
+                  const restoredDocuments: Record<string, any> = {};
+                  
+                  Object.keys(documents).forEach((key) => {
+                    const doc = documents[key];
+                    if (typeof doc === 'object' && doc !== null) {
+                      // Si on a un fichier base64, créer une structure avec dir et file
+                      if (doc.file || doc.base64) {
+                        const base64Data = doc.file || doc.base64;
+                        restoredDocuments[key] = {
+                          dir: base64ToDataUri(base64Data), // Utiliser data URI pour l'affichage
+                          file: base64Data, // Garder le base64 pour l'envoi
+                          mrz: doc.mrz || '',
+                          templatePath: doc.templatePath || '',
+                        };
+                      } else {
+                        // Sinon, garder la structure originale
+                        restoredDocuments[key] = doc;
+                      }
+                    } else if (typeof doc === 'string') {
+                      // Si c'est directement une string base64
+                      restoredDocuments[key] = {
+                        dir: base64ToDataUri(doc),
+                        file: doc,
+                        mrz: '',
+                        templatePath: '',
+                      };
+                    }
+                  });
+
+                  if (Object.keys(restoredDocuments).length > 0) {
+                    restoredComponentData[component.id] = restoredDocuments;
+                  }
+                }
+              } else if (component.type === 'selfie') {
+                // Les selfies peuvent être dans sessionData.selfie_info
+                if (data.selfie_info) {
+                  const selfieData: Record<string, any> = {};
+                  const selfieInfo: any = data.selfie_info;
+                  
+                  // Si selfie_info contient une image
+                  if (selfieInfo.image) {
+                    const base64Image = selfieInfo.image;
+                    selfieData['front'] = {
+                      dir: base64ToDataUri(base64Image),
+                      file: base64Image,
+                    };
+                  }
+                  
+                  // Si on a plusieurs orientations
+                  if (selfieInfo.orientations) {
+                    Object.keys(selfieInfo.orientations).forEach((orientation) => {
+                      const img = selfieInfo.orientations[orientation];
+                      if (img) {
+                        selfieData[orientation] = {
+                          dir: base64ToDataUri(img),
+                          file: img,
+                        };
+                      }
+                    });
+                  }
+
+                  if (Object.keys(selfieData).length > 0) {
+                    restoredComponentData[component.id] = selfieData;
+                  }
+                }
+              } else if (component.type === 'country_selection') {
+                // Reconstruire country_selection au format attendu par IDCardCapture / CountrySelectionTemplate (code, documentType, region, regionMapping)
+                const meta = data.metadata || data.user_data || data;
+                const code = meta.country || meta.country_code || meta.code;
+                const documentType = meta.document_type || meta.documentType;
+                const region = meta.region;
+                if (code && documentType != null) {
+                  const country = countryData[code];
+                  const mapping = countryMapping[code as keyof typeof countryMapping];
+                  if (country) {
+                    restoredComponentData[component.id] = {
+                      code,
+                      ...country,
+                      documentType,
+                      region: region || undefined,
+                      regionMapping: mapping || undefined,
+                    };
+                    logger.log('Restored country_selection for resume', { code, documentType, region });
+                  } else {
+                    restoredComponentData[component.id] = { code, documentType, region: region || undefined, regionMapping: mapping || undefined };
+                  }
+                } else if (data.metadata || data.user_data) {
+                  restoredComponentData[component.id] = {
+                    ...(data.metadata || {}),
+                    ...(data.user_data || {}),
+                  };
+                }
+              } else if (component.type === 'location') {
+                // Les données de localisation peuvent être dans metadata
+                if (data.metadata?.location || data.user_data?.location) {
+                  restoredComponentData[component.id] = {
+                    ...(data.metadata?.location || {}),
+                    ...(data.user_data?.location || {}),
+                  };
+                }
+              }
+            });
+
+          // Fallback: si pas de country_selection restauré mais on a des documents avec templatePath, déduire code/documentType (ex. "templates/national_id_CM_front.jpg")
+          const countrySelectionComponent = templateWithReviewAndVerification.components.find(c => c.type === 'country_selection');
+          if (countrySelectionComponent && !restoredComponentData[countrySelectionComponent.id] && data.documents) {
+            const docs = data.documents as Record<string, { templatePath?: string }>;
+            const firstDoc = Object.values(docs).find(d => d?.templatePath);
+            const path = firstDoc?.templatePath || '';
+            const match = path.match(/([a-z_]+)_([A-Z]{2})(?:_|$)/i) || path.match(/([A-Z]{2})/);
+            const code = match ? (match[2] || match[1]).toUpperCase().slice(0, 2) : null;
+            const docTypeFromPath = path.match(/(national_id|identity_card|passport|passport_card)/i)?.[1]?.toLowerCase().replace('identity_card', 'national_id') || null;
+            if (code && countryData[code]) {
+              const documentType = docTypeFromPath || 'national_id';
+              const mapping = countryMapping[code as keyof typeof countryMapping];
+              const country = countryData[code];
+              restoredComponentData[countrySelectionComponent.id] = {
+                code,
+                ...country,
+                documentType,
+                region: undefined,
+                regionMapping: mapping || undefined,
+              };
+              logger.log('Restored country_selection from document templatePath', { code, documentType, path });
+            }
+          }
+
+          // Mettre à jour l'état avec les données restaurées
+          if (Object.keys(restoredComponentData).length > 0) {
+            logger.log('Session data restored - components:', Object.keys(restoredComponentData));
+            logger.log('Session data restored - sample data:', truncateFields(restoredComponentData));
+            setState(prev => ({
+              ...prev,
+              componentData: {
+                ...prev.componentData,
+                ...restoredComponentData,
+              },
+              session: { ...prev.session, sessionDataRestored: true },
+            }));
+            logger.log('Component data updated in state');
+          } else {
+            logger.log('No component data to restore from session');
+            setState(prev => ({ ...prev, session: { ...prev.session, sessionDataRestored: true } }));
+          }
+        } else {
+          setState(prev => ({ ...prev, session: { ...prev.session, sessionDataRestored: true } }));
+        }
+      } catch (error) {
+        logger.error('Error loading session data:', truncateFields(error));
+        setState(prev => ({ ...prev, session: { ...prev.session, sessionDataRestored: true } }));
+      }
+    };
+
+    loadSessionData();
+  }, [existingSessionId, initialComponentIndex, state.session.isInitialized, state.session.session_id, templateWithReviewAndVerification.components, base64ToDataUri]);
+
+  // Si l'index pointe vers Review alors que des étapes ne sont pas complétées, ramener à la première étape incomplète
+  useEffect(() => {
+    const comp = state.template.components[state.currentComponentIndex];
+    if (!comp || comp.type !== 'review_submit') return;
+    const nonReview = state.template.components.filter(
+      c => c.type !== 'review_submit' && c.type !== 'verification_progress'
+    );
+    if (nonReview.every(c => state.completedComponents.includes(c.id))) return;
+    const firstIncomplete = nonReview.find(c => !state.completedComponents.includes(c.id));
+    if (!firstIncomplete) return;
+    const targetIndex = state.template.components.findIndex(c => c.id === firstIncomplete.id);
+    if (targetIndex >= 0 && targetIndex !== state.currentComponentIndex) {
+      setState(prev => ({ ...prev, currentComponentIndex: targetIndex }));
+    }
+  }, [state.currentComponentIndex, state.completedComponents, state.template.components]);
+
   const mapComponentTypeToAction = useCallback((type: TemplateComponent['type']): string | null => {
     switch (type) {
       case 'id_card':
@@ -208,7 +545,7 @@ export const useTemplateKYCFlow = (
     if (!action) {
       return base;
     }
-    // Document upload expects an array of documents with base64 and metadata
+    // Document upload expects documents; include country_selection in metadata so resume can restore it
     if (action === 'document_upload') {
       const documents: Record<string, any> = {};
       if (rawData && typeof rawData === 'object') {
@@ -216,9 +553,18 @@ export const useTemplateKYCFlow = (
           documents[key] = rawData[key];
         });
       }
+      const countryComp = state.template.components.find(c => c.type === 'country_selection');
+      const countryDataForPayload = countryComp ? state.componentData[countryComp.id] : null;
+      const metadata: Record<string, unknown> = {};
+      if (countryDataForPayload?.code) {
+        metadata.country = countryDataForPayload.code;
+        metadata.document_type = countryDataForPayload.documentType;
+        if (countryDataForPayload.region != null) metadata.region = countryDataForPayload.region;
+      }
       return {
         ...base,
         documents,
+        ...(Object.keys(metadata).length > 0 ? { metadata } : {}),
       };
     }
 
@@ -253,17 +599,29 @@ export const useTemplateKYCFlow = (
   // console.log('apiKey in useTemplateKYCFlow', apiKey);
 
 
-  // Composant actuel
+  // Composant actuel (peut être redirigé si on pointe vers Review alors que le flux n'est pas terminé)
   const currentComponent = useMemo(() => {
-    return state.template.components[state.currentComponentIndex] || null;
-  }, [state.template.components, state.currentComponentIndex, apiKey]);
-
-  // Progression du flux
+    const comp = state.template.components[state.currentComponentIndex] || null;
+    if (!comp || comp.type !== 'review_submit') return comp;
+    const nonReview = state.template.components.filter(
+      c => c.type !== 'review_submit' && c.type !== 'verification_progress'
+    );
+    const allDone = nonReview.every(c => state.completedComponents.includes(c.id));
+    if (allDone) return comp;
+    const firstIncomplete = nonReview.find(c => !state.completedComponents.includes(c.id));
+    return firstIncomplete || comp;
+  }, [state.template.components, state.currentComponentIndex, state.completedComponents, apiKey]);
+
+  // Progression du flux (basée sur le composant effectivement affiché)
   const progress = useMemo(() => {
+    const idx = currentComponent
+      ? state.template.components.findIndex(c => c.id === currentComponent.id)
+      : state.currentComponentIndex;
+    const i = idx >= 0 ? idx : state.currentComponentIndex;
     return state.template.components.length > 0
-      ? ((state.currentComponentIndex + 1) / state.template.components.length) * 100
+      ? ((i + 1) / state.template.components.length) * 100
       : 0;
-  }, [state.currentComponentIndex, state.template.components.length, apiKey]);
+  }, [currentComponent, state.template.components, state.currentComponentIndex, apiKey]);
 
   // Vérifications de navigation
   const canGoNext = useMemo(() => {
@@ -301,7 +659,18 @@ export const useTemplateKYCFlow = (
 
       const token = apiKey ? undefined : await authentification();
       console.log('token in initializeSession', { token, apiKey },);
-      const session = await kycService.newSession({token,apiKey});
+
+      // Check if we already have a session ID from URL params (passed via state or prop)
+      let session;
+      const existingSessionId = state.session.session_id; // This might be set from initial props if we add logic for it
+
+      if (existingSessionId && existingSessionId.length > 0) {
+        logger.log('Resuming existing session:', existingSessionId);
+        // Verify existence/validity if needed, for now trust the ID and just fetch/use it
+        session = { session_id: existingSessionId };
+      } else {
+        session = await kycService.newSession({ token, apiKey });
+      }
 
       // Align backend flow from step 0 with initialize_session
       try {
@@ -345,12 +714,21 @@ export const useTemplateKYCFlow = (
       }));
     }
   }, [apiKey]);
-  // Validation d'un composant
-  const validateComponent = useCallback((componentId: number): boolean => {
+
+  // When user switches device: resume with existingSessionId + initialStep — ensure session is initialized so loadSessionData runs
+  useEffect(() => {
+    if (!existingSessionId || state.session.isInitialized) return;
+    if (state.session.session_id !== existingSessionId) return;
+    logger.log('Resuming on new device: initializing session so data can load', { existingSessionId, initialComponentIndex });
+    initializeSession();
+  }, [existingSessionId, state.session.session_id, state.session.isInitialized, initializeSession]);
+
+  // Validation d'un composant (dataOverride permet de valider sans attendre la mise à jour du state)
+  const validateComponent = useCallback((componentId: number, dataOverride?: any): boolean => {
     const component = state.template.components.find(c => c.id === componentId);
     if (!component) return false;
 
-    const componentData = state.componentData[componentId];
+    const componentData = dataOverride !== undefined ? dataOverride : state.componentData[componentId];
 
     switch (component.type) {
       case 'id_card':
@@ -381,6 +759,20 @@ export const useTemplateKYCFlow = (
         // Welcome is valid once user has given consent (componentData is set when they click Get Started)
         return componentData && componentData.consentGiven !== false;
 
+      case 'email_verification':
+        return componentData && componentData.verified === true;
+
+      case 'phone_verification':
+        return componentData && componentData.verified === true;
+
+      case 'personal_information':
+        return componentData && Object.keys(componentData).length > 0;
+
+      case 'additional_documents':
+        // Optional by default in template config, but if required we should check based on config
+        // For now, return true or check length if present
+        return true;
+
       case 'review_submit':
         return true;
       default:
@@ -406,8 +798,8 @@ export const useTemplateKYCFlow = (
       }));
     }, [ensureReviewSubmitStep, ensureVerificationProgressStep, apiKey]),
 
-    // Passer au composant suivant
-    nextComponent: useCallback(async () => {
+    // Passer au composant suivant (overrideData = données du step courant si déjà connues, évite un double clic)
+    nextComponent: useCallback(async (overrideData?: any) => {
       if (!canGoNext) return;
 
       const currentComp = state.template.components[state.currentComponentIndex];
@@ -423,8 +815,8 @@ export const useTemplateKYCFlow = (
           isProcessing: true,
         };
       });
-      // Valider le composant actuel
-      if (!validateComponent(currentComp.id)) {
+      // Valider avec override ou state
+      if (!validateComponent(currentComp.id, overrideData)) {
         setState(prev => ({
           ...prev,
           isProcessing: false,
@@ -446,18 +838,16 @@ export const useTemplateKYCFlow = (
           }));
           return;
         }
+
         if (component.type === 'review_submit') {
-          // Move to verification screen and mark verification in progress
           setState(prev => ({
             ...prev,
             currentComponentIndex: prev.currentComponentIndex + 1,
             completedComponents: [...prev.completedComponents, currentComp.id],
+            componentData: overrideData !== undefined ? { ...prev.componentData, [currentComp.id]: overrideData } : prev.componentData,
             isProcessing: false,
             verification: { status: 'in_progress' },
-            errors: {
-              ...prev.errors,
-              [currentComp.id]: ''
-            }
+            errors: { ...prev.errors, [currentComp.id]: '' }
           }));
           return;
         }
@@ -488,18 +878,16 @@ export const useTemplateKYCFlow = (
             ...prev,
             currentComponentIndex: prev.currentComponentIndex + 1,
             completedComponents: [...prev.completedComponents, currentComp.id],
+            componentData: overrideData !== undefined ? { ...prev.componentData, [currentComp.id]: overrideData } : prev.componentData,
             isProcessing: false,
-            errors: {
-              ...prev.errors,
-              [currentComp.id]: ''
-            }
+            errors: { ...prev.errors, [currentComp.id]: '' }
           }));
           return;
         }
 
         const step = serverStep === 0 && action !== 'initialize_session' ? 1 : serverStep;
-        // Build payload data per action
-        const payloadData = buildPayloadForComponent(action, component, state.componentData[currentComp.id], templateId, step);
+        const currentStepData = overrideData !== undefined ? overrideData : state.componentData[currentComp.id];
+        const payloadData = buildPayloadForComponent(action, component, currentStepData, templateId, step);
         console.log('payloadData', action, apiKey);
 
         await kycService.verificationSession({
@@ -512,17 +900,14 @@ export const useTemplateKYCFlow = (
           apiKey: apiKey ?? "-",
         });
         logger.log("currentComp state", truncateFields(state));
-        // Marquer comme complété et passer au suivant
         setState(prev => ({
           ...prev,
           currentComponentIndex: prev.currentComponentIndex + 1,
           completedComponents: [...prev.completedComponents, currentComp.id],
+          componentData: overrideData !== undefined ? { ...prev.componentData, [currentComp.id]: overrideData } : prev.componentData,
           isProcessing: false,
           ...(action === "location_permission" ? { permissionGranted: true } : {}),
-          errors: {
-            ...prev.errors,
-            [currentComp.id]: ''
-          }
+          errors: { ...prev.errors, [currentComp.id]: '' }
         }));
 
       } catch (error) {
@@ -579,8 +964,8 @@ export const useTemplateKYCFlow = (
     }, [apiKey]),
 
     // Valider un composant
-    validateComponent: useCallback((componentId: number) => {
-      return validateComponent(componentId);
+    validateComponent: useCallback((componentId: number, dataOverride?: any) => {
+      return validateComponent(componentId, dataOverride);
     }, [validateComponent, apiKey]),
     // complet verification
     submitVerification: useCallback(async () => {
@@ -660,5 +1045,7 @@ export const useTemplateKYCFlow = (
     isComplete,
     getLocalizedText,
     initializeSession,
-  };
+    env,
+    apiKey,
+  } as UseTemplateReturn;
 };