@sanctum-key/react-native-sdk 1.0.49 → 1.0.51

package/src/components/TemplateKYCFlowRefactored.tsx

@@ -4,6 +4,7 @@ import { KYCTemplate, VerificationState } from '../types/KYC.types';
 import { TemplateKYCFlowProvider, useTemplateKYCFlowContext } from '../hooks/useTemplateKYCFlow';
 import { useI18n } from '../hooks/useI18n';
 import { showAlert } from '../utils/platformAlert';
+
 import { IDCardCapture } from './KYCElements/IDCardCapture';
 import { SelfieCaptureTemplate } from './KYCElements/SelfieCaptureTemplate';
 import { FileUploadTemplate } from './KYCElements/FileUploadTemplate';
@@ -20,6 +21,7 @@ import { PersonalInformationTemplate } from './KYCElements/PersonalInformationTe
 import { AdditionalDocumentsTemplate } from './KYCElements/AdditionalDocumentsTemplate';
 import { KycEnvironment, BackendEnvironment } from '../types/env.types';
 import KYCConfig from '../config/KYCConfig';
+import { sdkLogger } from '../utils/logger'; // 🚨 IMPORT SDK LOGGER
 
 interface TemplateKYCFlowProps {
   template?: KYCTemplate;        // Format SDK direct (existing, now optional)
@@ -29,12 +31,10 @@ interface TemplateKYCFlowProps {
   language?: string;
   onCancel?: () => void;
   API_KEY?: string;              // Required if templateId is used
-  env?: KycEnvironment;           // Flow execution: PRODUCTION (full AI) or SANDBOX (skip AI)
+  env?: KycEnvironment;          // Flow execution: PRODUCTION (full AI) or SANDBOX (skip AI)
   serverEnv?: BackendEnvironment; // Backend to call: PRODUCTION or TEST (API URL)
   existingSessionId?: string;
-  /** Index in template.components (0-based) to resume at — e.g. from URL component_index or template table */
   initialComponentIndex?: number;
-  /** Pays / type de document depuis l'URL de reprise (reprise multi-appareil) */
   initialCountryResume?: { code: string; documentType: string; region?: string };
   referenceId?: string;
   onSessionSave?: (sessionId: string) => void;
@@ -61,32 +61,39 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
   const { t } = useI18n();
   const { template: loadedTemplate, isLoading, error, loadTemplate } = useTemplateLoader();
 
-  // Which backend URL to call (independent from flow env)
+  useEffect(() => {
+    if (API_KEY) {
+      if (sdkLogger.setApiKey) sdkLogger.setApiKey(API_KEY);
+    }
+    
+  }, [env, serverEnv, existingSessionId, API_KEY]);
+
   useEffect(() => {
     if (serverEnv !== undefined) {
       KYCConfig.setBackendEnvironment(serverEnv);
     }
   }, [serverEnv]);
 
-  // Validate props
   useEffect(() => {
     if (!providedTemplate && !templateId) {
       const errorMsg = 'Either template or templateId must be provided';
+      sdkLogger.error("Template Loading Failed: Missing Props", { errorMsg });
       onError?.(errorMsg);
       return;
     }
 
     if (templateId && !API_KEY) {
-      // Try to load without API key (will use token authentication)
+      sdkLogger.info(`Fetching template ${templateId} via token authentication`);
       loadTemplate(templateId);
     } else if (templateId && API_KEY) {
+      sdkLogger.info(`Fetching template ${templateId} via API Key`);
       loadTemplate(templateId, API_KEY);
     }
   }, [templateId, API_KEY, providedTemplate, loadTemplate, onError]);
 
-  // Handle loading errors
   useEffect(() => {
     if (error) {
+      sdkLogger.error("Template Fetch Error", { error });
       onError?.(error);
     }
   }, [error, onError]);
@@ -96,10 +103,15 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
       t('kyc.cancelConfirmation.title'),
       t('kyc.cancelConfirmation.message'),
       [
-        { text: t('kyc.cancelConfirmation.cancelButton'), style: 'cancel' },
+        { 
+          text: t('kyc.cancelConfirmation.cancelButton'), 
+          style: 'cancel',
+        },
         {
           text: t('kyc.cancelConfirmation.confirmButton'),
           onPress: () => {
+            sdkLogger.warn("User confirmed flow cancellation");
+            sdkLogger.flush();
             onCancel?.();
           }
         },
@@ -107,10 +119,14 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
     );
   };
 
-  // Determine which template to use
   const template = providedTemplate || loadedTemplate;
 
-  // Show loading state while fetching template
+  useEffect(() => {
+    if (template) {
+      sdkLogger.info("Template loaded successfully", { componentCount: template.components.length });
+    }
+  }, [template]);
+
   if (templateId && isLoading && !template) {
     return (
       <View style={styles.loadingContainer}>
@@ -120,14 +136,16 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
     );
   }
 
-  // Show error state if template failed to load
   if (templateId && error && !template) {
     return (
       <View style={styles.errorContainer}>
         <Text style={styles.errorText}>{error}</Text>
-        <TouchableOpacity
-          style={styles.retryButton}
-          onPress={() => loadTemplate(templateId, API_KEY)}
+        <TouchableOpacity 
+          style={styles.retryButton} 
+          onPress={() => {
+            sdkLogger.info("User retrying template fetch");
+            loadTemplate(templateId, API_KEY);
+          }}
         >
           <Text style={styles.retryButtonText}>{t('common.retry') || 'Retry'}</Text>
         </TouchableOpacity>
@@ -135,7 +153,6 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
     );
   }
 
-  // Show error if no template available
   if (!template) {
     return (
       <View style={styles.errorContainer}>
@@ -146,11 +163,20 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
     );
   }
 
+
   return (
     <TemplateKYCFlowProvider
       template={template}
-      onComplete={onComplete}
-      onError={onError}
+      onComplete={(data) => {
+        sdkLogger.info("KYC Flow Completed", { referenceId: data?.result?.referenceId });
+        sdkLogger.flush();
+        if (onComplete) onComplete(data);
+      }}
+      onError={(err) => {
+        sdkLogger.error("KYC Flow Error", { error: err });
+        sdkLogger.flush();
+        if (onError) onError(err);
+      }}
       onCancel={OnCancel}
       initialLanguage={language}
       apiKey={API_KEY}
@@ -168,15 +194,26 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
 };
 
 const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel }) => {
-  const {
-    state,
-    actions,
-    currentComponent,
-    progress,
-  } = useTemplateKYCFlowContext();
-
+  const { state, actions, currentComponent, progress } = useTemplateKYCFlowContext();
   const { t } = useI18n();
 
+  console.log(`sessionnnn id: ${state.session.session_id}`)
+
+  useEffect(() => {
+    if (state.session?.session_id) {
+      sdkLogger.setSessionId(state.session.session_id);
+    }
+  }, [state.session?.session_id]);
+
+  useEffect(() => {
+    if (currentComponent) {
+      sdkLogger.info(`User navigated to step ${state.currentComponentIndex + 1}: ${currentComponent.type}`, {
+        componentId: currentComponent.id,
+        progress: `${progress}%`
+      });
+    }
+  }, [currentComponent?.id, state.currentComponentIndex, progress]);
+
   const updateComponentData = (componentId: number, data: unknown) => {
     actions.updateComponentData(componentId, data);
   };
@@ -189,7 +226,6 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
     );
   }
 
-  // Rendu du composant actuel
   const renderCurrentComponent = () => {
     const commonProps = {
       component: currentComponent,
@@ -204,43 +240,20 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
     }
 
     switch (currentComponent.type) {
-      case 'welcome':
-        return <WelcomeTemplate {...commonProps} />;
-
-      case 'id_card':
-        return <IDCardCapture {...commonProps} />;
-
-      case 'selfie':
-        return <SelfieCaptureTemplate {...commonProps} />;
-
-      case 'file_upload':
-        return <FileUploadTemplate {...commonProps} />;
-
-      case 'location':
-        return <LocationCaptureTemplate {...commonProps} />;
-
-      case 'country_selection':
-        return <CountrySelectionTemplate {...commonProps} />;
-
-      case 'review_submit':
-        return <ReviewSubmitTemplate {...commonProps} />;
-
-      case 'email_verification':
-        return <EmailVerificationTemplate {...commonProps} />;
-
-      case 'phone_verification':
-        return <PhoneVerificationTemplate {...commonProps} />;
-
-      case 'personal_information':
-        return <PersonalInformationTemplate {...commonProps} />;
-
-      case 'additional_documents':
-        return <AdditionalDocumentsTemplate {...commonProps} />;
-
-      case 'verification_progress':
-        return <VerificationProgressTemplate {...commonProps} />;
-
+      case 'welcome': return <WelcomeTemplate {...commonProps} />;
+      case 'id_card': return <IDCardCapture {...commonProps} />;
+      case 'selfie': return <SelfieCaptureTemplate {...commonProps} />;
+      case 'file_upload': return <FileUploadTemplate {...commonProps} />;
+      case 'location': return <LocationCaptureTemplate {...commonProps} />;
+      case 'country_selection': return <CountrySelectionTemplate {...commonProps} />;
+      case 'review_submit': return <ReviewSubmitTemplate {...commonProps} />;
+      case 'email_verification': return <EmailVerificationTemplate {...commonProps} />;
+      case 'phone_verification': return <PhoneVerificationTemplate {...commonProps} />;
+      case 'personal_information': return <PersonalInformationTemplate {...commonProps} />;
+      case 'additional_documents': return <AdditionalDocumentsTemplate {...commonProps} />;
+      case 'verification_progress': return <VerificationProgressTemplate {...commonProps} />;
       default:
+        sdkLogger.error("Attempted to render unsupported component type", { type: currentComponent.type });
         return (
           <View style={styles.unsupportedContainer}>
             <Text style={styles.unsupportedText}>
@@ -259,9 +272,8 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
           <ActivityIndicator size="large" color="#fff" />
         </View>
       )}
-      <SafeAreaView style={styles.container}>
-        {/* Header avec informations sur l'étape */}
 
+      <SafeAreaView style={styles.container}>
         {(state.showCustomStepper && state.session.isInitialized) ? (
           <View style={styles.header}>
             <Text style={styles.progressText}>
@@ -270,16 +282,11 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
                 total: state.template.components.length,
               })}
             </Text>
+            
             <View style={styles.progressContainer}>
               <View style={styles.progressBar}>
-                <View
-                  style={[
-                    styles.progressFill,
-                    { width: `${progress}%` }
-                  ]}
-                />
+                <View style={[styles.progressFill, { width: `${progress}%` }]} />
               </View>
-
             </View>
 
             <View style={{ position: 'absolute', right: 12, top: 12 }}>
@@ -290,7 +297,6 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
           </View>
         ) : null}
 
-        {/* Contenu principal */}
         <ScrollView
           style={styles.scrollView}
           contentContainerStyle={styles.content}
@@ -308,175 +314,35 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
         )}
       </SafeAreaView>
     </View>
-
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-
-  },
-  header: {
-    backgroundColor: 'white',
-    paddingVertical: 20,
-    paddingHorizontal: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: '#e0e0e0',
-    marginHorizontal: 12,
-    marginTop: 12,
-    // shadow
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.15,
-    shadowRadius: 1.84,
-    elevation: 5,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#333',
-    marginBottom: 8,
-  },
-  description: {
-    fontSize: 16,
-    color: '#666',
-    marginBottom: 20,
-  },
-  progressContainer: {
-    // marginBottom: 20,
-  },
-  progressBar: {
-    height: 8,
-    backgroundColor: '#e0e0e0',
-    borderRadius: 4,
-    overflow: 'hidden',
-  },
-  progressFill: {
-    height: '100%',
-    backgroundColor: '#2DBD60',
-    borderRadius: 4,
-  },
-  progressText: {
-    fontSize: 14,
-    color: 'black',
-    fontWeight: '600',
-    textAlign: 'left',
-    marginBottom: 8,
-  },
-  stepInfo: {
-    backgroundColor: '#f8f9fa',
-    padding: 16,
-    borderRadius: 8,
-    borderLeftWidth: 4,
-    borderLeftColor: '#2DBD60',
-  },
-  stepTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 8,
-  },
-  stepDescription: {
-    fontSize: 14,
-    color: '#666',
-    lineHeight: 20,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  content: {
-    flexGrow: 1,
-    alignItems: 'center',
-    paddingBottom: 20, // Add padding for better mobile scrolling
-  },
-  navigation: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    padding: 20,
-    backgroundColor: 'white',
-    borderTopWidth: 1,
-    borderTopColor: '#e0e0e0',
-  },
-  navButton: {
-    paddingHorizontal: 24,
-    paddingVertical: 12,
-    borderRadius: 8,
-    minWidth: 100,
-    alignItems: 'center',
-  },
-  primaryButton: {
-    backgroundColor: '#2DBD60',
-  },
-  navButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: 'white',
-  },
-  errorText: {
-    color: '#dc2626',
-    fontSize: 16,
-    textAlign: 'center',
-    margin: 20,
-  },
-  unsupportedContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 20,
-  },
-  unsupportedText: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-  },
-  processingContainer: {
-    position: 'absolute',
-    flex: 1,
-    width: Dimensions.get('window').width,
-    height: Dimensions.get('window').height,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 10000000,
-  },
-  processingText: {
-    fontSize: 16,
-    color: '#fff',
-    textAlign: 'center',
-    fontWeight: 'bold',
-    marginBottom: 10,
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5f5f5',
-  },
-  loadingText: {
-    marginTop: 16,
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-  },
-  errorContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5f5f5',
-    padding: 20,
-  },
-  retryButton: {
-    marginTop: 20,
-    paddingHorizontal: 24,
-    paddingVertical: 12,
-    backgroundColor: '#2DBD60',
-    borderRadius: 8,
-  },
-  retryButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-}); 
+  container: { flex: 1, backgroundColor: '#f5f5f5', },
+  header: { backgroundColor: 'white', paddingVertical: 20, paddingHorizontal: 12, borderBottomWidth: 1, borderBottomColor: '#e0e0e0', marginHorizontal: 12, marginTop: 12, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.15, shadowRadius: 1.84, elevation: 5, },
+  title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, },
+  description: { fontSize: 16, color: '#666', marginBottom: 20, },
+  progressContainer: { },
+  progressBar: { height: 8, backgroundColor: '#e0e0e0', borderRadius: 4, overflow: 'hidden', },
+  progressFill: { height: '100%', backgroundColor: '#2DBD60', borderRadius: 4, },
+  progressText: { fontSize: 14, color: 'black', fontWeight: '600', textAlign: 'left', marginBottom: 8, },
+  stepInfo: { backgroundColor: '#f8f9fa', padding: 16, borderRadius: 8, borderLeftWidth: 4, borderLeftColor: '#2DBD60', },
+  stepTitle: { fontSize: 18, fontWeight: '600', color: '#333', marginBottom: 8, },
+  stepDescription: { fontSize: 14, color: '#666', lineHeight: 20, },
+  scrollView: { flex: 1, },
+  content: { flexGrow: 1, alignItems: 'center', paddingBottom: 20, },
+  navigation: { flexDirection: 'row', justifyContent: 'space-between', padding: 20, backgroundColor: 'white', borderTopWidth: 1, borderTopColor: '#e0e0e0', },
+  navButton: { paddingHorizontal: 24, paddingVertical: 12, borderRadius: 8, minWidth: 100, alignItems: 'center', },
+  primaryButton: { backgroundColor: '#2DBD60', },
+  navButtonText: { fontSize: 16, fontWeight: '600', color: 'white', },
+  errorText: { color: '#dc2626', fontSize: 16, textAlign: 'center', margin: 20, },
+  unsupportedContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, },
+  unsupportedText: { fontSize: 16, color: '#666', textAlign: 'center', },
+  processingContainer: { position: 'absolute', flex: 1, width: Dimensions.get('window').width, height: Dimensions.get('window').height, backgroundColor: 'rgba(0, 0, 0, 0.5)', justifyContent: 'center', alignItems: 'center', zIndex: 10000000, },
+  processingText: { fontSize: 16, color: '#fff', textAlign: 'center', fontWeight: 'bold', marginBottom: 10, },
+  loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5', },
+  loadingText: { marginTop: 16, fontSize: 16, color: '#666', textAlign: 'center', },
+  errorContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5', padding: 20, },
+  retryButton: { marginTop: 20, paddingHorizontal: 24, paddingVertical: 12, backgroundColor: '#2DBD60', borderRadius: 8, },
+  retryButtonText: { color: '#fff', fontSize: 16, fontWeight: '600', },
+});

package/src/hooks/useTemplateKYCFlow.tsx

@@ -1040,6 +1040,7 @@ export const useTemplateKYCFlow = (
       return validateComponent(componentId, dataOverride);
     }, [validateComponent, apiKey]),
     // complet verification
+    
     submitVerification: useCallback(async () => {
       setState(prev => ({ ...prev, isProcessing: true }));
       try {

package/src/types/KYC.types.ts

@@ -462,7 +462,6 @@ export interface SessionState {
 export type VerificationStatus = 'idle' | 'in_progress' | 'success' | 'failed';
 
 
-
 export interface VerificationState {
   status: VerificationStatus;
   result?: VerificationResult;