@transfergratis/react-native-sdk 0.1.2

package/src/components/KYCElements/DocumentTypeSelection.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import { KYCElement, KYCElementOption } from '../../types/KYC.types';
+
+interface DocumentTypeSelectionProps {
+  element: KYCElement;
+  value?: string;
+  onValueChange: (value: string) => void;
+  error?: string;
+}
+
+const defaultDocumentTypes: KYCElementOption[] = [
+  { 
+    value: 'passport', 
+    label: 'Passeport', 
+    icon: '📘',
+    description: 'Document de voyage officiel'
+  },
+  { 
+    value: 'id_card', 
+    label: 'Carte d\'identité', 
+    icon: '🆔',
+    description: 'Carte d\'identité nationale'
+  },
+  { 
+    value: 'drivers_license', 
+    label: 'Permis de conduire', 
+    icon: '🚗',
+    description: 'Permis de conduire valide'
+  },
+  { 
+    value: 'other', 
+    label: 'Autre document', 
+    icon: '📄',
+    description: 'Autre document d\'identité officiel'
+  },
+];
+
+export const DocumentTypeSelection: React.FC<DocumentTypeSelectionProps> = ({
+  element,
+  value,
+  onValueChange,
+  error,
+}) => {
+  const documentTypes = element.options || defaultDocumentTypes;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{element.title}</Text>
+      <Text style={styles.description}>{element.description}</Text>
+      
+      <ScrollView style={styles.optionsContainer} showsVerticalScrollIndicator={false}>
+        {documentTypes.map((docType) => (
+          <TouchableOpacity
+            key={docType.value}
+            style={[
+              styles.option,
+              value === docType.value && styles.selectedOption
+            ]}
+            onPress={() => onValueChange(docType.value)}
+          >
+            <Text style={styles.optionIcon}>{docType.icon}</Text>
+            <View style={styles.optionContent}>
+              <Text style={[
+                styles.optionLabel,
+                value === docType.value && styles.selectedOptionLabel
+              ]}>
+                {docType.label}
+              </Text>
+              {docType.description && (
+                <Text style={styles.optionDescription}>{docType.description}</Text>
+              )}
+            </View>
+            {value === docType.value && (
+              <View style={styles.checkmark}>
+                <Text style={styles.checkmarkText}>✓</Text>
+              </View>
+            )}
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+
+      {error && (
+        <Text style={styles.errorText}>{error}</Text>
+      )}
+    </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,
+  },
+  optionsContainer: {
+    flex: 1,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: 'white',
+    borderRadius: 12,
+    marginBottom: 12,
+    borderWidth: 2,
+    borderColor: '#e5e5e5',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  selectedOption: {
+    borderColor: '#4CAF50',
+    backgroundColor: '#f0f9f0',
+  },
+  optionIcon: {
+    fontSize: 32,
+    marginRight: 16,
+  },
+  optionContent: {
+    flex: 1,
+  },
+  optionLabel: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+  },
+  selectedOptionLabel: {
+    color: '#4CAF50',
+  },
+  optionDescription: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 4,
+  },
+  checkmark: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#4CAF50',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  checkmarkText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+}); 

package/src/components/KYCElements/FileUpload.tsx

@@ -0,0 +1,317 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Image, Alert } from 'react-native';
+import { useKYCStore } from '../../stores/kycStore';
+import NativeCameraModule from '../../modules/camera/NativeCameraModule';
+import { KYCElement } from '../../types/KYC.types';
+
+interface FileUploadProps {
+  element: KYCElement;
+  value?: string[];
+  onValueChange: (value: string[]) => void;
+  error?: string;
+}
+
+interface UploadedFile {
+  uri: string;
+  path: string;
+  name: string;
+}
+
+export const FileUpload: React.FC<FileUploadProps> = ({
+  element,
+  value = [],
+  onValueChange,
+  error,
+}) => {
+  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const { setProcessing } = useKYCStore();
+
+  const uploadConfig = element.uploadConfig || {
+    allowedTypes: ['image/*', 'application/pdf'],
+    maxFiles: 3,
+    maxFileSize: 10 * 1024 * 1024, // 10MB
+    allowMultiple: true,
+  };
+
+  const pickDocument = async () => {
+    try {
+      setIsUploading(true);
+      setProcessing(true);
+
+      const result = await NativeCameraModule.openFilePicker(uploadConfig.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
+        };
+
+        // Vérifier le nombre maximum de fichiers
+        if (uploadedFiles.length >= uploadConfig.maxFiles) {
+          Alert.alert('Limite atteinte', `Vous ne pouvez sélectionner que ${uploadConfig.maxFiles} fichiers maximum.`);
+          return;
+        }
+
+        const updatedFiles = [...uploadedFiles, newFile];
+        setUploadedFiles(updatedFiles);
+        onValueChange(updatedFiles.map(file => file.uri));
+      } else if (result.error) {
+        Alert.alert('Erreur', result.error);
+      }
+    } catch (error) {
+      console.error('Erreur lors de la sélection de fichiers:', error);
+      Alert.alert('Erreur', 'Impossible de sélectionner le fichier');
+    } finally {
+      setIsUploading(false);
+      setProcessing(false);
+    }
+  };
+
+  const removeFile = (index: number) => {
+    const updatedFiles = uploadedFiles.filter((_, i) => i !== index);
+    setUploadedFiles(updatedFiles);
+    onValueChange(updatedFiles.map(file => file.uri));
+  };
+
+  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 '📎';
+    }
+  };
+
+  const isImageFile = (fileName: string): boolean => {
+    const extension = fileName.split('.').pop()?.toLowerCase();
+    return ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(extension || '');
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{element.title}</Text>
+      <Text style={styles.description}>{element.description}</Text>
+      
+      <View style={styles.uploadArea}>
+        <TouchableOpacity 
+          style={[styles.uploadButton, isUploading && styles.uploadButtonDisabled]}
+          onPress={pickDocument}
+          disabled={isUploading}
+        >
+          <Text style={styles.uploadIcon}>📁</Text>
+          <Text style={styles.uploadText}>
+            {isUploading ? 'Sélection en cours...' : 'Sélectionner des fichiers'}
+          </Text>
+          <Text style={styles.uploadSubtext}>
+            Types acceptés: {uploadConfig.allowedTypes.join(', ')}
+          </Text>
+          {uploadConfig.maxFileSize && (
+            <Text style={styles.uploadSubtext}>
+              Taille max: {formatFileSize(uploadConfig.maxFileSize)}
+            </Text>
+          )}
+        </TouchableOpacity>
+      </View>
+
+      {uploadedFiles.length > 0 && (
+        <View style={styles.filesContainer}>
+          <Text style={styles.filesTitle}>Fichiers sélectionnés ({uploadedFiles.length}/{uploadConfig.maxFiles})</Text>
+          <ScrollView style={styles.filesList}>
+            {uploadedFiles.map((file, index) => (
+              <View key={index} style={styles.fileItem}>
+                {isImageFile(file.name) ? (
+                  <Image source={{ uri: file.uri }} style={styles.fileThumbnail} />
+                ) : (
+                  <View style={styles.fileIcon}>
+                    <Text style={styles.fileIconText}>{getFileIcon(file.name)}</Text>
+                  </View>
+                )}
+                <View style={styles.fileInfo}>
+                  <Text style={styles.fileName} numberOfLines={1}>{file.name}</Text>
+                  <Text style={styles.filePath} numberOfLines={1}>{file.path}</Text>
+                </View>
+                <TouchableOpacity 
+                  style={styles.removeButton}
+                  onPress={() => removeFile(index)}
+                >
+                  <Text style={styles.removeButtonText}>✕</Text>
+                </TouchableOpacity>
+              </View>
+            ))}
+          </ScrollView>
+        </View>
+      )}
+
+      {uploadedFiles.length === 0 && (
+        <View style={styles.emptyState}>
+          <Text style={styles.emptyStateText}>Aucun fichier sélectionné</Text>
+          <Text style={styles.emptyStateSubtext}>
+            Appuyez sur "Sélectionner des fichiers" pour commencer
+          </Text>
+        </View>
+      )}
+
+      {error && (
+        <Text style={styles.errorText}>{error}</Text>
+      )}
+    </View>
+  );
+};
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+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,
+  },
+  uploadArea: {
+    marginBottom: 24,
+  },
+  uploadButton: {
+    borderWidth: 2,
+    borderColor: '#4CAF50',
+    borderStyle: 'dashed',
+    borderRadius: 12,
+    padding: 32,
+    alignItems: 'center',
+    backgroundColor: '#f0f9f0',
+  },
+  uploadButtonDisabled: {
+    opacity: 0.6,
+  },
+  uploadIcon: {
+    fontSize: 48,
+    marginBottom: 16,
+  },
+  uploadText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#4CAF50',
+    marginBottom: 8,
+  },
+  uploadSubtext: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+  },
+  filesContainer: {
+    flex: 1,
+  },
+  filesTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 16,
+  },
+  filesList: {
+    flex: 1,
+  },
+  fileItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    backgroundColor: 'white',
+    borderRadius: 8,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: '#e5e5e5',
+  },
+  fileThumbnail: {
+    width: 40,
+    height: 40,
+    borderRadius: 4,
+    marginRight: 12,
+  },
+  fileIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 4,
+    backgroundColor: '#f0f0f0',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  fileIconText: {
+    fontSize: 20,
+  },
+  fileInfo: {
+    flex: 1,
+  },
+  fileName: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#333',
+  },
+  filePath: {
+    fontSize: 12,
+    color: '#666',
+    marginTop: 2,
+  },
+  removeButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: '#ff4444',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  removeButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  emptyState: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyStateText: {
+    fontSize: 18,
+    color: '#666',
+    marginBottom: 10,
+  },
+  emptyStateSubtext: {
+    fontSize: 14,
+    color: '#999',
+    textAlign: 'center',
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+});