@transfergratis/react-native-sdk 0.1.4 → 0.1.6

package/build/hooks/useTemplateKYCFlow.js

@@ -1,7 +1,9 @@
-import React, { useState, useCallback, useMemo, createContext, useContext } from 'react';
+import React, { useState, useCallback, useMemo, createContext, useContext, useEffect } from 'react';
+import kycService, { authentification, truncateFields } from '../modules/api/KYCService';
+import useI18n from './useI18n';
 const TemplateKYCFlowContext = createContext(undefined);
-export const TemplateKYCFlowProvider = ({ children, template, onComplete, onError, initialLanguage = 'en', }) => {
-    const hookResult = useTemplateKYCFlow(template, onComplete, onError, initialLanguage);
+export const TemplateKYCFlowProvider = ({ children, template, onComplete, onError, onCancel, initialLanguage = 'en', apiKey, }) => {
+    const hookResult = useTemplateKYCFlow(template, onComplete, onError, onCancel, initialLanguage, apiKey);
     return (<TemplateKYCFlowContext.Provider value={hookResult}>
       {children}
     </TemplateKYCFlowContext.Provider>);
@@ -14,10 +16,62 @@ export const useTemplateKYCFlowContext = () => {
     }
     return context;
 };
-export const useTemplateKYCFlow = (template, onComplete, onError, initialLanguage = 'en') => {
+export const useTemplateKYCFlow = (template, onComplete, onError, onCancel, initialLanguage = 'en', apiKey) => {
+    const { setLocale } = useI18n();
+    useEffect(() => {
+        setLocale(initialLanguage);
+    }, [initialLanguage]);
+    // Helpers to align SDK steps with backend actions/templates
+    const isUiOnlyStep = useCallback((type) => {
+        return type === 'verification_progress';
+    }, []);
+    const ensureReviewSubmitStep = useCallback((tpl) => {
+        const hasReview = tpl.components.some(c => c.type === 'review_submit');
+        if (hasReview)
+            return tpl;
+        const lastOrder = tpl.components.reduce((acc, c) => Math.max(acc, c.order ?? 0), 0);
+        const lastId = tpl.components.reduce((acc, c) => Math.max(acc, c.id), 0);
+        const reviewComponent = {
+            id: lastId + 1,
+            type: 'review_submit',
+            order: lastOrder + 1,
+            labels: { en: 'Review & Submit', fr: 'Revoir & Soumettre' },
+            instructions: { en: 'Confirm and submit', fr: 'Confirmer et soumettre' },
+            ui: { buttonText: { en: 'Complete Verification', fr: 'Terminer la vérification' } },
+            // @ts-ignore - config unused for review component
+            config: {},
+        };
+        return {
+            ...tpl,
+            components: [...tpl.components, reviewComponent],
+        };
+    }, []);
+    const ensureVerificationProgressStep = useCallback((tpl) => {
+        const hasVerification = tpl.components.some(c => c.type === 'verification_progress');
+        if (hasVerification)
+            return tpl;
+        const lastOrder = tpl.components.reduce((acc, c) => Math.max(acc, c.order ?? 0), 0);
+        const lastId = tpl.components.reduce((acc, c) => Math.max(acc, c.id), 0);
+        const verificationComponent = {
+            id: lastId + 2,
+            type: 'verification_progress',
+            order: lastOrder + 2,
+            labels: { en: 'Verification', fr: 'Vérification' },
+            instructions: { en: 'We\'re reviewing your documents', fr: 'Nous analysons vos documents' },
+            ui: { buttonText: { en: '', fr: '' } },
+            // @ts-ignore - config unused for progress component
+            config: {},
+        };
+        return {
+            ...tpl,
+            components: [...tpl.components, verificationComponent],
+        };
+    }, []);
+    const templateWithReview = useMemo(() => ensureReviewSubmitStep(template), [template, ensureReviewSubmitStep]);
+    const templateWithReviewAndVerification = useMemo(() => ensureVerificationProgressStep(templateWithReview), [templateWithReview, ensureVerificationProgressStep]);
     // État du flux
     const [state, setState] = useState({
-        template,
+        template: templateWithReviewAndVerification,
         currentComponentIndex: 0,
         completedComponents: [],
         componentData: {},
@@ -25,35 +79,183 @@ export const useTemplateKYCFlow = (template, onComplete, onError, initialLanguag
         isProcessing: false,
         currentLanguage: initialLanguage,
         showCustomStepper: true,
+        session: {
+            session_id: '',
+            token: '',
+            isInitialized: false,
+            isProcessing: false,
+            error: null,
+        },
+        verification: {
+            status: 'idle',
+        },
     });
+    const mapComponentTypeToAction = useCallback((type) => {
+        switch (type) {
+            case 'id_card':
+            case 'file_upload':
+                return 'document_upload';
+            case 'selfie':
+                return 'selfie_capture';
+            case 'location':
+                return 'location_permission';
+            case 'review_submit':
+                return 'final_submit';
+            case 'country_selection':
+                // No direct backend action; pack into metadata of next actionable step
+                return null;
+            case 'initialization':
+                return 'initialize_session';
+            case 'verification_progress':
+                return null; // UI-only
+            default:
+                return null;
+        }
+    }, []);
+    const chooseTemplateId = useCallback((tpl) => {
+        const types = tpl.components.map(c => c.type);
+        const hasLocation = types.includes('location');
+        const hasSelfie = types.includes('selfie');
+        const hasIdDoc = types.includes('id_card') || types.includes('file_upload');
+        // Simple heuristic to map to backend examples
+        if (hasLocation && hasSelfie && hasIdDoc)
+            return 'enhanced_id';
+        if (hasSelfie && hasIdDoc)
+            return 'standard_passport';
+        return 'standard_passport';
+    }, []);
+    const computeServerStepIndex = useCallback((tpl, upToIndex) => {
+        // Count actionable steps before the current component (exclude UI-only and country_selection)
+        const actionable = tpl.components
+            .slice(0, upToIndex)
+            .filter(c => !isUiOnlyStep(c.type) && mapComponentTypeToAction(c.type) !== null);
+        return actionable.length; // 0-based
+    }, [isUiOnlyStep, mapComponentTypeToAction]);
+    // Build backend-friendly payloads per action
+    const buildPayloadForComponent = useCallback((action, component, rawData, templateId, step) => {
+        const base = { template_id: null, step: component.order, permissionGranted: true };
+        if (!action) {
+            return base;
+        }
+        // Document upload expects an array of documents with base64 and metadata
+        if (action === 'document_upload') {
+            const documents = {};
+            if (rawData && typeof rawData === 'object') {
+                Object.keys(rawData).forEach((key) => {
+                    documents[key] = rawData[key];
+                });
+            }
+            return {
+                ...base,
+                documents,
+            };
+        }
+        if (action === 'selfie_capture') {
+            const documents = {};
+            if (rawData && typeof rawData === 'object') {
+                Object.keys(rawData).forEach((key) => {
+                    documents[key] = rawData[key];
+                });
+            }
+            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' };
+            }
+            // return { ...base, documents };
+        }
+        if (action === 'location_permission') {
+            return { ...base, ...({ metadata: rawData || {} }), ...({ permissionGranted: true, }) };
+        }
+        // Default: wrap as metadata
+        return { ...base, metadata: { ...(rawData || {}) } };
+    }, [state.componentData]);
+    // Ensure the template contains a final review step
     // Composant actuel
     const currentComponent = useMemo(() => {
-        return template.components[state.currentComponentIndex] || null;
-    }, [template.components, state.currentComponentIndex]);
+        return state.template.components[state.currentComponentIndex] || null;
+    }, [state.template.components, state.currentComponentIndex]);
     // Progression du flux
     const progress = useMemo(() => {
-        return template.components.length > 0
-            ? ((state.currentComponentIndex + 1) / template.components.length) * 100
+        return state.template.components.length > 0
+            ? ((state.currentComponentIndex + 1) / state.template.components.length) * 100
             : 0;
-    }, [state.currentComponentIndex, template.components.length]);
+    }, [state.currentComponentIndex, state.template.components.length]);
     // Vérifications de navigation
     const canGoNext = useMemo(() => {
-        return state.currentComponentIndex < template.components.length - 1;
-    }, [state.currentComponentIndex, template.components.length]);
+        return state.currentComponentIndex < state.template.components.length - 1;
+    }, [state.currentComponentIndex, state.template.components.length]);
     const canGoPrevious = useMemo(() => {
         return state.currentComponentIndex > 0;
     }, [state.currentComponentIndex]);
     const isComplete = useMemo(() => {
-        return state.currentComponentIndex === template.components.length - 1 &&
-            state.completedComponents.length === template.components.length;
-    }, [state.currentComponentIndex, state.completedComponents.length, template.components.length]);
+        const atReview = state.template.components[state.currentComponentIndex]?.type === 'review_submit';
+        const nonReviewCount = state.template.components.filter(c => c.type !== 'review_submit').length;
+        const completedNonReview = state.completedComponents.length >= nonReviewCount;
+        return atReview && completedNonReview;
+    }, [state.currentComponentIndex, state.completedComponents.length, state.template.components]);
     // Fonction pour obtenir le texte localisé
     const getLocalizedText = useCallback((text) => {
         return text[state.currentLanguage] || text.en || '';
     }, [state.currentLanguage]);
+    const initializeSession = useCallback(async () => {
+        try {
+            setState(prev => ({
+                ...prev,
+                session: {
+                    ...prev.session,
+                    isInitialized: false,
+                    isProcessing: true,
+                    error: null,
+                },
+            }));
+            console.log('Initializing session');
+            const token = await authentification();
+            const session = await kycService.newSession(token);
+            // Align backend flow from step 0 with initialize_session
+            try {
+                const templateId = chooseTemplateId(templateWithReviewAndVerification);
+                await kycService.verificationSession({
+                    session_id: session.session_id,
+                    step: 0,
+                    data: { template_id: templateId, metadata: { language: initialLanguage } },
+                    templateId: templateId,
+                    token: token,
+                    action: 'initialize_session'
+                });
+            }
+            catch (e) {
+                console.error('Error initializing session:', JSON.stringify(e, null, 2));
+                // Non-fatal: we will surface errors via state below if needed
+            }
+            setState(prev => ({
+                ...prev,
+                session: {
+                    ...prev.session,
+                    session_id: session.session_id,
+                    token: token,
+                    isInitialized: true,
+                    isProcessing: false,
+                    error: null,
+                }
+            }));
+        }
+        catch (error) {
+            console.error('Error initializing session:', JSON.stringify(error, null, 2));
+            setState(prev => ({
+                ...prev,
+                session: {
+                    ...prev.session,
+                    isInitialized: false,
+                    isProcessing: false,
+                    error: "Erreur lors de l'initialisation de la session",
+                },
+            }));
+        }
+    }, []);
     // Validation d'un composant
     const validateComponent = useCallback((componentId) => {
-        const component = template.components.find(c => c.id === componentId);
+        const component = state.template.components.find(c => c.id === componentId);
         if (!component)
             return false;
         const componentData = state.componentData[componentId];
@@ -74,54 +276,144 @@ export const useTemplateKYCFlow = (template, onComplete, onError, initialLanguag
                 return componentData && componentData.latitude && componentData.longitude;
             case 'country_selection':
                 // Vérifier si un pays a été sélectionné
-                return componentData && componentData.country;
+                console.log("componentData", truncateFields(componentData), componentId);
+                return componentData && componentData.code && componentData.regionMapping;
+            case 'review_submit':
+                return true;
             default:
                 return false;
         }
-    }, [template.components, state.componentData]);
+    }, [state.template.components, state.componentData]);
     // Actions du flux
     const actions = {
         // Initialiser le template
         initializeTemplate: useCallback((newTemplate) => {
+            const withReview = ensureReviewSubmitStep(newTemplate);
+            const withVerification = ensureVerificationProgressStep(withReview);
             setState(prev => ({
                 ...prev,
-                template: newTemplate,
+                template: withVerification,
                 currentComponentIndex: 0,
                 completedComponents: [],
                 componentData: {},
                 errors: {},
                 isProcessing: false,
+                verification: { status: 'idle', result: undefined },
             }));
-        }, []),
+        }, [ensureReviewSubmitStep, ensureVerificationProgressStep]),
         // Passer au composant suivant
-        nextComponent: useCallback(() => {
+        nextComponent: useCallback(async () => {
             if (!canGoNext)
                 return;
-            const currentComp = template.components[state.currentComponentIndex];
+            const currentComp = state.template.components[state.currentComponentIndex];
             if (!currentComp)
                 return;
+            setState(prev => ({
+                ...prev,
+                isProcessing: true,
+            }));
             // Valider le composant actuel
             if (!validateComponent(currentComp.id)) {
                 setState(prev => ({
                     ...prev,
+                    isProcessing: false,
                     errors: {
                         ...prev.errors,
-                        [currentComp.id]: 'Veuillez compléter cette étape avant de continuer'
+                        [currentComp.id]: state.currentLanguage === "en" ? "please complete this step before move on" : " 'Veuillez compléter cette étape avant de continuer'"
                     }
                 }));
                 return;
             }
-            // Marquer comme complété et passer au suivant
-            setState(prev => ({
-                ...prev,
-                currentComponentIndex: prev.currentComponentIndex + 1,
-                completedComponents: [...prev.completedComponents, currentComp.id],
-                errors: {
-                    ...prev.errors,
-                    [currentComp.id]: ''
+            try {
+                const component = state.template.components.find(c => c.id === currentComp.id);
+                if (!component)
+                    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],
+                        isProcessing: false,
+                        verification: { status: 'in_progress' },
+                        errors: {
+                            ...prev.errors,
+                            [currentComp.id]: ''
+                        }
+                    }));
+                    return;
                 }
-            }));
-        }, [canGoNext, state.currentComponentIndex, template.components, validateComponent]),
+                // Determine backend action and step index
+                const action = mapComponentTypeToAction(component.type);
+                const templateId = chooseTemplateId(state.template);
+                const serverStep = computeServerStepIndex(state.template, state.currentComponentIndex);
+                // Optionally send initialize_session at step 0 before first actionable action
+                if (serverStep === 0) {
+                    try {
+                        // await kycService.verificationSession({
+                        //   sessionId: state.session.session_id,
+                        //   step: 0,
+                        //   data: { template_id: templateId, metadata: { language: state.currentLanguage } },
+                        //   templateId: templateId,
+                        //   token: state.session.token,
+                        //   action: 'initialize_session'
+                        // });
+                    }
+                    catch (e) {
+                        // if init fails, surface error below in the main call handling
+                    }
+                }
+                // Skip UI-only and data-only steps that have no backend action
+                if (!action) {
+                    setState(prev => ({
+                        ...prev,
+                        currentComponentIndex: prev.currentComponentIndex + 1,
+                        completedComponents: [...prev.completedComponents, currentComp.id],
+                        isProcessing: false,
+                        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);
+                await kycService.verificationSession({
+                    session_id: state.session.session_id,
+                    step: step,
+                    data: payloadData,
+                    templateId: null,
+                    token: state.session.token,
+                    action: action
+                });
+                console.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],
+                    isProcessing: false,
+                    ...(action === "location_permission" ? { permissionGranted: true } : {}),
+                    errors: {
+                        ...prev.errors,
+                        [currentComp.id]: ''
+                    }
+                }));
+            }
+            catch (error) {
+                // console.error('Error validating component:', error);
+                setState(prev => ({
+                    ...prev,
+                    isProcessing: false,
+                    errors: {
+                        ...prev.errors,
+                        [currentComp.id]: 'Erreur lors de la validation du composant'
+                    }
+                }));
+            }
+        }, [canGoNext, state.currentComponentIndex, state.template.components, validateComponent]),
         // Retourner au composant précédent
         previousComponent: useCallback(() => {
             if (!canGoPrevious)
@@ -133,16 +425,17 @@ export const useTemplateKYCFlow = (template, onComplete, onError, initialLanguag
         }, [canGoPrevious]),
         // Aller à un composant spécifique
         goToComponent: useCallback((componentId) => {
-            const componentIndex = template.components.findIndex(c => c.id === componentId);
+            const componentIndex = state.template.components.findIndex(c => c.id === componentId);
             if (componentIndex !== -1) {
                 setState(prev => ({
                     ...prev,
                     currentComponentIndex: componentIndex,
                 }));
             }
-        }, [template.components]),
+        }, [state.template.components]),
         // Mettre à jour les données d'un composant
         updateComponentData: useCallback((componentId, data) => {
+            console.log("updateComponentData", componentId, truncateFields(data));
             setState(prev => ({
                 ...prev,
                 componentData: {
@@ -159,28 +452,41 @@ export const useTemplateKYCFlow = (template, onComplete, onError, initialLanguag
         validateComponent: useCallback((componentId) => {
             return validateComponent(componentId);
         }, [validateComponent]),
+        // complet verification
+        submitVerification: useCallback(async () => {
+            setState(prev => ({ ...prev, isProcessing: true }));
+            try {
+                onComplete?.(state.verification);
+            }
+            catch (error) {
+                setState(prev => ({ ...prev, isProcessing: false }));
+            }
+        }, [state.session.session_id, state.verification, onComplete]),
         // Soumettre le template complet
         submitTemplate: useCallback(async () => {
-            if (!isComplete) {
+            // Allow submission when on the review step and all previous steps are valid
+            const atReview = state.template.components[state.currentComponentIndex]?.type === 'review_submit';
+            const allValid = state.template.components
+                .filter(c => c.type !== 'review_submit')
+                .every(comp => validateComponent(comp.id));
+            if (!(atReview && allValid)) {
                 onError?.('Le flux KYC n\'est pas encore terminé');
                 return;
             }
             setState(prev => ({ ...prev, isProcessing: true }));
             try {
-                // Vérifier que tous les composants sont validés
-                const allValid = template.components.every(comp => validateComponent(comp.id));
-                if (!allValid) {
+                // Vérifier que tous les composants (hors review) sont validés
+                if (!allValid)
                     throw new Error('Certaines étapes ne sont pas complètes');
-                }
                 // Appeler le callback de completion
-                onComplete?.(state.componentData);
+                // onComplete?.(state.componentData);
                 setState(prev => ({ ...prev, isProcessing: false }));
             }
             catch (error) {
                 setState(prev => ({ ...prev, isProcessing: false }));
                 onError?.(error instanceof Error ? error.message : 'Erreur lors de la soumission');
             }
-        }, [isComplete, template.components, validateComponent, state.componentData, onComplete, onError]),
+        }, [state.template.components, state.verification, state.currentComponentIndex, validateComponent, state.componentData, onComplete, onError]),
         // Réinitialiser le template
         resetTemplate: useCallback(() => {
             setState(prev => ({
@@ -190,6 +496,7 @@ export const useTemplateKYCFlow = (template, onComplete, onError, initialLanguag
                 componentData: {},
                 errors: {},
                 isProcessing: false,
+                verification: { status: 'idle', result: undefined },
             }));
         }, []),
         // Changer la langue
@@ -206,6 +513,12 @@ export const useTemplateKYCFlow = (template, onComplete, onError, initialLanguag
                 showCustomStepper: show,
             }));
         }, []),
+        setVerificationState: useCallback((verificationState) => {
+            setState(prev => ({
+                ...prev,
+                verification: verificationState,
+            }));
+        }, []),
     };
     return {
         state,
@@ -216,6 +529,7 @@ export const useTemplateKYCFlow = (template, onComplete, onError, initialLanguag
         canGoPrevious,
         isComplete,
         getLocalizedText,
+        initializeSession,
     };
 };
 //# sourceMappingURL=useTemplateKYCFlow.js.map