@transfergratis/react-native-sdk 0.1.23 → 0.1.25

package/src/web/WebKYCEntry.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { View, Text, StyleSheet, SafeAreaView } from 'react-native';
+import { View, Text, StyleSheet, SafeAreaView, ActivityIndicator } from 'react-native';
 // import { TemplateKYCFlow } from '../components/TemplateKYCFlowRefactored';
 // import { KYCTemplate } from '../types/KYC.types';
 import { useI18n } from '../hooks/useI18n';
 import { TemplateKYCExample } from '../components/TemplateKYCExample';
+import { isCallbackUrlAllowed } from '../config/allowedDomains';
+import KYCConfig from '../config/KYCConfig';
+import { BackendEnvironment } from '../types/env.types';
 
 interface WebKYCEntryProps {
   onComplete?: (data: any) => void;
@@ -14,9 +17,21 @@ 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; // Step index to resume verification at the correct point
+}
+
+interface VerificationSteps {
+  document_analyzed?: boolean;
+  selfie_analyzed?: boolean;
+  liveness_checked?: boolean;
 }
 
 const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
@@ -28,109 +43,185 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
   const [urlParams, setUrlParams] = useState<URLParams>({});
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
 
   // 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,
     };
   }, []);
 
-  // Safe redirect function with validation
-  const redirectToReturnUrl = useCallback((params: {
+  // Safe redirect function with enhanced validation
+  const redirectToReturnUrl = useCallback(async (params: {
     status: 'completed' | 'cancelled' | 'error';
     kyc_id?: string;
     message?: string;
-    sig?: string;
+    processing_state?: 'analyzing' | 'completed' | 'pending';
+    verification_steps?: VerificationSteps;
   }) => {
     const { return_url } = urlParams;
-    
+
     if (!return_url) {
       console.warn('No return_url provided');
       return;
     }
 
-    // Basic URL validation - ensure it's a valid URL
     try {
-      const returnUrl = new URL(return_url);
-      
-      // Optional: Add domain allowlist validation here
-      // const allowedDomains = ['example.com', 'trusted-site.com'];
-      // if (!allowedDomains.some(domain => returnUrl.hostname.endsWith(domain))) {
-      //   console.error('Return URL not in allowlist');
-      //   return;
-      // }
-
-      // Build redirect URL with parameters
-      const redirectUrl = new URL(returnUrl);
-      redirectUrl.searchParams.set('status', params.status);
-      
-      if (params.kyc_id) {
-        redirectUrl.searchParams.set('kyc_id', params.kyc_id);
-      }
-      
-      if (params.message) {
-        redirectUrl.searchParams.set('message', params.message);
-      }
-      
-      if (params.sig) {
-        redirectUrl.searchParams.set('sig', params.sig);
-      }
+      // Enhanced URL validation with domain whitelist
+      const validation = isCallbackUrlAllowed(return_url);
+      if (!validation.allowed) {
+        console.error('Callback URL validation failed:', validation.reason);
+        setError(`Security Error: ${validation.reason}`);
 
-      // Optional: Send postMessage to parent if in iframe
+        // Log suspicious redirect attempt
+        console.warn('Suspicious redirect attempt blocked:', {
+          url: return_url,
+          reason: validation.reason,
+          timestamp: new Date().toISOString(),
+        });
+        return;
+      }
+      // 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,
           kyc_id: params.kyc_id,
           message: params.message,
-        }, '*');
+          processing_state: params.processing_state,
+          verification_steps: params.verification_steps,
+        }, targetOrigin);
+      } else {
+        window.location.href = return_url;
       }
-
-      // Redirect to return URL
-      window.location.href = redirectUrl.toString();
     } catch (error) {
-      console.error('Invalid return URL:', error);
-      setError('Invalid return URL provided');
+      console.error('Error during redirect:', error);
+      setError('Failed to redirect to callback URL');
     }
   }, [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,
       message: 'KYC process completed successfully',
+      processing_state: isStillProcessing ? 'analyzing' : 'completed',
+      verification_steps: {
+        document_analyzed: data.documentAnalysisComplete || false,
+        selfie_analyzed: data.selfieAnalysisComplete || false,
+        liveness_checked: data.livenessCheckComplete || false,
+      },
     });
     onComplete?.(data);
-  }, [redirectToReturnUrl, urlParams.kyc_id, onComplete]);
+  }, [redirectToReturnUrl, urlParams, onComplete]);
 
   // Handle KYC error
   const handleError = useCallback((error: string) => {
     console.error('KYC error:', error);
+    setIsAnalyzing(false);
     redirectToReturnUrl({
       status: 'error',
       kyc_id: urlParams.kyc_id,
       message: error,
+      processing_state: 'pending',
     });
     onError?.(error);
   }, [redirectToReturnUrl, urlParams.kyc_id, onError]);
 
   // 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,
       message: 'KYC process was cancelled',
+      processing_state: 'pending',
     });
     onCancel?.();
   }, [redirectToReturnUrl, urlParams.kyc_id, onCancel]);
@@ -140,12 +231,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);
@@ -181,13 +277,30 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
 
   return (
     <SafeAreaView style={styles.container}>
-       <TemplateKYCExample  
-          onComplete={handleComplete} 
-          onCancel={handleCancel} 
-          onError={handleError}
-          language={urlParams.lang || 'en'}
-          API_KEY={urlParams.token}
-        />
+      {isAnalyzing && (
+        <View style={styles.analyzingOverlay}>
+          <View style={styles.analyzingContainer}>
+            <ActivityIndicator size="large" color="#2DBD60" />
+            <Text style={styles.analyzingText}>Analyzing verification data...</Text>
+            <Text style={styles.analyzingSubtext}>This may take a few moments</Text>
+          </View>
+        </View>
+      )}
+      <TemplateKYCExample
+        onComplete={handleComplete}
+        onCancel={handleCancel}
+        onError={handleError}
+        language={urlParams.lang || 'en'}
+        API_KEY={urlParams.token}
+        templateId={urlParams.template_id}
+        env={urlParams.env || 'PRODUCTION'}
+        existingSessionId={urlParams.kyc_id}
+        initialStep={urlParams.step ? (() => {
+          const stepNum = parseInt(urlParams.step, 10);
+          console.log('Parsing step from URL:', { stepString: urlParams.step, stepNumber: stepNum, isNaN: isNaN(stepNum) });
+          return isNaN(stepNum) ? undefined : stepNum;
+        })() : undefined}
+      />
     </SafeAreaView>
   );
 };
@@ -196,6 +309,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#f5f5f5',
+    overflow: 'visible' as any, // Allow scrolling on web
   },
   loadingText: {
     fontSize: 18,
@@ -210,6 +324,41 @@ const styles = StyleSheet.create({
     color: '#dc2626',
     paddingHorizontal: 20,
   },
+  analyzingOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 9999,
+  },
+  analyzingContainer: {
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 32,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  analyzingText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginTop: 16,
+    textAlign: 'center',
+  },
+  analyzingSubtext: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 8,
+    textAlign: 'center',
+  },
 });
 
 export default WebKYCEntry;