@transfergratis/react-native-sdk 0.1.2

package/src/hooks/useTemplateKYCFlow.tsx

@@ -0,0 +1,292 @@
+import React, { useState, useCallback, useMemo, createContext, useContext, ReactNode } from 'react';
+import { KYCTemplate, TemplateState, TemplateActions, UseTemplateReturn } from '../types/KYC.types';
+
+// Context pour le provider
+interface TemplateKYCFlowContextType {
+  state: TemplateState;
+  actions: TemplateActions;
+  currentComponent: any;
+  progress: number;
+  canGoNext: boolean;
+  canGoPrevious: boolean;
+  isComplete: boolean;
+  getLocalizedText: (text: { en: string; fr: string; [key: string]: string }) => string;
+}
+
+const TemplateKYCFlowContext = createContext<TemplateKYCFlowContextType | undefined>(undefined);
+
+// Provider component
+interface TemplateKYCFlowProviderProps {
+  children: ReactNode;
+  template: KYCTemplate;
+  onComplete?: (data: Record<number, any>) => void;
+  onError?: (error: string) => void;
+  initialLanguage?: string;
+}
+
+export const TemplateKYCFlowProvider: React.FC<TemplateKYCFlowProviderProps> = ({
+  children,
+  template,
+  onComplete,
+  onError,
+  initialLanguage = 'en',
+}) => {
+  const hookResult = useTemplateKYCFlow(template, onComplete, onError, initialLanguage);
+  
+  return (
+    <TemplateKYCFlowContext.Provider value={hookResult}>
+      {children}
+    </TemplateKYCFlowContext.Provider>
+  );
+};
+
+// Hook pour utiliser le context
+export const useTemplateKYCFlowContext = (): TemplateKYCFlowContextType => {
+  const context = useContext(TemplateKYCFlowContext);
+  if (!context) {
+    throw new Error('useTemplateKYCFlowContext must be used within a TemplateKYCFlowProvider');
+  }
+  return context;
+};
+
+export const useTemplateKYCFlow = (
+  template: KYCTemplate,
+  onComplete?: (data: Record<number, any>) => void,
+  onError?: (error: string) => void,
+  initialLanguage: string = 'en'
+): UseTemplateReturn => {
+  // État du flux
+  const [state, setState] = useState<TemplateState>({
+    template,
+    currentComponentIndex: 0,
+    completedComponents: [],
+    componentData: {},
+    errors: {},
+    isProcessing: false,
+    currentLanguage: initialLanguage,
+    showCustomStepper: true,
+  });
+
+  // Composant actuel
+  const currentComponent = useMemo(() => {
+    return template.components[state.currentComponentIndex] || null;
+  }, [template.components, state.currentComponentIndex]);
+
+  // Progression du flux
+  const progress = useMemo(() => {
+    return template.components.length > 0 
+      ? ((state.currentComponentIndex + 1) / template.components.length) * 100 
+      : 0;
+  }, [state.currentComponentIndex, template.components.length]);
+
+  // Vérifications de navigation
+  const canGoNext = useMemo(() => {
+    return state.currentComponentIndex < template.components.length - 1;
+  }, [state.currentComponentIndex, template.components.length]);
+
+  const canGoPrevious = useMemo(() => {
+    return state.currentComponentIndex > 0;
+  }, [state.currentComponentIndex]);
+
+  const isComplete = useMemo(() => {
+    return state.currentComponentIndex === template.components.length - 1 && 
+           state.completedComponents.length === template.components.length;
+  }, [state.currentComponentIndex, state.completedComponents.length, template.components.length]);
+
+  // Fonction pour obtenir le texte localisé
+  const getLocalizedText = useCallback((text: { en: string; fr: string; [key: string]: string }): string => {
+    return text[state.currentLanguage] || text.en || '';
+  }, [state.currentLanguage]);
+
+  // Validation d'un composant
+  const validateComponent = useCallback((componentId: number): boolean => {
+    const component = template.components.find(c => c.id === componentId);
+    if (!component) return false;
+
+    const componentData = state.componentData[componentId];
+    
+    switch (component.type) {
+      case 'id_card':
+        // Vérifier si au moins un côté a été capturé
+        return componentData && Object.keys(componentData).length > 0;
+      
+      case 'selfie':
+        // Vérifier si toutes les orientations ont été capturées
+        const config = component.config as any;
+        const orientations = config.orientations || ['front'];
+        return componentData && orientations.every((orientation: string) => componentData[orientation]);
+      
+      case 'file_upload':
+        // Vérifier si un fichier a été uploadé
+        return componentData && componentData.file;
+      
+      case 'location':
+        // Vérifier si la localisation a été obtenue
+        return componentData && componentData.latitude && componentData.longitude;
+      
+      case 'country_selection':
+        // Vérifier si un pays a été sélectionné
+        return componentData && componentData.country;
+      
+      default:
+        return false;
+    }
+  }, [template.components, state.componentData]);
+
+  // Actions du flux
+  const actions: TemplateActions = {
+    // Initialiser le template
+    initializeTemplate: useCallback((newTemplate: KYCTemplate) => {
+      setState(prev => ({
+        ...prev,
+        template: newTemplate,
+        currentComponentIndex: 0,
+        completedComponents: [],
+        componentData: {},
+        errors: {},
+        isProcessing: false,
+      }));
+    }, []),
+
+    // Passer au composant suivant
+    nextComponent: useCallback(() => {
+      if (!canGoNext) return;
+
+      const currentComp = template.components[state.currentComponentIndex];
+      if (!currentComp) return;
+
+      // Valider le composant actuel
+      if (!validateComponent(currentComp.id)) {
+        setState(prev => ({
+          ...prev,
+          errors: {
+            ...prev.errors,
+            [currentComp.id]: 'Veuillez compléter cette étape avant de continuer'
+          }
+        }));
+        return;
+      }
+
+      // Marquer comme complété et passer au suivant
+      setState(prev => ({
+        ...prev,
+        currentComponentIndex: prev.currentComponentIndex + 1,
+        completedComponents: [...prev.completedComponents, currentComp.id],
+        errors: {
+          ...prev.errors,
+          [currentComp.id]: ''
+        }
+      }));
+
+
+    }, [canGoNext, state.currentComponentIndex, template.components, validateComponent]),
+
+    // Retourner au composant précédent
+    previousComponent: useCallback(() => {
+      if (!canGoPrevious) return;
+
+      setState(prev => ({
+        ...prev,
+        currentComponentIndex: prev.currentComponentIndex - 1,
+      }));
+    }, [canGoPrevious]),
+
+    // Aller à un composant spécifique
+    goToComponent: useCallback((componentId: number) => {
+      const componentIndex = template.components.findIndex(c => c.id === componentId);
+      if (componentIndex !== -1) {
+        setState(prev => ({
+          ...prev,
+          currentComponentIndex: componentIndex,
+        }));
+      }
+    }, [template.components]),
+
+    // Mettre à jour les données d'un composant
+    updateComponentData: useCallback((componentId: number, data: any) => {
+      setState(prev => ({
+        ...prev,
+        componentData: {
+          ...prev.componentData,
+          [componentId]: data
+        },
+        errors: {
+          ...prev.errors,
+          [componentId]: ''
+        }
+      }));
+      
+    }, []),
+
+    // Valider un composant
+    validateComponent: useCallback((componentId: number) => {
+      return validateComponent(componentId);
+    }, [validateComponent]),
+
+    // Soumettre le template complet
+    submitTemplate: useCallback(async () => {
+      if (!isComplete) {
+        onError?.('Le flux KYC n\'est pas encore terminé');
+        return;
+      }
+
+      setState(prev => ({ ...prev, isProcessing: true }));
+
+      try {
+        // Vérifier que tous les composants sont validés
+        const allValid = template.components.every(comp => validateComponent(comp.id));
+        
+        if (!allValid) {
+          throw new Error('Certaines étapes ne sont pas complètes');
+        }
+
+        // Appeler le callback de completion
+        onComplete?.(state.componentData);
+        
+        setState(prev => ({ ...prev, isProcessing: false }));
+      } catch (error) {
+        setState(prev => ({ ...prev, isProcessing: false }));
+        onError?.(error instanceof Error ? error.message : 'Erreur lors de la soumission');
+      }
+    }, [isComplete, template.components, validateComponent, state.componentData, onComplete, onError]),
+
+    // Réinitialiser le template
+    resetTemplate: useCallback(() => {
+      setState(prev => ({
+        ...prev,
+        currentComponentIndex: 0,
+        completedComponents: [],
+        componentData: {},
+        errors: {},
+        isProcessing: false,
+      }));
+    }, []),
+
+    // Changer la langue
+    setLanguage: useCallback((language: string) => {
+      setState(prev => ({
+        ...prev,
+        currentLanguage: language,
+      }));
+    }, []),
+
+    // Afficher le stepper personnalisé
+    showCustomStepper: useCallback((show: boolean) => {
+      setState(prev => ({
+        ...prev,
+        showCustomStepper: show,
+      }));
+    }, []),
+  };
+
+  return {
+    state,
+    actions,
+    currentComponent,
+    progress,
+    canGoNext,
+    canGoPrevious,
+    isComplete,
+    getLocalizedText,
+  };
+}; 

package/src/index.ts

@@ -0,0 +1,72 @@
+
+// Reexport the native module. On web, it will be resolved to TransfergratisSdkModule.web.ts
+// and on native platforms to TransfergratisSdkModule.ts
+export { default } from './TransfergratisSdkModule';
+export { default as TransfergratisSdkView } from './TransfergratisSdkView';
+export * from  './TransfergratisSdk.types';
+
+// Export KYC Flow - Main component
+export { default as LauchTransferGratisKYC } from './App';
+
+// Export KYC types
+export * from './types/KYC.types';
+
+// Export Camera Modules (Legacy + Vision Camera + Web)
+export { default as NativeCameraModule } from './modules/camera/NativeCameraModule';
+export { default as VisionCameraModule } from './modules/camera/VisionCameraModule';
+export { default as UnifiedCameraModule } from './modules/camera/UnifiedCameraModule';
+
+// Export Camera Components
+export { NativeCameraView } from './components/NativeCameraView'; // Legacy
+export { VisionCameraView } from './components/VisionCameraView';
+export { EnhancedCameraView } from './components/EnhancedCameraView';
+
+// Export KYC Components
+export { SelfieCapture } from './components/SelfieCapture';
+export { FileUpload } from './components/FileUpload';
+export { CustomCameraExample } from './components/CustomCameraExample';
+
+// Export Orientation Video Processing Components
+export { default as OrientationVideoCapture } from './components/KYCElements/OrientationVideoCapture';
+export { default as OrientationVideoCaptureEnhanced } from './components/KYCElements/OrientationVideoCaptureEnhanced';
+export { default as OrientationVideoCaptureFinal } from './components/KYCElements/OrientationVideoCaptureFinal';
+export { default as OrientationVideoExample } from './components/example/OrientationVideoExample';
+
+// Export Template-based KYC Components
+export { TemplateKYCFlow } from './components/TemplateKYCFlowRefactored';
+export { TemplateKYCExample } from './components/TemplateKYCExample';
+export { useTemplateKYCFlow, TemplateKYCFlowProvider, useTemplateKYCFlowContext } from './hooks/useTemplateKYCFlow';
+export { IDCardCapture } from './components/KYCElements/IDCardCapture';
+export { SelfieCaptureTemplate } from './components/KYCElements/SelfieCaptureTemplate';
+export { FileUploadTemplate } from './components/KYCElements/FileUploadTemplate';
+export { LocationCaptureTemplate } from './components/KYCElements/LocationCaptureTemplate';
+export { CountrySelectionTemplate } from './components/KYCElements/CountrySelectionTemplate';
+
+// Export KYC Service
+export { default as KYCService } from './modules/api/KYCService';
+
+// Export Hooks
+export { default as useOrientationVideo } from './hooks/useOrientationVideo';
+export { default as useLocation } from './hooks/useLocation';
+export type { LocationData, LocationError, UseLocationOptions, UseLocationReturn } from './hooks/useLocation';
+
+// UI Components
+export { 
+  Button, 
+  PrimaryButton, 
+  SecondaryButton, 
+  OutlineButton, 
+  GhostButton, 
+  DangerButton, 
+  SuccessButton, 
+  WarningButton,
+  SmallButton,
+  LargeButton,
+  BackButton,
+  NextButton,
+  SubmitButton,
+  CancelButton,
+  buttonIcons 
+} from './components/ui/Button';
+export { buttonStyles, colors, shadows, buttonTextColors, iconSizes, buttonSpacing } from './components/ui/ButtonStyles';
+export { default as ButtonExample } from './components/ui/ButtonExample';

package/src/modules/api/KYCService.ts

@@ -0,0 +1,171 @@
+import axios from 'axios';
+import { OrientationVideoResponse } from '../../types/KYC.types';
+
+export interface KYCRequest {
+  userId: string;
+  documentImage: string;
+  selfieImage: string;
+  documentType: 'passport' | 'id_card' | 'drivers_license';
+}
+
+export interface KYCResponse {
+  success: boolean;
+  verificationId: string;
+  status: 'pending' | 'approved' | 'rejected';
+  message?: string;
+}
+
+export interface FaceDetectionRequest {
+  selfieImage: string;
+  documentImage: string;
+}
+
+export interface FaceDetectionResponse {
+  match: boolean;
+  confidence: number;
+  message: string;
+}
+
+export class KYCService {
+  private baseURL: string;
+  private apiKey: string;
+
+  constructor(baseURL: string, apiKey: string) {
+    this.baseURL = baseURL;
+    this.apiKey = apiKey;
+  }
+
+  private getHeaders() {
+    return {
+      'Authorization': `Bearer ${this.apiKey}`,
+      'Content-Type': 'application/json',
+    };
+  }
+
+  async submitKYC(data: KYCRequest): Promise<KYCResponse> {
+    try {
+      const response = await axios.post(
+        `${this.baseURL}/kyc/submit`,
+        data,
+        { headers: this.getHeaders() }
+      );
+      return response.data;
+    } catch (error) {
+      console.error('Error submitting KYC:', error);
+      throw error;
+    }
+  }
+
+  async detectFace(data: FaceDetectionRequest): Promise<FaceDetectionResponse> {
+    try {
+      const response = await axios.post(
+        `${this.baseURL}/ai/face-detection`,
+        data,
+        { headers: this.getHeaders() }
+      );
+      return response.data;
+    } catch (error) {
+      console.error('Error detecting face:', error);
+      throw error;
+    }
+  }
+
+  async validateDocument(documentImage: string, documentType: string): Promise<any> {
+    try {
+      const response = await axios.post(
+        `${this.baseURL}/ai/document-validation`,
+        { documentImage, documentType },
+        { headers: this.getHeaders() }
+      );
+      return response.data;
+    } catch (error) {
+      console.error('Error validating document:', error);
+      throw error;
+    }
+  }
+
+  async getKYCStatus(verificationId: string): Promise<KYCResponse> {
+    try {
+      const response = await axios.get(
+        `${this.baseURL}/kyc/status/${verificationId}`,
+        { headers: this.getHeaders() }
+      );
+      return response.data;
+    } catch (error) {
+      console.error('Error getting KYC status:', error);
+      throw error;
+    }
+  }
+
+  async processOrientationVideo(videoFile: string): Promise<OrientationVideoResponse> {
+    try {
+      // Create FormData for multipart/form-data request
+      const formData = new FormData();
+      
+      // Convert base64 to blob if needed, or use file path
+      let fileData;
+      if (videoFile.startsWith('data:') || videoFile.startsWith('file://')) {
+        // Handle base64 or file URI
+        if (videoFile.startsWith('data:')) {
+          const response = await fetch(videoFile);
+          fileData = await response.blob();
+        } else {
+          // For file:// URIs, we need to handle this differently
+          // This is a simplified approach - in a real implementation,
+          // you might need platform-specific handling
+          const response = await fetch(videoFile);
+          fileData = await response.blob();
+        }
+      } else {
+        // Assume it's already a blob or file object
+        fileData = videoFile as any;
+      }
+
+      formData.append('file', fileData, 'orientation_video.mp4');
+
+      const response = await axios.post(
+        `${this.baseURL}/process_orientation_video_stream/`,
+        formData,
+        { 
+          headers: {
+            // 'Authorization': `Bearer ${this.apiKey}`,
+            'Content-Type': 'multipart/form-data',
+          }
+        }
+      );
+
+      return {
+        success: true,
+        data: response.data,
+        message: 'Orientation video processed successfully'
+      };
+    } catch (error: any) {
+      console.error('Error processing orientation video:', JSON.stringify(error, null, 2));
+      
+      // Handle specific error cases
+      if (error.response?.status === 503) {
+        return {
+          success: false,
+          error: {
+            code: 'SERVICE_UNAVAILABLE',
+            message: 'Service not ready, model not initialized.',
+            details: error.response.data
+          },
+          message: 'Service temporarily unavailable'
+        };
+      }
+
+      return {
+        success: false,
+        error: {
+          code: 'PROCESSING_ERROR',
+          message: error.response?.data?.detail || error.message || 'Unknown error occurred',
+          details: error.response?.data
+        },
+        message: 'Failed to process orientation video'
+      };
+    }
+  }
+}
+
+export default KYCService; 

package/src/modules/camera/NativeCameraModule.ts

@@ -0,0 +1,170 @@
+import { NativeEventEmitter, Platform } from "react-native";
+import TransfergratisSdkModule from "../../TransfergratisSdkModule";
+
+
+export interface CameraCaptureResult {
+  success: boolean;
+  path?: string;
+  error?: string;
+}
+
+export interface FilePickerResult {
+  success: boolean;
+  uri?: string;
+  path?: string;
+  error?: string;
+}
+
+export class NativeCameraModule {
+  private eventEmitter: NativeEventEmitter | null = null;
+
+  /**
+   * Test simple du module natif
+   */
+  async testModule(): Promise<string> {
+    try {
+      if (!TransfergratisSdkModule) {
+        console.warn('TransfergratisSdk native module not available');
+        return 'Module not available';
+      }
+      return await TransfergratisSdkModule.testModule();
+    } catch (error) {
+      console.error('Error testing module:', error);
+      return 'Test failed';
+    }
+  }
+
+  constructor() {
+    console.log('NativeCameraModule constructor called');
+    console.log('Platform:', Platform.OS);
+    
+    // Vérifier que le module natif est disponible
+    if (TransfergratisSdkModule) {
+      console.log('TransfergratisSdk module found, creating event emitter');
+      try {
+        // this.eventEmitter = new NativeEventEmitter(TransfergratisSdkModule as unknown as NativeModule);
+        console.log('Event emitter created successfully');
+      } catch (error) {
+        console.error('Error creating event emitter:', error);
+        this.eventEmitter = null;
+      }
+    } else {
+      console.warn('TransfergratisSdk native module not available');
+    }
+  }
+
+  /**
+   * Demande les permissions de caméra
+   */
+  async requestCameraPermission(): Promise<boolean> {
+    console.log('requestCameraPermission');
+    
+    try {
+      if (!TransfergratisSdkModule) {
+        console.warn('TransfergratisSdk native module not available');
+        return false;
+      }
+      return await TransfergratisSdkModule.requestCameraPermission();
+    } catch (error) {
+      console.error('Error requesting camera permission:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Ouvre la caméra avec des instructions personnalisées
+   */
+  async openCameraWithInstructions(instructions: string): Promise<CameraCaptureResult> {
+    try {
+      if (!TransfergratisSdkModule) {
+        console.warn('TransfergratisSdk native module not available');
+        return {
+          success: false,
+          error: 'Native module not available'
+        };
+      }
+
+      const hasPermission = await this.requestCameraPermission();
+      if (!hasPermission) {
+        return {
+          success: false,
+          error: 'Camera permission not granted'
+        };
+      }
+
+      const result = await TransfergratisSdkModule.openCameraWithInstructions(instructions);
+      return {
+        success: result.success,
+        path: result.path
+      };
+    } catch (error) {
+      console.error('Error opening camera:', error);
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error'
+      };
+    }
+  }
+
+  /**
+   * Ouvre le sélecteur de fichiers
+   */
+  async openFilePicker(allowedTypes: string[] = ['*/*']): Promise<FilePickerResult> {
+    try {
+      if (!TransfergratisSdkModule) {
+        console.warn('TransfergratisSdk native module not available');
+        return {
+          success: false,
+          error: 'Native module not available'
+        };
+      }
+      const result = await TransfergratisSdkModule.openFilePicker(allowedTypes);
+      return {
+        success: result.success,
+        uri: result.uri,
+        path: result.path
+      };
+    } catch (error) {
+      console.error('Error opening file picker:', error);
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error'
+      };
+    }
+  }
+
+  /**
+   * Écoute les événements de la caméra
+   */
+  onCameraCapture(callback: (event: any) => void) {
+    if (!this.eventEmitter) {
+      console.warn('EventEmitter not available');
+      return { remove: () => {} };
+    }
+    return this.eventEmitter.addListener('onCameraCapture', callback);
+  }
+
+  /**
+   * Écoute les événements de sélection de fichiers
+   */
+  onFileSelected(callback: (event: any) => void) {
+    if (!this.eventEmitter) {
+      console.warn('EventEmitter not available');
+      return { remove: () => {} };
+    }
+    return this.eventEmitter.addListener('onFileSelected', callback);
+  }
+
+  /**
+   * Écoute les erreurs
+   */
+  onError(callback: (event: any) => void) {
+    if (!this.eventEmitter) {
+      console.warn('EventEmitter not available');
+      return { remove: () => {} };
+    }
+    return this.eventEmitter.addListener('onError', callback);
+  }
+}
+
+export default new NativeCameraModule();