@transfergratis/react-native-sdk 0.1.4 → 0.1.6

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;
@@ -111,6 +113,8 @@ export type KYCElementType =
   | 'selfie_capture'
   | 'verification'
   | 'completion';
+//KYCElementType shorted
+
 
 // Configuration d'un élément KYC
 export interface KYCElement {
@@ -306,7 +310,7 @@ export interface LocalizedText {
 export interface ComponentUI {
   icon?: string;
   themeColor?: string;
-  buttonText: LocalizedText;
+  buttonText: LocalizedText | Record<string, LocalizedText>;
   backgroundColor?: string;
   textColor?: string;
   borderRadius?: number;
@@ -314,16 +318,23 @@ export interface ComponentUI {
 
 // Types de documents gouvernementaux supportés
 export type GovernmentDocumentType =
-  | 'id_card'
+  | 'identity_card'
   | 'passport'
-  | 'drivers_license'
-  | 'residence_permit'
+  | 'drivers_licence'
+  | 'health_insurance_card'
+  | 'permanent_residence'
   | 'national_id'
-  | 'voter_id'
-  | 'military_id'
-  | 'student_id'
   | 'work_permit'
-  | 'other';
+
+export const GovernmentDocumentTypeShorted: Record<GovernmentDocumentType, string> = {
+  identity_card: 'id',
+  passport: 'pp',
+  drivers_licence: 'dl',
+  health_insurance_card: 'hic',
+  permanent_residence: 'pr',
+  national_id: 'id',
+  work_permit: 'wp',
+}
 
 // Configuration spécifique pour chaque type de composant
 export interface IDCardConfig {
@@ -346,7 +357,7 @@ export interface IDCardConfig {
 export interface SelfieConfig {
   liveness_check: boolean;
   max_attempts: number;
-  orientations: ('front' | 'left' | 'right')[]; // Tableau d'orientations à capturer
+  orientations: ('center' | 'left' | 'right')[]; // Tableau d'orientations à capturer
 }
 
 export interface FileUploadConfig {
@@ -377,12 +388,12 @@ export type ComponentConfig =
 // Nouveau type de composant basé sur le template JSON
 export interface TemplateComponent {
   id: number;
-  type: 'id_card' | 'selfie' | 'file_upload' | 'location' | 'country_selection';
+  type: 'id_card' | 'selfie' | 'file_upload' | 'location' | 'country_selection' | 'initialization' | 'review_submit' | 'verification_progress';
   order: number;
   templateId?: number;
-  labels: LocalizedText;
-  instructions: LocalizedText;
-  ui: ComponentUI;
+  labels: LocalizedText | Record<string, LocalizedText>;
+  instructions: LocalizedText | Record<string, LocalizedText>;
+  ui: ComponentUI | Record<string, ComponentUI>;
   config: ComponentConfig;
 }
 
@@ -405,6 +416,25 @@ export interface TemplateState {
   isProcessing: boolean;
   currentLanguage: string;
   showCustomStepper: boolean;
+  session: SessionState;
+  verification: VerificationState;
+}
+
+export interface SessionState {
+  session_id: string;
+  token: string;
+  isInitialized: boolean;
+  isProcessing: boolean;
+  error: string | null;
+}
+
+export type VerificationStatus = 'idle' | 'in_progress' | 'success' | 'failed';
+
+
+
+export interface VerificationState {
+  status: VerificationStatus;
+  result?: VerificationResult;
 }
 
 // Actions pour le template KYC
@@ -419,6 +449,8 @@ export interface TemplateActions {
   resetTemplate: () => void;
   setLanguage: (language: string) => void;
   showCustomStepper: (show: boolean) => void;
+  setVerificationState: (state: VerificationState) => void;
+  submitVerification: () => Promise<void>;
 }
 
 // Hook pour le template KYC
@@ -431,4 +463,40 @@ export interface UseTemplateReturn {
   canGoPrevious: boolean;
   isComplete: boolean;
   getLocalizedText: (text: LocalizedText) => string;
-} 
+  initializeSession: () => Promise<void>;
+}
+
+
+export interface ISilentCaptureResult {
+  success: boolean;
+  path?: string;
+  mrz?: string;
+  error?: string;
+  isAnalyzing?: boolean;
+  bbox?: IBbox;
+  country?: string;
+  documentType?: string;
+}
+
+export interface IBbox {
+  minX: number;
+  minY: number;
+  width: number;
+  height: number;
+}
+
+export interface ICountryMapping {
+  py_file?: string;
+  front?: string;
+  back?: string;
+  keys_found?: string | null;
+}
+
+export interface Country {
+  code?: string; // ISO 3166-1 alpha-2
+  name: string;
+  name_en: string;
+  flag: string;
+  regionMapping?: ICountryMapping;
+  hasRegions?: boolean;
+}

package/src/utils/cropByObb.ts

@@ -0,0 +1,99 @@
+import { Image as RNImage, Platform } from 'react-native';
+import * as ImageManipulator from "expo-image-manipulator";
+
+type Point = [number, number];
+
+// Compute axis-aligned bounding box from oriented quadrilateral
+function computeAabb(points: Point[]) {
+  const xs = points.map(p => p[0]);
+  const ys = points.map(p => p[1]);
+  const minX = Math.min(...xs);
+  const minY = Math.min(...ys);
+  const maxX = Math.max(...xs);
+  const maxY = Math.max(...ys);
+  return { minX, minY, maxX, maxY, width: maxX - minX, height: maxY - minY };
+}
+
+// Web-only crop using Canvas; returns dataURL (base64)
+async function cropWeb(uri: string, points: Point[]): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      const { minX, minY, width, height } = computeAabb(points);
+      const canvas = document.createElement('canvas');
+      canvas.width = Math.max(1, Math.round(width));
+      canvas.height = Math.max(1, Math.round(height));
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return reject(new Error('Canvas context not available'));
+      ctx.drawImage(
+        img,
+        minX, // sx
+        minY, // sy
+        width, // sw
+        height, // sh
+        0,
+        0,
+        canvas.width,
+        canvas.height
+      );
+      resolve(canvas.toDataURL('image/jpeg', 0.92));
+    };
+    img.onerror = (e) => reject(e);
+    img.src = uri;
+  });
+}
+
+// Fallback: return original for native (no dependency added); caller can still use bbox to draw overlay
+export async function cropByObb(uri: string, cardObb: any): Promise<{ base64?: string; bbox?: { minX: number; minY: number; width: number; height: number } }> {
+  try {
+    // card_obb format: [ [ [p1,p2,p3,p4], score ] ]
+    const first = Array.isArray(cardObb) ? cardObb[0] : null;
+    const points = Array.isArray(first?.[0]) ? (first[0] as Point[]) : null;
+    if (!points || points.length !== 4) return {};
+
+    const { minX, minY, width, height } = computeAabb(points);
+
+    if (Platform.OS === 'web') {
+      const base64 = await cropWeb(uri, points);
+      return { base64, bbox: { minX, minY, width, height } };
+    }
+    // Native: return bbox only; keep base64 undefined
+    return { bbox: { minX, minY, width, height } };
+  } catch (e) {
+    return {};
+  }
+}
+
+
+
+
+// exemple d'appel :
+export async function cropImageWithBBox(uri: string, bbox: any) {
+  // 1️⃣ Récupère la taille originale de l'image
+  await RNImage.getSize(uri, (width, height) => {
+    console.log("Image originale:", width, height);
+  });
+
+  // // 2️⃣ Suppose que ton bbox vient d'une image affichée dans `displayedSize`
+  // const scaleX = originalWidth / displayedSize.width;
+  // const scaleY = originalHeight / displayedSize.height;
+
+  // 3️⃣ Convertir le bbox à la taille réelle scale 0.10 = 10%
+  const crop = {
+    originX: bbox.minX  ,
+    originY: bbox.minY - 80,
+    width: bbox.width + 100,
+    height: bbox.height + 150,
+  };
+
+  // 4️⃣ Appliquer le crop
+  const result = await ImageManipulator.manipulateAsync(
+    uri,
+    [{ crop }],
+    { compress: 1, format: ImageManipulator.SaveFormat.PNG }
+  );
+
+  console.log("Image recadrée:", result.uri);
+  return result.uri;
+}

package/src/utils/get-document-type-info.ts

@@ -0,0 +1,62 @@
+import { GovernmentDocumentType } from "../types/KYC.types";
+
+export const getDocumentTypeInfo = (docType: GovernmentDocumentType) => {
+    switch (docType) {
+        case 'identity_card':
+            return {
+                name: { en: 'ID Card', fr: 'Carte d\'identité' },
+                icon: '🆔',
+                instructions: { en: 'Position your ID card within the frame', fr: 'Positionnez votre carte d\'identité dans le cadre' }
+            };
+        case 'passport':
+            return {
+                name: { en: 'Passport', fr: 'Passeport' },
+                icon: '📘',
+                instructions: { en: 'Position your passport within the frame', fr: 'Positionnez votre passeport dans le cadre' }
+            };
+        case 'drivers_licence':
+            return {
+                name: { en: 'Driver\'s License', fr: 'Permis de conduire' },
+                icon: '🚗',
+                instructions: { en: 'Position your driver\'s license within the frame', fr: 'Positionnez votre permis de conduire dans le cadre' }
+            };
+        case 'permanent_residence':
+            return {
+                name: { en: 'Residence Permit', fr: 'Permis de séjour' },
+                icon: '🏠',
+                instructions: { en: 'Position your residence permit within the frame', fr: 'Positionnez votre permis de séjour dans le cadre' }
+            };
+        case 'national_id':
+            return {
+                name: { en: 'National ID', fr: 'Carte nationale d\'identité' },
+                icon: '🏛️',
+                instructions: { en: 'Position your national ID within the frame', fr: 'Positionnez votre carte nationale d\'identité dans le cadre' }
+            };
+        case 'health_insurance_card':
+            return {
+                name: { en: 'Health Insurance Card', fr: 'Carte d\'assurance santé' },
+                icon: '🗳️',
+                instructions: { en: 'Position your health insurance card within the frame', fr: 'Positionnez votre carte d\'assurance santé dans le cadre' }
+            };
+        case 'work_permit':
+            return {
+                name: { en: 'Work Permit', fr: 'Permis de travail' },
+                icon: '🎖️',
+                instructions: { en: 'Position your work permit within the frame', fr: 'Positionnez votre permis de travail dans le cadre' }
+            };
+
+        case 'passport':
+            return {
+                name: { en: 'Passport', fr: 'Passeport' },
+                icon: '💼',
+                instructions: { en: 'Position your passport within the frame', fr: 'Positionnez votre passeport dans le cadre' }
+            };
+
+        default:
+            return {
+                name: { en: 'Government Document', fr: 'Document gouvernemental' },
+                icon: '📄',
+                instructions: { en: 'Position your document within the frame', fr: 'Positionnez votre document dans le cadre' }
+            };
+    }
+};

package/src/utils/pathToBase64.ts

@@ -0,0 +1,47 @@
+export async function pathToBase64(uri: string): Promise<string> {
+  if (!uri) throw new Error('pathToBase64: uri is required');
+
+  // If already a data URI, return the base64 part
+  if (uri.startsWith('data:')) {
+    const commaIndex = uri.indexOf(',');
+    return commaIndex !== -1 ? uri.substring(commaIndex + 1) : uri;
+  }
+
+  // Try Expo FileSystem if available (React Native + Expo)
+  try {
+    // Dynamically import to avoid hard dependency when not available
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const FileSystem = require('expo-file-system');
+    if (FileSystem?.readAsStringAsync) {
+      const base64 = await FileSystem.readAsStringAsync(uri, { encoding: FileSystem.EncodingType.Base64 });
+      if (base64) return base64;
+    }
+  } catch (_) {
+    // ignore - fall back to other strategies
+  }
+
+  // Generic fetch + FileReader strategy (works on web; often works on RN for file:// URIs)
+  try {
+    const response = await fetch(uri);
+    const blob = await response.blob();
+    const dataUrl = await new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        if (typeof reader.result === 'string') resolve(reader.result);
+        else reject(new Error('Failed to convert blob to data URL'));
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+    const commaIndex = dataUrl.indexOf(',');
+    return commaIndex !== -1 ? dataUrl.substring(commaIndex + 1) : dataUrl;
+  } catch (err) {
+    // continue to final error
+  }
+
+  throw new Error('pathToBase64: unable to convert uri to base64');
+}
+
+export default pathToBase64;
+
+

package/src/utils/remove-duplicate.ts

@@ -0,0 +1,3 @@
+export function removeDuplicates(arr: string[]): string[] {
+    return [...new Set(arr)];
+}

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';

package/src/types/nativewind.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="nativewind/types" />
-