@transfergratis/react-native-sdk 0.1.2

package/src/components/KYCElements/IDCardCapture.tsx

@@ -0,0 +1,519 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image, Alert, ScrollView } from 'react-native';
+import { EnhancedCameraView } from '../EnhancedCameraView';
+import { TemplateComponent, IDCardConfig, LocalizedText, GovernmentDocumentType } from '../../types/KYC.types';
+import IdCardOverlay from '../OverLay/IdCard';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { Button } from '../ui/Button';
+
+interface IDCardCaptureProps {
+  component: TemplateComponent;
+  value?: Record<string, string>;
+  onValueChange: (value: Record<string, string>) => void;
+  error?: string;
+  language?: string;
+  currentSide?: string; // Nouveau prop pour spécifier le côté actuel
+}
+
+export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
+  component,
+  value = {},
+  onValueChange,
+  error,
+  language = 'en',
+  currentSide = 'front',
+}) => {
+  const [showCamera, setShowCamera] = useState(false);
+  const [capturedImages, setCapturedImages] = useState<Record<string, string>>(value);
+  const [selectedDocumentType, setSelectedDocumentType] = useState<GovernmentDocumentType | null>(null);
+  const [showDocumentSelection, setShowDocumentSelection] = useState(true);
+
+  const { actions, state, } = useTemplateKYCFlowContext();
+  const config = component.config as IDCardConfig;
+
+  const getLocalizedText = (text: LocalizedText): string => {
+    return text[language] || text.en || '';
+  };
+
+  const getDocumentTypeInfo = (docType: GovernmentDocumentType) => {
+    switch (docType) {
+      case 'id_card':
+        return {
+          name: { en: 'ID Card', fr: 'Carte d\'identité' },
+          icon: '🆔',
+          instructions: { en: 'Position your ID card within the frame', fr: 'Positionnez votre carte d\'identité dans le cadre' }
+        };
+      case 'passport':
+        return {
+          name: { en: 'Passport', fr: 'Passeport' },
+          icon: '📘',
+          instructions: { en: 'Position your passport within the frame', fr: 'Positionnez votre passeport dans le cadre' }
+        };
+      case 'drivers_license':
+        return {
+          name: { en: 'Driver\'s License', fr: 'Permis de conduire' },
+          icon: '🚗',
+          instructions: { en: 'Position your driver\'s license within the frame', fr: 'Positionnez votre permis de conduire dans le cadre' }
+        };
+      case 'residence_permit':
+        return {
+          name: { en: 'Residence Permit', fr: 'Permis de séjour' },
+          icon: '🏠',
+          instructions: { en: 'Position your residence permit within the frame', fr: 'Positionnez votre permis de séjour dans le cadre' }
+        };
+      case 'national_id':
+        return {
+          name: { en: 'National ID', fr: 'Carte nationale d\'identité' },
+          icon: '🏛️',
+          instructions: { en: 'Position your national ID within the frame', fr: 'Positionnez votre carte nationale d\'identité dans le cadre' }
+        };
+      case 'voter_id':
+        return {
+          name: { en: 'Voter ID', fr: 'Carte d\'électeur' },
+          icon: '🗳️',
+          instructions: { en: 'Position your voter ID within the frame', fr: 'Positionnez votre carte d\'électeur dans le cadre' }
+        };
+      case 'military_id':
+        return {
+          name: { en: 'Military ID', fr: 'Carte militaire' },
+          icon: '🎖️',
+          instructions: { en: 'Position your military ID within the frame', fr: 'Positionnez votre carte militaire dans le cadre' }
+        };
+      case 'student_id':
+        return {
+          name: { en: 'Student ID', fr: 'Carte d\'étudiant' },
+          icon: '🎓',
+          instructions: { en: 'Position your student ID within the frame', fr: 'Positionnez votre carte d\'étudiant dans le cadre' }
+        };
+      case 'work_permit':
+        return {
+          name: { en: 'Work Permit', fr: 'Permis de travail' },
+          icon: '💼',
+          instructions: { en: 'Position your work permit within the frame', fr: 'Positionnez votre permis de travail dans le cadre' }
+        };
+      case 'other':
+      default:
+        return {
+          name: { en: 'Government Document', fr: 'Document gouvernemental' },
+          icon: '📄',
+          instructions: { en: 'Position your document within the frame', fr: 'Positionnez votre document dans le cadre' }
+        };
+    }
+  };
+
+
+  const cameraConfig = {
+    aspectRatio: 4 / 3,
+    quality: 0.8,
+    flashMode: 'auto' as const,
+    cameraType: 'back' as const,
+    allowRetake: true,
+    maxRetakes: 3,
+    overlay: {
+      showGuide: true,
+      guideText: selectedDocumentType ? getDocumentTypeInfo(selectedDocumentType).instructions.en : getLocalizedText(component.instructions),
+      bbox: selectedDocumentType && config.bbox_configs[selectedDocumentType] ? config.bbox_configs[selectedDocumentType] : {
+        xMin: 20,
+        yMin: 140,
+        xMax: 370,
+        yMax: 340,
+        borderColor: '#2DBD60',
+        borderWidth: 3,
+        cornerRadius: 8
+      }
+
+    }
+  };
+
+  const retakePicture = (currentSide: string) => {
+    setShowCamera(true);
+    actions.showCustomStepper(false);
+    setCapturedImages({ ...capturedImages, [currentSide]: '' });
+    onValueChange({ ...value, [currentSide]: '' });
+  };
+
+  const handleCapture = (result: { success: boolean; path?: string; error?: string }) => {
+    if (result.success && result.path) {
+      const newImages = { ...capturedImages, [currentSide]: result.path };
+      setCapturedImages(newImages);
+      onValueChange(newImages);
+      setShowCamera(false);
+      actions.showCustomStepper(true);
+    } else {
+      Alert.alert('Erreur', result.error || 'Impossible de prendre la photo');
+    }
+  };
+
+  const handleError = (event: { message: string }) => {
+    Alert.alert('Erreur', event.message);
+    setShowCamera(false);
+  };
+
+
+  useEffect(() => {
+
+    actions.showCustomStepper(!showCamera);
+
+  }, [showCamera]);
+
+
+  const handleDocumentTypeSelection = (docType: GovernmentDocumentType) => {
+    setSelectedDocumentType(docType);
+  };
+
+  // Interface de sélection du type de document
+  if (showDocumentSelection) {
+    return (
+      <View style={styles.root}>
+        <View style={styles.container}>
+
+          <Text style={styles.title}>{getLocalizedText(component.labels)}</Text>
+          <Text style={styles.description}>{getLocalizedText(component.instructions)}</Text>
+
+          <ScrollView style={styles.documentTypesContainer} showsVerticalScrollIndicator={false}>
+            {config.document_types.map((docType) => {
+              const docInfo = getDocumentTypeInfo(docType);
+              return (
+                <TouchableOpacity
+                  key={docType}
+                  style={[styles.documentTypeButton, { backgroundColor: selectedDocumentType === docType ? '#2DBD6030' : '#F8F9FA', borderColor: selectedDocumentType === docType ? '#2DBD60' : '#E9ECEF', borderWidth: 2 }]}
+                  onPress={() => handleDocumentTypeSelection(docType)}
+                >
+                  <View style={[styles.documentTypeIconContainer, { backgroundColor: 'gray', }]}>
+                    <Text style={styles.documentTypeIcon}>{docInfo.icon}</Text>
+                  </View>
+                  <Text style={styles.documentTypeName}>
+                    {docInfo.name[language as keyof typeof docInfo.name] || docInfo.name.en}
+                  </Text>
+                  <Text style={styles.documentTypeArrow}>→</Text>
+                </TouchableOpacity>
+              );
+            })}
+          </ScrollView>
+          <Button title={getLocalizedText(component.ui.buttonText)} onPress={() => {
+            if (!selectedDocumentType) {
+              Alert.alert('Erreur', 'Veuillez sélectionner un type de document');
+              return;
+            }
+            setShowDocumentSelection(false);
+            setShowCamera(true);
+            actions.showCustomStepper(false);
+          }}
+            variant={selectedDocumentType ? 'primary' : "neutral"}
+            size="large"
+            fullWidth
+          // rounded
+          />
+
+
+          {error && (
+            <Text style={styles.errorText}>{error}</Text>
+          )}
+        </View>
+      </View>
+    );
+  }
+
+
+
+  if (showCamera) {
+
+    return (
+      <View style={styles.cameraContainer}>
+        <EnhancedCameraView
+          showCamera={true}
+          cameraType={cameraConfig.cameraType}
+          style={styles.camera}
+          onCapture={handleCapture}
+          onError={handleError}
+          onClose={() => setShowCamera(false)}
+          quality="high"
+          showCaptureButton={true}
+          showSwitchCamera={true}
+          enableFlash={cameraConfig.flashMode === 'auto' || cameraConfig.flashMode === 'on'}
+          overlayComponent={<IdCardOverlay
+            xMin={cameraConfig.overlay.bbox.xMin}
+            yMin={cameraConfig.overlay.bbox.yMin}
+            xMax={cameraConfig.overlay.bbox.xMax}
+            yMax={cameraConfig.overlay.bbox.yMax}
+            instructions={cameraConfig.overlay.guideText}
+            cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0 as number}
+            stepperProps={{
+              back: () => {
+                setShowDocumentSelection(true);
+                actions.showCustomStepper(false);
+              },
+              selectedDocumentType: getDocumentTypeInfo(selectedDocumentType || 'id_card').name.en || '',
+              step: state.currentComponentIndex + 1,
+              totalSteps: state.template.components.length,
+            }}
+          />
+          }
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.previewContainer}>
+        <ScrollView style={styles.previewItemContainer} showsVerticalScrollIndicator={false}>
+          <View key={currentSide} style={styles.sideContainer}>
+            <Text style={styles.sideTitle}>
+              {currentSide === 'front' ? 'Recto' : 'Verso'} de la carte d'identité
+            </Text>
+            <Text style={{ fontSize: 14, color: '#666', textAlign: 'center', marginBottom: 16, lineHeight: 22 }}>
+              {getLocalizedText(component.instructions)}
+            </Text>
+
+
+            <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "column", gap: 16 }}>
+              <View
+                style={{
+                  width: '100%',
+                  height: 200,
+                  borderRadius: 12,
+                  padding: 1,
+                  overflow: 'hidden',
+                  // Shadow for iOS
+                  shadowColor: '#000',
+                  shadowOffset: { width: 0, height: 4 },
+                  shadowOpacity: 0.18,
+                  shadowRadius: 8,
+                  // Shadow for Android
+                  elevation: 8,
+                  backgroundColor: '#fff', // Needed for shadow to show on iOS
+                }}
+              >
+                <Image
+                  source={{ uri: capturedImages[currentSide] }}
+                  style={{
+                    width: '100%',
+                    height: 200,
+                    borderRadius: 12,
+                    resizeMode: 'cover',
+                  }}
+                />
+              </View>
+              {/* retake button */}
+              <Button title="Reprendre" onPress={() => {
+                retakePicture(currentSide);
+              }}
+                variant="outline"
+                size="medium"
+                fullWidth
+              
+              />
+              <Button title="Suivant" onPress={() => {
+                setShowCamera(true);
+
+                actions.nextComponent();
+              }}
+                variant="primary"
+                size="large"
+                fullWidth
+              />
+            </View>
+          </View>
+        </ScrollView>
+
+
+
+        {error && (
+          <Text style={styles.errorText}>{error}</Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    maxWidth: 760,
+    width: '100%',
+  },
+  container: {
+    backgroundColor: 'white',
+    margin: 10,
+    borderRadius: 10,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    // shadow
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.35,
+    shadowRadius: 4.84,
+    elevation: 10,
+    // padding: 16,
+  },
+  cameraContainer: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  previewContainer: {
+    width: '100%',
+    backgroundColor: 'white',
+    margin: 10,
+    borderRadius: 10,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+  previewItemContainer: {
+
+    // marginBottom: 24,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 18,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  sideInfo: {
+    fontSize: 14,
+    color: '#888',
+    textAlign: 'center',
+    marginBottom: 16,
+    fontStyle: 'italic',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  sidesContainer: {
+    flex: 1,
+  },
+  sideContainer: {
+    marginBottom: 24,
+  },
+  sideTitle: {
+    fontSize: 25,
+    fontWeight: 'bold',
+    color: '#000',
+    marginBottom: 12,
+    textAlign: 'center',
+  },
+  captureButton: {
+    borderWidth: 2,
+    borderColor: '#2DBD60',
+    borderStyle: 'dashed',
+    borderRadius: 12,
+    padding: 32,
+    alignItems: 'center',
+    backgroundColor: '#f0f9f0',
+  },
+  captureIcon: {
+    fontSize: 48,
+    marginBottom: 16,
+  },
+  captureText: {
+    fontSize: 16,
+    color: '#2DBD60',
+    fontWeight: '600',
+  },
+  capturedImageContainer: {
+    position: 'relative',
+  },
+  capturedImage: {
+    width: '100%',
+    height: 200,
+    borderRadius: 12,
+    resizeMode: 'contain',
+    backgroundColor: '#f0f0f0',
+  },
+  retakeButton: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 6,
+  },
+  retakeButtonText: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  camera: {
+    flex: 1,
+  },
+  completionContainer: {
+    marginTop: 24,
+    alignItems: 'center',
+  },
+  completionText: {
+    fontSize: 16,
+    color: '#2DBD60',
+    fontWeight: '600',
+    marginBottom: 16,
+  },
+  primaryButton: {
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+    // minWidth: 120,
+    alignItems: 'center',
+    backgroundColor: '#2DBD60',
+  },
+  primaryButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+  documentTypesContainer: {
+    // flex: 1,
+    marginBottom: 16,
+    // paddingHorizontal: 16,
+  },
+  documentTypeButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#F8F9FA',
+    padding: 16,
+    marginBottom: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E9ECEF',
+  },
+  documentTypeIconContainer: {
+
+    width: 40, height: 40,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  documentTypeIcon: {
+    fontSize: 24,
+
+  },
+  documentTypeName: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+  },
+  documentTypeArrow: {
+    fontSize: 18,
+    color: '#666',
+    fontWeight: 'bold',
+  },
+});