@transfergratis/react-native-sdk 0.1.2

package/src/components/ConfigurableKYCFlow.tsx

@@ -0,0 +1,334 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
+import { useKYCFlow } from '../hooks/useKYCFlow';
+import { KYCElementRenderer } from './KYCElementRenderer';
+import { KYCFlowConfig } from '../types/KYC.types';
+
+interface ConfigurableKYCFlowProps {
+  config: KYCFlowConfig;
+  onComplete?: (data: any) => void;
+  onError?: (error: any) => void;
+  onClose?: () => void;
+}
+
+export const ConfigurableKYCFlow: React.FC<ConfigurableKYCFlowProps> = ({
+  config,
+  onComplete,
+  onError,
+  onClose,
+}) => {
+  const {
+    state,
+    actions,
+    currentElement,
+    progress,
+    canGoNext,
+    canGoPrevious,
+    isComplete,
+  } = useKYCFlow();
+
+  const isInitialized = useRef(false);
+
+  useEffect(() => {
+    if (!isInitialized.current) {
+      actions.initializeFlow(config);
+      isInitialized.current = true;
+    }
+  }, [config.id]); // Seulement quand l'ID de la config change
+
+  const handleValueChange = (value: any) => {
+    if (currentElement) {
+      actions.updateElementData(currentElement.id, value);
+    }
+  };
+
+  const handleNext = () => {
+    console.log('handleNext called');
+    console.log('currentElement:', currentElement);
+    console.log('canGoNext:', canGoNext);
+    console.log('state.elementData:', state.elementData);
+    
+    if (currentElement) {
+      console.log('Validating element:', currentElement.id);
+      const isValid = actions?.validateElement?.(currentElement.id);
+      console.log('Validation result:', isValid);
+      
+      if (isValid) {
+        console.log('Moving to next element');
+        actions.nextElement();
+      } else {
+        console.log('Validation failed');
+      }
+    }
+  };
+
+  const handlePrevious = () => {
+    actions.previousElement();
+  };
+
+  const handleComplete = () => {
+    if (onComplete) {
+      onComplete(state.elementData);
+    }
+  };
+
+  const handleRestart = () => {
+    actions.resetFlow();
+  };
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const handleVerificationComplete = () => {
+    actions.nextElement();
+  };
+
+  if (!currentElement) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.loadingText}>Chargement...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: config.styling.backgroundColor }]}>
+      {/* Header avec progression */}
+      {config.settings.showProgressBar && (
+        <View style={styles.header}>
+          <View style={styles.progressContainer}>
+            <View 
+              style={[
+                styles.progressBar, 
+                { 
+                  width: `${progress}%`,
+                  backgroundColor: config.styling.primaryColor,
+                  borderRadius: config.styling.borderRadius,
+                }
+              ]}
+            />
+          </View>
+          {config.settings.showStepNumbers && (
+            <Text style={[styles.stepCounter, { color: config.styling.textColor }]}>
+              Étape {state.currentElementIndex + 1} sur {config.elements.length}
+            </Text>
+          )}
+          <Text style={[styles.headerTitle, { color: config.styling.textColor }]}>
+            {currentElement.title}
+          </Text>
+          <Text style={[styles.headerDescription, { color: config.styling.textColor }]}>
+            {currentElement.description}
+          </Text>
+        </View>
+      )}
+
+      {/* Contenu principal */}
+      <ScrollView style={styles.scrollView}>
+        {state.errors.submit && (
+          <View style={styles.errorContainer}>
+            <Text style={styles.errorText}>
+              Erreur: {state.errors.submit}
+            </Text>
+          </View>
+        )}
+
+        <KYCElementRenderer
+          element={currentElement}
+          value={state.elementData[currentElement.id]}
+          onValueChange={handleValueChange}
+          error={state.errors[currentElement.id]}
+          onComplete={handleVerificationComplete}
+          onRestart={handleRestart}
+          onClose={handleClose}
+        />
+      </ScrollView>
+
+      {/* Footer avec navigation */}
+      {config.settings.allowBackNavigation && (
+        <View style={styles.footer}>
+          {canGoPrevious && (
+            <TouchableOpacity 
+              style={[
+                styles.secondaryButton,
+                { 
+                  backgroundColor: config.styling.secondaryColor,
+                  borderRadius: config.styling.borderRadius,
+                }
+              ]}
+              onPress={handlePrevious}
+              disabled={state.isProcessing}
+            >
+              <Text style={styles.secondaryButtonText}>
+                Précédent
+              </Text>
+            </TouchableOpacity>
+          )}
+
+          <TouchableOpacity 
+            style={[
+              styles.primaryButton,
+              { 
+                backgroundColor: canGoNext ? config.styling.primaryColor : '#ccc',
+                borderRadius: config.styling.borderRadius,
+              }
+            ]}
+            onPress={handleNext}
+            disabled={state.isProcessing || !canGoNext}
+          >
+            <Text style={styles.primaryButtonText}>
+              Suivant
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
+      {/* Bouton suivant seul si pas de navigation retour */}
+      {!config.settings.allowBackNavigation && (
+        <View style={styles.footer}>
+          <TouchableOpacity 
+            style={[
+              styles.fullWidthButton,
+              { 
+                backgroundColor: canGoNext ? config.styling.primaryColor : '#ccc',
+                borderRadius: config.styling.borderRadius,
+              }
+            ]}
+            onPress={handleNext}
+            disabled={state.isProcessing || !canGoNext}
+          >
+            <Text style={styles.primaryButtonText}>
+              {state.isProcessing ? 'Traitement...' : 'Continuer'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
+      {/* Bouton de finalisation */}
+      {isComplete && (
+        <View style={styles.footer}>
+          <TouchableOpacity 
+            style={[
+              styles.fullWidthButton,
+              { 
+                backgroundColor: config.styling.primaryColor,
+                borderRadius: config.styling.borderRadius,
+              }
+            ]}
+            onPress={handleComplete}
+          >
+            <Text style={styles.primaryButtonText}>
+              Terminer
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  loadingText: {
+    fontSize: 18,
+    textAlign: 'center',
+    marginTop: 50,
+    color: '#666',
+  },
+  header: {
+    backgroundColor: 'white',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e5e5e5',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  progressContainer: {
+    width: '100%',
+    height: 8,
+    backgroundColor: '#e5e5e5',
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  progressBar: {
+    height: '100%',
+    borderRadius: 4,
+  },
+  stepCounter: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 8,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginTop: 8,
+  },
+  headerDescription: {
+    fontSize: 14,
+    opacity: 0.7,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  errorContainer: {
+    backgroundColor: '#fef2f2',
+    borderWidth: 1,
+    borderColor: '#fecaca',
+    margin: 16,
+    padding: 16,
+    borderRadius: 8,
+  },
+  errorText: {
+    color: '#dc2626',
+    fontWeight: '500',
+  },
+  footer: {
+    backgroundColor: 'white',
+    borderTopWidth: 1,
+    borderTopColor: '#e5e5e5',
+    padding: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  primaryButton: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    flex: 1,
+    marginLeft: 8,
+  },
+  primaryButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  secondaryButton: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    flex: 1,
+    marginRight: 8,
+  },
+  secondaryButtonText: {
+    color: 'white',
+    fontWeight: '500',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  fullWidthButton: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    width: '100%',
+  },
+}); 

package/src/components/CustomCameraExample.tsx

@@ -0,0 +1,274 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
+import { EnhancedCameraView } from './EnhancedCameraView';
+
+interface CustomCameraExampleProps {
+  onPhotoTaken?: (imagePath: string) => void;
+  customInstructions?: string;
+  overlayColor?: string;
+  showGrid?: boolean;
+}
+
+export const CustomCameraExample: React.FC<CustomCameraExampleProps> = ({
+  onPhotoTaken,
+  customInstructions = "Centrez votre visage dans le cadre",
+  overlayColor = "rgba(0, 0, 0, 0.5)",
+  showGrid = true
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [capturedImage, setCapturedImage] = useState<string | null>(null);
+
+  const handleCapture = (result: { success: boolean; path?: string; error?: string }) => {
+    console.log('Capture result:', result);
+    
+    if (result.success && result.path) {
+      setCapturedImage(result.path);
+      setIsVisible(false);
+      onPhotoTaken?.(result.path);
+      Alert.alert('Succès', 'Photo capturée avec succès !');
+    } else {
+      Alert.alert('Erreur', result.error || 'Échec de la capture');
+    }
+  };
+
+  const handleError = (event: { message: string }) => {
+    Alert.alert('Erreur', event.message || 'Une erreur est survenue');
+    setIsVisible(false);
+  };
+
+  if (!isVisible) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Caméra Personnalisée</Text>
+        <Text style={styles.subtitle}>
+          Exemple d'intégration de la vue caméra native avec overlay personnalisé
+        </Text>
+        
+        <TouchableOpacity
+          style={styles.openButton}
+          onPress={() => setIsVisible(true)}
+        >
+          <Text style={styles.openButtonText}>📸 Ouvrir la Caméra</Text>
+        </TouchableOpacity>
+
+        {capturedImage && (
+          <View style={styles.resultContainer}>
+            <Text style={styles.resultText}>
+              Dernière photo : {capturedImage}
+            </Text>
+          </View>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.cameraContainer}>
+      {/* Vue caméra Vision Camera */}
+      <EnhancedCameraView
+        instructions={customInstructions}
+        showCamera={true}
+        cameraType="front"
+        style={styles.camera}
+        onCapture={handleCapture}
+        onError={handleError}
+        onClose={() => setIsVisible(false)}
+        quality="high"
+        showCaptureButton={true}
+        showSwitchCamera={true}
+        overlayComponent={
+          <View style={[styles.overlay, { backgroundColor: overlayColor }]} pointerEvents="none">
+            {/* Grille d'aide (optionnelle) */}
+            {showGrid && (
+              <View style={styles.grid}>
+                <View style={styles.gridLine} />
+                <View style={[styles.gridLine, styles.gridLineVertical]} />
+              </View>
+            )}
+            
+            {/* Cadre de guidage pour le visage */}
+            <View style={styles.faceFrame}>
+              <View style={styles.corner} />
+              <View style={[styles.corner, styles.cornerTopRight]} />
+              <View style={[styles.corner, styles.cornerBottomLeft]} />
+              <View style={[styles.corner, styles.cornerBottomRight]} />
+            </View>
+            
+            {/* Instructions personnalisées en plus de celles de base */}
+            <View style={styles.instructionsContainer}>
+              <Text style={styles.hint}>
+                💡 Astuce: Assurez-vous d'être bien éclairé
+              </Text>
+            </View>
+          </View>
+        }
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#f5f5f5',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 10,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 30,
+    lineHeight: 22,
+  },
+  openButton: {
+    backgroundColor: '#4CAF50',
+    paddingHorizontal: 30,
+    paddingVertical: 15,
+    borderRadius: 10,
+    marginBottom: 20,
+  },
+  openButtonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  resultContainer: {
+    backgroundColor: 'white',
+    padding: 15,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#ddd',
+  },
+  resultText: {
+    fontSize: 14,
+    color: '#333',
+  },
+  cameraContainer: {
+    flex: 1,
+    position: 'relative',
+  },
+  camera: {
+    flex: 1,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  grid: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  gridLine: {
+    position: 'absolute',
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    width: '100%',
+    height: 1,
+    top: '33%',
+  },
+  gridLineVertical: {
+    width: 1,
+    height: '100%',
+    left: '33%',
+    top: 0,
+  },
+  faceFrame: {
+    width: 250,
+    height: 300,
+    borderWidth: 2,
+    borderColor: 'transparent',
+    borderRadius: 20,
+    position: 'relative',
+  },
+  corner: {
+    position: 'absolute',
+    width: 30,
+    height: 30,
+    borderColor: '#4CAF50',
+    borderWidth: 3,
+    top: -3,
+    left: -3,
+    borderBottomColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderRadius: 5,
+  },
+  cornerTopRight: {
+    top: -3,
+    right: -3,
+    left: 'auto',
+    borderLeftColor: 'transparent',
+    borderBottomColor: 'transparent',
+  },
+  cornerBottomLeft: {
+    bottom: -3,
+    left: -3,
+    top: 'auto',
+    borderTopColor: 'transparent',
+    borderRightColor: 'transparent',
+  },
+  cornerBottomRight: {
+    bottom: -3,
+    right: -3,
+    top: 'auto',
+    left: 'auto',
+    borderTopColor: 'transparent',
+    borderLeftColor: 'transparent',
+  },
+  instructionsContainer: {
+    position: 'absolute',
+    top: 80,
+    left: 20,
+    right: 20,
+    alignItems: 'center',
+  },
+  customInstructions: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    padding: 10,
+    borderRadius: 10,
+    marginBottom: 10,
+  },
+  hint: {
+    color: 'white',
+    fontSize: 14,
+    textAlign: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    padding: 8,
+    borderRadius: 8,
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 50,
+    right: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  closeButtonText: {
+    color: 'white',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});