@transfergratis/react-native-sdk 0.1.2

package/src/components/FileUpload.tsx

@@ -0,0 +1,249 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, Alert, StyleSheet, ScrollView } from 'react-native';
+import { useKYCStore } from '../stores/kycStore';
+import NativeCameraModule from '../modules/camera/NativeCameraModule';
+
+interface FileUploadProps {
+  allowedTypes?: string[];
+  maxFiles?: number;
+  onFilesSelected?: (files: Array<{ uri: string; path: string; name: string }>) => void;
+}
+
+export const FileUpload: React.FC<FileUploadProps> = ({
+  allowedTypes = ['image/*', 'application/pdf'],
+  maxFiles = 5,
+  onFilesSelected
+}) => {
+  const [selectedFiles, setSelectedFiles] = useState<Array<{ uri: string; path: string; name: string }>>([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const { setProcessing } = useKYCStore();
+
+  const handleFileSelection = async () => {
+    try {
+      setIsUploading(true);
+      setProcessing(true);
+
+      const result = await NativeCameraModule.openFilePicker(allowedTypes);
+      
+      if (result.success && result.uri && result.path) {
+        const fileName = result.path.split('/').pop() || 'Document';
+        const newFile = {
+          uri: result.uri,
+          path: result.path,
+          name: fileName
+        };
+
+        if (selectedFiles.length >= maxFiles) {
+          Alert.alert('Limite atteinte', `Vous ne pouvez sélectionner que ${maxFiles} fichiers maximum.`);
+          return;
+        }
+
+        const updatedFiles = [...selectedFiles, newFile];
+        setSelectedFiles(updatedFiles);
+        
+        if (onFilesSelected) {
+          onFilesSelected(updatedFiles);
+        }
+      } else if (result.error) {
+        Alert.alert('Erreur', result.error);
+      }
+    } catch (error) {
+      Alert.alert('Erreur', 'Impossible de sélectionner le fichier');
+    } finally {
+      setIsUploading(false);
+      setProcessing(false);
+    }
+  };
+
+  const removeFile = (index: number) => {
+    const updatedFiles = selectedFiles.filter((_, i) => i !== index);
+    setSelectedFiles(updatedFiles);
+    
+    if (onFilesSelected) {
+      onFilesSelected(updatedFiles);
+    }
+  };
+
+  const getFileIcon = (fileName: string) => {
+    const extension = fileName.split('.').pop()?.toLowerCase();
+    switch (extension) {
+      case 'pdf':
+        return '📄';
+      case 'jpg':
+      case 'jpeg':
+      case 'png':
+      case 'gif':
+        return '🖼️';
+      case 'doc':
+      case 'docx':
+        return '📝';
+      default:
+        return '📎';
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Sélection de documents</Text>
+      <Text style={styles.subtitle}>
+        Sélectionnez vos documents (max {maxFiles} fichiers)
+      </Text>
+
+      <TouchableOpacity
+        style={[styles.uploadButton, isUploading && styles.uploadButtonDisabled]}
+        onPress={handleFileSelection}
+        disabled={isUploading}
+      >
+        <Text style={styles.uploadButtonText}>
+          {isUploading ? 'Sélection en cours...' : '📁 Choisir un fichier'}
+        </Text>
+      </TouchableOpacity>
+
+      {selectedFiles.length > 0 && (
+        <View style={styles.filesContainer}>
+          <Text style={styles.filesTitle}>Fichiers sélectionnés ({selectedFiles.length}/{maxFiles})</Text>
+          <ScrollView style={styles.filesList}>
+            {selectedFiles.map((file, index) => (
+              <View key={index} style={styles.fileItem}>
+                <View style={styles.fileInfo}>
+                  <Text style={styles.fileIcon}>{getFileIcon(file.name)}</Text>
+                  <View style={styles.fileDetails}>
+                    <Text style={styles.fileName} numberOfLines={1}>
+                      {file.name}
+                    </Text>
+                    <Text style={styles.filePath} numberOfLines={1}>
+                      {file.path}
+                    </Text>
+                  </View>
+                </View>
+                <TouchableOpacity
+                  style={styles.removeButton}
+                  onPress={() => removeFile(index)}
+                >
+                  <Text style={styles.removeButtonText}>❌</Text>
+                </TouchableOpacity>
+              </View>
+            ))}
+          </ScrollView>
+        </View>
+      )}
+
+      {selectedFiles.length === 0 && (
+        <View style={styles.emptyState}>
+          <Text style={styles.emptyStateText}>Aucun fichier sélectionné</Text>
+          <Text style={styles.emptyStateSubtext}>
+            Appuyez sur "Choisir un fichier" pour commencer
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#f5f5f5',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 10,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 30,
+  },
+  uploadButton: {
+    backgroundColor: '#4CAF50',
+    paddingVertical: 15,
+    paddingHorizontal: 30,
+    borderRadius: 10,
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  uploadButtonDisabled: {
+    backgroundColor: '#ccc',
+  },
+  uploadButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  filesContainer: {
+    flex: 1,
+  },
+  filesTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 15,
+  },
+  filesList: {
+    flex: 1,
+  },
+  fileItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'white',
+    padding: 15,
+    borderRadius: 10,
+    marginBottom: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  fileInfo: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  fileIcon: {
+    fontSize: 24,
+    marginRight: 15,
+  },
+  fileDetails: {
+    flex: 1,
+  },
+  fileName: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#333',
+    marginBottom: 2,
+  },
+  filePath: {
+    fontSize: 12,
+    color: '#666',
+  },
+  removeButton: {
+    padding: 5,
+  },
+  removeButtonText: {
+    fontSize: 16,
+  },
+  emptyState: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyStateText: {
+    fontSize: 18,
+    color: '#666',
+    marginBottom: 10,
+  },
+  emptyStateSubtext: {
+    fontSize: 14,
+    color: '#999',
+    textAlign: 'center',
+  },
+}); 

package/src/components/KYCElementRenderer.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { KYCElement } from '../types/KYC.types';
+import { CountrySelection } from './KYCElements/CountrySelection';
+import { DocumentTypeSelection } from './KYCElements/DocumentTypeSelection';
+import { CameraCapture } from './KYCElements/CameraCapture';
+import { FileUpload } from './KYCElements/FileUpload';
+import { SelfieCapture } from './KYCElements/SelfieCapture';
+import { VerificationStep } from './KYCElements/VerificationStep';
+import { CompletionStep } from './KYCElements/CompletionStep';
+
+interface KYCElementRendererProps {
+  element: KYCElement;
+  value?: any;
+  onValueChange: (value: any) => void;
+  error?: string;
+  onComplete?: () => void;
+  onRestart?: () => void;
+  onClose?: () => void;
+}
+
+export const KYCElementRenderer: React.FC<KYCElementRendererProps> = ({
+  element,
+  value,
+  onValueChange,
+  error,
+  onComplete,
+  onRestart,
+  onClose,
+}) => {
+  switch (element.type) {
+    case 'country_selection':
+      return (
+        <CountrySelection
+          element={element}
+          value={value}
+          onValueChange={onValueChange}
+          error={error}
+        />
+      );
+
+    case 'document_type_selection':
+      return (
+        <DocumentTypeSelection
+          element={element}
+          value={value}
+          onValueChange={onValueChange}
+          error={error}
+        />
+      );
+
+    case 'camera_capture':
+      return (
+        <CameraCapture
+          element={element}
+          value={value}
+          onValueChange={onValueChange}
+          error={error}
+        />
+      );
+
+    case 'file_upload':
+      return (
+        <FileUpload
+          element={element}
+          value={value}
+          onValueChange={onValueChange}
+          error={error}
+        />
+      );
+
+    case 'selfie_capture':
+      return (
+        <SelfieCapture
+          element={element}
+          value={value}
+          onValueChange={onValueChange}
+          error={error}
+        />
+      );
+
+    case 'verification':
+      return (
+        <VerificationStep
+          element={element}
+          onComplete={onComplete || (() => {})}
+          error={error}
+        />
+      );
+
+    case 'completion':
+      return (
+        <CompletionStep
+          element={element}
+          onRestart={onRestart || (() => {})}
+          onClose={onClose || (() => {})}
+        />
+      );
+
+    default:
+      return (
+        <div>
+          <p>Type d'élément non supporté: {element.type}</p>
+        </div>
+      );
+  }
+}; 

package/src/components/KYCElements/CameraCapture.tsx

@@ -0,0 +1,267 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image, Alert } from 'react-native';
+import { EnhancedCameraView } from '../EnhancedCameraView';
+
+import { KYCElement } from '../../types/KYC.types';
+
+interface CameraCaptureProps {
+  element: KYCElement;
+  value?: string;
+  onValueChange: (value: string) => void;
+  error?: string;
+}
+
+export const CameraCapture: React.FC<CameraCaptureProps> = ({
+  element,
+  value,
+  onValueChange,
+  error,
+}) => {
+  const [capturedImage, setCapturedImage] = useState<string | null>(value || null);
+  const [showCamera, setShowCamera] = useState(false);
+
+  const cameraConfig = element.cameraConfig || {
+    aspectRatio: 4 / 3,
+    quality: 0.8,
+    flashMode: 'auto',
+    cameraType: 'back',
+    allowRetake: true,
+    maxRetakes: 3,
+    overlay: {
+      showGuide: true,
+      guideText: 'Placez votre document dans le cadre',
+    }
+  };
+
+  const handleCapture = (result: { success: boolean; path?: string; error?: string }) => {
+    if (result.success && result.path) {
+      setCapturedImage(result.path);
+      onValueChange(result.path);
+      setShowCamera(false);
+    } else {
+      Alert.alert('Erreur', result.error || 'Impossible de prendre la photo');
+    }
+  };
+
+  const handleError = (event: { message: string }) => {
+    Alert.alert('Erreur', event.message);
+    setShowCamera(false);
+  };
+
+  const retakePicture = () => {
+    setCapturedImage(null);
+    onValueChange('');
+    setShowCamera(true);
+  };
+
+  if (showCamera) {
+    return (
+      <View style={[styles.container]}>
+        <EnhancedCameraView
+          instructions={cameraConfig.overlay?.guideText || 'Placez votre document dans le cadre'}
+          showCamera={true}
+          cameraType={cameraConfig.cameraType || 'back'}
+          style={styles.camera}
+          onCapture={handleCapture}
+          onError={handleError}
+          onClose={() => setShowCamera(false)}
+          quality="high"
+          showCaptureButton={true}
+          showSwitchCamera={true}
+          enableFlash={cameraConfig.flashMode !== 'off'}
+        />
+      </View>
+    );
+  }
+
+  if (capturedImage) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>{element.title}</Text>
+        <Text style={styles.description}>{element.description}</Text>
+
+        <View style={styles.imageContainer}>
+          <Image source={{ uri: capturedImage }} style={styles.capturedImage} />
+        </View>
+
+        <View style={styles.buttonContainer}>
+          {cameraConfig.allowRetake && (
+            <TouchableOpacity style={styles.secondaryButton} onPress={retakePicture}>
+              <Text style={styles.secondaryButtonText}>Reprendre</Text>
+            </TouchableOpacity>
+          )}
+          <TouchableOpacity style={styles.primaryButton}>
+            <Text style={styles.primaryButtonText}>Continuer</Text>
+          </TouchableOpacity>
+        </View>
+
+        {error && (
+          <Text style={styles.errorText}>{error}</Text>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ maxWidth: 760, width: '100%', height: '100%' }}>
+      <View style={styles.container}>
+        <Text style={styles.title}>{element.title}</Text>
+        <Text style={styles.description}>{element.description}</Text>
+
+        <View style={styles.cameraContainer}>
+          <TouchableOpacity
+            style={styles.cameraPlaceholder}
+            onPress={() => setShowCamera(true)}
+          >
+            <Text style={styles.cameraPlaceholderText}>📷</Text>
+            <Text style={styles.cameraPlaceholderLabel}>
+              {cameraConfig.overlay?.guideText || 'Appuyez pour ouvrir la caméra'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {error && (
+          <Text style={styles.errorText}>{error}</Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  cameraContainer: {
+    flex: 1,
+    borderRadius: 12,
+    overflow: 'hidden',
+    marginBottom: 24,
+  },
+  camera: {
+    flex: 1,
+  },
+  imageContainer: {
+    flex: 1,
+    borderRadius: 12,
+    overflow: 'hidden',
+    marginBottom: 24,
+  },
+  capturedImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+  },
+  captureButton: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4.65,
+    elevation: 8,
+  },
+  captureButtonDisabled: {
+    opacity: 0.6,
+  },
+  captureButtonInner: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#4CAF50',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  captureButtonText: {
+    fontSize: 24,
+    color: 'white',
+  },
+  primaryButton: {
+    backgroundColor: '#4CAF50',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+  },
+  primaryButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  secondaryButton: {
+    backgroundColor: '#e5e5e5',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+  },
+  secondaryButtonText: {
+    color: '#333',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  permissionButton: {
+    backgroundColor: '#4CAF50',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+    marginTop: 16,
+  },
+  permissionButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+  cameraPlaceholder: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f0f0f0',
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: '#ccc',
+  },
+  cameraPlaceholderText: {
+    fontSize: 60,
+    marginBottom: 10,
+  },
+  cameraPlaceholderLabel: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+});