@sanctum-key/react-native-sdk 1.0.0

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;

package/src/components/Svgs/Schield.tsx

@@ -0,0 +1,26 @@
+import { Svg, Path, G, Filter, Defs, FeColorMatrix, FeOffset, FeGaussianBlur, FeComposite, FeBlend } from "react-native-svg";
+
+const ShieldIcon = () => {
+    return (
+        <Svg width="36" height="36" viewBox="0 0 29 36" fill="none">
+            <G filter="url(#filter0_d_4964_44)">
+                <Path d="M24.0375 2.86663C23.8923 2.74133 23.7226 2.65233 23.5409 2.60618C23.3592 2.56003 23.1701 2.55791 22.9875 2.59996C21.6518 2.89856 20.2729 2.90236 18.9358 2.61114C17.5987 2.31992 16.3316 1.73985 15.2125 0.906631C15.0033 0.751794 14.7547 0.668823 14.5 0.668823C14.2453 0.668823 13.9968 0.751794 13.7875 0.906631C12.6685 1.73985 11.4014 2.31992 10.0642 2.61114C8.72708 2.90236 7.34821 2.89856 6.01251 2.59996C5.82993 2.55791 5.64084 2.56003 5.45913 2.60618C5.27743 2.65233 5.10773 2.74133 4.96251 2.86663C4.81748 2.99212 4.70066 3.15068 4.62062 3.33065C4.54059 3.51062 4.49937 3.70744 4.50001 3.90663V13.84C4.4989 15.7516 4.92597 17.6359 5.74568 19.3359C6.56538 21.0359 7.75398 22.5024 9.21251 23.6133L13.775 27.08C13.9867 27.2407 14.2401 27.3271 14.5 27.3271C14.7599 27.3271 15.0133 27.2407 15.225 27.08L19.7875 23.6133C21.246 22.5024 22.4346 21.0359 23.2543 19.3359C24.074 17.6359 24.5011 15.7516 24.5 13.84V3.90663C24.5006 3.70744 24.4594 3.51062 24.3794 3.33065C24.2994 3.15068 24.1825 2.99212 24.0375 2.86663ZM22 13.84C22.001 15.3263 21.6691 16.7914 21.0321 18.1133C20.395 19.4352 19.4712 20.5758 18.3375 21.44L14.5 24.36L10.6625 21.44C9.5288 20.5758 8.60499 19.4352 7.96794 18.1133C7.3309 16.7914 6.99905 15.3263 7.00001 13.84V5.43996C9.62054 5.67921 12.2451 5.03066 14.5 3.58663C16.755 5.03066 19.3795 5.67921 22 5.43996V13.84Z" fill="white" />
+            </G>
+            <Defs>
+                <Filter id="filter0_d_4964_44" x="0.5" y="0.668823" width="28" height="34.6583" filterUnits="userSpaceOnUse">
+                    {/* <FeFlood flood-opacity="0" result="BackgroundImageFix" /> */}
+                    <FeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <FeOffset dy="4" />
+                    <FeGaussianBlur stdDeviation="2" />
+                    <FeComposite in2="hardAlpha" operator="out" />
+                    <FeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+                    <FeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4964_44" />
+                    <FeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4964_44" result="shape" />
+                </Filter>
+            </Defs>
+        </Svg>
+
+    )
+}
+
+export default ShieldIcon;

package/src/components/Svgs/frontSelfieIcon.tsx

@@ -0,0 +1,13 @@
+import Svg, { Path } from "react-native-svg"
+
+const FrontSelfieIcon = () => {
+    return <Svg width="240" height="285" viewBox="0 0 240 285" fill="none">
+        <Path fill-rule="evenodd" clip-rule="evenodd" 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" stroke="#2DBE60" strokeWidth="2" />
+        <Path fill-rule="evenodd" clip-rule="evenodd" d="M230.689 128.956C235.531 138.98 234.491 163.862 226.181 178.777C223.182 184.16 218.047 188.814 210.775 192.738L210.514 192.743C216.838 170.205 220 148.457 220 127.5L219.995 125.802V125.802L220 125.795L220.249 125.664V125.664L220.518 125.535C220.612 125.493 220.708 125.451 220.808 125.41L221.116 125.291C221.169 125.272 221.223 125.253 221.277 125.234L221.61 125.127C224.335 124.301 228.483 124.388 230.689 128.956Z" stroke="#2DBE60" strokeWidth="2" />
+        <Path fill-rule="evenodd" clip-rule="evenodd" d="M9.3184 128.956C4.47645 138.98 5.51723 163.862 13.8267 178.777C16.8259 184.16 21.9613 188.814 29.2329 192.738L29.4941 192.743C23.1697 170.205 20.0075 148.457 20.0075 127.5L20.0133 125.802V125.802L20.0075 125.795L19.7591 125.664V125.664L19.4893 125.535C19.396 125.493 19.2994 125.451 19.1997 125.41L18.8916 125.291C18.8387 125.272 18.7852 125.253 18.731 125.234L18.398 125.127C15.6723 124.301 11.5253 124.388 9.3184 128.956Z" stroke="#2DBE60" strokeWidth="2" />
+        <Path d="M120 33.5V251.5" stroke="#F6F7F8" strokeWidth="2" stroke-dasharray="3 2" />
+    </Svg>
+
+}
+
+export default FrontSelfieIcon

package/src/components/Svgs/scanningLine.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useState } from "react";
+import { StyleSheet } from "react-native";
+import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg"
+
+interface ScanningLineProps {
+    yMin: number,
+    yMax: number
+    screenWidth: number,
+    height: number
+}
+const ScanningLine = ({ yMin, screenWidth, height, yMax }: ScanningLineProps) => {
+
+    const [scanLineX, setScanLineX] = useState<{
+        val: number,
+        direction: 'up' | 'down'
+    }>({
+        val: yMin - (40 + 280),
+        direction: 'down'
+    });
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setScanLineX(prev => {
+
+                const newX = prev.val + (prev.direction === 'up' ? -1 : 1) * Math.round(Math.random() * 2); // Vitesse de déplacement horizontal 
+                if (prev.direction === "down") {
+                    if (newX > yMax - (280 - 40)) {
+                        return { val: yMax + (40), direction: 'up' }
+                    } else {
+                        return { val: newX, direction: 'down' }
+                    }
+                } else {
+                    if (newX < yMin - (40)) {
+                        return { val: yMin - (40 + 280), direction: 'down' }
+                    } else {
+                        return { val: newX, direction: 'up' }
+                    }
+                }
+
+            });
+        }, 2);
+
+        return () => clearInterval(interval);
+    }, []);
+
+   
+
+    return <Svg width={screenWidth} height={height} style={styles.svg}>
+        <Defs>
+            <LinearGradient id="grad-rect" x1="0%"
+                y1={scanLineX.direction === 'up' ? "100%" : "0%"} x2="0%"
+                y2={scanLineX.direction === 'up' ? "0%" : "100%"}>
+                <Stop offset="30%" stopColor="#2DBD60" stopOpacity="0" />
+                <Stop offset="40%" stopColor="#2DBD60" stopOpacity="0" />
+                <Stop offset="50%" stopColor="#2DBD60" stopOpacity="0" />
+                <Stop offset="60%" stopColor="#2DBD60" stopOpacity="0" />
+                <Stop offset="70%" stopColor="#2DBD60" stopOpacity="0.02" />
+                <Stop offset="88%" stopColor="#2DBD60" stopOpacity="0.09" />
+                <Stop offset="90%" stopColor="#2DBD60" stopOpacity="0.42" />
+                <Stop offset="100%" stopColor="#2DBD60" stopOpacity="1" />
+            </LinearGradient>
+        </Defs>
+
+
+        <Rect x="0"
+            y={scanLineX.val}
+            width={screenWidth}
+            height="280"
+            rx="0"
+            ry="0"
+            fill="url(#grad-rect)"
+
+        />
+    </Svg>
+
+}
+
+const styles = StyleSheet.create({
+    svg: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+    },
+})
+
+export default ScanningLine

package/src/components/Svgs/sideSelfieIcon.tsx

@@ -0,0 +1,10 @@
+import Svg, { Path } from "react-native-svg"
+
+const SideSelfieIcon = () => {
+    return <Svg width="240" height="285" viewBox="0 0 240 285" fill="none">
+        <Path fill-rule="evenodd" clip-rule="evenodd" 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" stroke="#4CAF50" strokeWidth="4" />
+        <Path d="M120 33.5V251.5" stroke="#4CAF50" strokeWidth="4" stroke-dasharray="3 2" />
+    </Svg>
+}
+
+export default SideSelfieIcon

package/src/components/TemplateKYCExample.tsx

@@ -0,0 +1,194 @@
+import React from 'react';
+import { View, SafeAreaView } from 'react-native';
+import { TemplateKYCFlow } from './TemplateKYCFlowRefactored';
+import { KYCTemplate, VerificationState } from '../types/KYC.types';
+import { KycEnvironment, BackendEnvironment } from '../types/env.types';
+
+
+
+
+const advancedVerificationTemplate: KYCTemplate = {
+  id: 1,
+  name: {
+    en: "Advanced Verification",
+    fr: "Vérification Avancée"
+  },
+  description: {
+    en: "Extended identity verification flow",
+    fr: "Processus de vérification d'identité étendu"
+  },
+  version: "1.1.0",
+  components: [
+    {
+      id: 5,
+      type: "location" as const,
+      order: 1,
+      labels: {
+        en: "Enable your location",
+        fr: "Activez votre localisation"
+      },
+      instructions: {
+        en: "We need your GPS location for compliance purposes.",
+        fr: "Nous avons besoin de votre localisation GPS pour des raisons réglementaires."
+      },
+      ui: {
+        icon: "location-icon.png",
+        themeColor: "#2DBD60",
+        buttonText: { en: "Enable Location", fr: "Activer la localisation" }
+      },
+      config: {
+        accuracy: "high",
+        required: true
+      } as const
+    },
+    {
+      id: 6,
+      type: "country_selection" as const,
+      order: 2,
+      labels: {
+        en: "Select your country",
+        fr: "Sélectionnez votre pays"
+      },
+      instructions: {
+        en: "Choose your country of residence.",
+        fr: "Choisissez votre pays de résidence."
+      },
+      ui: {
+        icon: "country-icon.png",
+        themeColor: "#2DBD60",
+        buttonText: { en: "Confirm", fr: "Confirmer" }
+      },
+      config: {
+        allowed_countries: ["CM", "NG", "CI", "KE", "GH"],
+        default_country: "CM",
+        required: true
+      } as const
+    },
+    {
+      id: 1,
+      type: "id_card" as const,
+      order: 3,
+      templateId: 1,
+      labels: {
+        front: {
+          en: "Upload front of ID card",
+          fr: "Téléversez le recto de votre carte d'identité"
+        },
+        back: {
+          en: "Upload back of ID card",
+          fr: "Téléversez le verso de votre carte d'identité"
+        },
+      },
+      instructions: {
+        front: {
+          en: "Take a clear photo of the front of your ID.",
+          fr: "Prenez une photo nette du recto de votre pièce."
+        },
+        back: {
+          en: "Take a clear photo of the back of your ID.",
+          fr: "Prenez une photo nette du verso de votre pièce."
+        },
+      },
+      ui: {
+        front: {
+          icon: "id-card-icon.png",
+          themeColor: "#2DBD60",
+          buttonText: { en: "Next", fr: "Suivant" }
+        },
+        back: {
+          icon: "id-card-icon.png",
+          themeColor: "#2DBD60",
+          buttonText: { en: "Next", fr: "Suivant" }
+        },
+      },
+      config: {
+        sides: ["front", "back"],
+        allowed_formats: ["jpg", "png"],
+        max_size_mb: 5,
+        document_types: ["drivers_licence", "passport", "drivers_licence", "national_id"],
+
+      } as const
+    },
+    {
+      id: 3,
+      type: "selfie" as const,
+      order: 5,
+      templateId: 1,
+      labels: {
+        en: "Take selfies from different angles",
+        fr: "Prenez des selfies sous différents angles"
+      },
+      instructions: {
+        en: "Take selfies from front, left, and right angles.",
+        fr: "Prenez des selfies de face, profil gauche et profil droit."
+      },
+      ui: {
+        icon: "selfie-icon.png",
+        themeColor: "#2DBD60",
+        buttonText: { en: "Next", fr: "Suivant" }
+      },
+      config: {
+        liveness_check: true,
+        max_attempts: 3,
+        orientations: ["center", "left", "right"]
+      } as const
+    },
+  ]
+};
+
+export const TemplateKYCExample: React.FC<{
+  onComplete: (data: VerificationState) => void;
+  onCancel: () => void;
+  onError: (error: string) => void;
+  language: string;
+  API_KEY?: string;
+  templateId?: string;
+  template?: KYCTemplate;
+  env?: KycEnvironment;           // Flow execution: PRODUCTION (full AI) or SANDBOX (skip AI)
+  serverEnv?: BackendEnvironment; // Backend to call: PRODUCTION or TEST (API URL)
+  existingSessionId?: string;
+  initialComponentIndex?: number;
+  initialCountryResume?: { code: string; documentType: string; region?: string };
+}> = ({ onComplete, onCancel, onError, language, API_KEY, templateId, template, env = 'PRODUCTION', serverEnv, existingSessionId, initialComponentIndex, initialCountryResume }) => {
+  const handleComplete = (data: VerificationState) => {
+    console.log('KYC Template completed with data:', data);
+    onComplete(data);
+    // Ici vous pouvez envoyer les données à votre API
+  };
+
+  const handleCancel = () => {
+    console.log('KYC Template flow cancelled');
+    onCancel();
+  };
+
+  const handleError = (error: string) => {
+    console.error('KYC Template error:', error);
+    onError(error);
+  };
+
+  // Transform backend template to SDK format
+  // Determine which template to use: prefer templateId for dynamic loading, then template prop, then fallback to hardcoded
+  const templateToUse = templateId ? undefined : (template || advancedVerificationTemplate);
+
+  return (
+    <SafeAreaView style={{ flex: 1, paddingVertical: 25 }}>
+      <View style={{ flex: 1 }}>
+        <TemplateKYCFlow
+          template={templateToUse}
+          templateId={templateId}
+          onComplete={handleComplete}
+          onError={handleError}
+          onCancel={handleCancel}
+          language={language} // ou "en" pour l'anglais
+          API_KEY={API_KEY}
+          env={env}
+          serverEnv={serverEnv}
+          existingSessionId={existingSessionId}
+          initialComponentIndex={initialComponentIndex}
+          initialCountryResume={initialCountryResume}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+