@transfergratis/react-native-sdk 0.1.5 → 0.1.7

package/src/modules/api/types.ts

@@ -12,13 +12,40 @@ export interface SessionResponse {
 
 export interface VerificationSessionRequest {
     step: number;
-    data:VerificationSessionData;
+    data: VerificationSessionData;
     templateId: string | null;
     session_id: string;
     token: string;
-    action:string
+    action: string
 }
 
 
 // dynamic type
-export type VerificationSessionData = Record<string, any>;
+export type VerificationSessionData = Record<string, any>;
+
+
+export interface VerificationResult {
+    [key: string]: {
+        data: {
+            verification_id: string;
+            verification_status: string;
+            completion_timestamp: string;
+            user_data: {
+                personal_information: {
+                    full_name: string;
+                    first_name: string | null;
+                    last_name: string | null;
+                    date_of_birth: string | null;
+                    nationality: string | null;
+                    gender: string | null;
+                    place_of_birth: string | null;
+                };
+            };
+            selfie_info: {
+                is_match: boolean;
+                similarity: number;
+                image: string;
+            };
+        };
+    };
+}

package/src/types/KYC.types.ts

@@ -1,3 +1,5 @@
+import { VerificationResult } from "../modules/api/types";
+
 // Types pour les documents
 export interface Document {
   id: string;
@@ -428,11 +430,7 @@ export interface SessionState {
 
 export type VerificationStatus = 'idle' | 'in_progress' | 'success' | 'failed';
 
-export interface VerificationResult {
-  referenceId?: string;
-  message?: string;
-  issues?: string[];
-}
+
 
 export interface VerificationState {
   status: VerificationStatus;
@@ -452,6 +450,7 @@ export interface TemplateActions {
   setLanguage: (language: string) => void;
   showCustomStepper: (show: boolean) => void;
   setVerificationState: (state: VerificationState) => void;
+  submitVerification: () => Promise<void>;
 }
 
 // Hook pour le template KYC

package/src/utils/cropByObb.ts

@@ -79,12 +79,12 @@ export async function cropImageWithBBox(uri: string, bbox: any) {
   // const scaleX = originalWidth / displayedSize.width;
   // const scaleY = originalHeight / displayedSize.height;
 
-  // 3️⃣ Convertir le bbox à la taille réelle
+  // 3️⃣ Convertir le bbox à la taille réelle scale 0.10 = 10%
   const crop = {
-    originX: bbox.minX,
-    originY: bbox.minY,
-    width: bbox.width,
-    height: bbox.height,
+    originX: bbox.minX  ,
+    originY: bbox.minY - 80,
+    width: bbox.width + 100,
+    height: bbox.height + 150,
   };
 
   // 4️⃣ Appliquer le crop

package/src/web/WebKYCEntry.tsx

@@ -0,0 +1,215 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { View, Text, StyleSheet, SafeAreaView } from 'react-native';
+// import { TemplateKYCFlow } from '../components/TemplateKYCFlowRefactored';
+// import { KYCTemplate } from '../types/KYC.types';
+import { useI18n } from '../hooks/useI18n';
+import { TemplateKYCExample } from '../components/TemplateKYCExample';
+
+interface WebKYCEntryProps {
+  onComplete?: (data: any) => void;
+  onError?: (error: string) => void;
+  onCancel?: () => void;
+}
+
+interface URLParams {
+  token?: string;
+  return_url?: string;
+  lang?: string;
+  theme?: string;
+  kyc_id?: string;
+}
+
+const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
+  onComplete,
+  onError,
+  onCancel,
+}) => {
+  const { setLocale } = useI18n();
+  const [urlParams, setUrlParams] = useState<URLParams>({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Parse URL parameters
+  const parseUrlParams = useCallback((): URLParams => {
+    if (typeof window === 'undefined') return {};
+    
+    const urlParams = new URLSearchParams(window.location.search);
+    return {
+      token: urlParams.get('token') || undefined,
+      return_url: urlParams.get('return_url') || undefined,
+      lang: urlParams.get('lang') || 'en',
+      theme: urlParams.get('theme') || 'light',
+      kyc_id: urlParams.get('kyc_id') || undefined,
+    };
+  }, []);
+
+  // Safe redirect function with validation
+  const redirectToReturnUrl = useCallback((params: {
+    status: 'completed' | 'cancelled' | 'error';
+    kyc_id?: string;
+    message?: string;
+    sig?: string;
+  }) => {
+    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);
+      }
+
+      // Optional: Send postMessage to parent if in iframe
+      if (window.parent !== window) {
+        window.parent.postMessage({
+          type: 'kyc_result',
+          status: params.status,
+          kyc_id: params.kyc_id,
+          message: params.message,
+        }, '*');
+      }
+
+      // Redirect to return URL
+      window.location.href = redirectUrl.toString();
+    } catch (error) {
+      console.error('Invalid return URL:', error);
+      setError('Invalid return URL provided');
+    }
+  }, [urlParams]);
+
+  // Handle KYC completion
+  const handleComplete = useCallback((data: any) => {
+    console.log('KYC completed:', data);
+    redirectToReturnUrl({
+      status: 'completed',
+      kyc_id: data.session_id || urlParams.kyc_id,
+      message: 'KYC process completed successfully',
+    });
+    onComplete?.(data);
+  }, [redirectToReturnUrl, urlParams.kyc_id, onComplete]);
+
+  // Handle KYC error
+  const handleError = useCallback((error: string) => {
+    console.error('KYC error:', error);
+    redirectToReturnUrl({
+      status: 'error',
+      kyc_id: urlParams.kyc_id,
+      message: error,
+    });
+    onError?.(error);
+  }, [redirectToReturnUrl, urlParams.kyc_id, onError]);
+
+  // Handle KYC cancellation
+  const handleCancel = useCallback(() => {
+    console.log('KYC cancelled');
+    redirectToReturnUrl({
+      status: 'cancelled',
+      kyc_id: urlParams.kyc_id,
+      message: 'KYC process was cancelled',
+    });
+    onCancel?.();
+  }, [redirectToReturnUrl, urlParams.kyc_id, onCancel]);
+
+  // Initialize component
+  useEffect(() => {
+    try {
+      const params = parseUrlParams();
+      setUrlParams(params);
+      
+      // Set language if provided
+      if (params.lang) {
+        setLocale(params.lang);
+      }
+      
+      setIsLoading(false);
+    } catch (error) {
+      console.error('Error parsing URL parameters:', error);
+      setError('Error parsing URL parameters');
+      setIsLoading(false);
+    }
+  }, [parseUrlParams, setLocale]);
+
+
+  if (isLoading) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.loadingText}>Loading KYC process...</Text>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.errorText}>Error: {error}</Text>
+      </View>
+    );
+  }
+
+  if (!urlParams.token) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.errorText}>No token provided in URL parameters</Text>
+      </View>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+       <TemplateKYCExample  
+          onComplete={handleComplete} 
+          onCancel={handleCancel} 
+          onError={handleError}
+          language={urlParams.lang || 'en'}
+          API_KEY={urlParams.token}
+        />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  loadingText: {
+    fontSize: 18,
+    textAlign: 'center',
+    marginTop: 50,
+    color: '#666',
+  },
+  errorText: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginTop: 50,
+    color: '#dc2626',
+    paddingHorizontal: 20,
+  },
+});
+
+export default WebKYCEntry;

package/src/web/index.ts

@@ -0,0 +1 @@
+export { default as WebKYCEntry } from './WebKYCEntry';