@sanctum-key/react-native-sdk 1.0.0

package/src/components/OverLay/SelfieOverlay.tsx

@@ -0,0 +1,211 @@
+import { Dimensions, Image, StyleSheet, Text, View } from "react-native";
+import { IdCardOverlayProps } from "./type";
+import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
+import ScanningLine from "../Svgs/scanningLine";
+import FrontSelfieIcon from "../Svgs/frontSelfieIcon";
+import StepOverlay from "./StepOverlay";
+import SideSelfieIcon from "../Svgs/sideSelfieIcon";
+
+const SelfieOverlay = ({ xMin, yMin, xMax, yMax, cornerOpacity, instructions, cornerColor = "#4CAF50", stepperProps, instructionsTile, instructionsSubtitle, orientation, isSuccess }: IdCardOverlayProps) => {
+    const screenWidth = Dimensions.get('window').width;
+    const screenHeight = Dimensions.get('window').height;
+
+    // Dimensions de l'icône FrontSelfieIcon (240x285 selon le viewBox)
+    const iconWidth = 240;
+    const iconHeight = 285;
+
+    // Calculer la position pour centrer l'icône
+    const iconX = (screenWidth - iconWidth) / 2;
+    const iconY = (screenHeight - iconHeight) / 3;
+
+    // Position du centre pour le masque (doit correspondre au centre de l'icône)
+    const maskCenterX = iconX + iconWidth / 2;
+    const maskCenterY = iconY + iconHeight / 2;
+
+    // Zone pour ScanningLine (basée sur la zone de l'icône)
+    const scanningYMin = iconY;
+    const scanningYMax = iconY + iconHeight;
+
+    return (
+        <View style={StyleSheet.absoluteFill}>
+            {stepperProps ? (
+                <StepOverlay {...stepperProps} />
+            ) : null}
+
+            <Svg
+                height="100%"
+                width="100%"
+                style={[StyleSheet.absoluteFill]}
+            >
+                <Defs>
+                    <Mask id="faceMask">
+                        {/* Fond blanc - zone visible (extérieur) */}
+                        <Rect
+                            x="0"
+                            y="0"
+                            width="100%"
+                            height="100%"
+                            fill="white"
+                        />
+                        {/* Zone noire - zone masquée (forme du visage) - exactement alignée avec l'icône */}
+                        <Path
+                            d="M35.4198 48.9242C38.2153 41.9014 42.5851 35.6693 48.3859 30.8232C61.3601 19.9842 88.1543 1.5 120 1.5C151.846 1.5 178.64 19.9842 191.614 30.8232C197.415 35.6693 201.785 41.9014 204.58 48.9242C210.484 63.7564 220 93.0114 220 127.5C220 168.082 204.19 212.617 198.234 227.954C196.792 231.667 194.971 235.196 192.628 238.417C183.46 251.021 156.313 283.5 120 283.5C83.6867 283.5 56.5401 251.021 47.3723 238.417C45.0294 235.196 43.2081 231.667 41.7663 227.954C35.8102 212.617 20 168.082 20 127.5C20 93.0114 29.5157 63.7564 35.4198 48.9242Z"
+                            fill="black"
+                            transform={`translate(${maskCenterX}, ${maskCenterY}) translate(-120, -142.5)`}
+                        />
+                    </Mask>
+                </Defs>
+
+                {/* Overlay semi-transparent avec masque */}
+                <Rect
+                    x="0"
+                    y="0"
+                    width="100%"
+                    height="100%"
+                    fill="rgba(0, 0, 0, 0.5)"
+                    mask="url(#faceMask)"
+                />
+                {isSuccess ? null : <ScanningLine yMin={scanningYMin} screenWidth={screenWidth} height={screenHeight} yMax={scanningYMax} />}
+            </Svg>
+
+            {/* Container de l'icône - centré automatiquement */}
+            <View style={[styles.iconContainer, {
+                left: iconX,
+                top: iconY,
+                width: iconWidth,
+                height: iconHeight,
+            }]}>
+                {orientation === "center" ? <FrontSelfieIcon /> : <SideSelfieIcon />}
+            </View>
+
+            {/* Flèche directionnelle pour les orientations latérales */}
+            {orientation !== "center" ? (
+                <View style={[
+                    styles.arrowContainer,
+                    {
+                        top: iconY + iconHeight / 2 - 50, // Centré verticalement par rapport à l'icône
+                        left: orientation === "left" ? iconX - 72 : 'auto',
+                        right: orientation === "right" ? iconX - 75 : 'auto'
+                    }
+                ]}>
+                    <Image
+                        source={require('../Svgs/directionArrow.gif')}
+                        resizeMode="contain"
+                        style={[
+                            styles.arrowImage,
+                            { transform: orientation === "right" ? [{ scaleX: -1 }] : [] }
+                        ]}
+                    />
+                </View>
+            ) : null}
+
+
+            <View style={styles.bottomIntruction}>
+                <Text style={styles.bottomTitle}>
+                    {instructionsTile}
+                </Text>
+                <Text style={styles.bottomSubtitle}>
+                    {instructionsSubtitle}
+                </Text>
+            </View>
+        </View>
+    )
+}
+
+export default SelfieOverlay;
+
+
+const styles = StyleSheet.create({
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '50%',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    svg: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+    },
+    topIntruction: {
+        zIndex: 1000,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 20,
+        paddingHorizontal: 10,
+        marginHorizontal: 20,
+        marginTop: 10,
+        backgroundColor: "#FDE04730",
+        borderColor: "#FDE047",
+        borderWidth: 1,
+        borderRadius: 10,
+        gap: 10,
+    },
+    topIntructionText: {
+        color: '#FDE047',
+        fontSize: 14,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomIntruction: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        height: '35%',
+        paddingHorizontal: 20,
+    },
+    bottomIntructionTextBold: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomIntructionText: {
+        color: 'white',
+        fontSize: 14,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomTitle: {
+        color: 'white',
+        fontSize: 25,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomSubtitle: {
+        color: 'white',
+        marginTop: 15,
+        fontSize: 14,
+        fontWeight: '500',
+        textAlign: 'center',
+    },
+
+
+    image: {
+        position: 'absolute',
+        borderRadius: 10,
+    },
+    iconContainer: {
+        position: 'absolute',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    arrowContainer: {
+        position: 'absolute',
+        width: 100,
+        height: 100,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    arrowImage: {
+        width: 100,
+        height: 100,
+        objectFit: 'contain',
+    },
+})

package/src/components/OverLay/StepOverlay.tsx

@@ -0,0 +1,64 @@
+import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
+import useI18n from "../../hooks/useI18n";
+
+interface StepOverlayProps {
+    back: () => void;
+    selectedDocumentType: string;
+    step: number;
+    totalSteps: number;
+}
+const StepOverlay = ({ back, selectedDocumentType, step, totalSteps }: StepOverlayProps) => {
+    const { t } = useI18n();
+    return (
+        <View style={styles.stepperContainer}>
+            <TouchableOpacity onPress={back} style={styles.back}>
+                <Text style={styles.stepperItemText}> {`<`} </Text>
+            </TouchableOpacity>
+            <View style={styles.stepperItem}>
+                <Text style={styles.stepperItemText}>{selectedDocumentType}</Text>
+            </View>
+            <View style={styles.stepperDetails}>
+                <Text style={styles.stepperDetailsText}>{t('kyc.step', { current: step, total: totalSteps })}</Text>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    stepperContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 20,
+        paddingVertical: 15,
+        // backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        zIndex: 1000,
+    },
+    stepperItem: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    stepperDetails: {
+
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    stepperItemText: {
+        color: 'white',
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
+    stepperDetailsText: {
+        color: 'white',
+        fontSize: 12,
+        fontWeight: '500',
+    },
+    back: {
+        // flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+})
+
+export default StepOverlay;

package/src/components/OverLay/type.ts

@@ -0,0 +1,91 @@
+import { ViewStyle } from "react-native";
+import { ISilentCaptureResult } from "../../types/KYC.types";
+
+export interface IdCardOverlayProps {
+    xMin: number;
+    yMin: number;
+    xMax: number;
+    yMax: number;
+    cornerOpacity: number;
+    instructions: string;
+    cornerColor?: string;
+    stepperProps?: StepperProps;
+    instructionsTile?: string;
+    instructionsSubtitle?: string;
+    orientation?: 'center' | 'left' | 'right';
+    isAnalyzing?: boolean;
+    isSuccess?: boolean;
+    language: string
+}
+
+
+interface StepperProps {
+    back: () => void;
+    selectedDocumentType: string;
+    step: number;
+    totalSteps: number;
+    side: string;
+}
+
+export interface ExtractMrzTextResponse {
+    parsed_data: {
+        mrz_type: string;
+        document_code: string;
+        issuer_code: string;
+        surname: string;
+        given_name: string;
+        document_number: string;
+        document_number_checkdigit: string;
+        nationality_code: string;
+        birth_date: string;
+        sex: string;
+        expiry_date: string;
+        optional_data: string;
+        mrz_text: string;
+        status: string;
+    },
+    success: boolean;
+}
+
+
+
+export interface EnhancedCameraViewProps {
+    instructions?: string;
+    showCamera: boolean;
+    cameraType?: 'front' | 'back';
+    style?: ViewStyle;
+    onCapture?: (result: { success: boolean; path?: string; error?: string }) => void;
+    onSilentCapture?: (result: { success: boolean; path?: string; error?: string }) => void;
+    silentCaptureResult?: ISilentCaptureResult;
+    onError?: (event: { message: string }) => void;
+    onClose?: () => void;
+    enableFlash?: boolean;
+    enableHdr?: boolean;
+    quality?: 'low' | 'medium' | 'high';
+    showCaptureButton?: boolean;
+    showSwitchCamera?: boolean;
+    overlayComponent?: React.ReactNode;
+    bbox?: {
+        xMin: number;
+        yMin: number;
+        xMax: number;
+        yMax: number;
+        borderColor?: string;
+        borderWidth?: number;
+        cornerRadius?: number;
+    };
+    canFlip?: boolean;
+    // Video recording props
+    enableVideo?: boolean;
+    isRecording?: boolean;
+    onVideoRecordingStart?: () => void;
+    onVideoRecordingStop?: (result: { success: boolean; path?: string; error?: string }) => void;
+    videoDuration?: number;
+    /** Delay in ms before first auto-capture (lets camera focus and user position document). Recommended 2500–3000 for ID/document capture. */
+    captureStabilizationDelayMs?: number;
+}
+
+export interface CheckTemplateTypeResponse {
+    template_path: string;
+    lpips_score: number;
+}

package/src/components/ProgressIndicator.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+interface ProgressIndicatorProps {
+  currentStep: number;
+  totalSteps: number;
+}
+
+export const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({
+  currentStep,
+  totalSteps
+}) => {
+  const progress = (currentStep / (totalSteps - 1)) * 100;
+
+  return (
+    <View style={styles.container}>
+      {/* Barre de progression */}
+      <View style={styles.progressBarContainer}>
+        <View 
+          style={[styles.progressBar, { width: `${progress}%` }]}
+        />
+      </View>
+      
+      {/* Indicateur textuel */}
+      <View style={styles.textContainer}>
+        <Text style={styles.progressText}>
+          Étape {currentStep + 1} sur {totalSteps}
+        </Text>
+        <Text style={styles.progressText}>
+          {Math.round(progress)}%
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  progressBarContainer: {
+    width: '100%',
+    height: 8,
+    backgroundColor: '#E5E5E5',
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  progressBar: {
+    height: '100%',
+    backgroundColor: '#4CAF50',
+    borderRadius: 4,
+  },
+  textContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 8,
+  },
+  progressText: {
+    fontSize: 12,
+    color: '#666',
+  },
+}); 

package/src/components/SelfieCapture.tsx

@@ -0,0 +1,244 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, TouchableOpacity, Image, Alert, StyleSheet } from 'react-native';
+import { useKYCStore } from '../stores/kycStore';
+import VisionCameraModule from '../modules/camera/VisionCameraModule';
+import { EnhancedCameraView } from './EnhancedCameraView';
+
+export const SelfieCapture: React.FC = () => {
+  const [capturedSelfie, setCapturedSelfie] = useState<string | null>(null);
+  const [isCapturing, setIsCapturing] = useState(false);
+  const [showCamera, setShowCamera] = useState(false);
+  const { setSelfie, setProcessing } = useKYCStore();
+
+  const instructions = "Placez votre visage dans le cadre et souriez naturellement. Assurez-vous que votre visage est bien éclairé et centré.";
+
+  useEffect(() => {
+    // Check camera availability on component mount
+    const checkCameraAvailability = async () => {
+      const isAvailable = await VisionCameraModule.isCameraAvailable();
+      if (!isAvailable) {
+        Alert.alert('Erreur', 'Caméra non disponible sur cette plateforme');
+      }
+    };
+    
+    checkCameraAvailability();
+  }, []);
+
+  const handleCapture = async () => {
+    try {
+      setIsCapturing(true);
+      setProcessing(true);
+
+      const hasPermissions = await VisionCameraModule.requestAllPermissions();
+      if (!hasPermissions) {
+        Alert.alert('Permission refusée', 'Nous avons besoin de l\'accès à la caméra et au microphone');
+        setIsCapturing(false);
+        setProcessing(false);
+        return;
+      }
+
+      setShowCamera(true);
+    } catch (error) {
+      Alert.alert('Erreur', 'Impossible d\'ouvrir la caméra');
+      setIsCapturing(false);
+      setProcessing(false);
+    }
+  };
+
+  const handleCaptureSuccess = (imagePath: string) => {
+    setCapturedSelfie(imagePath);
+    setSelfie(imagePath);
+    setShowCamera(false);
+    setIsCapturing(false);
+    setProcessing(false);
+  };
+
+  const handleRetake = () => {
+    setCapturedSelfie(null);
+    setShowCamera(false);
+  };
+
+  const handleCameraCapture = (result: { success: boolean; path?: string; error?: string }) => {
+    if (result.success && result.path) {
+      handleCaptureSuccess(result.path);
+    } else {
+      Alert.alert('Erreur', result.error || 'Échec de la capture');
+      setIsCapturing(false);
+      setProcessing(false);
+    }
+  };
+
+  const handleCameraError = (event: { message: string }) => {
+    Alert.alert('Erreur', event.message || 'Une erreur est survenue');
+    setShowCamera(false);
+    setIsCapturing(false);
+    setProcessing(false);
+  };
+
+  const handleCloseCamera = () => {
+    setShowCamera(false);
+    setIsCapturing(false);
+    setProcessing(false);
+  };
+
+  if (showCamera) {
+    return (
+      <View style={styles.container}>
+        <EnhancedCameraView
+          instructions={instructions}
+          showCamera={true}
+          cameraType="front"
+          onCapture={handleCameraCapture}
+          onError={handleCameraError}
+          onClose={handleCloseCamera}
+          quality="high"
+          showCaptureButton={true}
+          showSwitchCamera={false}
+          overlayComponent={
+            <View style={styles.selfieOverlay}>
+              <View style={styles.faceFrame} />
+            </View>
+          }
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {capturedSelfie ? (
+        <View style={styles.previewContainer}>
+          <View style={styles.imageContainer}>
+            <Image
+              source={{ uri: `file://${capturedSelfie}` }}
+              style={styles.previewImage}
+              resizeMode="cover"
+            />
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <TouchableOpacity
+              style={[styles.button, styles.retakeButton]}
+              onPress={handleRetake}
+            >
+              <Text style={styles.buttonText}>Reprendre</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={[styles.button, styles.validateButton]}
+              onPress={() => {/* Navigation vers l'étape suivante */}}
+            >
+              <Text style={styles.buttonText}>Valider</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      ) : (
+        <View style={styles.captureContainer}>
+          <Text style={styles.title}>Capture de selfie</Text>
+          <Text style={styles.instructions}>
+            {instructions}
+          </Text>
+          
+          <TouchableOpacity
+            style={[styles.button, styles.captureButton]}
+            onPress={handleCapture}
+            disabled={isCapturing}
+          >
+            <Text style={styles.buttonText}>
+              {isCapturing ? 'Ouverture...' : '📸 Prendre une photo'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  captureContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+  instructions: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 40,
+    lineHeight: 24,
+  },
+  previewContainer: {
+    flex: 1,
+    padding: 20,
+  },
+  imageContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  previewImage: {
+    width: 250,
+    height: 250,
+    borderRadius: 125,
+    borderWidth: 3,
+    borderColor: '#4CAF50',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 15,
+  },
+  button: {
+    flex: 1,
+    paddingVertical: 15,
+    paddingHorizontal: 20,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  captureButton: {
+    backgroundColor: '#4CAF50',
+  },
+  retakeButton: {
+    backgroundColor: '#FF9800',
+  },
+  validateButton: {
+    backgroundColor: '#2196F3',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  selfieOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    pointerEvents: 'none',
+  },
+  faceFrame: {
+    width: 250,
+    height: 300,
+    borderWidth: 3,
+    borderColor: '#4CAF50',
+    borderRadius: 125,
+    backgroundColor: 'transparent',
+  },
+});