@sanctum-key/react-native-sdk 1.0.18 → 1.0.20

package/src/components/KYCElements/PhoneVerificationTemplate.tsx

@@ -59,14 +59,12 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
     const sendButtonText = t('common.sendCode') || 'Send Verification Code';
     const buttonText = step === 'phone' ? sendButtonText : verifyButtonText;
 
-    // --- AUTO SUBMIT LOGIC ---
     useEffect(() => {
         if (otp.length === CODE_LENGTH && step === 'otp' && !isSimulating) {
             handleVerifyCode();
         }
     }, [otp]);
 
-    // --- SAFE AUTO FOCUS LOGIC ---
     useEffect(() => {
         let focusTimer: ReturnType<typeof setTimeout>;
         if (step === 'otp' && !isSimulating) {

package/src/components/KYCElements/VerificationProgressTemplate.tsx

@@ -22,7 +22,6 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
   const [timeoutId, setTimeoutId] = useState<number | null>(null);
 
   const verification = state.verification;
-
   const isSuccess = verification.status === 'success';
   const isFailed = verification.status === 'failed';
 
@@ -30,38 +29,47 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
   const getVerificationResult = async (currentRetryCount = 0, maxRetries = 40) => {
     try {
       logger.log(`Starting verification check (attempt ${currentRetryCount + 1}/${maxRetries + 1})`);
+      const result: any = await kycService.getVerificationResult(state.session.session_id);
+      
+      logger.log('getVerificationResult raw result:', JSON.stringify(result, null, 2));
+
+      if (result?.status === 'Failed.' || result?.status === 'failed' || result?.status === 'rejected') {
+        actions.setVerificationState({
+          status: 'failed',
+          result: {
+            referenceId: state.session.session_id,
+            issues: [result?.message || 'Verification failed. Sent for manual review.']
+          } as any
+        });
+        setIsRetrying(false);
+        return; // Break out of the function so it DOES NOT RETRY
+      }
 
-      const result = await kycService.getVerificationResult(state.session.session_id);
-      const responseData = (result as any)?.data;
+      // Check standard nested payload format
+      const responseData = result?.data;
       const verificationResult = responseData?.[state.session.session_id]?.data;
 
       if (!verificationResult) {
+        // If we still didn't get data and the status wasn't failed, throw to trigger a retry
         throw new Error('Verification payload missing for current session');
       }
 
-      logger.log('getVerificationResult result', JSON.stringify({result,verificationResult}, null, 2));
-
       // Vérifier le statut de vérification
       if (verificationResult.verification_status === null || verificationResult.verification_status === "processing" || verificationResult.verification_status === "pending") {
         if (currentRetryCount < maxRetries) {
           const nextRetryCount = currentRetryCount + 1;
           setRetryCount(nextRetryCount);
           setIsRetrying(true);
-
           logger.log(`Verification still processing, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
-
-          // Nettoyer le timeout précédent s'il existe
-          if (timeoutId) {
-            clearTimeout(timeoutId);
-          }
-
-          // Attendre 10 secondes avant de relancer
+          
+          if (timeoutId) clearTimeout(timeoutId);
+          
           const newTimeoutId = setTimeout(() => {
             getVerificationResult(nextRetryCount, maxRetries);
           }, 10000);
-
-          setTimeoutId(newTimeoutId);
-          return; // Sortir de la fonction pour éviter de traiter le résultat
+          
+          setTimeoutId(newTimeoutId as any);
+          return; 
         } else {
           logger.error('Max retries reached, verification still processing');
           setIsRetrying(false);
@@ -70,51 +78,39 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
       }
 
       // Traiter le résultat final (success, failed, etc.)
-      if (verificationResult.verification_status === "completed" ||
-        verificationResult.verification_status === "approved") {
-        // Mettre à jour l'état avec le succès
+      if (verificationResult.verification_status === "completed" || verificationResult.verification_status === "approved") {
         actions.setVerificationState({
           status: 'success',
           result: result
         });
-      } else if (verificationResult.verification_status === "failed" ||
-        verificationResult.verification_status === "rejected") {
-        // Mettre à jour l'état avec l'échec
+      } else if (verificationResult.verification_status === "failed" || verificationResult.verification_status === "rejected") {
         actions.setVerificationState({
           status: 'failed',
           result: {
-            referenceId: verificationResult.verification_id,
-            issues: ['Verification failed']
+            referenceId: verificationResult.verification_id || state.session.session_id,
+            issues: ['Verification failed during processing.']
           } as any
         });
       }
-
+      
       setIsRetrying(false);
 
     } catch (error: any) {
-      logger.error(
-        'getVerificationResult error',
-        JSON.stringify(errorMessage(error) || { message: error?.message || 'Unknown error' }, null, 2)
-      );
-
-      // En cas d'erreur, on peut aussi retry
+      logger.error('getVerificationResult error', JSON.stringify(errorMessage(error) || { message: error?.message || 'Unknown error' }, null, 2));
+      
       if (currentRetryCount < maxRetries) {
         const nextRetryCount = currentRetryCount + 1;
         setRetryCount(nextRetryCount);
         setIsRetrying(true);
-
         logger.log(`getVerificationResult Error occurred, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
-
-        // Nettoyer le timeout précédent s'il existe
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-
+        
+        if (timeoutId) clearTimeout(timeoutId);
+        
         const newTimeoutId = setTimeout(() => {
           getVerificationResult(nextRetryCount, maxRetries);
         }, 10000);
-
-        setTimeoutId(newTimeoutId);
+        
+        setTimeoutId(newTimeoutId as any);
       } else {
         setIsRetrying(false);
         logger.error('Max retries reached after errors');
@@ -128,12 +124,9 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
     }
   }, [state.session.session_id]);
 
-  // Nettoyage des timeouts lors du démontage du composant
   useEffect(() => {
     return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
+      if (timeoutId) clearTimeout(timeoutId);
     };
   }, [timeoutId]);
 
@@ -156,19 +149,27 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
     return (
       <View style={styles.container}>
         <Text style={styles.title}>{t('kyc.verificationProgress.status.failed')}</Text>
-        <Text style={styles.subtitle}>{t('errors.validationError')}</Text>
+        
         <View style={styles.issuesBox}>
           <Text style={styles.issuesTitle}>{t('common.error')}</Text>
           {Array.isArray(verification.result?.issues) && verification.result.issues.map((issue: string, idx: number) => (
             <Text key={idx} style={styles.issueItem}>• {issue}</Text>
           ))}
         </View>
-        <TouchableOpacity style={[styles.button, styles.primary]} onPress={() => actions.resetTemplate()}>
-          <Text style={styles.buttonText}>{t('kyc.verificationProgress.status.retry')}</Text>
+
+        {/* 🚨 FIX 2: Give the user actionable options to End or Restart */}
+        <TouchableOpacity style={[styles.button, styles.primary]} onPress={() => actions.submitVerification()}>
+          <Text style={styles.buttonText}>
+            {state.currentLanguage === 'en' ? 'OK / Finish' : 'Terminer'}
+          </Text>
         </TouchableOpacity>
-        <TouchableOpacity style={[styles.button, styles.secondary]}>
-          <Text style={styles.secondaryText}>{t('common.info')}</Text>
+        
+        <TouchableOpacity style={[styles.button, styles.secondary]} onPress={() => actions.resetTemplate()}>
+          <Text style={styles.secondaryText}>
+            {state.currentLanguage === 'en' ? 'Start Over' : 'Recommencer'}
+          </Text>
         </TouchableOpacity>
+
         {verification.result?.referenceId ? (
           <Text style={styles.refText}>{`Reference ID: ${verification.result.referenceId}`}</Text>
         ) : null}
@@ -176,12 +177,6 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
     );
   }
 
-
-
-
-
-
-
   return (
     <View style={styles.container}>
       <Text style={styles.title}>{t('kyc.verificationProgress.title')}</Text>
@@ -191,7 +186,6 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
           : t('kyc.verificationProgress.estimatedTime')
         }
       </Text>
-
       <View style={styles.timeline}>
         <View style={[styles.dot, styles.done]}><Text style={styles.stepCheckmark}>✓</Text></View>
         <View style={styles.line} />
@@ -199,13 +193,11 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
         <View style={styles.line} />
         <View style={[styles.dot, styles.pending]}><Text style={styles.stepCheckmark}>3</Text></View>
       </View>
-
       <View style={styles.row}>
         <Text style={styles.stepLabel}>{t('kyc.verificationProgress.status.completed')}</Text>
         <Text style={styles.stepLabel}>{t('kyc.verificationProgress.steps.analyzing')}</Text>
         <Text style={styles.stepLabel}>{t('kyc.verificationProgress.steps.verifying')}</Text>
       </View>
-
       <View style={styles.card}>
         <Text style={styles.cardTitle}>{t('kyc.idCardCapture.title')}</Text>
         <Text style={styles.cardLine}>{t('kyc.verificationProgress.steps.extracting')}</Text>
@@ -239,17 +231,13 @@ const styles = StyleSheet.create({
   card: { backgroundColor: 'white', padding: 16, borderRadius: 16, marginTop: 24 },
   cardTitle: { fontSize: 16, color: '#6B7280', marginTop: 8 },
   cardLine: { fontSize: 18, color: '#111827', fontWeight: '600', marginTop: 2 },
-  // Success/Failure specific
-  button: { paddingVertical: 14, borderRadius: 10, alignItems: 'center', marginTop: 20 },
+  button: { paddingVertical: 14, borderRadius: 10, alignItems: 'center', marginTop: 14 },
   primary: { backgroundColor: '#2DBD60' },
   buttonText: { color: 'white', fontSize: 16, fontWeight: '600' },
   refText: { marginTop: 12, textAlign: 'center', color: '#6B7280' },
   issuesBox: { backgroundColor: '#FEF2F2', borderRadius: 16, padding: 16, marginTop: 20 },
   issuesTitle: { color: '#991B1B', fontWeight: '700', marginBottom: 8 },
   issueItem: { color: '#991B1B', marginTop: 4 },
-  secondary: { backgroundColor: '#F3F4F6' },
-  secondaryText: { color: '#111827', fontSize: 16, fontWeight: '600' },
-});
-
-
-
+  secondary: { backgroundColor: '#F3F4F6', borderWidth: 1, borderColor: '#D1D5DB' },
+  secondaryText: { color: '#374151', fontSize: 16, fontWeight: '600' },
+});

package/src/components/OverLay/IdCard.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
     Animated,
-    Dimensions,
     Platform,
     SafeAreaView,
     StatusBar,
     StyleSheet,
     Text,
     View,
+    useWindowDimensions,
 } from 'react-native';
 import Svg, {
     Defs,
@@ -22,44 +22,41 @@ import ScanningLine from '../Svgs/scanningLine';
 import StepOverlay from './StepOverlay';
 import { IdCardOverlayProps } from './type';
 
-const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
-
 const IdCardOverlay = ({
     cornerOpacity,
     instructions,
     stepperProps,
     isSuccess,
     language = 'en',
-    // Note: xMinPercent, yMinPercent, etc. are intentionally ignored below 
-    // to force a mathematically perfect ID card aspect ratio.
-}: IdCardOverlayProps) => {
+    xMin: xMinPercent = 5,
+    xMax: xMaxPercent = 95,
+    yMin: yMinPercent = 34,
+    yMax: yMaxPercent = 66,
+}: IdCardOverlayProps & { xMin?: number, xMax?: number, yMin?: number, yMax?: number }) => {
     const AnimatedG = Animated.createAnimatedComponent(G);
-
-    // --- 🚨 GEOMETRY FIX: Perfect ID Card Ratio ---
-    // Standard ISO ID-1 ratio is 1.586 (85.6mm / 53.98mm)
-    const ID_ASPECT_RATIO = 1.586;
     
-    // Set width to 85% of the screen, and calculate perfect height
-    const boxWidth = screenWidth * 0.85;
-    const boxHeight = boxWidth / ID_ASPECT_RATIO;
+    // 1. Get baseline window dimensions (fallback for Native mobile)
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    
+    // 2. Track actual container dimensions (Crucial for Web Modals where window != container)
+    const [container, setContainer] = useState({ width: windowWidth, height: windowHeight });
 
-    // Center horizontally
-    const xMin = (screenWidth - boxWidth) / 2;
-    const xMax = xMin + boxWidth;
+    // 3. Convert parent percentages to exact pixels within the container
+    const xMin = (container.width * xMinPercent) / 100;
+    const xMax = (container.width * xMaxPercent) / 100;
+    const yMin = (container.height * yMinPercent) / 100;
+    const yMax = (container.height * yMaxPercent) / 100;
 
-    // Center vertically (shifted slightly up for better holding ergonomics)
-    const yMin = (screenHeight - boxHeight) * 0.42; 
-    const yMax = yMin + boxHeight;
+    const boxWidth = xMax - xMin;
+    const boxHeight = yMax - yMin;
 
     // --- Clean, Professional Copy Formatting ---
     const formatDocType = (type?: string) => {
         if (!type) return 'document';
-        // e.g., "identity_card" -> "identity card"
         return type.replace(/_/g, ' ').toLowerCase();
     };
 
     const getSideText = (side?: string) => {
-        // Using "recto/verso" for French as it is much more professional for documents
         if (side === 'front') return language === 'en' ? 'front' : 'recto';
         return language === 'en' ? 'back' : 'verso';
     };
@@ -80,19 +77,34 @@ const IdCardOverlay = ({
         : 'Pas de reflets  •  Coins visibles  •  Maintenez stable';
 
     // --- SVG Constants ---
-    const CORNER_SIZE = 40; 
+    const CORNER_SIZE = 40;
     const STROKE_WIDTH = 4;
-    const BORDER_RADIUS = 16; // Reduced slightly for a tighter, more realistic card feel
+    const BORDER_RADIUS = 16; 
+
+    // Safety check to prevent SVG NaN errors during initial render
+    if (container.width === 0 || container.height === 0 || boxWidth <= 0) {
+        return <View style={StyleSheet.absoluteFill} />;
+    }
 
     return (
-        <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+        <View 
+            style={StyleSheet.absoluteFill} 
+            pointerEvents="box-none"
+            onLayout={(e) => {
+                // Update container dimensions only if they change to prevent loops
+                const { width, height } = e.nativeEvent.layout;
+                if (width !== container.width || height !== container.height) {
+                    setContainer({ width, height });
+                }
+            }}
+        >
             <StatusBar translucent backgroundColor="transparent" barStyle="light-content" />
-            
+
             {/* SVG Overlay */}
-            <Svg width={screenWidth} height={screenHeight} style={styles.svg}>
+            <Svg width={container.width} height={container.height} style={styles.svg}>
                 <Defs>
                     <Mask id="cameraMask">
-                        <Rect x="0" y="0" width={screenWidth} height={screenHeight} fill="white" />
+                        <Rect x="0" y="0" width={container.width} height={container.height} fill="white" />
                         {/* Transparent Cutout */}
                         <Rect
                             x={xMin}
@@ -109,10 +121,10 @@ const IdCardOverlay = ({
                         <Stop offset="100%" stopColor="#22C55E" />
                     </LinearGradient>
                 </Defs>
-                
+
                 {/* Dim background */}
-                <Rect x="0" y="0" width={screenWidth} height={screenHeight} fill="rgba(0,0,0,0.85)" mask="url(#cameraMask)" />
-                
+                <Rect x="0" y="0" width={container.width} height={container.height} fill="rgba(0,0,0,0.85)" mask="url(#cameraMask)" />
+
                 {/* Main Card Border */}
                 <Rect
                     x={xMin}
@@ -121,11 +133,11 @@ const IdCardOverlay = ({
                     height={boxHeight}
                     rx={BORDER_RADIUS}
                     ry={BORDER_RADIUS}
-                    stroke="rgba(255,255,255,0.25)" // Subtle inner frame
-                    strokeWidth={1.5}
+                    stroke={isSuccess ? '#2DBD60' : "rgba(255,255,255,0.25)"}
+                    strokeWidth={isSuccess ? 3 : 1.5}
                     fill="transparent"
                 />
-                
+
                 {/* Professional Corner Guides */}
                 <AnimatedG opacity={cornerOpacity || 1}>
                     {/* Top Left */}
@@ -165,7 +177,7 @@ const IdCardOverlay = ({
 
             {/* Scanning animation */}
             {!isSuccess && (
-                <ScanningLine yMin={yMin} yMax={yMax} screenWidth={screenWidth} height={screenHeight} />
+                <ScanningLine yMin={yMin} yMax={yMax} screenWidth={container.width} height={container.height} />
             )}
 
             {/* Top UI Zone */}
@@ -187,7 +199,7 @@ const IdCardOverlay = ({
             </View>
 
             {/* Bottom UI Zone */}
-            <View style={[styles.bottomZone, { top: yMax + 30 }]} pointerEvents="box-none">
+            <View style={[styles.bottomZone, { top: yMax + 20 }]} pointerEvents="box-none">
                 <Text style={styles.bottomTitle}>{bottomTitle}</Text>
                 <Text style={styles.bottomSubtitle}>{bottomSubtitle}</Text>
                 <View style={styles.helperPill}>

package/src/config/countriesData.ts

@@ -1,9 +1,5 @@
 import { Country } from "../types/KYC.types";
 
-
-
-
-
 export const countryData: Record<string, Country> = {
     FR: { name: 'France', name_en: "France", flag: '🇫🇷' },
     CM: { name: 'Cameroun', name_en: "Cameroon", flag: '🇨🇲' },

package/src/hooks/useTemplateKYCFlow.tsx

@@ -698,21 +698,21 @@ export const useTemplateKYCFlow = (
       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 } : {}),
-          },
+     await kycService.verificationSession({
+      session_id: resolvedSessionId,
+      step: 0,
+      data: {
+        template_id: templateId,
+        ...(referenceId ? { reference_id: referenceId } : {}),
+        metadata: {
+          language: initialLanguage,
         },
-        templateId: templateId,
-        token: token ?? "", 
-        action: 'initialize_session',
-        apiKey: apiKey,
-      });
+      },
+      templateId: templateId,
+      token: token ?? "",
+      action: 'initialize_session',
+      apiKey: apiKey,
+    });
 
 
       setState(prev => ({