@transfergratis/react-native-sdk 0.1.24 → 0.1.26

package/build/hooks/useTemplateKYCFlow.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { KYCTemplate, TemplateState, TemplateActions, UseTemplateReturn, VerificationState } from '../types/KYC.types';
+import { KycEnvironment } from '../types/env.types';
 interface TemplateKYCFlowContextType {
     state: TemplateState;
     actions: TemplateActions;
@@ -14,6 +15,8 @@ interface TemplateKYCFlowContextType {
         [key: string]: string;
     }) => string;
     initializeSession: () => Promise<void>;
+    env: KycEnvironment;
+    apiKey?: string;
 }
 interface TemplateKYCFlowProviderProps {
     children: ReactNode;
@@ -23,9 +26,23 @@ 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 declare const TemplateKYCFlowProvider: React.FC<TemplateKYCFlowProviderProps>;
 export declare const useTemplateKYCFlowContext: () => TemplateKYCFlowContextType;
-export declare const useTemplateKYCFlow: (template: KYCTemplate, onComplete?: (data: VerificationState) => void, onError?: (error: string) => void, onCancel?: () => void, initialLanguage?: string, apiKey?: string) => UseTemplateReturn;
+export declare const useTemplateKYCFlow: (template: KYCTemplate, onComplete?: (data: VerificationState) => void, onError?: (error: string) => void, onCancel?: () => void, initialLanguage?: string, apiKey?: string, env?: KycEnvironment, existingSessionId?: string, initialComponentIndex?: number, initialCountryResume?: {
+    code: string;
+    documentType: string;
+    region?: string;
+}) => UseTemplateReturn;
 export {};
 //# sourceMappingURL=useTemplateKYCFlow.d.ts.map

package/build/hooks/useTemplateKYCFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTemplateKYCFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useTemplateKYCFlow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6D,SAAS,EAAa,MAAM,OAAO,CAAC;AAC/G,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAA6C,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAMlK,UAAU,0BAA0B;IAClC,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,eAAe,CAAC;IACzB,gBAAgB,EAAE,GAAG,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAA,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IACrF,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC;AAKD,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAgB1E,CAAC;AAGF,eAAO,MAAM,yBAAyB,QAAO,0BAM5C,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,UAAU,WAAW,EACrB,aAAa,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,EAC9C,UAAU,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EACjC,WAAW,MAAM,IAAI,EACrB,kBAAiB,MAAa,EAC9B,SAAS,MAAM,KACd,iBAqlBF,CAAC"}
+{"version":3,"file":"useTemplateKYCFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useTemplateKYCFlow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6D,SAAS,EAAa,MAAM,OAAO,CAAC;AAC/G,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAA6C,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAClK,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAQpD,UAAU,0BAA0B;IAClC,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,eAAe,CAAC;IACzB,gBAAgB,EAAE,GAAG,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAA,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IACrF,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,GAAG,EAAE,cAAc,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAKD,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iGAAiG;IACjG,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,6GAA6G;IAC7G,oBAAoB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChF;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAoB1E,CAAC;AAGF,eAAO,MAAM,yBAAyB,QAAO,0BAM5C,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,UAAU,WAAW,EACrB,aAAa,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,EAC9C,UAAU,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EACjC,WAAW,MAAM,IAAI,EACrB,kBAAiB,MAAa,EAC9B,SAAS,MAAM,EACf,MAAK,cAA6B,EAClC,oBAAoB,MAAM,EAC1B,wBAAwB,MAAM,EAC9B,uBAAuB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,KAC7E,iBAq8BF,CAAC"}

package/build/hooks/useTemplateKYCFlow.js

@@ -2,9 +2,11 @@ import React, { useState, useCallback, useMemo, createContext, useContext, useEf
 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';
 const TemplateKYCFlowContext = createContext(undefined);
-export const TemplateKYCFlowProvider = ({ children, template, onComplete, onError, onCancel, initialLanguage = 'en', apiKey, }) => {
-    const hookResult = useTemplateKYCFlow(template, onComplete, onError, onCancel, initialLanguage, apiKey);
+export const TemplateKYCFlowProvider = ({ children, template, onComplete, onError, onCancel, initialLanguage = 'en', apiKey, env = 'PRODUCTION', existingSessionId, initialComponentIndex, initialCountryResume, }) => {
+    const hookResult = useTemplateKYCFlow(template, onComplete, onError, onCancel, initialLanguage, apiKey, env, existingSessionId, initialComponentIndex, initialCountryResume);
     return (<TemplateKYCFlowContext.Provider value={hookResult}>
       {children}
     </TemplateKYCFlowContext.Provider>);
@@ -17,7 +19,7 @@ export const useTemplateKYCFlowContext = () => {
     }
     return context;
 };
-export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, initialLanguage = 'en', apiKey) => {
+export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, initialLanguage = 'en', apiKey, env = 'PRODUCTION', existingSessionId, initialComponentIndex, initialCountryResume) => {
     const { setLocale } = useI18n();
     useEffect(() => {
         setLocale(initialLanguage);
@@ -70,29 +72,336 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
     }, [apiKey]);
     const templateWithReview = useMemo(() => ensureReviewSubmitStep(template), [template, ensureReviewSubmitStep, apiKey]);
     const templateWithReviewAndVerification = useMemo(() => ensureVerificationProgressStep(templateWithReview), [templateWithReview, ensureVerificationProgressStep, apiKey]);
-    // État initial du flux
-    const buildInitialState = () => ({
-        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 = () => {
+        let resumeAtIndex = 0;
+        let completedComponents = [];
+        let initialComponentData = {};
+        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(() => buildInitialState());
+    // Fonction utilitaire pour convertir base64 en data URI pour l'affichage
+    const base64ToDataUri = useCallback((base64, mimeType = 'image/jpeg') => {
+        // 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 = sessionData;
+                    const restoredComponentData = {};
+                    // 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 = 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 = {};
+                                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 = {};
+                                const selfieInfo = 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];
+                                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;
+                        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];
+                            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) => {
         switch (type) {
             case 'id_card':
@@ -144,7 +453,7 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
         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 = {};
             if (rawData && typeof rawData === 'object') {
@@ -152,9 +461,19 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
                     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 = {};
+            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 } : {}),
             };
         }
         if (action === 'selfie_capture') {
@@ -182,16 +501,28 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
     }, [state.componentData, apiKey]);
     // Ensure the template contains a final review step
     // 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(() => {
         return state.currentComponentIndex < state.template.components.length - 1;
@@ -223,7 +554,17 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
             logger.log('Initializing session');
             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 {
                 const templateId = chooseTemplateId(templateWithReviewAndVerification);
@@ -266,12 +607,21 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
             }));
         }
     }, [apiKey]);
-    // Validation d'un composant
-    const validateComponent = useCallback((componentId) => {
+    // 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, dataOverride) => {
         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':
                 // Vérifier si au moins un côté a été capturé
@@ -294,6 +644,16 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
             case 'welcome':
                 // 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:
@@ -317,8 +677,8 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
                 verification: { status: 'idle', result: undefined },
             }));
         }, [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) => {
             if (!canGoNext)
                 return;
             const currentComp = state.template.components[state.currentComponentIndex];
@@ -334,8 +694,8 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
                     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,
@@ -356,17 +716,14 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
                     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;
                 }
@@ -396,17 +753,15 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
                         ...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({
                     session_id: state.session.session_id,
@@ -418,17 +773,14 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
                     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) {
@@ -478,8 +830,8 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
             }));
         }, [apiKey]),
         // Valider un composant
-        validateComponent: useCallback((componentId) => {
-            return validateComponent(componentId);
+        validateComponent: useCallback((componentId, dataOverride) => {
+            return validateComponent(componentId, dataOverride);
         }, [validateComponent, apiKey]),
         // complet verification
         submitVerification: useCallback(async () => {
@@ -551,6 +903,8 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
         isComplete,
         getLocalizedText,
         initializeSession,
+        env,
+        apiKey,
     };
 };
 //# sourceMappingURL=useTemplateKYCFlow.js.map