@transfergratis/react-native-sdk 0.1.2

package/src/components/KYCElements/VerificationStep.tsx

@@ -0,0 +1,234 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import { KYCElement } from '../../types/KYC.types';
+
+interface VerificationStepProps {
+  element: KYCElement;
+  onComplete: () => void;
+  error?: string;
+}
+
+export const VerificationStep: React.FC<VerificationStepProps> = ({
+  element,
+  onComplete,
+  error,
+}) => {
+  const [progress, setProgress] = useState(0);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isComplete, setIsComplete] = useState(false);
+
+  const verificationSteps = [
+    'Analyse des documents',
+    'Vérification de l\'identité',
+    'Contrôle de la selfie',
+    'Validation des données',
+    'Finalisation'
+  ];
+
+  useEffect(() => {
+    const simulateVerification = async () => {
+      for (let i = 0; i < verificationSteps.length; i++) {
+        setCurrentStep(i);
+        setProgress((i / (verificationSteps.length - 1)) * 100);
+        
+        // Simuler un délai pour chaque étape
+        await new Promise(resolve => setTimeout(resolve, 1500 + Math.random() * 1000));
+      }
+      
+      setProgress(100);
+      setIsComplete(true);
+      
+      // Attendre un peu avant de compléter
+      setTimeout(() => {
+        onComplete();
+      }, 1000);
+    };
+
+    simulateVerification();
+  }, [verificationSteps.length, onComplete]);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{element.title}</Text>
+      <Text style={styles.description}>{element.description}</Text>
+      
+      <View style={styles.progressContainer}>
+        <View style={styles.progressBar}>
+          <View 
+            style={[styles.progressFill, { width: `${progress}%` }]}
+          />
+        </View>
+        <Text style={styles.progressText}>{Math.round(progress)}%</Text>
+      </View>
+
+      <View style={styles.stepsContainer}>
+        {verificationSteps.map((step, index) => (
+          <View key={index} style={styles.stepItem}>
+            <View style={[
+              styles.stepIndicator,
+              index < currentStep && styles.stepCompleted,
+              index === currentStep && styles.stepCurrent,
+              index > currentStep && styles.stepPending
+            ]}>
+              {index < currentStep ? (
+                <Text style={styles.stepCheckmark}>✓</Text>
+              ) : index === currentStep ? (
+                <ActivityIndicator size="small" color="#4CAF50" />
+              ) : (
+                <Text style={styles.stepNumber}>{index + 1}</Text>
+              )}
+            </View>
+            <Text style={[
+              styles.stepText,
+              index <= currentStep && styles.stepTextActive
+            ]}>
+              {step}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {isComplete && (
+        <View style={styles.completionContainer}>
+          <Text style={styles.completionIcon}>✅</Text>
+          <Text style={styles.completionText}>
+            Vérification terminée avec succès !
+          </Text>
+        </View>
+      )}
+
+      {error && (
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorIcon}>❌</Text>
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 32,
+    lineHeight: 22,
+  },
+  progressContainer: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  progressBar: {
+    width: '100%',
+    height: 8,
+    backgroundColor: '#e5e5e5',
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: '#4CAF50',
+    borderRadius: 4,
+  },
+  progressText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#4CAF50',
+  },
+  stepsContainer: {
+    marginBottom: 32,
+  },
+  stepItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  stepIndicator: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 16,
+  },
+  stepCompleted: {
+    backgroundColor: '#4CAF50',
+  },
+  stepCurrent: {
+    backgroundColor: '#fff',
+    borderWidth: 2,
+    borderColor: '#4CAF50',
+  },
+  stepPending: {
+    backgroundColor: '#e5e5e5',
+  },
+  stepCheckmark: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  stepNumber: {
+    color: '#666',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  stepText: {
+    fontSize: 16,
+    color: '#666',
+    flex: 1,
+  },
+  stepTextActive: {
+    color: '#333',
+    fontWeight: '500',
+  },
+  completionContainer: {
+    alignItems: 'center',
+    padding: 24,
+    backgroundColor: '#f0f9f0',
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: '#4CAF50',
+  },
+  completionIcon: {
+    fontSize: 48,
+    marginBottom: 16,
+  },
+  completionText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#4CAF50',
+    textAlign: 'center',
+  },
+  errorContainer: {
+    alignItems: 'center',
+    padding: 24,
+    backgroundColor: '#fef2f2',
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: '#dc2626',
+  },
+  errorIcon: {
+    fontSize: 48,
+    marginBottom: 16,
+  },
+  errorText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#dc2626',
+    textAlign: 'center',
+  },
+}); 

package/src/components/KYCExample.tsx

@@ -0,0 +1,297 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
+import { ConfigurableKYCFlow } from './ConfigurableKYCFlow';
+import { 
+  basicKYCConfig, 
+  advancedKYCConfig, 
+  quickKYCConfig, 
+  professionalKYCConfig,
+  createCustomKYCConfig 
+} from '../config/KYCConfigs';
+import { KYCFlowConfig } from '../types/KYC.types';
+
+export const KYCExample: React.FC = () => {
+  const [selectedConfig, setSelectedConfig] = useState<KYCFlowConfig | null>(null);
+  const [showFlow, setShowFlow] = useState(false);
+
+  const handleConfigSelect = (config: KYCFlowConfig) => {
+    setSelectedConfig(config);
+    setShowFlow(true);
+  };
+
+  const handleComplete = (data: any) => {
+    Alert.alert(
+      'KYC Terminé !',
+      `Vérification terminée avec succès.\nDonnées collectées: ${JSON.stringify(data, null, 2)}`,
+      [
+        {
+          text: 'OK',
+          onPress: () => {
+            setShowFlow(false);
+            setSelectedConfig(null);
+          }
+        }
+      ]
+    );
+  };
+
+  const handleError = (error: any) => {
+    Alert.alert('Erreur', `Une erreur s'est produite: ${error.message}`);
+  };
+
+  const handleClose = () => {
+    setShowFlow(false);
+    setSelectedConfig(null);
+  };
+
+  // Exemple de configuration personnalisée
+  const customConfig = createCustomKYCConfig(
+    'custom_kyc',
+    'KYC Personnalisé',
+    'Configuration personnalisée pour votre service',
+    [
+      {
+        id: 'country_selection',
+        type: 'country_selection',
+        title: 'Sélectionnez votre pays',
+        description: 'Choisissez le pays qui a émis votre document',
+        isRequired: true,
+        isVisible: true,
+        order: 0,
+        validation: { required: true },
+      },
+      {
+        id: 'selfie',
+        type: 'selfie_capture',
+        title: 'Prenez votre photo',
+        description: 'Une photo de votre visage est requise',
+        isRequired: true,
+        isVisible: true,
+        order: 1,
+        validation: { required: true },
+        cameraConfig: {
+          aspectRatio: 1,
+          quality: 0.8,
+          flashMode: 'off',
+          cameraType: 'front',
+          allowRetake: true,
+          maxRetakes: 3,
+        },
+      },
+      {
+        id: 'verification',
+        type: 'verification',
+        title: 'Vérification',
+        description: 'Vérification en cours...',
+        isRequired: true,
+        isVisible: true,
+        order: 2,
+      },
+      {
+        id: 'completion',
+        type: 'completion',
+        title: 'Terminé !',
+        description: 'Vérification réussie',
+        isRequired: true,
+        isVisible: true,
+        order: 3,
+      },
+    ],
+    {
+      allowBackNavigation: false,
+      showProgressBar: true,
+      showStepNumbers: true,
+      autoAdvance: true,
+    },
+    {
+      primaryColor: '#FF6B6B',
+      secondaryColor: '#4ECDC4',
+      backgroundColor: '#f8f9fa',
+    }
+  );
+
+  if (showFlow && selectedConfig) {
+    return (
+      <ConfigurableKYCFlow
+        config={selectedConfig}
+        onComplete={handleComplete}
+        onError={handleError}
+        onClose={handleClose}
+      />
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Système KYC Configurable</Text>
+      <Text style={styles.subtitle}>
+        Sélectionnez le type de vérification d'identité que vous souhaitez utiliser
+      </Text>
+
+      <View style={styles.configGrid}>
+        <TouchableOpacity 
+          style={styles.configCard}
+          onPress={() => handleConfigSelect(basicKYCConfig)}
+        >
+          <Text style={styles.configIcon}>📋</Text>
+          <Text style={styles.configTitle}>KYC Basique</Text>
+          <Text style={styles.configDescription}>
+            Vérification standard avec document d'identité et selfie
+          </Text>
+          <Text style={styles.configSteps}>7 étapes</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity 
+          style={styles.configCard}
+          onPress={() => handleConfigSelect(advancedKYCConfig)}
+        >
+          <Text style={styles.configIcon}>📁</Text>
+          <Text style={styles.configTitle}>KYC Avancé</Text>
+          <Text style={styles.configDescription}>
+            Vérification avec documents supplémentaires optionnels
+          </Text>
+          <Text style={styles.configSteps}>8 étapes</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity 
+          style={styles.configCard}
+          onPress={() => handleConfigSelect(quickKYCConfig)}
+        >
+          <Text style={styles.configIcon}>⚡</Text>
+          <Text style={styles.configTitle}>KYC Rapide</Text>
+          <Text style={styles.configDescription}>
+            Vérification rapide avec selfie uniquement
+          </Text>
+          <Text style={styles.configSteps}>3 étapes</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity 
+          style={styles.configCard}
+          onPress={() => handleConfigSelect(professionalKYCConfig)}
+        >
+          <Text style={styles.configIcon}>💼</Text>
+          <Text style={styles.configTitle}>KYC Professionnel</Text>
+          <Text style={styles.configDescription}>
+            Vérification complète pour professionnels
+          </Text>
+          <Text style={styles.configSteps}>8 étapes</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity 
+          style={styles.configCard}
+          onPress={() => handleConfigSelect(customConfig)}
+        >
+          <Text style={styles.configIcon}>🎨</Text>
+          <Text style={styles.configTitle}>KYC Personnalisé</Text>
+          <Text style={styles.configDescription}>
+            Configuration personnalisée pour votre service
+          </Text>
+          <Text style={styles.configSteps}>4 étapes</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.infoContainer}>
+        <Text style={styles.infoTitle}>Fonctionnalités du système :</Text>
+        <Text style={styles.infoText}>• Configuration automatique des étapes</Text>
+        <Text style={styles.infoText}>• Validation personnalisable</Text>
+        <Text style={styles.infoText}>• Interface adaptative</Text>
+        <Text style={styles.infoText}>• Gestion des erreurs</Text>
+        <Text style={styles.infoText}>• Styles personnalisables</Text>
+        <Text style={styles.infoText}>• Support multi-langues</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fa',
+    padding: 16,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#333',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 32,
+    lineHeight: 22,
+  },
+  configGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    marginBottom: 32,
+  },
+  configCard: {
+    width: '48%',
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  configIcon: {
+    fontSize: 32,
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  configTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  configDescription: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    lineHeight: 18,
+    marginBottom: 12,
+  },
+  configSteps: {
+    fontSize: 12,
+    color: '#4CAF50',
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  infoContainer: {
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 20,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  infoTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 12,
+  },
+  infoText: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 6,
+    lineHeight: 20,
+  },
+});