@transfergratis/react-native-sdk 0.1.4 → 0.1.6

package/src/hooks/useTemplateKYCFlow.tsx

@@ -1,5 +1,7 @@
-import React, { useState, useCallback, useMemo, createContext, useContext, ReactNode } from 'react';
-import { KYCTemplate, TemplateState, TemplateActions, UseTemplateReturn } from '../types/KYC.types';
+import React, { useState, useCallback, useMemo, createContext, useContext, ReactNode, useEffect } from 'react';
+import { KYCTemplate, TemplateState, TemplateActions, UseTemplateReturn, TemplateComponent, GovernmentDocumentType, VerificationState } from '../types/KYC.types';
+import kycService, { authentification, truncateFields } from '../modules/api/KYCService';
+import useI18n from './useI18n';
 
 // Context pour le provider
 interface TemplateKYCFlowContextType {
@@ -10,7 +12,8 @@ interface TemplateKYCFlowContextType {
   canGoNext: boolean;
   canGoPrevious: boolean;
   isComplete: boolean;
-  getLocalizedText: (text: { en: string; fr: string; [key: string]: string }) => string;
+  getLocalizedText: (text: { en: string; fr: string;[key: string]: string }) => string;
+  initializeSession: () => Promise<void>;
 }
 
 const TemplateKYCFlowContext = createContext<TemplateKYCFlowContextType | undefined>(undefined);
@@ -19,9 +22,11 @@ const TemplateKYCFlowContext = createContext<TemplateKYCFlowContextType | undefi
 interface TemplateKYCFlowProviderProps {
   children: ReactNode;
   template: KYCTemplate;
-  onComplete?: (data: Record<number, any>) => void;
+  onComplete?: (data: VerificationState) => void;
   onError?: (error: string) => void;
+  onCancel?: () => void;
   initialLanguage?: string;
+  apiKey?: string;
 }
 
 export const TemplateKYCFlowProvider: React.FC<TemplateKYCFlowProviderProps> = ({
@@ -29,10 +34,12 @@ export const TemplateKYCFlowProvider: React.FC<TemplateKYCFlowProviderProps> = (
   template,
   onComplete,
   onError,
+  onCancel,
   initialLanguage = 'en',
+  apiKey,
 }) => {
-  const hookResult = useTemplateKYCFlow(template, onComplete, onError, initialLanguage);
-  
+  const hookResult = useTemplateKYCFlow(template, onComplete, onError, onCancel, initialLanguage, apiKey);
+
   return (
     <TemplateKYCFlowContext.Provider value={hookResult}>
       {children}
@@ -51,13 +58,80 @@ export const useTemplateKYCFlowContext = (): TemplateKYCFlowContextType => {
 
 export const useTemplateKYCFlow = (
   template: KYCTemplate,
-  onComplete?: (data: Record<number, any>) => void,
+  onComplete?: (data: VerificationState) => void,
   onError?: (error: string) => void,
-  initialLanguage: string = 'en'
+  onCancel?: () => void,
+  initialLanguage: string = 'en',
+  apiKey?: string,
 ): UseTemplateReturn => {
+
+  const { setLocale } = useI18n();
+
+  useEffect(() => {
+    setLocale(initialLanguage);
+  }, [initialLanguage]);
+
+  // Helpers to align SDK steps with backend actions/templates
+  const isUiOnlyStep = useCallback((type: TemplateComponent['type']) => {
+    return type === 'verification_progress';
+  }, []);
+
+
+
+  const ensureReviewSubmitStep = useCallback((tpl: KYCTemplate): KYCTemplate => {
+    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: TemplateComponent = {
+      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: {},
+    } as TemplateComponent;
+
+    return {
+      ...tpl,
+      components: [...tpl.components, reviewComponent],
+    };
+  }, []);
+
+  const ensureVerificationProgressStep = useCallback((tpl: KYCTemplate): KYCTemplate => {
+    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: TemplateComponent = {
+      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: {},
+    } as TemplateComponent;
+
+    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<TemplateState>({
-    template,
+    template: templateWithReviewAndVerification,
     currentComponentIndex: 0,
     completedComponents: [],
     componentData: {},
@@ -65,121 +139,375 @@ export const useTemplateKYCFlow = (
     isProcessing: false,
     currentLanguage: initialLanguage,
     showCustomStepper: true,
+    session: {
+      session_id: '',
+      token: '',
+      isInitialized: false,
+      isProcessing: false,
+      error: null,
+    },
+    verification: {
+      status: 'idle',
+    },
   });
+  const mapComponentTypeToAction = useCallback((type: TemplateComponent['type']): string | null => {
+    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: KYCTemplate): string => {
+    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: KYCTemplate, upToIndex: number): number => {
+    // 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: string | null, component: TemplateComponent, rawData: any, templateId: string, step: number) => {
+    const base = { template_id: null, step: component.order, permissionGranted: true } as any;
+    if (!action) {
+      return base;
+    }
+    // Document upload expects an array of documents with base64 and metadata
+    if (action === 'document_upload') {
+      const documents: Record<string, any> = {};
+      if (rawData && typeof rawData === 'object') {
+        Object.keys(rawData).forEach((key) => {
+          documents[key] = rawData[key];
+        });
+      }
+      return {
+        ...base,
+        documents,
+      };
+    }
+
+    if (action === 'selfie_capture') {
+      const documents: Record<string, any> = {};
+      if (rawData && typeof rawData === 'object') {
+
+        Object.keys(rawData).forEach((key) => {
+          documents[key] = rawData[key];
+        });
+      }
+      const idCardID = Object.keys(state.componentData).find((c: string) => c === "1");
+      if (idCardID) {
+        const _idCardData = state.componentData[idCardID];
+        return { ...base, documents, country: _idCardData?.country || '', documentType: _idCardData?.documentType as GovernmentDocumentType || '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: { en: string; fr: string; [key: string]: string }): string => {
+  const getLocalizedText = useCallback((text: { en: string; fr: string;[key: string]: string }): string => {
     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: number): boolean => {
-    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];
-    
+
     switch (component.type) {
       case 'id_card':
         // Vérifier si au moins un côté a été capturé
         return componentData && Object.keys(componentData).length > 0;
-      
+
       case 'selfie':
         // Vérifier si toutes les orientations ont été capturées
         const config = component.config as any;
         const orientations = config.orientations || ['front'];
         return componentData && orientations.every((orientation: string) => componentData[orientation]);
-      
+
       case 'file_upload':
         // Vérifier si un fichier a été uploadé
         return componentData && componentData.file;
-      
+
       case 'location':
         // Vérifier si la localisation a été obtenue
         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: TemplateActions = {
     // Initialiser le template
     initializeTemplate: useCallback((newTemplate: KYCTemplate) => {
+      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;
         }
-      }));
+        // 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, template.components, validateComponent]),
+    }, [canGoNext, state.currentComponentIndex, state.template.components, validateComponent]),
 
     // Retourner au composant précédent
     previousComponent: useCallback(() => {
@@ -193,17 +521,19 @@ export const useTemplateKYCFlow = (
 
     // Aller à un composant spécifique
     goToComponent: useCallback((componentId: number) => {
-      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: number, data: any) => {
+      console.log("updateComponentData", componentId, truncateFields(data));
+
       setState(prev => ({
         ...prev,
         componentData: {
@@ -215,17 +545,32 @@ export const useTemplateKYCFlow = (
           [componentId]: ''
         }
       }));
-      
+
     }, []),
 
     // Valider un composant
     validateComponent: useCallback((componentId: number) => {
       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;
       }
@@ -233,22 +578,18 @@ export const useTemplateKYCFlow = (
       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) {
-          throw new Error('Certaines étapes ne sont pas complètes');
-        }
+        // 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(() => {
@@ -259,6 +600,7 @@ export const useTemplateKYCFlow = (
         componentData: {},
         errors: {},
         isProcessing: false,
+        verification: { status: 'idle', result: undefined },
       }));
     }, []),
 
@@ -277,6 +619,13 @@ export const useTemplateKYCFlow = (
         showCustomStepper: show,
       }));
     }, []),
+
+    setVerificationState: useCallback((verificationState) => {
+      setState(prev => ({
+        ...prev,
+        verification: verificationState,
+      }));
+    }, []),
   };
 
   return {
@@ -288,5 +637,6 @@ export const useTemplateKYCFlow = (
     canGoPrevious,
     isComplete,
     getLocalizedText,
+    initializeSession,
   };
 };