@sanctum-key/react-native-sdk 1.0.0

package/src/components/KYCElements/VerificationProgressTemplate.tsx

@@ -0,0 +1,247 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { TemplateComponent } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import kycService, { errorMessage } from '../../modules/api/KYCService';
+import { logger } from '../../utils/logger';
+
+interface VerificationProgressTemplateProps {
+  component: TemplateComponent;
+  value: unknown;
+  onValueChange: (data: unknown) => void;
+  error?: string;
+  language?: string;
+}
+
+export const VerificationProgressTemplate: React.FC<VerificationProgressTemplateProps> = () => {
+  const { t } = useI18n();
+  const { state, actions } = useTemplateKYCFlowContext();
+  const [retryCount, setRetryCount] = useState(0);
+  const [isRetrying, setIsRetrying] = useState(false);
+  const [timeoutId, setTimeoutId] = useState<number | null>(null);
+
+  const verification = state.verification;
+
+  const isSuccess = verification.status === 'success';
+  const isFailed = verification.status === 'failed';
+
+  // Fonction pour récupérer le résultat de vérification avec retry
+  const getVerificationResult = async (currentRetryCount = 0, maxRetries = 40) => {
+    try {
+      logger.log(`Starting verification check (attempt ${currentRetryCount + 1}/${maxRetries + 1})`);
+
+      const result = await kycService.getVerificationResult(state.session.session_id);
+      const verificationResult = result[state.session.session_id].data;
+
+      logger.log('getVerificationResult result', JSON.stringify(result, null, 2));
+
+      // Vérifier le statut de vérification
+      if (verificationResult.verification_status === null || verificationResult.verification_status === "processing" || verificationResult.verification_status === "pending") {
+        if (currentRetryCount < maxRetries) {
+          const nextRetryCount = currentRetryCount + 1;
+          setRetryCount(nextRetryCount);
+          setIsRetrying(true);
+
+          logger.log(`Verification still processing, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
+
+          // Nettoyer le timeout précédent s'il existe
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+          }
+
+          // Attendre 10 secondes avant de relancer
+          const newTimeoutId = setTimeout(() => {
+            getVerificationResult(nextRetryCount, maxRetries);
+          }, 10000);
+
+          setTimeoutId(newTimeoutId);
+          return; // Sortir de la fonction pour éviter de traiter le résultat
+        } else {
+          logger.error('Max retries reached, verification still processing');
+          setIsRetrying(false);
+          return;
+        }
+      }
+
+      // Traiter le résultat final (success, failed, etc.)
+      if (verificationResult.verification_status === "completed" ||
+        verificationResult.verification_status === "approved") {
+        // Mettre à jour l'état avec le succès
+        actions.setVerificationState({
+          status: 'success',
+          result: result
+        });
+      } else if (verificationResult.verification_status === "failed" ||
+        verificationResult.verification_status === "rejected") {
+        // Mettre à jour l'état avec l'échec
+        actions.setVerificationState({
+          status: 'failed',
+          result: {
+            referenceId: verificationResult.verification_id,
+            issues: ['Verification failed']
+          } as any
+        });
+      }
+
+      setIsRetrying(false);
+
+    } catch (error) {
+      logger.error('getVerificationResult error', JSON.stringify(errorMessage(error), null, 2));
+
+      // En cas d'erreur, on peut aussi retry
+      if (currentRetryCount < maxRetries) {
+        const nextRetryCount = currentRetryCount + 1;
+        setRetryCount(nextRetryCount);
+        setIsRetrying(true);
+
+        logger.log(`getVerificationResult Error occurred, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
+
+        // Nettoyer le timeout précédent s'il existe
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+
+        const newTimeoutId = setTimeout(() => {
+          getVerificationResult(nextRetryCount, maxRetries);
+        }, 10000);
+
+        setTimeoutId(newTimeoutId);
+      } else {
+        setIsRetrying(false);
+        logger.error('Max retries reached after errors');
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (state.session.session_id) {
+      getVerificationResult();
+    }
+  }, [state.session.session_id]);
+
+  // Nettoyage des timeouts lors du démontage du composant
+  useEffect(() => {
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [timeoutId]);
+
+  if (isSuccess) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>{t('kyc.verificationProgress.steps.complete')}</Text>
+        <Text style={styles.subtitle}>{t('kyc.verificationProgress.subtitle')}</Text>
+        <TouchableOpacity style={[styles.button, styles.primary]} onPress={() => actions.submitVerification()}>
+          <Text style={styles.buttonText}>{t('common.continue')}</Text>
+        </TouchableOpacity>
+        {verification.result?.referenceId ? (
+          <Text style={styles.refText}>{`Verification ID: ${verification.result.referenceId}`}</Text>
+        ) : null}
+      </View>
+    );
+  }
+
+  if (isFailed) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>{t('kyc.verificationProgress.status.failed')}</Text>
+        <Text style={styles.subtitle}>{t('errors.validationError')}</Text>
+        <View style={styles.issuesBox}>
+          <Text style={styles.issuesTitle}>{t('common.error')}</Text>
+          {Array.isArray(verification.result?.issues) && verification.result.issues.map((issue: string, idx: number) => (
+            <Text key={idx} style={styles.issueItem}>• {issue}</Text>
+          ))}
+        </View>
+        <TouchableOpacity style={[styles.button, styles.primary]} onPress={() => actions.resetTemplate()}>
+          <Text style={styles.buttonText}>{t('kyc.verificationProgress.status.retry')}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={[styles.button, styles.secondary]}>
+          <Text style={styles.secondaryText}>{t('common.info')}</Text>
+        </TouchableOpacity>
+        {verification.result?.referenceId ? (
+          <Text style={styles.refText}>{`Reference ID: ${verification.result.referenceId}`}</Text>
+        ) : null}
+      </View>
+    );
+  }
+
+
+
+
+
+
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{t('kyc.verificationProgress.title')}</Text>
+      <Text style={styles.subtitle}>
+        {isRetrying
+          ? `${t('kyc.verificationProgress.retrying', { current: retryCount, max: 40 })}`
+          : t('kyc.verificationProgress.estimatedTime')
+        }
+      </Text>
+
+      <View style={styles.timeline}>
+        <View style={[styles.dot, styles.done]}><Text style={styles.stepCheckmark}>✓</Text></View>
+        <View style={styles.line} />
+        <View style={[styles.dot, styles.active]}><Text style={styles.stepCheckmark}>2</Text></View>
+        <View style={styles.line} />
+        <View style={[styles.dot, styles.pending]}><Text style={styles.stepCheckmark}>3</Text></View>
+      </View>
+
+      <View style={styles.row}>
+        <Text style={styles.stepLabel}>{t('kyc.verificationProgress.status.completed')}</Text>
+        <Text style={styles.stepLabel}>{t('kyc.verificationProgress.steps.analyzing')}</Text>
+        <Text style={styles.stepLabel}>{t('kyc.verificationProgress.steps.verifying')}</Text>
+      </View>
+
+      <View style={styles.card}>
+        <Text style={styles.cardTitle}>{t('kyc.idCardCapture.title')}</Text>
+        <Text style={styles.cardLine}>{t('kyc.verificationProgress.steps.extracting')}</Text>
+        <Text style={styles.cardTitle}>{t('kyc.selfieCapture.title')}</Text>
+        <Text style={styles.cardLine}>{t('kyc.verificationProgress.steps.analyzing')}</Text>
+        <Text style={styles.cardTitle}>{t('kyc.verificationProgress.title')}</Text>
+        <Text style={styles.cardLine}>
+          {isRetrying
+            ? `${t('kyc.verificationProgress.status.processing')}...`
+            : t('kyc.verificationProgress.status.pending')
+          }
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, width: '100%', paddingHorizontal: 16, paddingVertical: 12 },
+  title: { fontSize: 24, fontWeight: 'bold', color: '#111827', textAlign: 'center', marginTop: 12 },
+  subtitle: { fontSize: 14, color: '#6B7280', textAlign: 'center', marginTop: 8 },
+  timeline: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 24 },
+  dot: { width: 38, height: 38, borderRadius: 34, justifyContent: 'center', alignItems: 'center' },
+  stepCheckmark: { color: 'white', fontSize: 16, fontWeight: 'bold' },
+  line: { flex: 1, height: 4, backgroundColor: '#E5E7EB' },
+  done: { backgroundColor: '#10B981' },
+  active: { backgroundColor: '#F59E0B' },
+  pending: { backgroundColor: '#E5E7EB' },
+  row: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 8 },
+  stepLabel: { fontSize: 14, color: '#111827', fontWeight: '600' },
+  card: { backgroundColor: 'white', padding: 16, borderRadius: 16, marginTop: 24 },
+  cardTitle: { fontSize: 16, color: '#6B7280', marginTop: 8 },
+  cardLine: { fontSize: 18, color: '#111827', fontWeight: '600', marginTop: 2 },
+  // Success/Failure specific
+  button: { paddingVertical: 14, borderRadius: 10, alignItems: 'center', marginTop: 20 },
+  primary: { backgroundColor: '#2DBD60' },
+  buttonText: { color: 'white', fontSize: 16, fontWeight: '600' },
+  refText: { marginTop: 12, textAlign: 'center', color: '#6B7280' },
+  issuesBox: { backgroundColor: '#FEF2F2', borderRadius: 16, padding: 16, marginTop: 20 },
+  issuesTitle: { color: '#991B1B', fontWeight: '700', marginBottom: 8 },
+  issueItem: { color: '#991B1B', marginTop: 4 },
+  secondary: { backgroundColor: '#F3F4F6' },
+  secondaryText: { color: '#111827', fontSize: 16, fontWeight: '600' },
+});
+
+
+

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',
+  },
+});