@sanctum-key/react-native-sdk 1.0.6 → 1.0.8

package/src/components/KYCElements/SelfieCapture.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, Image, ActivityIndicator, Platform } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
-
-import { KYCElement } from '../../types/KYC.types';
+import SelfieOverlay from '../OverLay/SelfieOverlay'; 
+import { KYCElement, ISilentCaptureResult } from '../../types/KYC.types';
 
 interface SelfieCaptureProps {
   element: KYCElement;
   value?: string;
-  onValueChange: (value: string) => void;
+  onValueChange: (value: string) => void | Promise<void>;
   error?: string;
 }
 
@@ -20,6 +20,11 @@ export const SelfieCapture: React.FC<SelfieCaptureProps> = ({
 }) => {
   const [capturedImage, setCapturedImage] = useState<string | null>(value || null);
   const [showCamera, setShowCamera] = useState(false);
+  
+  // 🚨 AUTO-CAPTURE STATES
+  const [isProcessingCapture, setIsProcessingCapture] = useState(false); 
+  const [processingImagePath, setProcessingImagePath] = useState<string | null>(null);
+  const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
 
   const cameraConfig = element.cameraConfig || {
     aspectRatio: 1,
@@ -30,255 +35,221 @@ export const SelfieCapture: React.FC<SelfieCaptureProps> = ({
     maxRetakes: 3,
     overlay: {
       showGuide: true,
-      guideText: 'Prenez un selfie clair',
+      guideText: 'Placez votre visage dans l\'ovale',
+    }
+  };
+
+  // --- THE AUTO CAPTURE LOGIC ---
+  const autoCapture = async (capturePath: string) => {
+    if (isProcessingCapture) return;
+    
+    // 1. Freeze UI and show the captured selfie
+    setIsProcessingCapture(true); 
+    setProcessingImagePath(capturePath);
+
+    try {
+      setCapturedImage(capturePath);
+      
+      // Save data to parent component
+      await onValueChange(capturePath); 
+
+      // 2. Short delay for UX success feeling
+      setTimeout(() => {
+        setShowCamera(false);
+        setSilentCaptureResult({ success: false, isAnalyzing: false });
+        setIsProcessingCapture(false);
+        setProcessingImagePath(null);
+      }, 800);
+
+    } catch (e: any) {
+      showAlert('Erreur', e?.message || 'Impossible de sauvegarder le selfie');
+      setSilentCaptureResult({ success: false, isAnalyzing: false });
+      setIsProcessingCapture(false);
+      setProcessingImagePath(null);
     }
   };
 
-  const handleCapture = (result: { success: boolean; path?: string; error?: string }) => {
+  // --- SILENT BACKGROUND SCANNER ---
+  const handleSilentCapture = async (result: { success: boolean; path?: string; error?: string }) => {
+    if (silentCaptureResult.isAnalyzing || isProcessingCapture) return;
+
     if (result.success && result.path) {
-      setCapturedImage(result.path);
-      onValueChange(result.path);
-      setShowCamera(false);
-    } else {
-      showAlert('Erreur', result.error || 'Impossible de prendre le selfie');
+      setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
+      
+      try {
+        // Since camera returned success (clear frame), trigger auto-capture immediately
+        await autoCapture(result.path);
+      } catch (error: any) {
+        setSilentCaptureResult(prev => ({ 
+          ...prev, 
+          isAnalyzing: false, 
+          success: false, 
+          error: error?.message || 'Visage non détecté' 
+        }));
+      }
     }
   };
 
   const handleError = (event: { message: string }) => {
     showAlert('Erreur', event.message);
     setShowCamera(false);
+    setIsProcessingCapture(false);
   };
 
   const retakePicture = () => {
+    setIsProcessingCapture(false);
+    setProcessingImagePath(null);
+    setSilentCaptureResult({ success: false, isAnalyzing: false });
     setCapturedImage(null);
     onValueChange('');
     setShowCamera(true);
   };
 
+  // --- LIVE CAMERA RENDER ---
   if (showCamera) {
+    const isBusy = isProcessingCapture; 
+
     return (
-      <View style={styles.container}>
+      <View style={styles.cameraContainerFullScreen}>
         <EnhancedCameraView
-          instructions={cameraConfig.overlay?.guideText || 'Prenez un selfie clair'}
           showCamera={true}
-          cameraType="front"
+          isProcessing={isBusy} 
+          cameraType={cameraConfig.cameraType as 'front' | 'back'}
           style={styles.camera}
-          onCapture={handleCapture}
           onError={handleError}
-          onClose={() => setShowCamera(false)}
-          quality="high"
-          showCaptureButton={true}
-          showSwitchCamera={false}
-          enableFlash={false}
-        />
-      </View>
-    );
-  }
+          onSilentCapture={handleSilentCapture}
+          silentCaptureResult={silentCaptureResult}
+          overlayComponent={
+            <>
+              {/* Subtle scanning indicator */}
+              {!isBusy && silentCaptureResult.isAnalyzing && (
+                 <View style={styles.topAnalyzingPillContainer}>
+                    <View style={styles.topAnalyzingPill}>
+                      <ActivityIndicator size="small" color="white" />
+                      <Text style={styles.analyzingPillText}>Analyse du visage...</Text>
+                    </View>
+                 </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>
+              {/* Success Overlay with Frozen Perfect Selfie */}
+              {isBusy && (
+                <View style={StyleSheet.absoluteFillObject}>
+                  {processingImagePath && (
+                    <Image 
+                      source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }} 
+                      style={StyleSheet.absoluteFillObject} 
+                      resizeMode="cover" 
+                    />
+                  )}
+                  <View style={styles.processingOverlay}>
+                    <ActivityIndicator size="large" color="#2DBD60" />
+                    <Text style={styles.processingText}>
+                      Parfait!{"\n"}Traitement du selfie...
+                    </Text>
+                  </View>
+                </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>
+              {!isBusy && (
+                <SelfieOverlay 
+                    xMin={0} yMin={0} xMax={100} yMax={100}
+                    orientation="center"
+                    isSuccess={isBusy}
+                    instructionsTile={element.title || "Selfie"}
+                    instructionsSubtitle={cameraConfig.overlay?.guideText || "Placez votre visage dans l'ovale"}                    
+                    cornerOpacity={1}
+                    instructions=""
+                    language="en" 
+                />
+              )}
+            </>
+          }
+        />
 
-        {error && (
-          <Text style={styles.errorText}>{error}</Text>
-        )}
+        {/* Floating Error Banner */}
+        {silentCaptureResult.error && !isBusy ? (
+          <View style={styles.floatingErrorBanner}>
+            <Text style={styles.floatingErrorText}>{silentCaptureResult.error}</Text>
+          </View>
+        ) : null}
       </View>
     );
   }
 
+  // --- PREVIEW RENDER ---
   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>
+      {capturedImage ? (
+        <>
+          <View style={styles.imageContainer}>
+            <Image source={{ uri: capturedImage }} style={styles.capturedImage} />
+          </View>
 
-      {error && (
-        <Text style={styles.errorText}>{error}</Text>
+          <View style={styles.buttonContainer}>
+            {cameraConfig.allowRetake && (
+              <TouchableOpacity style={styles.secondaryButton} onPress={retakePicture} disabled={isProcessingCapture}>
+                <Text style={styles.secondaryButtonText}>Reprendre</Text>
+              </TouchableOpacity>
+            )}
+            <TouchableOpacity style={styles.primaryButton} disabled={isProcessingCapture}>
+              <Text style={styles.primaryButtonText}>Continuer</Text>
+            </TouchableOpacity>
+          </View>
+        </>
+      ) : (
+        <View style={styles.cameraPlaceholderWrapper}>
+          <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',
-  },
-}); 
+  // 🚨 UI FIX: The camera MUST be full screen so your SelfieOverlay math matches the device screen
+  cameraContainerFullScreen: { ...StyleSheet.absoluteFillObject, backgroundColor: 'black', zIndex: 999 },
+  camera: { flex: 1 },
+
+  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 },
+  
+  cameraPlaceholderWrapper: { flex: 1, borderRadius: 12, overflow: 'hidden', marginBottom: 24 },
+  imageContainer: { flex: 1, borderRadius: 12, overflow: 'hidden', marginBottom: 24, backgroundColor: '#000' },
+  capturedImage: { width: '100%', height: '100%', resizeMode: 'cover' },
+  
+  buttonContainer: { flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', paddingHorizontal: 16, marginBottom: 24 },
+  primaryButton: { backgroundColor: '#2DBD60', paddingHorizontal: 32, paddingVertical: 16, borderRadius: 12 },
+  primaryButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
+  secondaryButton: { backgroundColor: '#e5e5e5', paddingHorizontal: 32, paddingVertical: 16, borderRadius: 12 },
+  secondaryButtonText: { color: '#333', fontWeight: 'bold', fontSize: 16 },
+  
+  errorText: { color: '#dc2626', fontSize: 14, marginTop: 8, textAlign: 'center' },
+  
+  cameraPlaceholder: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5', borderRadius: 12, borderWidth: 2, borderColor: '#e0e0e0', borderStyle: 'dashed' },
+  cameraPlaceholderText: { fontSize: 50, marginBottom: 12 },
+  cameraPlaceholderLabel: { fontSize: 16, color: '#666', textAlign: 'center', fontWeight: '500' },
+
+  topAnalyzingPillContainer: { position: 'absolute', top: Platform.OS === 'android' ? 60 : 50, left: 0, right: 0, alignItems: 'center', zIndex: 100 },
+  topAnalyzingPill: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.6)', paddingVertical: 8, paddingHorizontal: 16, borderRadius: 20, gap: 8 },
+  analyzingPillText: { color: 'white', fontSize: 14, fontWeight: 'bold' },
+  
+  processingOverlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.7)', justifyContent: 'center', alignItems: 'center', zIndex: 9999 },
+  processingText: { color: '#FFF', fontSize: 20, fontWeight: 'bold', marginTop: 16, textAlign: 'center', lineHeight: 28 },
+
+  floatingErrorBanner: { position: 'absolute', top: 100, left: '10%', right: '10%', backgroundColor: 'rgba(220, 38, 38, 0.95)', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 8, alignItems: 'center', justifyContent: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 5, elevation: 8, zIndex: 100 },
+  floatingErrorText: { color: 'white', fontSize: 14, fontWeight: '700', textAlign: 'center' },
+});