@transfergratis/react-native-sdk 0.1.2

package/build/components/KYCElements/SelfieCapture.js

@@ -0,0 +1,235 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image, Alert } from 'react-native';
+import { EnhancedCameraView } from '../EnhancedCameraView';
+export const SelfieCapture = ({ element, value, onValueChange, error, }) => {
+    const [capturedImage, setCapturedImage] = useState(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) => {
+        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) => {
+        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',
+    },
+});
+//# sourceMappingURL=SelfieCapture.js.map

package/build/components/KYCElements/SelfieCapture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelfieCapture.js","sourceRoot":"","sources":["../../../src/components/KYCElements/SelfieCapture.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet, Image, Alert } from 'react-native';\nimport { EnhancedCameraView } from '../EnhancedCameraView';\n\nimport { KYCElement } from '../../types/KYC.types';\n\ninterface SelfieCaptureProps {\n  element: KYCElement;\n  value?: string;\n  onValueChange: (value: string) => void;\n  error?: string;\n}\n\nexport const SelfieCapture: React.FC<SelfieCaptureProps> = ({\n  element,\n  value,\n  onValueChange,\n  error,\n}) => {\n  const [capturedImage, setCapturedImage] = useState<string | null>(value || null);\n  const [showCamera, setShowCamera] = useState(false);\n\n  const cameraConfig = element.cameraConfig || {\n    aspectRatio: 1,\n    quality: 0.8,\n    flashMode: 'off',\n    cameraType: 'front',\n    allowRetake: true,\n    maxRetakes: 3,\n    overlay: {\n      showGuide: true,\n      guideText: 'Prenez un selfie clair',\n    }\n  };\n\n  const handleCapture = (result: { success: boolean; path?: string; error?: string }) => {\n    if (result.success && result.path) {\n      setCapturedImage(result.path);\n      onValueChange(result.path);\n      setShowCamera(false);\n    } else {\n      Alert.alert('Erreur', result.error || 'Impossible de prendre le selfie');\n    }\n  };\n\n  const handleError = (event: { message: string }) => {\n    Alert.alert('Erreur', event.message);\n    setShowCamera(false);\n  };\n\n  const retakePicture = () => {\n    setCapturedImage(null);\n    onValueChange('');\n    setShowCamera(true);\n  };\n\n  if (showCamera) {\n    return (\n      <View style={styles.container}>\n        <EnhancedCameraView\n          instructions={cameraConfig.overlay?.guideText || 'Prenez un selfie clair'}\n          showCamera={true}\n          cameraType=\"front\"\n          style={styles.camera}\n          onCapture={handleCapture}\n          onError={handleError}\n          onClose={() => setShowCamera(false)}\n          quality=\"high\"\n          showCaptureButton={true}\n          showSwitchCamera={false}\n          enableFlash={false}\n        />\n      </View>\n    );\n  }\n\n  if (capturedImage) {\n    return (\n      <View style={styles.container}>\n        <Text style={styles.title}>{element.title}</Text>\n        <Text style={styles.description}>{element.description}</Text>\n        \n        <View style={styles.imageContainer}>\n          <Image source={{ uri: capturedImage }} style={styles.capturedImage} />\n        </View>\n\n        <View style={styles.buttonContainer}>\n          {cameraConfig.allowRetake && (\n            <TouchableOpacity style={styles.secondaryButton} onPress={retakePicture}>\n              <Text style={styles.secondaryButtonText}>Reprendre</Text>\n            </TouchableOpacity>\n          )}\n          <TouchableOpacity style={styles.primaryButton}>\n            <Text style={styles.primaryButtonText}>Continuer</Text>\n          </TouchableOpacity>\n        </View>\n\n        {error && (\n          <Text style={styles.errorText}>{error}</Text>\n        )}\n      </View>\n    );\n  }\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>{element.title}</Text>\n      <Text style={styles.description}>{element.description}</Text>\n      \n      <View style={styles.cameraContainer}>\n        <TouchableOpacity \n          style={styles.cameraPlaceholder}\n          onPress={() => setShowCamera(true)}\n        >\n          <Text style={styles.cameraPlaceholderText}>📱</Text>\n          <Text style={styles.cameraPlaceholderLabel}>\n            {cameraConfig.overlay?.guideText || 'Appuyez pour prendre un selfie'}\n          </Text>\n        </TouchableOpacity>\n      </View>\n\n      {error && (\n        <Text style={styles.errorText}>{error}</Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 16,\n    height: 500,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 8,\n    textAlign: 'center',\n  },\n  description: {\n    fontSize: 16,\n    color: '#666',\n    textAlign: 'center',\n    marginBottom: 24,\n    lineHeight: 22,\n  },\n  cameraContainer: {\n    flex: 1,\n    borderRadius: 12,\n    overflow: 'hidden',\n    marginBottom: 24,\n  },\n  camera: {\n    flex: 1,\n  },\n  imageContainer: {\n    flex: 1,\n    borderRadius: 12,\n    overflow: 'hidden',\n    marginBottom: 24,\n  },\n  capturedImage: {\n    width: '100%',\n    height: '100%',\n    resizeMode: 'contain',\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    justifyContent: 'space-around',\n    alignItems: 'center',\n    paddingHorizontal: 16,\n    marginBottom: 24,\n  },\n  captureButton: {\n    width: 80,\n    height: 80,\n    borderRadius: 40,\n    backgroundColor: 'white',\n    justifyContent: 'center',\n    alignItems: 'center',\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 4,\n    },\n    shadowOpacity: 0.3,\n    shadowRadius: 4.65,\n    elevation: 8,\n  },\n  captureButtonDisabled: {\n    opacity: 0.6,\n  },\n  captureButtonInner: {\n    width: 60,\n    height: 60,\n    borderRadius: 30,\n    backgroundColor: '#4CAF50',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  captureButtonText: {\n    fontSize: 24,\n    color: 'white',\n  },\n  primaryButton: {\n    backgroundColor: '#4CAF50',\n    paddingHorizontal: 32,\n    paddingVertical: 16,\n    borderRadius: 8,\n  },\n  primaryButtonText: {\n    color: 'white',\n    fontWeight: '600',\n    fontSize: 16,\n  },\n  secondaryButton: {\n    backgroundColor: '#e5e5e5',\n    paddingHorizontal: 32,\n    paddingVertical: 16,\n    borderRadius: 8,\n  },\n  secondaryButtonText: {\n    color: '#333',\n    fontWeight: '600',\n    fontSize: 16,\n  },\n  permissionButton: {\n    backgroundColor: '#4CAF50',\n    paddingHorizontal: 32,\n    paddingVertical: 16,\n    borderRadius: 8,\n    marginTop: 16,\n  },\n  permissionButtonText: {\n    color: 'white',\n    fontWeight: '600',\n    fontSize: 16,\n    textAlign: 'center',\n  },\n  tipsContainer: {\n    backgroundColor: '#f8f9fa',\n    padding: 16,\n    borderRadius: 8,\n    marginBottom: 16,\n  },\n  tipsTitle: {\n    fontSize: 16,\n    fontWeight: '600',\n    color: '#333',\n    marginBottom: 8,\n  },\n  tipText: {\n    fontSize: 14,\n    color: '#666',\n    marginBottom: 4,\n  },\n  errorText: {\n    color: '#dc2626',\n    fontSize: 14,\n    marginTop: 8,\n    textAlign: 'center',\n  },\n  cameraPlaceholder: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#e0e0e0',\n    borderRadius: 12,\n    borderWidth: 2,\n    borderColor: '#ccc',\n  },\n  cameraPlaceholderText: {\n    fontSize: 60,\n    marginBottom: 10,\n  },\n  cameraPlaceholderLabel: {\n    fontSize: 16,\n    color: '#666',\n    textAlign: 'center',\n  },\n}); "]}

package/build/components/KYCElements/SelfieCaptureTemplate.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TemplateComponent } from '../../types/KYC.types';
+interface SelfieCaptureTemplateProps {
+    component: TemplateComponent;
+    value: Record<string, string> | undefined;
+    onValueChange: (value: Record<string, string>) => void;
+    error?: string;
+    language: string;
+}
+export declare const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps>;
+export {};
+//# sourceMappingURL=SelfieCaptureTemplate.d.ts.map

package/build/components/KYCElements/SelfieCaptureTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelfieCaptureTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/KYCElements/SelfieCaptureTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAA+B,MAAM,uBAAuB,CAAC;AAMvF,UAAU,0BAA0B;IAClC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAkOtE,CAAC"}

package/build/components/KYCElements/SelfieCaptureTemplate.js

@@ -0,0 +1,321 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, Alert, ScrollView } from 'react-native';
+import { EnhancedCameraView } from '../EnhancedCameraView';
+import { Button } from '../ui/Button';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import SelfieOverlay from '../OverLay/SelfieOverlay';
+export const SelfieCaptureTemplate = ({ component, value, onValueChange, error, language, }) => {
+    const config = component.config;
+    const maxAttempts = config.max_attempts || 3;
+    const orientations = config.orientations || ['front'];
+    const { actions, state, } = useTemplateKYCFlowContext();
+    const [showCamera, setShowCamera] = useState(false);
+    const [currentOrientation, setCurrentOrientation] = useState(orientations[0]);
+    const [capturedImages, setCapturedImages] = useState(value || {});
+    const [attempts, setAttempts] = useState(0);
+    const getLocalizedText = (text) => {
+        return text[language] || text.en || '';
+    };
+    const getOrientationInstructions = (orientation) => {
+        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) => {
+        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) => {
+        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) => {
+        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);
+            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) => {
+        Alert.alert('Erreur', event.message);
+        setShowCamera(false);
+    };
+    const isOrientationCompleted = (orientation) => {
+        return !!capturedImages[orientation];
+    };
+    const isAllOrientationsCompleted = () => {
+        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} 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,
+    },
+});
+//# sourceMappingURL=SelfieCaptureTemplate.js.map

package/build/components/KYCElements/SelfieCaptureTemplate.js.map

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

package/build/components/KYCElements/VerificationStep.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { KYCElement } from '../../types/KYC.types';
+interface VerificationStepProps {
+    element: KYCElement;
+    onComplete: () => void;
+    error?: string;
+}
+export declare const VerificationStep: React.FC<VerificationStepProps>;
+export {};
+//# sourceMappingURL=VerificationStep.d.ts.map

package/build/components/KYCElements/VerificationStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerificationStep.d.ts","sourceRoot":"","sources":["../../../src/components/KYCElements/VerificationStep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,qBAAqB;IAC7B,OAAO,EAAE,UAAU,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiG5D,CAAC"}