@sanctum-key/react-native-sdk 1.0.0

package/src/components/KYCElements/WelcomeTemplate.tsx

@@ -0,0 +1,290 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { TemplateComponent, WelcomeConfig, LocalizedText } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { Button } from '../ui/Button';
+import ShieldIcon from '../Svgs/Schield';
+
+interface WelcomeTemplateProps {
+  component: TemplateComponent;
+  value?: any;
+  onValueChange: (data: any) => void;
+  error?: string;
+  language?: string;
+}
+
+export const WelcomeTemplate: React.FC<WelcomeTemplateProps> = ({
+  component,
+  value,
+  onValueChange,
+  error,
+}) => {
+  const { t } = useI18n();
+  const { getLocalizedText, actions } = useTemplateKYCFlowContext();
+  const config = component.config as WelcomeConfig;
+
+  // Consentements cochés par défaut
+  const privacyConsent = true;
+  const termsConsent = true;
+  const [shouldProceed, setShouldProceed] = useState(false);
+
+  // Get localized text
+  const title = getLocalizedText(component.labels as LocalizedText);
+  const description = getLocalizedText(component.instructions as LocalizedText);
+  const welcomeMessage = config.welcomeMessage || description;
+  const buttonText = config.buttonText || getLocalizedText((component.ui as any).buttonText || { en: 'Get Started', fr: 'Commencer' });
+
+  // Passer à l'étape suivante après que les données sont mises à jour
+  useEffect(() => {
+    if (shouldProceed && value && value.consentGiven) {
+      // Petit délai pour s'assurer que le state est bien mis à jour
+      const timer = setTimeout(() => {
+        actions.nextComponent();
+        setShouldProceed(false);
+      }, 100);
+
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [value, shouldProceed, actions]);
+
+  const handleGetStarted = () => {
+    // Mark component as complete
+    const consentData = { consentGiven: true, privacyConsent, termsConsent };
+    onValueChange(consentData);
+    setShouldProceed(true);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+        {/* Icon Section */}
+        <View style={{ position: 'relative', width: 70 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: 60, height: 60, backgroundColor: '#2DBE60', borderRadius: 100 }}>
+            <ShieldIcon />
+          </View>
+          <View style={{ position: 'absolute', top: '60%', right: 0, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, backgroundColor: 'white', borderRadius: 100, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.15, shadowRadius: 1.84, elevation: 5 }}>
+            <Text style={{ fontSize: 20, color: '#2DBE60' }}>✓</Text>
+          </View>
+        </View>
+
+        {/* Title and Description */}
+        <View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', marginTop: 36 }}>
+          <Text style={styles.title}>{title}</Text>
+          {welcomeMessage && (
+            <Text style={styles.description}>
+              {welcomeMessage}
+            </Text>
+          )}
+        </View>
+
+        {/* Requirements List */}
+        {config.requirements && config.requirements.length > 0 && (
+          <View style={styles.requirementsSection}>
+            <Text style={styles.sectionTitle}>
+              {t('kyc.welcome.requirements') || `What you'll need:`}
+            </Text>
+            {config.requirements.map((requirement, index) => (
+              <View key={index} style={styles.requirementItem}>
+                <Text style={styles.checkmark}>✓</Text>
+                <Text style={styles.requirementText}>{requirement}</Text>
+              </View>
+            ))}
+          </View>
+        )}
+
+        {/* Estimated Time */}
+        {config.showEstimatedTime !== false && config.estimatedTime && (
+          <View style={styles.timeSection}>
+            <Text style={styles.timeLabel}>
+              {t('kyc.welcome.estimatedTime') || 'Estimated time:'}
+            </Text>
+            <Text style={styles.timeValue}>{config.estimatedTime}</Text>
+          </View>
+        )}
+
+        {/* Consent Options - Hidden by default as they're pre-checked */}
+        {(config.consentOptions?.showPrivacyPolicy || config.consentOptions?.showTermsOfService || config.consentOptions?.showMarketingConsent) && (
+          <View style={styles.consentSection}>
+            {config.consentOptions.showPrivacyPolicy && (
+              <View style={styles.consentItem}>
+                <View style={[styles.checkbox, styles.checkboxChecked]}>
+                  <Text style={styles.checkmarkSmall}>✓</Text>
+                </View>
+                <Text style={styles.consentText}>
+                  {t('kyc.welcome.privacyPolicy') || 'I agree to the Privacy Policy'}
+                </Text>
+              </View>
+            )}
+
+            {config.consentOptions.showTermsOfService && (
+              <View style={styles.consentItem}>
+                <View style={[styles.checkbox, styles.checkboxChecked]}>
+                  <Text style={styles.checkmarkSmall}>✓</Text>
+                </View>
+                <Text style={styles.consentText}>
+                  {t('kyc.welcome.termsOfService') || 'I agree to the Terms of Service'}
+                </Text>
+              </View>
+            )}
+
+            {config.consentOptions.showMarketingConsent && (
+              <View style={styles.consentItem}>
+                <View style={[styles.checkbox, styles.checkboxChecked]}>
+                  <Text style={styles.checkmarkSmall}>✓</Text>
+                </View>
+                <Text style={styles.consentText}>
+                  {t('kyc.welcome.marketingConsent') || 'I agree to receive marketing communications'}
+                </Text>
+              </View>
+            )}
+          </View>
+        )}
+
+        {error && (
+          <View style={styles.errorContainer}>
+            <Text style={styles.errorText}>{error}</Text>
+          </View>
+        )}
+
+        {/* Get Started Button */}
+        <Button
+          title={buttonText?.length === 0 ? t('kyc.welcome.getStarted') || 'Get Started' : buttonText}
+          fullWidth
+          onPress={handleGetStarted}
+          style={{ paddingVertical: 20, marginTop: 36 }}
+        />
+
+        <View style={{ height: 12 }} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    backgroundColor: 'white',
+    marginHorizontal: 12,
+    marginTop: 12,
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 1.84,
+    elevation: 3,
+    maxWidth: 760,
+    width: '94%',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  requirementsSection: {
+    backgroundColor: '#F9FAFB',
+    padding: 12,
+    borderRadius: 12,
+    width: '100%',
+    marginTop: 24,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: 'black',
+    marginBottom: 12,
+    textAlign: 'left',
+  },
+  requirementItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  checkmark: {
+    fontSize: 18,
+    color: '#2DBD60',
+    marginRight: 12,
+    fontWeight: 'bold',
+  },
+  requirementText: {
+    flex: 1,
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'left',
+    lineHeight: 22,
+  },
+  timeSection: {
+    backgroundColor: '#F9FAFB',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 16,
+    alignItems: 'center',
+    width: '100%',
+  },
+  timeLabel: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 4,
+  },
+  timeValue: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#2DBD60',
+  },
+  consentSection: {
+    width: '100%',
+    marginTop: 24,
+  },
+  consentItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  checkbox: {
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderColor: '#ddd',
+    borderRadius: 4,
+    marginRight: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkboxChecked: {
+    backgroundColor: '#2DBD60',
+    borderColor: '#2DBD60',
+  },
+  checkmarkSmall: {
+    fontSize: 14,
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  consentText: {
+    flex: 1,
+    fontSize: 15,
+    color: '#333',
+    lineHeight: 22,
+  },
+  errorContainer: {
+    backgroundColor: '#fee',
+    padding: 12,
+    borderRadius: 8,
+    marginTop: 16,
+    width: '100%',
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    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,
+  },
+});