@sanctum-key/react-native-sdk 1.0.0

package/build/components/KYCElements/SelfieCapture.js

@@ -0,0 +1,236 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
+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 {
+            showAlert('Erreur', result.error || 'Impossible de prendre le selfie');
+        }
+    };
+    const handleError = (event) => {
+        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 || '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":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAW3D,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,OAAO,EACP,KAAK,EACL,aAAa,EACb,KAAK,GACN,EAAE,EAAE;IACH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAgB,KAAK,IAAI,IAAI,CAAC,CAAC;IACjF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI;QAC3C,WAAW,EAAE,CAAC;QACd,OAAO,EAAE,GAAG;QACZ,SAAS,EAAE,KAAK;QAChB,UAAU,EAAE,OAAO;QACnB,WAAW,EAAE,IAAI;QACjB,UAAU,EAAE,CAAC;QACb,OAAO,EAAE;YACP,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,wBAAwB;SACpC;KACF,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,MAA2D,EAAE,EAAE;QACpF,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;YAClC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAC9B,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAC3B,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,IAAI,iCAAiC,CAAC,CAAC;QACzE,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAA0B,EAAE,EAAE;QACjD,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;QACnC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,aAAa,CAAC,EAAE,CAAC,CAAC;QAClB,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;QAAA,CAAC,kBAAkB,CACjB,YAAY,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,IAAI,wBAAwB,CAAC,CAC1E,UAAU,CAAC,CAAC,IAAI,CAAC,CACjB,UAAU,CAAC,OAAO,CAClB,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACrB,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CACpC,OAAO,CAAC,MAAM,CACd,iBAAiB,CAAC,CAAC,IAAI,CAAC,CACxB,gBAAgB,CAAC,CAAC,KAAK,CAAC,CACxB,WAAW,CAAC,CAAC,KAAK,CAAC,EAEvB;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;IACJ,CAAC;IAED,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,IAAI,CAChD;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,IAAI,CAE5D;;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CACjC;UAAA,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EACrE;QAAA,EAAE,IAAI,CAEN;;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAClC;UAAA,CAAC,YAAY,CAAC,WAAW,IAAI,CAC3B,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CACtE;cAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,SAAS,EAAE,IAAI,CAC1D;YAAA,EAAE,gBAAgB,CAAC,CACpB,CACD;UAAA,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAC5C;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,SAAS,EAAE,IAAI,CACxD;UAAA,EAAE,gBAAgB,CACpB;QAAA,EAAE,IAAI,CAEN;;QAAA,CAAC,KAAK,IAAI,CACR,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAC9C,CACH;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,IAAI,CAChD;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,IAAI,CAE5D;;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAClC;QAAA,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAChC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAEnC;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,EAAE,IAAI,CACnD;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CACzC;YAAA,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,IAAI,gCAAgC,CACtE;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,gBAAgB,CACpB;MAAA,EAAE,IAAI,CAEN;;MAAA,CAAC,KAAK,IAAI,CACR,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAC9C,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,EAAE;QACX,MAAM,EAAE,GAAG;KACZ;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,MAAM;QACb,YAAY,EAAE,CAAC;QACf,SAAS,EAAE,QAAQ;KACpB;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,QAAQ;QACnB,YAAY,EAAE,EAAE;QAChB,UAAU,EAAE,EAAE;KACf;IACD,eAAe,EAAE;QACf,IAAI,EAAE,CAAC;QACP,YAAY,EAAE,EAAE;QAChB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,EAAE;KACjB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,CAAC;KACR;IACD,cAAc,EAAE;QACd,IAAI,EAAE,CAAC;QACP,YAAY,EAAE,EAAE;QAChB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,EAAE;KACjB;IACD,aAAa,EAAE;QACb,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,SAAS;KACtB;IACD,eAAe,EAAE;QACf,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,cAAc;QAC9B,UAAU,EAAE,QAAQ;QACpB,iBAAiB,EAAE,EAAE;QACrB,YAAY,EAAE,EAAE;KACjB;IACD,aAAa,EAAE;QACb,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,YAAY,EAAE,EAAE;QAChB,eAAe,EAAE,OAAO;QACxB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE;YACZ,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE,GAAG;QAClB,YAAY,EAAE,IAAI;QAClB,SAAS,EAAE,CAAC;KACb;IACD,qBAAqB,EAAE;QACrB,OAAO,EAAE,GAAG;KACb;IACD,kBAAkB,EAAE;QAClB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,YAAY,EAAE,EAAE;QAChB,eAAe,EAAE,SAAS;QAC1B,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;IACD,iBAAiB,EAAE;QACjB,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,OAAO;KACf;IACD,aAAa,EAAE;QACb,eAAe,EAAE,SAAS;QAC1B,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;QACnB,YAAY,EAAE,CAAC;KAChB;IACD,iBAAiB,EAAE;QACjB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,KAAK;QACjB,QAAQ,EAAE,EAAE;KACb;IACD,eAAe,EAAE;QACf,eAAe,EAAE,SAAS;QAC1B,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;QACnB,YAAY,EAAE,CAAC;KAChB;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,KAAK;QACjB,QAAQ,EAAE,EAAE;KACb;IACD,gBAAgB,EAAE;QAChB,eAAe,EAAE,SAAS;QAC1B,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;QACnB,YAAY,EAAE,CAAC;QACf,SAAS,EAAE,EAAE;KACd;IACD,oBAAoB,EAAE;QACpB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,KAAK;QACjB,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,QAAQ;KACpB;IACD,aAAa,EAAE;QACb,eAAe,EAAE,SAAS;QAC1B,OAAO,EAAE,EAAE;QACX,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,EAAE;KACjB;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,MAAM;QACb,YAAY,EAAE,CAAC;KAChB;IACD,OAAO,EAAE;QACP,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,MAAM;QACb,YAAY,EAAE,CAAC;KAChB;IACD,SAAS,EAAE;QACT,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,CAAC;QACZ,SAAS,EAAE,QAAQ;KACpB;IACD,iBAAiB,EAAE;QACjB,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,EAAE;QAChB,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,MAAM;KACpB;IACD,qBAAqB,EAAE;QACrB,QAAQ,EAAE,EAAE;QACZ,YAAY,EAAE,EAAE;KACjB;IACD,sBAAsB,EAAE;QACtB,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAC","sourcesContent":["import React, { useState } from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';\nimport { showAlert } from '../../utils/platformAlert';\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      showAlert('Erreur', result.error || 'Impossible de prendre le selfie');\n    }\n  };\n\n  const handleError = (event: { message: string }) => {\n    showAlert('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,16 @@
+import React from 'react';
+import { TemplateComponent } from '../../types/KYC.types';
+interface IImagePayload {
+    dir: string;
+    file: string;
+}
+interface SelfieCaptureTemplateProps {
+    component: TemplateComponent;
+    value: Record<string, IImagePayload> | undefined;
+    onValueChange: (value: Record<string, IImagePayload | 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,KAAuC,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,iBAAiB,EAAgF,MAAM,uBAAuB,CAAC;AAUxI,UAAU,aAAa;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AACD,UAAU,0BAA0B;IAClC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,SAAS,CAAC;IACjD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA4atE,CAAC"}