@transfergratis/react-native-sdk 0.1.23 → 0.1.25

package/build/hooks/useTemplateKYCFlow.js

@@ -3,8 +3,8 @@ import kycService, { authentification, truncateFields } from '../modules/api/KYC
 import useI18n from './useI18n';
 import { logger } from '../utils/logger';
 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, }) => {
+    const hookResult = useTemplateKYCFlow(template, onComplete, onError, onCancel, initialLanguage, apiKey, env, existingSessionId);
     return (<TemplateKYCFlowContext.Provider value={hookResult}>
       {children}
     </TemplateKYCFlowContext.Provider>);
@@ -17,7 +17,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, initialStep) => {
     const { setLocale } = useI18n();
     useEffect(() => {
         setLocale(initialLanguage);
@@ -71,28 +71,270 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
     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,
+    const buildInitialState = () => {
+        // Valider initialStep pour s'assurer qu'il est dans les limites du template
+        let validInitialStep = 0;
+        let completedComponents = [];
+        logger.log('buildInitialState called', { initialStep, existingSessionId });
+        if (initialStep !== undefined && initialStep >= 0) {
+            const maxIndex = templateWithReviewAndVerification.components.length - 1;
+            const requestedStep = Math.min(initialStep, maxIndex);
+            const requestedComponent = templateWithReviewAndVerification.components[requestedStep];
+            logger.log('Processing initialStep', {
+                initialStep,
+                requestedStep,
+                maxIndex,
+                componentType: requestedComponent?.type,
+                componentId: requestedComponent?.id
+            });
+            // Si on reprend à l'étape id_card, on peut rester à id_card si on a une session existante
+            // car les données de country_selection peuvent être chargées depuis la session
+            if (requestedComponent?.type === 'id_card') {
+                // Si on a une session existante, on peut rester à id_card et charger les données
+                if (existingSessionId) {
+                    logger.log('id_card with existing session - staying at id_card');
+                    validInitialStep = requestedStep;
+                    // Marquer les composants précédents comme complétés
+                    if (validInitialStep > 0) {
+                        completedComponents = templateWithReviewAndVerification.components
+                            .slice(0, validInitialStep)
+                            .map(component => component.id);
+                    }
+                }
+                else {
+                    // Si pas de session, revenir à country_selection pour refaire le choix
+                    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) {
+                        validInitialStep = countrySelectionIndex;
+                        // Marquer les composants avant country_selection comme complétés
+                        if (countrySelectionIndex > 0) {
+                            completedComponents = templateWithReviewAndVerification.components
+                                .slice(0, countrySelectionIndex)
+                                .map(component => component.id);
+                        }
+                    }
+                    else {
+                        // Si pas de country_selection, commencer au début
+                        validInitialStep = 0;
+                    }
+                }
+            }
+            else if (requestedComponent?.type === 'review_submit') {
+                // Si on reprend au review_submit, on ne marque pas les composants précédents
+                // pour permettre à l'utilisateur de revenir en arrière et vérifier/modifier les données
+                validInitialStep = requestedStep;
+                // Ne pas marquer les composants précédents comme complétés
+                completedComponents = [];
+            }
+            else {
+                // Pour les autres composants (selfie, etc.), commencer directement à l'étape demandée
+                validInitialStep = requestedStep;
+                // Marquer tous les composants précédents comme complétés
+                // Cela permet à l'utilisateur de continuer sans refaire les étapes précédentes
+                if (validInitialStep > 0) {
+                    completedComponents = templateWithReviewAndVerification.components
+                        .slice(0, validInitialStep)
+                        .map(component => component.id);
+                }
+            }
+            logger.log('Final initial state', {
+                validInitialStep,
+                completedComponentsCount: completedComponents.length,
+                componentAtStep: templateWithReviewAndVerification.components[validInitialStep]?.type
+            });
+        }
+        return {
+            template: templateWithReviewAndVerification,
+            currentComponentIndex: validInitialStep,
+            completedComponents: completedComponents,
+            componentData: {},
+            errors: {},
             isProcessing: false,
-            error: null,
-        },
-        verification: {
-            status: 'idle',
-        },
-    });
+            currentLanguage: initialLanguage,
+            showCustomStepper: true,
+            session: {
+                session_id: existingSessionId || '',
+                token: '',
+                isInitialized: false,
+                isProcessing: false,
+                error: null,
+            },
+            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 initialStep n'est pas défini ou est 0, on ne charge pas (début de session)
+            if (initialStep === undefined || initialStep === 0) {
+                logger.log('initialStep 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, step: initialStep });
+                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'à l'étape initiale (incluse) pour restaurer leurs données
+                    // Utiliser initialStep + 1 pour inclure le composant à l'étape initialStep
+                    templateWithReviewAndVerification.components
+                        .slice(0, initialStep + 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') {
+                            // Les données de sélection de pays peuvent être dans metadata
+                            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 || {}),
+                                };
+                            }
+                        }
+                    });
+                    // 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,
+                            },
+                        }));
+                        logger.log('Component data updated in state');
+                    }
+                    else {
+                        logger.log('No component data to restore from session');
+                    }
+                }
+            }
+            catch (error) {
+                logger.error('Error loading session data:', truncateFields(error));
+                // Ne pas bloquer le flux si le chargement échoue
+            }
+        };
+        loadSessionData();
+    }, [existingSessionId, initialStep, state.session.isInitialized, state.session.session_id, templateWithReviewAndVerification.components, base64ToDataUri]);
     const mapComponentTypeToAction = useCallback((type) => {
         switch (type) {
             case 'id_card':
@@ -107,6 +349,9 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
             case 'country_selection':
                 // No direct backend action; pack into metadata of next actionable step
                 return null;
+            case 'welcome':
+                // UI-only step, no backend action needed
+                return null;
             case 'initialization':
                 return 'initialize_session';
             case 'verification_progress':
@@ -137,7 +382,7 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
     // Build backend-friendly payloads per action
     const buildPayloadForComponent = useCallback((action, component, rawData, templateId, step) => {
         console.log('apiKey in buildPayloadForComponent', apiKey);
-        const base = { template_id: null, step: component.order, permissionGranted: true };
+        const base = { template_id: templateId || null, templateId: templateId || null, step: component.order, permissionGranted: true };
         if (!action) {
             return base;
         }
@@ -164,9 +409,12 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
             const idCardID = Object.keys(state.componentData).find((c) => c === "1");
             if (idCardID) {
                 const _idCardData = state.componentData[idCardID];
-                return { ...base, documents, country: _idCardData?.country || '', documentType: _idCardData?.documentType || 'identity_card' };
+                const documentType = _idCardData?.documentType;
+                // Map national_id to identity_card for selfie capture
+                const mappedDocumentType = documentType === 'national_id' ? 'identity_card' : (documentType || 'identity_card');
+                return { ...base, documents, country: _idCardData?.country || '', documentType: mappedDocumentType };
             }
-            // return { ...base, documents };
+            return { ...base, documents };
         }
         if (action === 'location_permission') {
             return { ...base, ...({ metadata: rawData || {} }), ...({ permissionGranted: true, }) };
@@ -217,7 +465,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);
@@ -285,6 +543,19 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
                 // Vérifier si un pays a été sélectionné
                 logger.log("componentData", truncateFields(componentData), componentId);
                 return componentData && componentData.code && componentData.regionMapping;
+            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:
@@ -315,10 +586,16 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
             const currentComp = state.template.components[state.currentComponentIndex];
             if (!currentComp)
                 return;
-            setState(prev => ({
-                ...prev,
-                isProcessing: true,
-            }));
+            // Prevent multiple simultaneous calls
+            setState(prev => {
+                if (prev.isProcessing) {
+                    return prev;
+                }
+                return {
+                    ...prev,
+                    isProcessing: true,
+                };
+            });
             // Valider le composant actuel
             if (!validateComponent(currentComp.id)) {
                 setState(prev => ({
@@ -333,8 +610,13 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
             }
             try {
                 const component = state.template.components.find(c => c.id === currentComp.id);
-                if (!component)
+                if (!component) {
+                    setState(prev => ({
+                        ...prev,
+                        isProcessing: false,
+                    }));
                     return;
+                }
                 if (component.type === 'review_submit') {
                     // Move to verification screen and mark verification in progress
                     setState(prev => ({
@@ -392,7 +674,7 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
                     session_id: state.session.session_id,
                     step: step,
                     data: payloadData,
-                    templateId: null,
+                    templateId: templateId,
                     token: state.session.token,
                     action: action,
                     apiKey: apiKey ?? "-",
@@ -412,7 +694,7 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
                 }));
             }
             catch (error) {
-                // console.error('Error validating component:', error);
+                logger.error('Error in nextComponent:', error);
                 setState(prev => ({
                     ...prev,
                     isProcessing: false,
@@ -422,7 +704,7 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
                     }
                 }));
             }
-        }, [canGoNext, state.currentComponentIndex, state.template.components, validateComponent, apiKey, state.session.session_id, state.session.token]),
+        }, [canGoNext, state.currentComponentIndex, state.template.components, validateComponent, apiKey, state.session.session_id, state.session.token, buildPayloadForComponent, mapComponentTypeToAction, chooseTemplateId, state.currentLanguage]),
         // Retourner au composant précédent
         previousComponent: useCallback(() => {
             if (!canGoPrevious)
@@ -531,6 +813,7 @@ export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, init
         isComplete,
         getLocalizedText,
         initializeSession,
+        env,
     };
 };
 //# sourceMappingURL=useTemplateKYCFlow.js.map