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

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/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/modules/api/CardAuthentification.ts

@@ -249,7 +249,6 @@ export async function backVerification(
             points = cardData[0];
             isCardInFrame = true;
             hasCroppedSides = false;
-            // 🚨 ARTIFICIAL CHECK REMOVED HERE
         }
 
         if (!isCardInFrame || hasCroppedSides) {

package/src/modules/api/KYCService.ts

@@ -296,7 +296,6 @@ export class KYCService {
     const { fileUri, docType, docRegion, token, postfix } = params;
     const formData = new FormData();
     
-    // ✅ FIX: Dynamically assign the postfix to the filename
     await appendFileToFormData(formData, 'file', fileUri, `id_card_${postfix}.jpg`, 'image/jpeg');
 
     const docTypeShorted = GovernmentDocumentTypeShorted[docType as GovernmentDocumentType];
@@ -412,24 +411,14 @@ export class KYCService {
        card_obb: { x: 50, y: 50, width: 200, height: 200 }
      };
    }
-
    const { fileUri, docType, docRegion, postfix = 'back', token, template_path, mrz_type } = params;
    
-   // 1. Build the FormData ONLY for the file
-   const formData = new FormData();
-   const filePayload = {
-     uri: fileUri, 
-     type: 'image/jpeg',
-     name: `id_card_${postfix}.jpg`,
-   };
-   formData.append('file', filePayload as any);
-
+   // ... top of extractMrzText (params extraction, etc) ...
    const docTypeShorted = GovernmentDocumentTypeShorted[docType as GovernmentDocumentType] || docType;
    const safeMrzType = mrz_type && mrz_type.trim() !== '' ? mrz_type : 'TD1';
    
    logger.log("docTypeShorted", docTypeShorted, docRegion, postfix);
 
-   // 🚨 THE FIX: Pass all required text parameters in the URL query string for FastAPI
    const queryParams = new URLSearchParams({
        doc_type: docTypeShorted,
        doc_region: docRegion,
@@ -443,14 +432,52 @@ export class KYCService {
    logger.log("url", url);
 
    try {
-     const response = await fetch(url, {
-       method: 'POST',
-       headers: { 
-           'Authorization': `Bearer ${token}`,
-           'Accept': 'application/json'
-        },
-       body: formData, // Only the file goes in the body
-     });
+     let response;
+
+     if (Platform.OS === 'web') {
+         // 🚨 THE FIX: Completely bypass React Native Web's networking polyfills.
+         // We explicitly grab the browser's native APIs so the bundler cannot interfere.
+         const nativeFetch = window.fetch;
+         const NativeFormData = window.FormData;
+
+         const formData = new NativeFormData();
+         
+         // Fetch the Blob natively
+         const fileReq = await nativeFetch(fileUri);
+         const blob = await fileReq.blob();
+         
+         // Append the Blob. The native browser will perfectly handle the multipart boundary.
+         formData.append('file', blob, `id_card_${postfix}.jpg`);
+
+         // Execute using Native Fetch!
+         response = await nativeFetch(url, {
+             method: 'POST',
+             headers: { 
+                 'Authorization': `Bearer ${token}`,
+                 'Accept': 'application/json'
+             },
+             body: formData,
+         });
+
+     } else {
+         // 📱 MOBILE NATIVE: React Native's Native Bridge expects this exact object
+         const formData = new FormData();
+         const filePayload = {
+             uri: fileUri, 
+             type: 'image/jpeg',
+             name: `id_card_${postfix}.jpg`,
+         };
+         formData.append('file', filePayload as any);
+
+         response = await fetch(url, {
+             method: 'POST',
+             headers: { 
+                 'Authorization': `Bearer ${token}`,
+                 'Accept': 'application/json'
+             },
+             body: formData,
+         });
+     }
 
      if (!response.ok) {
          const errorText = await response.text();
@@ -458,19 +485,11 @@ export class KYCService {
          throw new Error(`Erreur serveur: ${response.status}`);
      }
 
-    //  const data = await response.json();
-    //  logger.log('extractMrzText res', JSON.stringify(data, null, 2));
-
-    //  if (Object.keys(data).length === 0) throw new Error('No data found');
-    //  if (data?.success === false) throw new Error(data.parsed_data?.status || 'Échec de l\'extraction MRZ');
-
-    //  return data;
-    const data = await response.json();
+     const data = await response.json();
      logger.log('extractMrzText res', JSON.stringify(data, null, 2));
 
      if (Object.keys(data).length === 0) throw new Error('No data found');
      
-     // 🚨 UPDATE THIS LINE to grab the actual status_message:
      if (data?.success === false) {
          const serverMessage = data.parsed_data?.status_message || data.parsed_data?.status || 'Échec de l\'extraction MRZ';
          throw new Error(`Lecture MRZ refusée: ${serverMessage}`);