@transfergratis/react-native-sdk 0.1.2

package/src/components/OverLay/SelfieOverlay.tsx

@@ -0,0 +1,210 @@
+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 }: 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)"
+                />
+                <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 === "front" ? <FrontSelfieIcon /> : <SideSelfieIcon />}
+            </View>
+
+            {/* Flèche directionnelle pour les orientations latérales */}
+            {orientation !== "front" ? (
+                <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,62 @@
+import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
+
+interface StepOverlayProps {
+    back: () => void;
+    selectedDocumentType: string;
+    step: number;
+    totalSteps: number;
+}
+const StepOverlay = ({ back, selectedDocumentType, step, totalSteps }: StepOverlayProps) => {
+    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}>Step {step} of {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,21 @@
+export interface IdCardOverlayProps {
+    xMin: number;
+    yMin: number;
+    xMax: number;
+    yMax: number;
+    cornerOpacity: number;
+    instructions: string;
+    cornerColor?: string;
+    stepperProps?: StepperProps;
+    instructionsTile?: string;
+    instructionsSubtitle?: string;
+    orientation?: 'front' | 'left' | 'right';
+}
+
+
+interface StepperProps {
+    back: () => void;
+    selectedDocumentType: string;
+    step: number;
+    totalSteps: 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',
+  },
+}); 

package/src/components/SimpleExample.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+export const SimpleExample: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.card}>
+        <Text style={styles.title}>
+          Test React Native StyleSheet
+        </Text>
+        
+        <Text style={styles.subtitle}>
+          Ce composant utilise StyleSheet de React Native
+        </Text>
+        
+        <View style={styles.buttonContainer}>
+          <TouchableOpacity style={[styles.button, styles.primaryButton]}>
+            <Text style={styles.buttonText}>
+              Bouton Principal
+            </Text>
+          </TouchableOpacity>
+          
+          <TouchableOpacity style={[styles.button, styles.successButton]}>
+            <Text style={styles.buttonText}>
+              Bouton Succès
+            </Text>
+          </TouchableOpacity>
+          
+          <TouchableOpacity style={[styles.button, styles.errorButton]}>
+            <Text style={styles.buttonText}>
+              Bouton Erreur
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+    padding: 16,
+  },
+  card: {
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 24,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 16,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 24,
+  },
+  buttonContainer: {
+    gap: 16,
+  },
+  button: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 8,
+  },
+  primaryButton: {
+    backgroundColor: '#4CAF50',
+  },
+  successButton: {
+    backgroundColor: '#2196F3',
+  },
+  errorButton: {
+    backgroundColor: '#F44336',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+}); 

package/src/components/Svgs/GpsIcon.tsx

@@ -0,0 +1,12 @@
+import { Svg, Path } from "react-native-svg";
+
+const GpsIcon = () => {
+    return (
+        <Svg width="19" height="19" viewBox="0 0 19 19" fill="none">
+            <Path d="M16.25 8.25C16.25 13.5 9.5 18 9.5 18C9.5 18 2.75 13.5 2.75 8.25C2.75 6.45979 3.46116 4.7429 4.72703 3.47703C5.9929 2.21116 7.70979 1.5 9.5 1.5C11.2902 1.5 13.0071 2.21116 14.273 3.47703C15.5388 4.7429 16.25 6.45979 16.25 8.25Z" stroke="#22C55E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <Path d="M9.5 10.5C10.7426 10.5 11.75 9.49264 11.75 8.25C11.75 7.00736 10.7426 6 9.5 6C8.25736 6 7.25 7.00736 7.25 8.25C7.25 9.49264 8.25736 10.5 9.5 10.5Z" stroke="#22C55E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </Svg>
+    )
+}
+
+export default GpsIcon;