@transfergratis/react-native-sdk 0.1.2

package/build/components/KYCElements/VerificationStep.js

@@ -0,0 +1,199 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
+export const VerificationStep = ({ 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',
+    },
+});
+//# sourceMappingURL=VerificationStep.js.map

package/build/components/KYCElements/VerificationStep.js.map

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

package/build/components/KYCExample.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const KYCExample: React.FC;
+//# sourceMappingURL=KYCExample.d.ts.map

package/build/components/KYCExample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KYCExample.d.ts","sourceRoot":"","sources":["../../src/components/KYCExample.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAYxC,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EA+L9B,CAAC"}

package/build/components/KYCExample.js

@@ -0,0 +1,247 @@
+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';
+export const KYCExample = () => {
+    const [selectedConfig, setSelectedConfig] = useState(null);
+    const [showFlow, setShowFlow] = useState(false);
+    const handleConfigSelect = (config) => {
+        setSelectedConfig(config);
+        setShowFlow(true);
+    };
+    const handleComplete = (data) => {
+        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) => {
+        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,
+    },
+});
+//# sourceMappingURL=KYCExample.js.map

package/build/components/KYCExample.js.map

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

package/build/components/KYCFlow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const KYCFlow: React.FC;
+//# sourceMappingURL=KYCFlow.d.ts.map

package/build/components/KYCFlow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KYCFlow.d.ts","sourceRoot":"","sources":["../../src/components/KYCFlow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EA2O3B,CAAC"}