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

package/src/components/OverLay/SelfieOverlay.tsx

@@ -1,4 +1,5 @@
-import { Dimensions, Image, StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { Dimensions, StyleSheet, Text, View, Image } from "react-native";
 import { IdCardOverlayProps } from "./type";
 import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
 import ScanningLine from "../Svgs/scanningLine";
@@ -10,80 +11,50 @@ const SelfieOverlay = ({ xMin, yMin, xMax, yMax, cornerOpacity, instructions, co
     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}>
+        <View style={StyleSheet.absoluteFill} pointerEvents="none">
             {stepperProps ? (
                 <StepOverlay {...stepperProps} />
             ) : null}
 
-            <Svg
-                height="100%"
-                width="100%"
-                style={[StyleSheet.absoluteFill]}
-            >
+            <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 */}
+                        <Rect x="0" y="0" width="100%" height="100%" fill="white" />
                         <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"
+                            d="M35.4198 48.9242C38.2153 41.9014 42.5851 30.8232 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)"
-                />
+                <Rect x="0" y="0" width="100%" height="100%" fill="rgba(0, 0, 0, 0.65)" 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,
-            }]}>
+            <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" ? (
+            {/* 🚨 REVERTED TO USE YOUR GIF FILE */}
+            {orientation && orientation !== "center" ? (
                 <View style={[
                     styles.arrowContainer,
                     {
-                        top: iconY + iconHeight / 2 - 50, // Centré verticalement par rapport à l'icône
+                        top: iconY + iconHeight / 2 - 50,
                         left: orientation === "left" ? iconX - 72 : 'auto',
                         right: orientation === "right" ? iconX - 75 : 'auto'
                     }
@@ -93,119 +64,70 @@ const SelfieOverlay = ({ xMin, yMin, xMax, yMax, cornerOpacity, instructions, co
                         resizeMode="contain"
                         style={[
                             styles.arrowImage,
+                            // If the orientation is right, we flip the image horizontally
                             { transform: orientation === "right" ? [{ scaleX: -1 }] : [] }
                         ]}
                     />
                 </View>
             ) : null}
 
-
+            {/* UPGRADED INSTRUCTIONS UI */}
             <View style={styles.bottomIntruction}>
-                <Text style={styles.bottomTitle}>
-                    {instructionsTile}
-                </Text>
-                <Text style={styles.bottomSubtitle}>
-                    {instructionsSubtitle}
-                </Text>
+                <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',
+    bottomIntruction: { 
+        position: 'absolute', 
+        bottom: 50, 
+        left: 0, 
+        right: 0,
+        width: '100%', 
+        paddingHorizontal: 24,
         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',
+    bottomTitle: { 
+        color: '#FFFFFF', 
+        fontSize: 24, 
+        fontWeight: 'bold', 
         textAlign: 'center',
+        textShadowColor: 'rgba(0, 0, 0, 0.8)',
+        textShadowOffset: { width: 0, height: 2 },
+        textShadowRadius: 4,
     },
-    bottomIntruction: {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        width: '100%',
-        height: '35%',
+    bottomSubtitle: { 
+        color: '#FFFFFF', 
+        marginTop: 12, 
+        fontSize: 15, 
+        fontWeight: '600', 
+        textAlign: 'center', 
+        lineHeight: 22,
+        backgroundColor: 'rgba(0,0,0,0.6)', 
+        paddingVertical: 10,
         paddingHorizontal: 20,
+        borderRadius: 20,
+        overflow: 'hidden',
     },
-    bottomIntructionTextBold: {
-        color: 'white',
-        fontSize: 16,
-        fontWeight: 'bold',
-        textAlign: 'center',
+    iconContainer: { 
+        position: 'absolute', 
+        justifyContent: 'center', 
+        alignItems: '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',
+    arrowContainer: { 
+        position: 'absolute', 
+        width: 100, 
+        height: 100, 
+        justifyContent: 'center', 
+        alignItems: 'center' 
     },
     arrowImage: {
-        width: 100,
-        height: 100,
-        objectFit: 'contain',
-    },
-})
+        width: 80,
+        height: 80,
+    }
+});

package/src/components/OverLay/type.ts

@@ -65,6 +65,7 @@ export interface EnhancedCameraViewProps {
     showCaptureButton?: boolean;
     showSwitchCamera?: boolean;
     overlayComponent?: React.ReactNode;
+    isProcessing?: boolean; 
     bbox?: {
         xMin: number;
         yMin: number;

package/src/components/Svgs/scanningLine.tsx

@@ -1,88 +1,87 @@
-import { useEffect, useState } from "react";
-import { StyleSheet } from "react-native";
-import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg"
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet } from 'react-native';
+import Svg, { LinearGradient, Rect, Stop, Defs } from 'react-native-svg';
 
 interface ScanningLineProps {
-    yMin: number,
-    yMax: number
-    screenWidth: number,
-    height: number
+    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);
+const ScanningLine = ({ yMin, yMax, screenWidth, height }: ScanningLineProps): React.ReactElement => {
+    const animatedValue = useRef(new Animated.Value(0)).current;
 
-        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>
+    const boxHeight = yMax - yMin;
 
+    useEffect(() => {
+        const startAnimation = () => {
+            animatedValue.setValue(0);
+            Animated.loop(
+                Animated.timing(animatedValue, {
+                    toValue: 1,
+                    duration: 2500, 
+                    easing: Easing.linear,
+                    useNativeDriver: true,
+                })
+            ).start();
+        };
 
-        <Rect x="0"
-            y={scanLineX.val}
-            width={screenWidth}
-            height="280"
-            rx="0"
-            ry="0"
-            fill="url(#grad-rect)"
+        startAnimation();
+        
+        return () => {
+            animatedValue.stopAnimation();
+        };
+    }, [animatedValue, boxHeight]);
 
-        />
-    </Svg>
+    const translateY = animatedValue.interpolate({
+        inputRange: [0, 0.5, 1],
+        outputRange: [yMin, yMax, yMin], 
+    });
 
-}
+    return (
+        <Animated.View
+            style={[
+                styles.container,
+                {
+                    width: screenWidth,
+                    height: height,
+                    transform: [{ translateY }],
+                },
+            ]}
+            pointerEvents="none"
+        >
+            <Svg height="4" width={screenWidth}>
+                <Defs>
+                    <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
+                        <Stop offset="0%" stopColor="transparent" stopOpacity="0" />
+                        <Stop offset="50%" stopColor="#22C55E" stopOpacity="1" />
+                        <Stop offset="100%" stopColor="transparent" stopOpacity="0" />
+                    </LinearGradient>
+                </Defs>
+                <Rect x="0" y="0" width={screenWidth} height="4" fill="url(#grad)" />
+            </Svg>
+            
+            <Svg height="40" width={screenWidth} style={{ marginTop: -2 }}>
+                 <Defs>
+                    <LinearGradient id="glow" x1="0%" y1="0%" x2="0%" y2="100%">
+                        <Stop offset="0%" stopColor="#22C55E" stopOpacity="0.4" />
+                        <Stop offset="100%" stopColor="#22C55E" stopOpacity="0" />
+                    </LinearGradient>
+                </Defs>
+                <Rect x="0" y="0" width={screenWidth} height="40" fill="url(#glow)" />
+            </Svg>
+        </Animated.View>
+    );
+};
 
 const styles = StyleSheet.create({
-    svg: {
+    container: {
         position: 'absolute',
         top: 0,
         left: 0,
-        width: '100%',
-        height: '100%',
+        zIndex: 10,
     },
-})
+});
 
-export default ScanningLine
+export default ScanningLine;

package/src/config/KYCConfig.ts

@@ -6,7 +6,7 @@ class KYCConfig {
 
     private backendUrls: Record<BackendEnvironment, string> = {
         PRODUCTION: 'https://service.sanctumkey.com/api/v1',
-        TEST: 'https://kyc-backend.transfergratis.net/api/v1', // Placeholder URL
+        TEST: 'https://kyc-backend.SanctumKey.net/api/v1', 
     };
 
     private constructor() { }

package/src/config/allowedDomains.ts

@@ -12,11 +12,11 @@ export interface AllowedDomainConfig {
 // Default configuration - can be overridden via environment variables
 const DEFAULT_CONFIG: AllowedDomainConfig = {
   domains: [
-    'transfergratis.com',
-    'www.transfergratis.com',
-    'admin.transfergratis.com',
-    'dashboard.transfergratis.com',
-    'preweb.transfergratis.net',
+    'SanctumKey.com',
+    'www.SanctumKey.com',
+    'admin.SanctumKey.com',
+    'dashboard.SanctumKey.com',
+    'preweb.SanctumKey.net',
     // Add other trusted domains here
   ],
   enforceHttps: true,
@@ -59,7 +59,7 @@ export const isDomainAllowed = (domain: string): boolean => {
       return true;
     }
 
-    // Subdomain match (e.g., app.transfergratis.com matches transfergratis.com)
+    // Subdomain match (e.g., app.SanctumKey.com matches SanctumKey.com)
     if (domain.endsWith('.' + allowedDomain)) {
       return true;
     }

package/src/hooks/useTemplateKYCFlow.tsx

@@ -671,71 +671,77 @@ export const useTemplateKYCFlow = (
       logger.log('Initializing session');
 
       const token = apiKey ? undefined : await authentification();
-      console.log('token in initializeSession', { token, apiKey },);
+      console.log('token in initializeSession', { token, apiKey });
 
-      // Check if we already have a session ID from URL params (passed via state or prop)
-      let session;
-      const existingSessionId = state.session.session_id; // This might be set from initial props if we add logic for it
+      if (!token && !apiKey) {
+        throw new Error("Cannot proceed: Authentication token and API key are both missing.");
+      }
+
+      let resolvedSessionId = state.session.session_id;
 
-      if (existingSessionId && existingSessionId.length > 0) {
-        logger.log('Resuming existing session:', existingSessionId);
-        // Verify existence/validity if needed, for now trust the ID and just fetch/use it
-        session = { session_id: existingSessionId };
+      if (resolvedSessionId && resolvedSessionId.length > 0) {
+        logger.log('Resuming existing session:', resolvedSessionId);
       } else {
-        session = await kycService.newSession({ token, apiKey });
+        const newSessionRes = await kycService.newSession({ token, apiKey });
+        resolvedSessionId = newSessionRes?.session_id;
+
+        if (!resolvedSessionId) {
+          throw new Error("Backend response did not contain a valid session_id.");
+        }
       }
 
-      // Notify session creation/resume as soon as we have an ID.
-      // This makes save_session webhook calls more reliable on all runtimes.
-      if (onSessionSave && !hasSavedSessionRef.current && session?.session_id) {
+      if (onSessionSave && !hasSavedSessionRef.current && resolvedSessionId) {
         hasSavedSessionRef.current = true;
-        onSessionSave(session.session_id);
+        onSessionSave(resolvedSessionId);
       }
 
-      // Align backend flow from step 0 with initialize_session
-      try {
-        const templateId = chooseTemplateId(templateWithReviewAndVerification);
-        await kycService.verificationSession({
-          session_id: session.session_id,
-          step: 0,
-          data: {
-            template_id: templateId,
-            metadata: {
-              language: initialLanguage,
-              ...(referenceId ? { reference_id: referenceId } : {}),
-            },
+      const templateId = chooseTemplateId(templateWithReviewAndVerification);
+
+      // This is the API call that we know succeeds
+      await kycService.verificationSession({
+        session_id: resolvedSessionId,
+        step: 0,
+        data: {
+          template_id: templateId,
+          metadata: {
+            language: initialLanguage,
+            ...(referenceId ? { reference_id: referenceId } : {}),
           },
-          templateId: templateId,
-          token: token,
-          action: 'initialize_session',
-          apiKey: apiKey,
-        });
-      } catch (e) {
-        logger.error('Error initializing session:', JSON.stringify(e, null, 2));
-        // Non-fatal: we will surface errors via state below if needed
-      }
+        },
+        templateId: templateId,
+        token: token ?? "", 
+        action: 'initialize_session',
+        apiKey: apiKey,
+      });
+
 
       setState(prev => ({
         ...prev,
         session: {
           ...prev.session,
-          session_id: session.session_id,
-          token: token,
+          session_id: resolvedSessionId,
+          token: token ?? "",
           isInitialized: true,
           isProcessing: false,
           error: null,
         }
       }));
-    } catch (error) {
 
-      logger.error('Error initializing session:', JSON.stringify(error, null, 2));
+    } catch (error: any) {
+      // ✅ FIX: Extract the actual message so it doesn't log as {}
+      const errorMessage = error?.response?.data?.message 
+        || error?.message 
+        || "Erreur lors de l'initialisation de la session";
+
+      logger.error('Error initializing sessionnnn:', errorMessage);
+      
       setState(prev => ({
         ...prev,
         session: {
           ...prev.session,
           isInitialized: false,
           isProcessing: false,
-          error: "Erreur lors de l'initialisation de la session",
+          error: errorMessage,
         },
       }));
     }

package/src/i18n/README.md

@@ -1,4 +1,4 @@
-# 🌍 Système d'Internationalisation (i18n) - Transfergratis SDK
+# 🌍 Système d'Internationalisation (i18n) - SanctumKey SDK
 
 Ce système d'internationalisation permet de traduire facilement votre application KYC en plusieurs langues.
 

package/src/index.ts

@@ -1,4 +1,4 @@
-export * from './TransfergratisSdk.types';
+export * from './SanctumKeySdk.types';
 
 
 // Export KYC types
@@ -8,9 +8,9 @@ export * from './types/KYC.types';
 export * from './types/env.types';
 
 
-export { TemplateKYCExample as LaunchTransferGratisKYC } from './components/TemplateKYCExample';
+export { TemplateKYCExample as LaunchSanctumKeyKYC } from './components/TemplateKYCExample';
 // Backward compatibility for existing integrations using the typo.
-export { TemplateKYCExample as LauchTransferGratisKYC } from './components/TemplateKYCExample';
+export { TemplateKYCExample as LauchSanctumKeyKYC } from './components/TemplateKYCExample';
 
 // Export Template Flow Components
 export { TemplateKYCFlow } from './components/TemplateKYCFlowRefactored';