@transfergratis/react-native-sdk 0.1.2

package/src/components/KYCElements/SelfieCapture.tsx

@@ -0,0 +1,283 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image, Alert } from 'react-native';
+import { EnhancedCameraView } from '../EnhancedCameraView';
+
+import { KYCElement } from '../../types/KYC.types';
+
+interface SelfieCaptureProps {
+  element: KYCElement;
+  value?: string;
+  onValueChange: (value: string) => void;
+  error?: string;
+}
+
+export const SelfieCapture: React.FC<SelfieCaptureProps> = ({
+  element,
+  value,
+  onValueChange,
+  error,
+}) => {
+  const [capturedImage, setCapturedImage] = useState<string | null>(value || null);
+  const [showCamera, setShowCamera] = useState(false);
+
+  const cameraConfig = element.cameraConfig || {
+    aspectRatio: 1,
+    quality: 0.8,
+    flashMode: 'off',
+    cameraType: 'front',
+    allowRetake: true,
+    maxRetakes: 3,
+    overlay: {
+      showGuide: true,
+      guideText: 'Prenez un selfie clair',
+    }
+  };
+
+  const handleCapture = (result: { success: boolean; path?: string; error?: string }) => {
+    if (result.success && result.path) {
+      setCapturedImage(result.path);
+      onValueChange(result.path);
+      setShowCamera(false);
+    } else {
+      Alert.alert('Erreur', result.error || 'Impossible de prendre le selfie');
+    }
+  };
+
+  const handleError = (event: { message: string }) => {
+    Alert.alert('Erreur', event.message);
+    setShowCamera(false);
+  };
+
+  const retakePicture = () => {
+    setCapturedImage(null);
+    onValueChange('');
+    setShowCamera(true);
+  };
+
+  if (showCamera) {
+    return (
+      <View style={styles.container}>
+        <EnhancedCameraView
+          instructions={cameraConfig.overlay?.guideText || 'Prenez un selfie clair'}
+          showCamera={true}
+          cameraType="front"
+          style={styles.camera}
+          onCapture={handleCapture}
+          onError={handleError}
+          onClose={() => setShowCamera(false)}
+          quality="high"
+          showCaptureButton={true}
+          showSwitchCamera={false}
+          enableFlash={false}
+        />
+      </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={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 prendre un selfie'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+
+      {error && (
+        <Text style={styles.errorText}>{error}</Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    height: 500,
+  },
+  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,
+    marginBottom: 24,
+  },
+  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',
+  },
+  tipsContainer: {
+    backgroundColor: '#f8f9fa',
+    padding: 16,
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+  tipsTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 8,
+  },
+  tipText: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 4,
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+  cameraPlaceholder: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#e0e0e0',
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: '#ccc',
+  },
+  cameraPlaceholderText: {
+    fontSize: 60,
+    marginBottom: 10,
+  },
+  cameraPlaceholderLabel: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+}); 

package/src/components/KYCElements/SelfieCaptureTemplate.tsx

@@ -0,0 +1,388 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, Alert, ScrollView } from 'react-native';
+import { TemplateComponent, SelfieConfig, LocalizedText } from '../../types/KYC.types';
+import { EnhancedCameraView } from '../EnhancedCameraView';
+import { Button } from '../ui/Button';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import SelfieOverlay from '../OverLay/SelfieOverlay';
+
+interface SelfieCaptureTemplateProps {
+  component: TemplateComponent;
+  value: Record<string, string> | undefined;
+  onValueChange: (value: Record<string, string>) => void;
+  error?: string;
+  language: string;
+}
+
+export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
+  component,
+  value,
+  onValueChange,
+  error,
+  language,
+}) => {
+  const config = component.config as SelfieConfig;
+  const maxAttempts = config.max_attempts || 3;
+  const orientations = config.orientations || ['front'];
+  const { actions, state, } = useTemplateKYCFlowContext();
+
+  const [showCamera, setShowCamera] = useState(false);
+  const [currentOrientation, setCurrentOrientation] = useState<string>(orientations[0]);
+  const [capturedImages, setCapturedImages] = useState<Record<string, string>>(value || {});
+  const [attempts, setAttempts] = useState(0);
+
+  const getLocalizedText = (text: LocalizedText): string => {
+    return text[language] || text.en || '';
+  };
+
+  const getOrientationInstructions = (orientation: string): string => {
+    switch (orientation) {
+      case 'front':
+        return 'Prenez un selfie de face, regardez droit devant vous';
+      case 'left':
+        return 'Tournez votre tête vers la gauche, gardez les épaules droites';
+      case 'right':
+        return 'Tournez votre tête vers la droite, gardez les épaules droites';
+      default:
+        return getLocalizedText(component.instructions);
+    }
+  };
+
+  useEffect(() => {
+    actions.showCustomStepper(!showCamera);
+  }, [showCamera]);
+
+  const getOrientationLabel = (orientation: string): string => {
+    switch (orientation) {
+      case 'front':
+        return 'Selfie de face';
+      case 'left':
+        return 'Selfie profil gauche';
+      case 'right':
+        return 'Selfie profil droit';
+      default:
+        return getLocalizedText(component.labels);
+    }
+  };
+
+  const getInstructions = (orientation: string): { title: string, subtitle: string } => {
+    switch (orientation) {
+      case 'front':
+        return { title: 'Center your face', subtitle: 'Align your face to the center of the selfie area and then take a photo' };
+      case 'left':
+        return { title: 'Turn your head left', subtitle: 'Slowly turn your head to the left while keeping your face in the selfie area' };
+      case 'right':
+        return { title: 'Turn your head right', subtitle: 'Slowly turn your head to the right while keeping your face in the selfie area' };
+      default:
+        return { title: getLocalizedText(component.labels), subtitle: getLocalizedText(component.instructions) };
+    }
+  };
+
+  const handleCapture = (result: { success: boolean; path?: string; error?: string }) => {
+    if (result.success && result.path) {
+      const newImages = { ...capturedImages, [currentOrientation]: result.path };
+      setCapturedImages(newImages);
+      onValueChange(newImages);
+      setShowCamera(false);
+      setAttempts(0);
+
+      // Passer à l'orientation suivante si disponible
+      const currentIndex = orientations.indexOf(currentOrientation as any);
+      if (currentIndex < orientations.length - 1) {
+        setCurrentOrientation(orientations[currentIndex + 1]);
+      }
+    } else {
+      const newAttempts = attempts + 1;
+      setAttempts(newAttempts);
+
+      if (newAttempts >= maxAttempts) {
+        Alert.alert(
+          'Limite atteinte',
+          `Vous avez atteint le nombre maximum de tentatives (${maxAttempts}).`
+        );
+        setShowCamera(false);
+      } else {
+        Alert.alert('Erreur', result.error || 'Impossible de prendre le selfie');
+      }
+    }
+  };
+
+  const handleError = (event: { message: string }) => {
+    Alert.alert('Erreur', event.message);
+    setShowCamera(false);
+  };
+
+
+  const isOrientationCompleted = (orientation: string): boolean => {
+    return !!capturedImages[orientation];
+  };
+
+  const isAllOrientationsCompleted = (): boolean => {
+    return orientations.every(orientation => isOrientationCompleted(orientation));
+  };
+
+  if (showCamera) {
+    return (
+      <View style={styles.containerCamera}>
+        <EnhancedCameraView
+          instructions={getOrientationInstructions(currentOrientation)}
+          showCamera={true}
+          cameraType="front"
+          style={styles.camera}
+          onCapture={handleCapture}
+          onError={handleError}
+          onClose={() => setShowCamera(false)}
+          quality="high"
+          showCaptureButton={true}
+          showSwitchCamera={false}
+          enableFlash={false}
+          overlayComponent={<SelfieOverlay
+            xMin={20}
+            yMin={140}
+            xMax={370}
+            yMax={340}
+            cornerOpacity={1}
+            instructions={""}
+            orientation={currentOrientation as 'front' | 'left' | 'right'}
+            instructionsTile={getInstructions(currentOrientation).title}
+            instructionsSubtitle={getInstructions(currentOrientation).subtitle}
+            stepperProps={{
+              back: () => {
+                setShowCamera(false);
+              },
+              selectedDocumentType: "Selfie",
+              step: state.currentComponentIndex + 1,
+              totalSteps: state.template.components.length,
+            }} />}
+        />
+      </View>
+    );
+  }
+
+
+  return (
+    <View style={[{
+      maxWidth: 760,
+      width: '100%',
+      height: '100%',
+    }]}>
+      <View style={styles.container}>
+        <Text style={styles.title}>{getLocalizedText(component.labels)}</Text>
+        <Text style={styles.description}>{getLocalizedText(component.instructions)}</Text>
+
+        <ScrollView style={styles.orientationsContainer} showsVerticalScrollIndicator={false}>
+          <View style={{ flexDirection: 'column', alignItems: 'center', gap: 10 }}>
+
+            {orientations.map((orientation, key) => (
+              <View key={orientation} style={{
+                backgroundColor: '#F3F4F6',
+                borderRadius: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                width: '100%',
+                paddingVertical: 10,
+                paddingHorizontal: 10,
+              }}>
+                <View style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  backgroundColor: isOrientationCompleted(orientation) ? '#2DBE60' : '#D1D5DB',
+                  borderRadius: 100,
+                  width: 30,
+                  height: 30,
+                }}>
+                  <Text style={{ color: 'white', fontSize: 16, fontWeight: 'bold' }}>{key + 1}</Text>
+                </View>
+
+
+                <Text style={styles.orientationTitle}>
+                  {getOrientationLabel(orientation)}
+                </Text>
+
+
+
+              </View>
+            ))}
+            <View style={{ backgroundColor: "#F6CB0D1A", width: "100%", padding: 10, borderRadius: 10 }} >
+              <Text style={{ color: '#997E06', fontSize: 16, fontWeight: 'bold' }}>
+                Tips for a good selfie:
+              </Text>
+              <View style={{ paddingLeft: 10, paddingTop: 4 }}>
+                <Text style={{ color: '#997E06', fontSize: 14, fontWeight: 'bold' }}>
+                  {`• Remove glasses and hat \n• Look directly at the camera \n• Ensure good lighting \n`}
+                </Text>
+              </View>
+            </View>
+            <View style={{ height: 10 }} />
+            {isAllOrientationsCompleted() ? <>
+              <Button title="Continuer" fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={() => {
+                onValueChange(capturedImages);
+                actions.nextComponent();
+              }} />
+            </> : (
+              <Button title="Start Selfie" fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={() => {
+                if (isAllOrientationsCompleted()) {
+                  onValueChange(capturedImages);
+                } else {
+                  setShowCamera(true);
+                }
+              }} />
+            )}
+
+          </View>
+        </ScrollView>
+
+        {error && (
+          <Text style={styles.errorText}>{error}</Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    paddingVertical: 10,
+  },
+  container: {
+    backgroundColor: 'white',
+    margin: 15,
+    borderRadius: 20,
+    paddingVertical: 20,
+    paddingHorizontal: 16,
+    // shadow
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.35,
+    shadowRadius: 4.84,
+    elevation: 10,
+
+
+    // padding: 16,
+  },
+  containerCamera: {
+    flex: 1,
+    // maxWidth: 760,
+    width: '100%',
+    height: '100%',
+    // borderRadius: 12,
+    backgroundColor: '#f5f5f5',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 20,
+    lineHeight: 22,
+    textAlign: 'center',
+  },
+  camera: {
+    flex: 1,
+    // borderRadius: 12,
+    overflow: 'hidden',
+  },
+  attemptsText: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 10,
+  },
+  orientationsContainer: {
+    // flex: 1,
+  },
+  orientationContainer: {
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  orientationTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    // marginBottom: 12,
+  },
+  capturedImageContainer: {
+    alignItems: 'center',
+  },
+  capturedImage: {
+    width: 200,
+    height: 200,
+    borderRadius: 12,
+    marginBottom: 12,
+  },
+  captureButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#2DBD60',
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    marginTop: 8,
+  },
+  captureIcon: {
+    fontSize: 24,
+    marginRight: 8,
+  },
+  captureText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: 'white',
+  },
+  retakeButton: {
+    backgroundColor: '#FF6B6B',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+  },
+  retakeButtonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: 'white',
+  },
+  completionContainer: {
+    alignItems: 'center',
+    padding: 20,
+  },
+  completionText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#2DBD60',
+    marginBottom: 16,
+  },
+  retakeAllButton: {
+    backgroundColor: '#FF6B6B',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+  },
+  retakeAllButtonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: 'white',
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    textAlign: 'center',
+    marginTop: 10,
+  },
+});