@transfergratis/react-native-sdk 0.1.23 → 0.1.25

package/src/hooks/useOrientationVideo.ts

@@ -6,6 +6,7 @@ import {
   OrientationVideoResult,
   OrientationType 
 } from '../types/KYC.types';
+import { KycEnvironment } from '../types/env.types';
 import kycService from '../modules/api/KYCService';
 
 export interface UseOrientationVideoReturn {
@@ -15,8 +16,8 @@ export interface UseOrientationVideoReturn {
 }
 
 export const useOrientationVideo = (
-  
-  config?: Partial<OrientationVideoConfig>
+  config?: Partial<OrientationVideoConfig>,
+  env: KycEnvironment = 'PRODUCTION'
 ): UseOrientationVideoReturn => {
   const defaultConfig: OrientationVideoConfig = {
     duration: 10,
@@ -66,7 +67,7 @@ export const useOrientationVideo = (
     setState(prev => ({ ...prev, isProcessing: true, error: null }));
 
     try {
-      const result = await kycService.processOrientationVideo(state.recordedVideo);
+      const result = await kycService.processOrientationVideo(state.recordedVideo, env);
       
       if (result.success && result.data) {
         setState(prev => ({ 
@@ -93,7 +94,7 @@ export const useOrientationVideo = (
       }));
       throw error;
     }
-  }, [state.recordedVideo, state.isProcessing, kycService]);
+  }, [state.recordedVideo, state.isProcessing, env]);
 
   const retake = useCallback(() => {
     if (state.retakeCount >= finalConfig.maxRetakes) {

package/src/hooks/useTemplateKYCFlow.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useMemo, createContext, useContext, ReactNode, useEffect } from 'react';
 import { KYCTemplate, TemplateState, TemplateActions, UseTemplateReturn, TemplateComponent, GovernmentDocumentType, VerificationState } from '../types/KYC.types';
+import { KycEnvironment } from '../types/env.types';
 import kycService, { authentification, truncateFields } from '../modules/api/KYCService';
 import useI18n from './useI18n';
 import { logger } from '../utils/logger';
@@ -15,6 +16,7 @@ interface TemplateKYCFlowContextType {
   isComplete: boolean;
   getLocalizedText: (text: { en: string; fr: string;[key: string]: string }) => string;
   initializeSession: () => Promise<void>;
+  env: KycEnvironment;
 }
 
 const TemplateKYCFlowContext = createContext<TemplateKYCFlowContextType | undefined>(undefined);
@@ -28,6 +30,9 @@ interface TemplateKYCFlowProviderProps {
   onCancel?: () => void;
   initialLanguage?: string;
   apiKey?: string;
+  env?: KycEnvironment;
+  existingSessionId?: string;
+  initialStep?: number;
 }
 
 export const TemplateKYCFlowProvider: React.FC<TemplateKYCFlowProviderProps> = ({
@@ -38,8 +43,10 @@ export const TemplateKYCFlowProvider: React.FC<TemplateKYCFlowProviderProps> = (
   onCancel,
   initialLanguage = 'en',
   apiKey,
+  env = 'PRODUCTION',
+  existingSessionId,
 }) => {
-  const hookResult = useTemplateKYCFlow(template, onComplete, onError, onCancel, initialLanguage, apiKey);
+  const hookResult = useTemplateKYCFlow(template, onComplete, onError, onCancel, initialLanguage, apiKey, env, existingSessionId);
 
   return (
     <TemplateKYCFlowContext.Provider value={hookResult}>
@@ -64,6 +71,9 @@ export const useTemplateKYCFlow = (
   onCancel?: () => void,
   initialLanguage: string = 'en',
   apiKey?: string,
+  env: KycEnvironment = 'PRODUCTION',
+  existingSessionId?: string,
+  initialStep?: number,
 ): UseTemplateReturn => {
 
   const { setLocale } = useI18n();
@@ -131,29 +141,286 @@ export const useTemplateKYCFlow = (
   const templateWithReviewAndVerification = useMemo(() => ensureVerificationProgressStep(templateWithReview), [templateWithReview, ensureVerificationProgressStep, apiKey]);
 
   // État initial du flux
-  const buildInitialState = (): TemplateState => ({
-    template: templateWithReviewAndVerification,
-    currentComponentIndex: 0,
-    completedComponents: [],
-    componentData: {},
-    errors: {},
-    isProcessing: false,
-    currentLanguage: initialLanguage,
-    showCustomStepper: true,
-    session: {
-      session_id: '',
-      token: '',
-      isInitialized: false,
+  const buildInitialState = (): TemplateState => {
+    // Valider initialStep pour s'assurer qu'il est dans les limites du template
+    let validInitialStep = 0;
+    let completedComponents: number[] = [];
+    
+    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<TemplateState>(() => buildInitialState());
+  
+  // Fonction utilitaire pour convertir base64 en data URI pour l'affichage
+  const base64ToDataUri = useCallback((base64: string, mimeType: string = 'image/jpeg'): string => {
+    // Si c'est déjà une data URI, retourner tel quel
+    if (base64.startsWith('data:')) {
+      return base64;
+    }
+    // Sinon, créer une data URI
+    return `data:${mimeType};base64,${base64}`;
+  }, []);
+
+  // Charger les données de session si on reprend une session existante
+  useEffect(() => {
+    const loadSessionData = async () => {
+      // Ne charger que si on a une session existante
+      if (!existingSessionId) {
+        logger.log('No existingSessionId, skipping data load');
+        return;
+      }
+
+      // Si 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: any = sessionData;
+          const restoredComponentData: Record<number, any> = {};
+
+          // 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: any = null;
+                
+                // Chercher dans différentes structures possibles
+                if (data.documents) {
+                  documents = data.documents;
+                } else if (data.user_data?.documents) {
+                  documents = data.user_data.documents;
+                } else if (data.document_images) {
+                  documents = data.document_images;
+                }
+
+                if (documents) {
+                  // Convertir les images base64 en format utilisable
+                  const restoredDocuments: Record<string, any> = {};
+                  
+                  Object.keys(documents).forEach((key) => {
+                    const doc = documents[key];
+                    if (typeof doc === 'object' && doc !== null) {
+                      // Si on a un fichier base64, créer une structure avec dir et file
+                      if (doc.file || doc.base64) {
+                        const base64Data = doc.file || doc.base64;
+                        restoredDocuments[key] = {
+                          dir: base64ToDataUri(base64Data), // Utiliser data URI pour l'affichage
+                          file: base64Data, // Garder le base64 pour l'envoi
+                          mrz: doc.mrz || '',
+                          templatePath: doc.templatePath || '',
+                        };
+                      } else {
+                        // Sinon, garder la structure originale
+                        restoredDocuments[key] = doc;
+                      }
+                    } else if (typeof doc === 'string') {
+                      // Si c'est directement une string base64
+                      restoredDocuments[key] = {
+                        dir: base64ToDataUri(doc),
+                        file: doc,
+                        mrz: '',
+                        templatePath: '',
+                      };
+                    }
+                  });
+
+                  if (Object.keys(restoredDocuments).length > 0) {
+                    restoredComponentData[component.id] = restoredDocuments;
+                  }
+                }
+              } else if (component.type === 'selfie') {
+                // Les selfies peuvent être dans sessionData.selfie_info
+                if (data.selfie_info) {
+                  const selfieData: Record<string, any> = {};
+                  const selfieInfo: any = data.selfie_info;
+                  
+                  // Si selfie_info contient une image
+                  if (selfieInfo.image) {
+                    const base64Image = selfieInfo.image;
+                    selfieData['front'] = {
+                      dir: base64ToDataUri(base64Image),
+                      file: base64Image,
+                    };
+                  }
+                  
+                  // Si on a plusieurs orientations
+                  if (selfieInfo.orientations) {
+                    Object.keys(selfieInfo.orientations).forEach((orientation) => {
+                      const img = selfieInfo.orientations[orientation];
+                      if (img) {
+                        selfieData[orientation] = {
+                          dir: base64ToDataUri(img),
+                          file: img,
+                        };
+                      }
+                    });
+                  }
+
+                  if (Object.keys(selfieData).length > 0) {
+                    restoredComponentData[component.id] = selfieData;
+                  }
+                }
+              } else if (component.type === 'country_selection') {
+                // 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: TemplateComponent['type']): string | null => {
     switch (type) {
       case 'id_card':
@@ -168,6 +435,9 @@ export const useTemplateKYCFlow = (
       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':
@@ -201,7 +471,7 @@ export const useTemplateKYCFlow = (
   const buildPayloadForComponent = useCallback((action: string | null, component: TemplateComponent, rawData: any, templateId: string, step: number) => {
     console.log('apiKey in buildPayloadForComponent', apiKey);
 
-    const base = { template_id: null, step: component.order, permissionGranted: true } as any;
+    const base = { template_id: templateId || null, templateId: templateId || null, step: component.order, permissionGranted: true } as any;
     if (!action) {
       return base;
     }
@@ -230,9 +500,12 @@ export const useTemplateKYCFlow = (
       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' };
+        const documentType = _idCardData?.documentType;
+        // Map national_id to identity_card for selfie capture
+        const mappedDocumentType = documentType === 'national_id' ? 'identity_card' : (documentType as GovernmentDocumentType || 'identity_card');
+        return { ...base, documents, country: _idCardData?.country || '', documentType: mappedDocumentType };
       }
-      // return { ...base, documents };
+      return { ...base, documents };
     }
 
     if (action === 'location_permission') {
@@ -295,7 +568,18 @@ export const useTemplateKYCFlow = (
 
       const token = apiKey ? undefined : await authentification();
       console.log('token in initializeSession', { token, apiKey },);
-      const session = await kycService.newSession({token,apiKey});
+
+      // Check if we already have a session ID from URL params (passed via state or prop)
+      let session;
+      const existingSessionId = state.session.session_id; // This might be set from initial props if we add logic for it
+
+      if (existingSessionId && existingSessionId.length > 0) {
+        logger.log('Resuming existing session:', existingSessionId);
+        // Verify existence/validity if needed, for now trust the ID and just fetch/use it
+        session = { session_id: existingSessionId };
+      } else {
+        session = await kycService.newSession({ token, apiKey });
+      }
 
       // Align backend flow from step 0 with initialize_session
       try {
@@ -371,6 +655,24 @@ export const useTemplateKYCFlow = (
 
         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:
@@ -403,10 +705,16 @@ export const useTemplateKYCFlow = (
       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 => ({
@@ -423,7 +731,13 @@ export const useTemplateKYCFlow = (
 
       try {
         const component = state.template.components.find(c => c.id === currentComp.id);
-        if (!component) return;
+        if (!component) {
+          setState(prev => ({
+            ...prev,
+            isProcessing: false,
+          }));
+          return;
+        }
         if (component.type === 'review_submit') {
           // Move to verification screen and mark verification in progress
           setState(prev => ({
@@ -484,7 +798,7 @@ export const useTemplateKYCFlow = (
           session_id: state.session.session_id,
           step: step,
           data: payloadData,
-          templateId: null,
+          templateId: templateId,
           token: state.session.token,
           action: action,
           apiKey: apiKey ?? "-",
@@ -504,7 +818,7 @@ export const useTemplateKYCFlow = (
         }));
 
       } catch (error) {
-        // console.error('Error validating component:', error);
+        logger.error('Error in nextComponent:', error);
         setState(prev => ({
           ...prev,
           isProcessing: false,
@@ -515,7 +829,7 @@ export const useTemplateKYCFlow = (
         }));
       }
 
-    }, [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(() => {
@@ -638,5 +952,6 @@ export const useTemplateKYCFlow = (
     isComplete,
     getLocalizedText,
     initializeSession,
+    env,
   };
 }; 

package/src/hooks/useTemplateLoader.ts

@@ -0,0 +1,102 @@
+import { useState, useCallback, useRef } from 'react';
+import { KYCTemplate } from '../types/KYC.types';
+import templateService from '../modules/api/TemplateService';
+import { transformBackendTemplateToSDK, validateTransformedTemplate } from '../utils/template-transformer';
+import { logger } from '../utils/logger';
+import { authentification } from '../modules/api/KYCService';
+
+export interface UseTemplateLoaderReturn {
+  template: KYCTemplate | null;
+  isLoading: boolean;
+  error: string | null;
+  loadTemplate: (templateId: string, apiKey?: string) => Promise<void>;
+  refresh: () => void;
+  clearError: () => void;
+}
+
+/**
+ * Hook to load and transform templates from the backend API
+ */
+export function useTemplateLoader(): UseTemplateLoaderReturn {
+  const [template, setTemplate] = useState<KYCTemplate | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const currentTemplateIdRef = useRef<string | null>(null);
+  const currentApiKeyRef = useRef<string | undefined>(undefined);
+
+  /**
+   * Load a template by ID
+   */
+  const loadTemplate = useCallback(async (templateId: string, apiKey?: string) => {
+    // Reset state
+    setError(null);
+    setIsLoading(true);
+    currentTemplateIdRef.current = templateId;
+    currentApiKeyRef.current = apiKey;
+
+    try {
+      logger.log(`Loading template: ${templateId}`);
+
+      // Get token if no API key provided
+      let token: string | undefined;
+      if (!apiKey) {
+        try {
+          token = await authentification();
+        } catch (authError) {
+          logger.error('Authentication failed:', authError);
+          throw new Error('Failed to authenticate. Please provide a valid API key.');
+        }
+      }
+
+      // Fetch template from backend
+      const backendTemplate = await templateService.fetchTemplate(templateId, apiKey, token);
+
+      // Transform to SDK format
+      const transformedTemplate = transformBackendTemplateToSDK(backendTemplate);
+
+      // Validate transformed template
+      if (!validateTransformedTemplate(transformedTemplate)) {
+        throw new Error('Transformed template validation failed');
+      }
+
+      // Set the template
+      setTemplate(transformedTemplate);
+      logger.log(`Template loaded successfully: ${templateId}`);
+    } catch (err: any) {
+      const errorMessage = err.message || 'Failed to load template';
+      logger.error(`Error loading template ${templateId}:`, errorMessage);
+      setError(errorMessage);
+      setTemplate(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  /**
+   * Refresh the current template
+   */
+  const refresh = useCallback(() => {
+    if (currentTemplateIdRef.current) {
+      // Clear cache for this template
+      templateService.clearCache(currentTemplateIdRef.current);
+      // Reload template
+      loadTemplate(currentTemplateIdRef.current, currentApiKeyRef.current);
+    }
+  }, [loadTemplate]);
+
+  /**
+   * Clear error state
+   */
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  return {
+    template,
+    isLoading,
+    error,
+    loadTemplate,
+    refresh,
+    clearError,
+  };
+}