@sanctum-key/react-native-sdk 1.0.0

package/src/components/KYCFlow.tsx

@@ -0,0 +1,377 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, ScrollView, StyleSheet, PermissionsAndroid, Platform, Alert } from 'react-native';
+import { useKYCStore } from '../stores/kycStore';
+import { SelfieCapture } from './SelfieCapture';
+import { FileUpload } from './FileUpload';
+
+export const KYCFlow: React.FC = () => {
+  const { 
+    currentStep, 
+    setCurrentStep, 
+    isProcessing, 
+    error,
+    currentSession,
+    initializeSession 
+  } = useKYCStore();
+
+  const [hasLocationPermission, setHasLocationPermission] = React.useState<boolean | null>(null);
+
+  const requestLocationPermission = React.useCallback(async (): Promise<boolean> => {
+    if (Platform.OS === 'ios') {
+      // iOS prompts automatically via system when needed; assume granted for this demo
+      setHasLocationPermission(true);
+      return true;
+    }
+
+    try {
+      const granted = await PermissionsAndroid.request(
+        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+        {
+          title: "Permission de localisation",
+          message: "Nous avons besoin de votre localisation pour démarrer la vérification.",
+          buttonNeutral: "Plus tard",
+          buttonNegative: "Annuler",
+          buttonPositive: "OK",
+        }
+      );
+      const isGranted = granted === PermissionsAndroid.RESULTS.GRANTED;
+      setHasLocationPermission(isGranted);
+      if (!isGranted) {
+        Alert.alert('Permission refusée', "La localisation est requise pour continuer.");
+      }
+      return isGranted;
+    } catch (e) {
+      setHasLocationPermission(false);
+      Alert.alert('Erreur', "Impossible de demander la permission de localisation");
+      return false;
+    }
+  }, []);
+
+  React.useEffect(() => {
+    // Initialiser la session si elle n'existe pas
+    if (!currentSession) {
+      initializeSession('user-123'); // ID utilisateur temporaire
+    }
+  }, []);
+
+  const steps = [
+    { id: 0, title: 'Activer la localisation', description: 'Autorisez l\'accès à votre localisation' },
+    { id: 1, title: 'Bienvenues', description: 'Commençons la vérification' },
+    { id: 2, title: 'Document d\'identité', description: 'Sélectionnez vos documents' },
+    { id: 3, title: 'Selfie', description: 'Prenez une photo de votre visage' },
+    { id: 4, title: 'Vérification', description: 'Validation en cours...' },
+    { id: 5, title: 'Terminé', description: 'Vérification complétée' }
+  ];
+
+  // const appStep = [
+  //   { id: 0, title: 'Which country issued your ID?', description: 'This helps us verify your documents quickly and securely',type:"country", options:["France","Belgique","Luxembourg","Allemagne","Italie","Espagne","Portugal","Autriche","Suisse","Pays-Bas","Autre"] },
+  //   { id: 1, title: 'What is your ID type?', description: 'This helps us verify your documents quickly and securely',type:"idType", options:["Passport","National ID","Driver's License","Other"] },
+  //   // camera front id
+  //   { id: 2, title: 'Take a photo of your From ID', description: 'This helps us verify your documents quickly and securely',type:"cameraFrontId", options:[] },
+  //   // camera back id
+  //   { id: 3, title: 'Take a photo of your Back ID', description: 'This helps us verify your documents quickly and securely',type:"cameraBackId", options:[] },
+  //   // camera selfie
+  //   { id: 4, title: 'Take a photo of your Front side Selfie', description: 'This helps us verify your documents quickly and securely',type:"cameraSelfie", options:[] },
+  //   // camera selfie
+  //   { id: 5, title: 'Take a photo of your Left left side of your ID', description: 'This helps us verify your documents quickly and securely',type:"cameraSelfie", options:[] },
+  //   // camera selfie
+  //   { id: 6, title: 'Take a photo of your Right right side of your ID', description: 'This helps us verify your documents quickly and securely',type:"cameraSelfie", options:[] },
+    
+  // ]
+  const handleFilesSelected = (files: Array<{ uri: string; path: string; name: string }>) => {
+    console.log('Files selected:', files);
+    // Ici vous pourriez traiter les fichiers sélectionnés
+    // Par exemple, les ajouter au store KYC
+  };
+
+  const renderStep = () => {
+    switch (currentStep) {
+      case 0:
+        return (
+          <View style={styles.stepContainer}>
+            <Text style={styles.stepTitle}>Autoriser la localisation</Text>
+            <Text style={styles.stepDescription}>
+              Nous avons besoin de votre localisation (GPS) pour des raisons de conformité.
+            </Text>
+            {hasLocationPermission ? (
+              <Text style={{ color: '#4CAF50', marginBottom: 16 }}>Permission accordée ✓</Text>
+            ) : null}
+            <TouchableOpacity
+              style={styles.primaryButton}
+              onPress={requestLocationPermission}
+            >
+              <Text style={styles.primaryButtonText}>Activer la localisation</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.secondaryButton, { marginTop: 12, opacity: hasLocationPermission ? 1 : 0.6 }]}
+              onPress={() => hasLocationPermission && setCurrentStep(1)}
+              disabled={!hasLocationPermission}
+            >
+              <Text style={styles.secondaryButtonText}>Continuer</Text>
+            </TouchableOpacity>
+          </View>
+        );
+
+      case 1:
+        return (
+          // Écran d'accueil après permission
+          <View style={styles.stepContainer}>
+            <Text style={styles.stepTitle}>
+              Vérification d'identité
+            </Text>
+            <Text style={styles.stepDescription}>
+              Nous allons vous guider à travers le processus de vérification d'identité
+            </Text>
+            <TouchableOpacity 
+              style={styles.primaryButton}
+              onPress={() => setCurrentStep(2)}
+            >
+              <Text style={styles.primaryButtonText}>
+                Commencer
+              </Text>
+            </TouchableOpacity>
+          </View>
+        );
+
+      case 2:
+        return (
+          <FileUpload
+            allowedTypes={['image/*', 'application/pdf']}
+            maxFiles={3}
+            onFilesSelected={handleFilesSelected}
+          />
+        );
+
+      case 3:
+        return <SelfieCapture />;
+
+      case 4:
+        return (
+          <View style={styles.stepContainer}>
+            <Text style={styles.stepTitle2}>
+              Vérification en cours
+            </Text>
+            <Text style={styles.stepDescription}>
+              Veuillez patienter pendant que nous vérifions vos informations
+            </Text>
+            <View style={styles.loadingIndicator} />
+          </View>
+        );
+
+      case 5:
+        return (
+          <View style={styles.stepContainer}>
+            <Text style={styles.successTitle}>
+              ✅ Terminé !
+            </Text>
+            <Text style={styles.stepDescription}>
+              Votre vérification d'identité a été complétée avec succès
+            </Text>
+            <TouchableOpacity 
+              style={styles.primaryButton}
+              onPress={() => setCurrentStep(0)}
+            >
+              <Text style={styles.primaryButtonText}>
+                Recommencer
+              </Text>
+            </TouchableOpacity>
+          </View>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Header avec progression */}
+      <View style={styles.header}>
+        <View style={styles.progressContainer}>
+          <View 
+            style={[styles.progressBar, { width: `${(currentStep / (steps.length - 1)) * 100}%` }]}
+          />
+        </View>
+        <Text style={styles.headerTitle}>
+          {steps[currentStep]?.title}
+        </Text>
+        <Text style={styles.headerDescription}>
+          {steps[currentStep]?.description}
+        </Text>
+      </View>
+
+      {/* Contenu principal */}
+      <ScrollView style={styles.scrollView}>
+        {error && (
+          <View style={styles.errorContainer}>
+            <Text style={styles.errorText}>
+              Erreur: {error}
+            </Text>
+          </View>
+        )}
+
+        {renderStep()}
+      </ScrollView>
+
+      {/* Footer avec navigation */}
+      {currentStep > 0 && currentStep < 3 && (
+        <View style={styles.footer}>
+          <TouchableOpacity 
+            style={styles.secondaryButton}
+            onPress={() => setCurrentStep(currentStep - 1)}
+            disabled={isProcessing}
+          >
+            <Text style={styles.secondaryButtonText}>
+              Précédent
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity 
+            style={styles.footerPrimaryButton}
+            onPress={() => setCurrentStep(currentStep + 1)}
+            disabled={isProcessing}
+          >
+            <Text style={styles.primaryButtonText}>
+              Suivant
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fa',
+  },
+  header: {
+    backgroundColor: 'white',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e5e5e5',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  progressContainer: {
+    width: '100%',
+    height: 8,
+    backgroundColor: '#e5e5e5',
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  progressBar: {
+    height: '100%',
+    backgroundColor: '#4CAF50',
+    borderRadius: 4,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginTop: 8,
+  },
+  headerDescription: {
+    fontSize: 14,
+    color: '#666',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  errorContainer: {
+    backgroundColor: '#fef2f2',
+    borderWidth: 1,
+    borderColor: '#fecaca',
+    margin: 16,
+    padding: 16,
+    borderRadius: 8,
+  },
+  errorText: {
+    color: '#dc2626',
+    fontWeight: '500',
+  },
+  stepContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  stepTitle: {
+    fontSize: 30,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  stepTitle2: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  successTitle: {
+    fontSize: 30,
+    fontWeight: 'bold',
+    color: '#4CAF50',
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  stepDescription: {
+    fontSize: 18,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 32,
+    lineHeight: 24,
+  },
+  primaryButton: {
+    backgroundColor: '#4CAF50',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+  },
+  primaryButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 18,
+  },
+  loadingIndicator: {
+    width: 64,
+    height: 64,
+    backgroundColor: '#4CAF50',
+    borderRadius: 32,
+    opacity: 0.7,
+  },
+  footer: {
+    backgroundColor: 'white',
+    borderTopWidth: 1,
+    borderTopColor: '#e5e5e5',
+    padding: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  secondaryButton: {
+    backgroundColor: '#e5e5e5',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+  },
+  secondaryButtonText: {
+    color: '#333',
+    fontWeight: '500',
+  },
+  footerPrimaryButton: {
+    backgroundColor: '#4CAF50',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+  },
+}); 

package/src/components/NativeCameraView.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react';
+import { ViewStyle } from 'react-native';
+import { requireNativeViewManager } from 'expo-modules-core';
+
+export interface NativeCameraViewProps {
+  instructions: string;
+  showCamera: boolean;
+  style?: ViewStyle;
+  onCapture?: (event: any) => void;
+  onError?: (event: any) => void;
+}
+
+const NativeCameraViewComponent = requireNativeViewManager('TransfergratisSdk_TransfergratisSdkView');
+
+export const NativeCameraView: React.FC<NativeCameraViewProps> = (props) => {
+  
+  useEffect(() => {
+    console.log('🟨 [NativeCameraView] Props reçues:', {
+      instructions: props.instructions,
+      showCamera: props.showCamera,
+      hasOnCapture: !!props.onCapture,
+      hasOnError: !!props.onError
+    });
+  }, [props.instructions, props.showCamera, props.onCapture, props.onError]);
+
+  const handleCapture = (event: any) => {
+    console.log('🟨 [NativeCameraView] Événement onCapture reçu:', event);
+    if (props.onCapture) {
+      props.onCapture(event);
+    }
+  };
+
+  const handleError = (event: any) => {
+    console.log('🟨 [NativeCameraView] Événement onError reçu:', event);
+    if (props.onError) {
+      props.onError(event);
+    }
+  };
+
+  return (
+    <NativeCameraViewComponent 
+      {...props} 
+      onCapture={handleCapture}
+      onError={handleError}
+    />
+  );
+}; 

package/src/components/OverLay/IdCard.tsx

@@ -0,0 +1,277 @@
+import { Animated, Dimensions, StyleSheet, Text, View } from "react-native";
+import Svg, { Defs, Mask, Rect, Path } from "react-native-svg";
+import ScanningLine from "../Svgs/scanningLine";
+import { IdCardOverlayProps } from "./type";
+import StepOverlay from "./StepOverlay";
+
+
+
+
+const IdCardOverlay = ({ xMin: xMinProps, yMin: yMinProps, xMax: xMaxProps, yMax: yMaxProps, cornerOpacity, instructions, cornerColor = "#4CAF50", stepperProps, isSuccess, language  }: IdCardOverlayProps) => {
+    const screenWidth = Dimensions.get('window').width;
+    const screenHeight = Dimensions.get('window').height;
+
+    const boxWidth = xMaxProps - xMinProps;
+    const boxHeight = yMaxProps - yMinProps;
+
+    
+
+
+
+
+    // Calculer les coordonnées pour centrer le cadre
+    const xMin = (screenWidth - boxWidth) / 2;
+    const yMin = (screenHeight - boxHeight) / 3;
+    const xMax = xMin + boxWidth;
+    const yMax = yMin + boxHeight;
+
+    return (
+        <View style={StyleSheet.absoluteFill}>
+            {stepperProps ? (
+                <StepOverlay {...stepperProps} />
+            ) : null}
+
+            <Animated.View style={[styles.topIntruction]}>
+                <Text style={styles.topIntructionText}>
+                    💡 {instructions}
+                </Text>
+            </Animated.View>
+
+            <Svg
+                height={screenHeight}
+                width={screenWidth}
+                style={styles.svg}
+            >
+                <Defs>
+                    <Mask id="cameraMask">
+                        {/* Fond blanc - zone visible */}
+                        <Rect
+                            x="0"
+                            y="0"
+                            width={screenWidth}
+                            height={screenHeight}
+                            fill="white"
+                        />
+                        {/* Zone noire - zone masquée (transparente) */}
+                        <Rect
+                            x={xMin}
+                            y={yMin}
+                            width={boxWidth}
+                            height={boxHeight}
+                            fill="black"
+                        />
+                    </Mask>
+                </Defs>
+
+                {/* Overlay semi-transparent avec masque */}
+                <Rect
+                    x="0"
+                    y="0"
+                    width={screenWidth}
+                    height={screenHeight}
+                    fill="rgba(0, 0, 0, 0.5)"
+                    mask="url(#cameraMask)"
+                />
+
+                {/* Coins de la zone de capture - arrondis avec animation */}
+                {/* Coin supérieur gauche */}
+                <Path
+                    d={`M ${xMin + 15} ${yMin} Q ${xMin} ${yMin} ${xMin} ${yMin + 15} L ${xMin} ${yMin + 20}`}
+                    stroke={cornerColor}
+                    strokeWidth="8"
+                    fill="none"
+                    opacity={cornerOpacity}
+                />
+                <Path
+                    d={`M ${xMin + 20} ${yMin} L ${xMin + 15} ${yMin}`}
+                    stroke={cornerColor}
+                    strokeWidth="8"
+                    opacity={cornerOpacity}
+                />
+
+                {/* Coin supérieur droit */}
+                <Path
+                    d={`M ${xMax - 15} ${yMin} Q ${xMax} ${yMin} ${xMax} ${yMin + 15} L ${xMax} ${yMin + 20}`}
+                    stroke={cornerColor}
+                    strokeWidth="8"
+                    fill="none"
+                    opacity={cornerOpacity}
+                />
+                <Path
+                    d={`M ${xMax - 20} ${yMin} L ${xMax - 15} ${yMin}`}
+                    stroke={cornerColor}
+                    strokeWidth="8"
+                    opacity={cornerOpacity}
+                />
+
+                {/* Coin inférieur gauche */}
+                <Path
+                    d={`M ${xMin + 15} ${yMax} Q ${xMin} ${yMax} ${xMin} ${yMax - 15} L ${xMin} ${yMax - 20}`}
+                    stroke={cornerColor}
+                    strokeWidth="8"
+                    fill="none"
+                    opacity={cornerOpacity}
+                />
+                <Path
+                    d={`M ${xMin + 20} ${yMax} L ${xMin + 15} ${yMax}`}
+                    stroke={cornerColor}
+                    strokeWidth="8"
+                    opacity={cornerOpacity}
+                />
+
+                {/* Coin inférieur droit */}
+                <Path
+                    d={`M ${xMax - 15} ${yMax} Q ${xMax} ${yMax} ${xMax} ${yMax - 15} L ${xMax} ${yMax - 20}`}
+                    stroke={cornerColor}
+                    strokeWidth="8"
+                    fill="none"
+                    opacity={cornerOpacity}
+                />
+                <Path
+                    d={`M ${xMax - 20} ${yMax} L ${xMax - 15} ${yMax}`}
+                    stroke={cornerColor}
+                    strokeWidth="8"
+                    opacity={cornerOpacity}
+                />
+            </Svg>
+            {isSuccess ? null : (
+                <ScanningLine yMin={yMin} screenWidth={screenWidth} height={screenHeight} yMax={yMax} />
+            )}
+            {/* <ScanningLine yMin={yMin} screenWidth={screenWidth} height={screenHeight} yMax={yMax} /> */}
+
+            <View style={styles.bottomIntruction}>
+                <Text style={styles.bottomTitle}>
+                    {language === "en" ? `Scan the ${stepperProps?.side === 'front' ? 'front' : 'back'} side of your ${stepperProps?.selectedDocumentType}.`:`Scanner de la face ${stepperProps?.side === 'front' ? 'avant' : 'arrière'} de votre ${stepperProps?.selectedDocumentType}.`}
+                  
+                </Text>
+                <Text style={styles.bottomSubtitle}>
+                    {
+                        language === "en" 
+                          ? "Hold your ID card steady and make sure all corners are visible. Do not move your phone while the image is being captured."
+                          : "Maintenez votre carte d'identité stable et assurez-vous que tous les coins sont visibles. Ne déplacez pas votre téléphone pendant la capture."
+                    }
+                    
+                </Text>
+            </View>
+        </View>)
+}
+
+export default IdCardOverlay;
+
+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,
+    },
+    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',
+    },
+    next: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+
+})