@transfergratis/react-native-sdk 0.1.21 → 0.1.23

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 => ({
@@ -186,7 +186,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,10 +195,12 @@ 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) => {
+    console.log('apiKey in buildPayloadForComponent', apiKey);
+
     const base = { template_id: null, step: component.order, permissionGranted: true } as any;
     if (!action) {
       return base;
@@ -239,45 +241,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 +293,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 +306,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 +338,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);
@@ -374,7 +376,7 @@ export const useTemplateKYCFlow = (
       default:
         return false;
     }
-  }, [state.template.components, state.componentData]);
+  }, [state.template.components, state.componentData, apiKey]);
 
   // Actions du flux
   const actions: TemplateActions = {
@@ -392,7 +394,7 @@ export const useTemplateKYCFlow = (
         isProcessing: false,
         verification: { status: 'idle', result: undefined },
       }));
-    }, [ensureReviewSubmitStep, ensureVerificationProgressStep]),
+    }, [ensureReviewSubmitStep, ensureVerificationProgressStep, apiKey]),
 
     // Passer au composant suivant
     nextComponent: useCallback(async () => {
@@ -476,6 +478,7 @@ 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,
@@ -484,7 +487,7 @@ export const useTemplateKYCFlow = (
           templateId: null,
           token: state.session.token,
           action: action,
-          apiKey: apiKey,
+          apiKey: apiKey ?? "-",
         });
         logger.log("currentComp state", truncateFields(state));
         // Marquer comme complété et passer au suivant
@@ -512,7 +515,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]),
 
     // Retourner au composant précédent
     previousComponent: useCallback(() => {
@@ -522,7 +525,7 @@ export const useTemplateKYCFlow = (
         ...prev,
         currentComponentIndex: prev.currentComponentIndex - 1,
       }));
-    }, [canGoPrevious]),
+    }, [canGoPrevious, apiKey]),
 
     // Aller à un composant spécifique
     goToComponent: useCallback((componentId: number) => {
@@ -533,7 +536,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 +554,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 +569,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 +597,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 +610,7 @@ export const useTemplateKYCFlow = (
         ...prev,
         currentLanguage: language,
       }));
-    }, []),
+    }, [apiKey]),
 
     // Afficher le stepper personnalisé
     showCustomStepper: useCallback((show: boolean) => {
@@ -615,14 +618,14 @@ export const useTemplateKYCFlow = (
         ...prev,
         showCustomStepper: show,
       }));
-    }, []),
+    }, [apiKey]),
 
     setVerificationState: useCallback((verificationState) => {
       setState(prev => ({
         ...prev,
         verification: verificationState,
       }));
-    }, []),
+    }, [apiKey]),
   };
 
   return {

package/src/modules/api/KYCService.ts

@@ -48,7 +48,7 @@ export class KYCService {
   private mrzServiceURL = 'https://kyc-engine.transfergratis.net:8002';
   private barcodeServiceURL = 'https://kyc-engine.transfergratis.net:8000';
   private orientationServiceURL = 'http://18.188.180.154:8080';
-  private backendServiceURL = 'https://service.sanctumkey.com//api/v1';
+  private backendServiceURL = 'https://service.sanctumkey.com/api/v1';
 
   constructor(baseURL: string, apiKey: string) {
     this.baseURL = baseURL;
@@ -368,14 +368,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 +398,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 +423,21 @@ 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));
     }
   }

package/src/modules/api/types.ts

@@ -35,6 +35,7 @@ export interface VerificationResult {
                 personal_information: {
                     full_name: string;
                     first_name: string | null;
+                    given_name: string | null;
                     last_name: string | null;
                     date_of_birth: string;
                     sex: string;