@transfergratis/react-native-sdk 0.1.22 → 0.1.24

package/src/hooks/useTemplateKYCFlow.tsx

@@ -70,12 +70,12 @@ export const useTemplateKYCFlow = (
 
   useEffect(() => {
     setLocale(initialLanguage);
-  }, [initialLanguage]);
+  }, [initialLanguage, apiKey]);
 
   // Helpers to align SDK steps with backend actions/templates
   const isUiOnlyStep = useCallback((type: TemplateComponent['type']) => {
     return type === 'verification_progress';
-  }, []);
+  }, [apiKey]);
 
 
 
@@ -101,7 +101,7 @@ export const useTemplateKYCFlow = (
       ...tpl,
       components: [...tpl.components, reviewComponent],
     };
-  }, []);
+  }, [apiKey]);
 
   const ensureVerificationProgressStep = useCallback((tpl: KYCTemplate): KYCTemplate => {
     const hasVerification = tpl.components.some(c => c.type === 'verification_progress');
@@ -125,10 +125,10 @@ export const useTemplateKYCFlow = (
       ...tpl,
       components: [...tpl.components, verificationComponent],
     };
-  }, []);
+  }, [apiKey]);
 
-  const templateWithReview = useMemo(() => ensureReviewSubmitStep(template), [template, ensureReviewSubmitStep]);
-  const templateWithReviewAndVerification = useMemo(() => ensureVerificationProgressStep(templateWithReview), [templateWithReview, ensureVerificationProgressStep]);
+  const templateWithReview = useMemo(() => ensureReviewSubmitStep(template), [template, ensureReviewSubmitStep, apiKey]);
+  const templateWithReviewAndVerification = useMemo(() => ensureVerificationProgressStep(templateWithReview), [templateWithReview, ensureVerificationProgressStep, apiKey]);
 
   // État initial du flux
   const buildInitialState = (): TemplateState => ({
@@ -168,6 +168,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':
@@ -186,7 +189,7 @@ export const useTemplateKYCFlow = (
     if (hasLocation && hasSelfie && hasIdDoc) return 'enhanced_id';
     if (hasSelfie && hasIdDoc) return 'standard_passport';
     return 'standard_passport';
-  }, []);
+  }, [apiKey]);
 
 
   const computeServerStepIndex = useCallback((tpl: KYCTemplate, upToIndex: number): number => {
@@ -195,11 +198,13 @@ export const useTemplateKYCFlow = (
       .slice(0, upToIndex)
       .filter(c => !isUiOnlyStep(c.type) && mapComponentTypeToAction(c.type) !== null);
     return actionable.length; // 0-based
-  }, [isUiOnlyStep, mapComponentTypeToAction]);
+  }, [isUiOnlyStep, mapComponentTypeToAction, apiKey]);
 
   // 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;
+    console.log('apiKey in buildPayloadForComponent', apiKey);
+
+    const base = { template_id: templateId || null, templateId: templateId || null, step: component.order, permissionGranted: true } as any;
     if (!action) {
       return base;
     }
@@ -228,9 +233,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') {
@@ -239,45 +247,44 @@ export const useTemplateKYCFlow = (
 
     // Default: wrap as metadata
     return { ...base, metadata: { ...(rawData || {}) } };
-  }, [state.componentData]);
+  }, [state.componentData, apiKey]);
   // Ensure the template contains a final review step
 
-
-
+  // console.log('apiKey in useTemplateKYCFlow', apiKey);
 
 
   // Composant actuel
   const currentComponent = useMemo(() => {
     return state.template.components[state.currentComponentIndex] || null;
-  }, [state.template.components, state.currentComponentIndex]);
+  }, [state.template.components, state.currentComponentIndex, apiKey]);
 
   // Progression du flux
   const progress = useMemo(() => {
     return state.template.components.length > 0
       ? ((state.currentComponentIndex + 1) / state.template.components.length) * 100
       : 0;
-  }, [state.currentComponentIndex, state.template.components.length]);
+  }, [state.currentComponentIndex, state.template.components.length, apiKey]);
 
   // Vérifications de navigation
   const canGoNext = useMemo(() => {
     return state.currentComponentIndex < state.template.components.length - 1;
-  }, [state.currentComponentIndex, state.template.components.length]);
+  }, [state.currentComponentIndex, state.template.components.length, apiKey]);
 
   const canGoPrevious = useMemo(() => {
     return state.currentComponentIndex > 0;
-  }, [state.currentComponentIndex]);
+  }, [state.currentComponentIndex, apiKey]);
 
   const isComplete = useMemo(() => {
     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]);
+  }, [state.currentComponentIndex, state.completedComponents.length, state.template.components, apiKey]);
 
   // Fonction pour obtenir le texte localisé
   const getLocalizedText = useCallback((text: { en: string; fr: string;[key: string]: string }): string => {
     return text[state.currentLanguage] || text.en || '';
-  }, [state.currentLanguage]);
+  }, [state.currentLanguage, apiKey]);
 
   const initializeSession = useCallback(async () => {
     try {
@@ -292,9 +299,9 @@ export const useTemplateKYCFlow = (
       }));
       logger.log('Initializing session');
 
-      const token = await authentification();
-
-      const session = await kycService.newSession(token);
+      const token = apiKey ? undefined : await authentification();
+      console.log('token in initializeSession', { token, apiKey },);
+      const session = await kycService.newSession({token,apiKey});
 
       // Align backend flow from step 0 with initialize_session
       try {
@@ -305,7 +312,8 @@ export const useTemplateKYCFlow = (
           data: { template_id: templateId, metadata: { language: initialLanguage } },
           templateId: templateId,
           token: token,
-          action: 'initialize_session'
+          action: 'initialize_session',
+          apiKey: apiKey,
         });
       } catch (e) {
         logger.error('Error initializing session:', JSON.stringify(e, null, 2));
@@ -336,7 +344,7 @@ export const useTemplateKYCFlow = (
         },
       }));
     }
-  }, []);
+  }, [apiKey]);
   // Validation d'un composant
   const validateComponent = useCallback((componentId: number): boolean => {
     const component = state.template.components.find(c => c.id === componentId);
@@ -369,12 +377,16 @@ 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 'review_submit':
         return true;
       default:
         return false;
     }
-  }, [state.template.components, state.componentData]);
+  }, [state.template.components, state.componentData, apiKey]);
 
   // Actions du flux
   const actions: TemplateActions = {
@@ -392,7 +404,7 @@ export const useTemplateKYCFlow = (
         isProcessing: false,
         verification: { status: 'idle', result: undefined },
       }));
-    }, [ensureReviewSubmitStep, ensureVerificationProgressStep]),
+    }, [ensureReviewSubmitStep, ensureVerificationProgressStep, apiKey]),
 
     // Passer au composant suivant
     nextComponent: useCallback(async () => {
@@ -401,10 +413,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 => ({
@@ -421,7 +439,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 => ({
@@ -476,15 +500,16 @@ export const useTemplateKYCFlow = (
         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);
+        console.log('payloadData', action, apiKey);
 
         await kycService.verificationSession({
           session_id: state.session.session_id,
           step: step,
           data: payloadData,
-          templateId: null,
+          templateId: templateId,
           token: state.session.token,
           action: action,
-          apiKey: apiKey,
+          apiKey: apiKey ?? "-",
         });
         logger.log("currentComp state", truncateFields(state));
         // Marquer comme complété et passer au suivant
@@ -501,7 +526,7 @@ export const useTemplateKYCFlow = (
         }));
 
       } catch (error) {
-        // console.error('Error validating component:', error);
+        logger.error('Error in nextComponent:', error);
         setState(prev => ({
           ...prev,
           isProcessing: false,
@@ -512,7 +537,7 @@ export const useTemplateKYCFlow = (
         }));
       }
 
-    }, [canGoNext, state.currentComponentIndex, state.template.components, validateComponent, apiKey]),
+    }, [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(() => {
@@ -522,7 +547,7 @@ export const useTemplateKYCFlow = (
         ...prev,
         currentComponentIndex: prev.currentComponentIndex - 1,
       }));
-    }, [canGoPrevious]),
+    }, [canGoPrevious, apiKey]),
 
     // Aller à un composant spécifique
     goToComponent: useCallback((componentId: number) => {
@@ -533,7 +558,7 @@ export const useTemplateKYCFlow = (
           currentComponentIndex: componentIndex,
         }));
       }
-    }, [state.template.components]),
+    }, [state.template.components, apiKey]),
 
     // Mettre à jour les données d'un composant
     updateComponentData: useCallback((componentId: number, data: any) => {
@@ -551,12 +576,12 @@ export const useTemplateKYCFlow = (
         }
       }));
 
-    }, []),
+    }, [apiKey]),
 
     // Valider un composant
     validateComponent: useCallback((componentId: number) => {
       return validateComponent(componentId);
-    }, [validateComponent]),
+    }, [validateComponent, apiKey]),
     // complet verification
     submitVerification: useCallback(async () => {
       setState(prev => ({ ...prev, isProcessing: true }));
@@ -566,7 +591,7 @@ export const useTemplateKYCFlow = (
       } catch (error) {
         setState(prev => ({ ...prev, isProcessing: false }));
       }
-    }, [state.session.session_id, state.verification, onComplete]),
+    }, [state.session.session_id, state.verification, onComplete, apiKey]),
 
     // Soumettre le template complet
     submitTemplate: useCallback(async () => {
@@ -594,12 +619,12 @@ export const useTemplateKYCFlow = (
         setState(prev => ({ ...prev, isProcessing: false }));
         onError?.(error instanceof Error ? error.message : 'Erreur lors de la soumission');
       }
-    }, [state.template.components, state.verification, state.currentComponentIndex, validateComponent, state.componentData, onComplete, onError]),
+    }, [state.template.components, state.verification, state.currentComponentIndex, validateComponent, state.componentData, onComplete, onError, apiKey]),
 
     // Réinitialiser le template
     resetTemplate: useCallback(() => {
       setState(buildInitialState());
-    }, [buildInitialState]),
+    }, [buildInitialState, apiKey]),
 
     // Changer la langue
     setLanguage: useCallback((language: string) => {
@@ -607,7 +632,7 @@ export const useTemplateKYCFlow = (
         ...prev,
         currentLanguage: language,
       }));
-    }, []),
+    }, [apiKey]),
 
     // Afficher le stepper personnalisé
     showCustomStepper: useCallback((show: boolean) => {
@@ -615,14 +640,14 @@ export const useTemplateKYCFlow = (
         ...prev,
         showCustomStepper: show,
       }));
-    }, []),
+    }, [apiKey]),
 
     setVerificationState: useCallback((verificationState) => {
       setState(prev => ({
         ...prev,
         verification: verificationState,
       }));
-    }, []),
+    }, [apiKey]),
   };
 
   return {

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,
+  };
+}

package/src/i18n/en/index.ts

@@ -36,6 +36,16 @@ export const en = {
       ]
     },
 
+    welcome: {
+      requirements: 'What you\'ll need:',
+      estimatedTime: 'Estimated time:',
+      consent: 'Please accept the following:',
+      privacyPolicy: 'I agree to the Privacy Policy',
+      termsOfService: 'I agree to the Terms of Service',
+      marketingConsent: 'I agree to receive marketing communications',
+      readMore: 'Read more'
+    },
+
     // Location Capture
     locationCapture: {
       title: 'Secure Your Verification',

package/src/i18n/fr/index.ts

@@ -35,6 +35,15 @@ export const fr = {
         'Une connexion internet stable'
       ]
     },
+    welcome: {
+      requirements: 'Ce dont vous aurez besoin :',
+      estimatedTime: 'Temps estimé :',
+      consent: 'Veuillez accepter les suivants :',
+      privacyPolicy: 'J\'accepte la Politique de Confidentialité',
+      termsOfService: 'J\'accepte les Conditions d\'Utilisation',
+      marketingConsent: 'J\'accepte de recevoir des communications marketing',
+      readMore: 'Lire plus'
+    },
 
     // Location Capture
     locationCapture: {

package/src/index.ts

@@ -7,5 +7,16 @@ export * from './types/KYC.types';
 
 export { TemplateKYCExample as LauchTransferGratisKYC } from './components/TemplateKYCExample';
 
+// Export Template Flow Components
+export { TemplateKYCFlow } from './components/TemplateKYCFlowRefactored';
+
+// Export Template Service and Utilities
+export { default as templateService } from './modules/api/TemplateService';
+export { transformBackendTemplateToSDK, validateTransformedTemplate } from './utils/template-transformer';
+export { useTemplateLoader } from './hooks/useTemplateLoader';
+
+// Export Template Components
+export { WelcomeTemplate } from './components/KYCElements/WelcomeTemplate';
+
 // Export Web KYC Components
 export { WebKYCEntry } from './web';

package/src/modules/api/CardAuthentification.ts

@@ -5,7 +5,7 @@ import { logger } from "../../utils/logger";
 
 export async function frontVerification(result: { path?: string, regionMapping: { authMethod: string[], mrzTypes: string[] }, selectedDocumentType: string, code: string, currentSide: string, templatePath?: string, mrzType?: string }) {
     try {
-
+        console.log("Front verification START", JSON.stringify({ result }, null, 2));
         logger.log("Front verification", JSON.stringify({ result }, null, 2));
         const token = await authentification();
         const detected = await kycService.detectFaceOnId(result?.path || '', token, result?.selectedDocumentType || '')

package/src/modules/api/KYCService.ts

@@ -200,9 +200,10 @@ export class KYCService {
     const formData = new FormData();
     const rnFile: any = { uri: idCardImageUri, type: 'image/jpeg', name: 'id_card_photo.jpg' };
     formData.append('file', rnFile);
+    logger.log('detectFaceOnId formData', JSON.stringify(formData, null, 2));
 
     const docTypeShorted = GovernmentDocumentTypeShorted[docType as GovernmentDocumentType];
-
+    logger.log('detectFaceOnId docTypeShorted', docTypeShorted);
     try {
       const res = await axios.post(`${this.faceServiceURL}/detect_face/?doc_type=${docTypeShorted}`, formData,
         {
@@ -368,14 +369,19 @@ export class KYCService {
     return res.data;
   }
 
-  async newSession(token: string): Promise<SessionResponse> {
+  async newSession({ token, apiKey }: { token?: string, apiKey?: string }): Promise<SessionResponse> {
     try {
       const data = {
         "status": "PENDING",
         "metadata": {},
       }
       const res = await axios.post<SessionResponse>(`${this.backendServiceURL}/verification/sessions/`,
-        data, { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` } });
+        data, {
+        headers: {
+          'Content-Type': 'application/json',
+          ...(apiKey ? { 'Authorization': `ApiKey ${apiKey}` } : { 'Authorization': `Bearer ${token}` })
+        }
+      });
       return res.data;
     } catch (error: any) {
       logger.error('Error creating session:', JSON.stringify(errorMessage(error), null, 2));
@@ -393,10 +399,10 @@ export class KYCService {
   }
 
   async verificationSession(payload: VerificationSessionRequest): Promise<any> {
-
+    console.log('apiKey in verificationSession', payload.apiKey);
     try {
 
-      
+
       // /api/v1/verification/api/kyc/sessions/{session_id}/steps/{step}/
       const { session_id, step, data, templateId, action, apiKey } = payload;
 
@@ -418,20 +424,23 @@ export class KYCService {
 
       const logPayload = truncateFields({ payloadData, session_id, step });
       logger.log('verificationSession payload',
-        JSON.stringify(truncateFields({ logPayload, token, path: url }),
+        JSON.stringify(truncateFields({ logPayload, token: token ?? "-", path: url, apiKey }),
           null, 2))
 
       const res = await axios.post<SessionResponse>(url,
         payloadData,
         {
-          headers: { 'Content-Type': 'application/json', ...(this.apiKey ? { 'Authorization': `ApiKey ${this.apiKey}` } : { 'Authorization': `Bearer ${token}` }) }
+          headers: {
+            'Content-Type': 'application/json',
+            ...(apiKey ? { 'Authorization': `ApiKey ${apiKey}` } : { 'Authorization': `Bearer ${token}` })
+          }
         });
       logger.log('verificationSession res', JSON.stringify(truncateFields(res.data), null, 2));
       return res.data;
 
 
     } catch (error) {
-      logger.error('Error validating component:', JSON.stringify(errorMessage(error), null, 2));
+      logger.error('Error validating component:', JSON.stringify(error, null, 2));
       throw new Error(errorMessage(error));
     }
   }
@@ -476,6 +485,7 @@ export function truncateFields(obj: any, maxLength = 420): any {
 }
 export const authentification = async () => {
   try {
+    logger.log('authentification params', 'kyc_frontend', 'ZCW4mGaJXWR0UuI40lM1pHNQmYLw2xvX');
     const params = new URLSearchParams();
     params.append('client_id', 'kyc_frontend');
     params.append('client_secret', 'ZCW4mGaJXWR0UuI40lM1pHNQmYLw2xvX');