@sanctum-key/react-native-sdk 1.0.0

package/src/components/KYCElements/CameraCapture.tsx

@@ -0,0 +1,268 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
+import { EnhancedCameraView } from '../EnhancedCameraView';
+
+import { KYCElement } from '../../types/KYC.types';
+
+interface CameraCaptureProps {
+  element: KYCElement;
+  value?: string;
+  onValueChange: (value: string) => void;
+  error?: string;
+}
+
+export const CameraCapture: React.FC<CameraCaptureProps> = ({
+  element,
+  value,
+  onValueChange,
+  error,
+}) => {
+  const [capturedImage, setCapturedImage] = useState<string | null>(value || null);
+  const [showCamera, setShowCamera] = useState(false);
+
+  const cameraConfig = element.cameraConfig || {
+    aspectRatio: 4 / 3,
+    quality: 0.8,
+    flashMode: 'auto',
+    cameraType: 'back',
+    allowRetake: true,
+    maxRetakes: 3,
+    overlay: {
+      showGuide: true,
+      guideText: 'Placez votre document dans le cadre',
+    }
+  };
+
+  const handleCapture = (result: { success: boolean; path?: string; error?: string }) => {
+    if (result.success && result.path) {
+      setCapturedImage(result.path);
+      onValueChange(result.path);
+      setShowCamera(false);
+    } else {
+      showAlert('Erreur', result.error || 'Impossible de prendre la photo');
+    }
+  };
+
+  const handleError = (event: { message: string }) => {
+    showAlert('Erreur', event.message);
+    setShowCamera(false);
+  };
+
+  const retakePicture = () => {
+    setCapturedImage(null);
+    onValueChange('');
+    setShowCamera(true);
+  };
+
+  if (showCamera) {
+    return (
+      <View style={[styles.container]}>
+        <EnhancedCameraView
+          instructions={cameraConfig.overlay?.guideText || 'Placez votre document dans le cadre'}
+          showCamera={true}
+          cameraType={cameraConfig.cameraType || 'back'}
+          style={styles.camera}
+          onCapture={handleCapture}
+          onError={handleError}
+          onClose={() => setShowCamera(false)}
+          quality="high"
+          showCaptureButton={true}
+          showSwitchCamera={true}
+          enableFlash={cameraConfig.flashMode !== 'off'}
+        />
+      </View>
+    );
+  }
+
+  if (capturedImage) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>{element.title}</Text>
+        <Text style={styles.description}>{element.description}</Text>
+
+        <View style={styles.imageContainer}>
+          <Image source={{ uri: capturedImage }} style={styles.capturedImage} />
+        </View>
+
+        <View style={styles.buttonContainer}>
+          {cameraConfig.allowRetake && (
+            <TouchableOpacity style={styles.secondaryButton} onPress={retakePicture}>
+              <Text style={styles.secondaryButtonText}>Reprendre</Text>
+            </TouchableOpacity>
+          )}
+          <TouchableOpacity style={styles.primaryButton}>
+            <Text style={styles.primaryButtonText}>Continuer</Text>
+          </TouchableOpacity>
+        </View>
+
+        {error && (
+          <Text style={styles.errorText}>{error}</Text>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ maxWidth: 760, width: '100%', height: '100%' }}>
+      <View style={styles.container}>
+        <Text style={styles.title}>{element.title}</Text>
+        <Text style={styles.description}>{element.description}</Text>
+
+        <View style={styles.cameraContainer}>
+          <TouchableOpacity
+            style={styles.cameraPlaceholder}
+            onPress={() => setShowCamera(true)}
+          >
+            <Text style={styles.cameraPlaceholderText}>📷</Text>
+            <Text style={styles.cameraPlaceholderLabel}>
+              {cameraConfig.overlay?.guideText || 'Appuyez pour ouvrir la caméra'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {error && (
+          <Text style={styles.errorText}>{error}</Text>
+        )}
+      </View>
+    </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,
+  },
+  cameraContainer: {
+    flex: 1,
+    borderRadius: 12,
+    overflow: 'hidden',
+    marginBottom: 24,
+  },
+  camera: {
+    flex: 1,
+  },
+  imageContainer: {
+    flex: 1,
+    borderRadius: 12,
+    overflow: 'hidden',
+    marginBottom: 24,
+  },
+  capturedImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+  },
+  captureButton: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4.65,
+    elevation: 8,
+  },
+  captureButtonDisabled: {
+    opacity: 0.6,
+  },
+  captureButtonInner: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#4CAF50',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  captureButtonText: {
+    fontSize: 24,
+    color: 'white',
+  },
+  primaryButton: {
+    backgroundColor: '#4CAF50',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+  },
+  primaryButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  secondaryButton: {
+    backgroundColor: '#e5e5e5',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+  },
+  secondaryButtonText: {
+    color: '#333',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  permissionButton: {
+    backgroundColor: '#4CAF50',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+    marginTop: 16,
+  },
+  permissionButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+  cameraPlaceholder: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f0f0f0',
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: '#ccc',
+  },
+  cameraPlaceholderText: {
+    fontSize: 60,
+    marginBottom: 10,
+  },
+  cameraPlaceholderLabel: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+}); 

package/src/components/KYCElements/CompletionStep.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { KYCElement } from '../../types/KYC.types';
+
+interface CompletionStepProps {
+  element: KYCElement;
+  onRestart: () => void;
+  onClose: () => void;
+}
+
+export const CompletionStep: React.FC<CompletionStepProps> = ({
+  element,
+  onRestart,
+  onClose,
+}) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.successContainer}>
+        <Text style={styles.successIcon}>🎉</Text>
+        <Text style={styles.title}>{element.title}</Text>
+        <Text style={styles.description}>{element.description}</Text>
+        
+        <View style={styles.checkmarkContainer}>
+          <View style={styles.checkmarkCircle}>
+            <Text style={styles.checkmarkText}>✓</Text>
+          </View>
+        </View>
+        
+        <Text style={styles.successMessage}>
+          Votre vérification d'identité a été complétée avec succès !
+        </Text>
+        
+        <Text style={styles.detailsText}>
+          Vos documents ont été validés et votre compte est maintenant vérifié.
+          Vous pouvez maintenant utiliser tous les services de notre plateforme.
+        </Text>
+      </View>
+
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity style={styles.secondaryButton} onPress={onRestart}>
+          <Text style={styles.secondaryButtonText}>Recommencer</Text>
+        </TouchableOpacity>
+        
+        <TouchableOpacity style={styles.primaryButton} onPress={onClose}>
+          <Text style={styles.primaryButtonText}>Terminer</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    justifyContent: 'center',
+  },
+  successContainer: {
+    alignItems: 'center',
+    padding: 24,
+    backgroundColor: 'white',
+    borderRadius: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5,
+    marginBottom: 32,
+  },
+  successIcon: {
+    fontSize: 64,
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  checkmarkContainer: {
+    marginBottom: 24,
+  },
+  checkmarkCircle: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#4CAF50',
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#4CAF50',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  checkmarkText: {
+    color: 'white',
+    fontSize: 32,
+    fontWeight: 'bold',
+  },
+  successMessage: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#4CAF50',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  detailsText: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    paddingHorizontal: 16,
+  },
+  primaryButton: {
+    backgroundColor: '#4CAF50',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+    flex: 1,
+    marginLeft: 8,
+  },
+  primaryButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  secondaryButton: {
+    backgroundColor: '#e5e5e5',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+    flex: 1,
+    marginRight: 8,
+  },
+  secondaryButtonText: {
+    color: '#333',
+    fontWeight: '600',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+}); 

package/src/components/KYCElements/CountrySelection.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import { KYCElement, KYCElementOption } from '../../types/KYC.types';
+
+interface CountrySelectionProps {
+  element: KYCElement;
+  value?: string;
+  onValueChange: (value: string) => void;
+  error?: string;
+}
+
+const defaultCountries: KYCElementOption[] = [
+  { value: 'FR', label: 'France', icon: '🇫🇷' },
+  { value: 'BE', label: 'Belgique', icon: '🇧🇪' },
+  { value: 'LU', label: 'Luxembourg', icon: '🇱🇺' },
+  { value: 'DE', label: 'Allemagne', icon: '🇩🇪' },
+  { value: 'IT', label: 'Italie', icon: '🇮🇹' },
+  { value: 'ES', label: 'Espagne', icon: '🇪🇸' },
+  { value: 'PT', label: 'Portugal', icon: '🇵🇹' },
+  { value: 'AT', label: 'Autriche', icon: '🇦🇹' },
+  { value: 'CH', label: 'Suisse', icon: '🇨🇭' },
+  { value: 'NL', label: 'Pays-Bas', icon: '🇳🇱' },
+  { value: 'OTHER', label: 'Autre', icon: '🌍' },
+];
+
+export const CountrySelection: React.FC<CountrySelectionProps> = ({
+  element,
+  value,
+  onValueChange,
+  error,
+}) => {
+  const countries = element.options || defaultCountries;
+
+  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}>
+        {countries.map((country) => (
+          <TouchableOpacity
+            key={country.value}
+            style={[
+              styles.option,
+              value === country.value && styles.selectedOption
+            ]}
+            onPress={() => onValueChange(country.value)}
+          >
+            <Text style={styles.optionIcon}>{country.icon}</Text>
+            <View style={styles.optionContent}>
+              <Text style={[
+                styles.optionLabel,
+                value === country.value && styles.selectedOptionLabel
+              ]}>
+                {country.label}
+              </Text>
+              {country.description && (
+                <Text style={styles.optionDescription}>{country.description}</Text>
+              )}
+            </View>
+            {value === country.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,},
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 24,
+    gap: 10,
+  },
+  button: {
+    flex: 1,
+    padding: 12,
+    backgroundColor: '#4CAF50',
+    textAlign: 'center',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+
+});