@transfergratis/react-native-sdk 0.1.24 → 0.1.26

package/src/web/WebKYCEntry.tsx

@@ -4,7 +4,9 @@ import { View, Text, StyleSheet, SafeAreaView, ActivityIndicator } from 'react-n
 // import { KYCTemplate } from '../types/KYC.types';
 import { useI18n } from '../hooks/useI18n';
 import { TemplateKYCExample } from '../components/TemplateKYCExample';
-import { isCallbackUrlAllowed, generateCallbackSignature } from '../config/allowedDomains';
+import { isCallbackUrlAllowed } from '../config/allowedDomains';
+import KYCConfig from '../config/KYCConfig';
+import { BackendEnvironment } from '../types/env.types';
 
 interface WebKYCEntryProps {
   onComplete?: (data: any) => void;
@@ -15,10 +17,19 @@ interface WebKYCEntryProps {
 interface URLParams {
   token?: string;
   return_url?: string;
+  push_url?: string;
   lang?: string;
   theme?: string;
   kyc_id?: string;
   secret?: string; // Optional secret for signature generation
+  env?: 'PRODUCTION' | 'SANDBOX'; // Environment mode
+  template_id?: string; // Template ID for dynamic template loading
+  server_env?: BackendEnvironment; // Backend environment mode
+  step?: string; // Deprecated: use component_index.
+  component_index?: string; // Index in template.components (0-based) to resume at
+  country?: string; // Code pays pour restaurer la sélection (reprise multi-appareil)
+  document_type?: string; // Type de document (national_id, passport, etc.)
+  region?: string; // Région si applicable
 }
 
 interface VerificationSteps {
@@ -41,15 +52,32 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
   // Parse URL parameters
   const parseUrlParams = useCallback((): URLParams => {
     if (typeof window === 'undefined') return {};
-    
+
     const urlParams = new URLSearchParams(window.location.search);
+    const envParam = urlParams.get('env');
+    const validEnv = envParam === 'SANDBOX' || envParam === 'PRODUCTION' ? envParam : 'PRODUCTION';
+
+    const serverEnvParam = urlParams.get('server_env');
+    const validServerEnv: BackendEnvironment = serverEnvParam === 'TEST' || serverEnvParam === 'PRODUCTION'
+      ? (serverEnvParam as BackendEnvironment)
+      : 'PRODUCTION';
+
     return {
       token: urlParams.get('token') || undefined,
       return_url: urlParams.get('return_url') || undefined,
+      push_url: urlParams.get('push_url') || undefined,
       lang: urlParams.get('lang') || 'en',
       theme: urlParams.get('theme') || 'light',
       kyc_id: urlParams.get('kyc_id') || undefined,
       secret: urlParams.get('secret') || undefined,
+      env: validEnv,
+      template_id: urlParams.get('template_id') || undefined,
+      server_env: validServerEnv,
+      step: urlParams.get('step') || undefined,
+      component_index: urlParams.get('component_index') || undefined,
+      country: urlParams.get('country') || undefined,
+      document_type: urlParams.get('document_type') || undefined,
+      region: urlParams.get('region') || undefined,
     };
   }, []);
 
@@ -61,8 +89,8 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
     processing_state?: 'analyzing' | 'completed' | 'pending';
     verification_steps?: VerificationSteps;
   }) => {
-    const { return_url, secret } = urlParams;
-    
+    const { return_url } = urlParams;
+
     if (!return_url) {
       console.warn('No return_url provided');
       return;
@@ -74,7 +102,7 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
       if (!validation.allowed) {
         console.error('Callback URL validation failed:', validation.reason);
         setError(`Security Error: ${validation.reason}`);
-        
+
         // Log suspicious redirect attempt
         console.warn('Suspicious redirect attempt blocked:', {
           url: return_url,
@@ -83,46 +111,9 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
         });
         return;
       }
-
-      const returnUrl = new URL(return_url);
-
-      // Build redirect URL with parameters
-      const redirectUrl = new URL(returnUrl);
-      const redirectParams: Record<string, string> = {
-        status: params.status,
-      };
-
-      if (params.kyc_id) {
-        redirectParams.kyc_id = params.kyc_id;
-      }
-      
-      if (params.message) {
-        redirectParams.message = params.message;
-      }
-
-      if (params.processing_state) {
-        redirectParams.processing_state = params.processing_state;
-      }
-
-      if (params.verification_steps) {
-        redirectParams.verification_steps = JSON.stringify(params.verification_steps);
-      }
-
-      // Generate signature for integrity verification
-      if (secret) {
-        const signature = await generateCallbackSignature(redirectParams, secret);
-        if (signature) {
-          redirectParams.sig = signature;
-        }
-      }
-
-      // Add all params to URL
-      Object.entries(redirectParams).forEach(([key, value]) => {
-        redirectUrl.searchParams.set(key, value);
-      });
-
       // Send postMessage to parent if in iframe
       if (window.parent !== window) {
+        const targetOrigin = new URL(return_url).origin;
         window.parent.postMessage({
           type: 'kyc_result',
           status: params.status,
@@ -130,11 +121,10 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
           message: params.message,
           processing_state: params.processing_state,
           verification_steps: params.verification_steps,
-        }, returnUrl.origin); // Use specific origin instead of '*'
+        }, targetOrigin);
+      } else {
+        window.location.href = return_url;
       }
-
-      // Redirect to return URL
-      window.location.href = redirectUrl.toString();
     } catch (error) {
       console.error('Error during redirect:', error);
       setError('Failed to redirect to callback URL');
@@ -142,12 +132,41 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
   }, [urlParams]);
 
   // Handle KYC completion
-  const handleComplete = useCallback((data: any) => {
+  const handleComplete = useCallback(async (data: any) => {
     console.log('KYC completed:', data);
-    
+
     // Check if still processing/analyzing
     const isStillProcessing = data.isProcessing || data.session?.isProcessing;
-    
+
+    // Handle Push URL webhook if provided
+    if (urlParams.push_url) {
+      try {
+        const verificationState = {
+          status: 'success', // verification completed successfully
+          result: data, // pass complete data object as result
+        };
+
+        // Send data to provided push_url with a timeout
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
+
+        await fetch(urlParams.push_url, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(verificationState),
+          signal: controller.signal,
+        });
+
+        clearTimeout(timeoutId);
+        console.log('Successfully pushed KYC data to webhook');
+      } catch (err) {
+        // Fail open - redirect anyway even if webhook fails
+        console.warn('Failed to push data to webhook URL:', err);
+      }
+    }
+
     redirectToReturnUrl({
       status: 'completed',
       kyc_id: data.session_id || urlParams.kyc_id,
@@ -160,7 +179,7 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
       },
     });
     onComplete?.(data);
-  }, [redirectToReturnUrl, urlParams.kyc_id, onComplete]);
+  }, [redirectToReturnUrl, urlParams, onComplete]);
 
   // Handle KYC error
   const handleError = useCallback((error: string) => {
@@ -177,8 +196,35 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
 
   // Handle KYC cancellation
   const handleCancel = useCallback(() => {
-    console.log('KYC cancelled');
+    console.log('KYC cancelled', urlParams.push_url, urlParams);
     setIsAnalyzing(false);
+    if (urlParams.push_url) {
+      try {
+        const verificationState = {
+          status: 'cancelled', // verification cancelled
+          result: null, // pass null as result
+        };
+
+        // Send data to provided push_url with a timeout
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
+
+        fetch(urlParams.push_url, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(verificationState),
+          signal: controller.signal,
+        });
+
+        clearTimeout(timeoutId);
+        console.log('Successfully pushed KYC cancellation data to webhook');
+      } catch (err) {
+        // Fail open - redirect anyway even if webhook fails
+        console.warn('Failed to push data to webhook URL:', err);
+      }
+    }
     redirectToReturnUrl({
       status: 'cancelled',
       kyc_id: urlParams.kyc_id,
@@ -193,12 +239,17 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
     try {
       const params = parseUrlParams();
       setUrlParams(params);
-      
+
       // Set language if provided
       if (params.lang) {
         setLocale(params.lang);
       }
-      
+
+      // Configure backend environment
+      if (params.server_env) {
+        KYCConfig.setBackendEnvironment(params.server_env);
+      }
+
       setIsLoading(false);
     } catch (error) {
       console.error('Error parsing URL parameters:', error);
@@ -243,13 +294,24 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
           </View>
         </View>
       )}
-       <TemplateKYCExample  
-          onComplete={handleComplete} 
-          onCancel={handleCancel} 
-          onError={handleError}
-          language={urlParams.lang || 'en'}
-          API_KEY={urlParams.token}
-        />
+      <TemplateKYCExample
+        onComplete={handleComplete}
+        onCancel={handleCancel}
+        onError={handleError}
+        language={urlParams.lang || 'en'}
+        API_KEY={urlParams.token}
+        templateId={urlParams.template_id}
+        env={urlParams.env || 'PRODUCTION'}
+        serverEnv={urlParams.server_env}
+        existingSessionId={urlParams.kyc_id}
+        initialComponentIndex={(() => {
+          const raw = urlParams.component_index ?? urlParams.step;
+          if (raw == null || raw === '') return undefined;
+          const index = parseInt(raw, 10);
+          return Number.isNaN(index) ? undefined : index;
+        })()}
+        initialCountryResume={urlParams.country && urlParams.document_type ? { code: urlParams.country, documentType: urlParams.document_type, region: urlParams.region || undefined } : undefined}
+      />
     </SafeAreaView>
   );
 };