@sanctum-key/react-native-sdk 1.0.41 → 1.0.44

package/build/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sanctum-key/react-native-sdk",
-    "version": "1.0.41",
+    "version": "1.0.44",
     "description": "Sanctum Key React Native SDK",
     "main": "build/src/index.js",
     "types": "build/src/index.d.ts",

package/build/src/components/KYCElements/IDCardCapture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IDCardCapture.d.ts","sourceRoot":"","sources":["../../../../src/components/KYCElements/IDCardCapture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAIpE,OAAO,EAAE,iBAAiB,EAAoI,MAAM,uBAAuB,CAAC;AAqB5L,UAAU,cAAc;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IACvC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAkCD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8vBtD,CAAC"}
+{"version":3,"file":"IDCardCapture.d.ts","sourceRoot":"","sources":["../../../../src/components/KYCElements/IDCardCapture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAIpE,OAAO,EAAE,iBAAiB,EAAoI,MAAM,uBAAuB,CAAC;AAuB5L,UAAU,cAAc;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IACvC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAkCD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAo2BtD,CAAC"}

package/build/src/components/KYCElements/IDCardCapture.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity, useWindowDimensions } from 'react-native';
+import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity, useWindowDimensions, Alert } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { GovernmentDocumentTypeShorted, GovernmentDocumentTypeBackend } from '../../types/KYC.types';
@@ -15,7 +15,9 @@ import { cropByObb, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from '../../uti
 import REGION_MAPPING from '../../config/region_mapping.json';
 import QRCode from 'react-native-qrcode-svg';
 import { cropImageWithBBoxWithTolerance } from '../../utils/cropByObb';
-import kycService, { authentification } from '../../modules/api/KYCService';
+import kycService, { authentification, clearAuthToken } from '../../modules/api/KYCService';
+import { Linking } from 'react-native';
+import { Camera } from 'react-native-vision-camera';
 const ISO_TO_COUNTRY_NAME = {
     'KE': 'Kenya', 'CM': 'Cameroon', 'NG': 'Nigeria', 'CA': 'Canada',
     'FR': 'France', 'GH': 'Ghana', 'ZA': 'South Africa', 'GB': 'Britain',
@@ -189,6 +191,52 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             }
         }
     }, [value, currentSide]);
+    const handleStartCamera = async () => {
+        // Web browsers handle permissions natively when the media stream is requested
+        if (Platform.OS === 'web') {
+            setShowCamera(true);
+            refreshCamera();
+            actions.showCustomStepper(false);
+            return;
+        }
+        try {
+            // 1. Get current status
+            let status = await Camera.getCameraPermissionStatus();
+            // 2. If it's anything other than granted, request it
+            if (status !== 'granted') {
+                status = await Camera.requestCameraPermission();
+            }
+            // 3. Check final status
+            if (status === 'granted') {
+                // Permission given, start camera
+                setShowCamera(true);
+                refreshCamera();
+                actions.showCustomStepper(false);
+            }
+            else {
+                // Permission permanently denied or restricted
+                Alert.alert(state.currentLanguage === 'en' ? 'Camera Access Required' : 'Accès à la caméra requis', state.currentLanguage === 'en'
+                    ? 'We need camera access to scan your ID. Please tap "Settings" to enable it.'
+                    : 'Nous avons besoin de l\'accès à la caméra pour scanner votre pièce d\'identité. Veuillez appuyer sur "Paramètres" pour l\'activer.', [
+                    {
+                        text: state.currentLanguage === 'en' ? 'Cancel' : 'Annuler',
+                        style: 'cancel'
+                    },
+                    {
+                        text: state.currentLanguage === 'en' ? 'Settings' : 'Paramètres',
+                        onPress: () => Linking.openSettings()
+                    }
+                ]);
+            }
+        }
+        catch (error) {
+            console.warn('Failed to request camera permission', error);
+            // Fallback
+            setShowCamera(true);
+            refreshCamera();
+            actions.showCustomStepper(false);
+        }
+    };
     const cameraConfig = useMemo(() => {
         let instructions = selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions);
         if (scanPhase === 'barcode')
@@ -397,6 +445,31 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: 'Failed to process barcode. Please retake the photo.' }));
         }
     };
+    const handleExitKYCFlow = () => {
+        clearAuthToken();
+        // 2. Clear all local camera/capture states
+        setCapturedImages({});
+        if (onValueChange)
+            onValueChange({}); // Clear the parent's form state
+        setCurrentSide('front');
+        setScanPhase('image');
+        setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '' });
+        scannedBarcodeRef.current = null;
+        setPendingCAImage(null);
+        setIsProcessingCapture(false);
+        setProcessingImagePath(null);
+        // 3. Restart the flow
+        if (actions.resetTemplate) {
+            // This is the best method: it wipes the context and rebuilds the initial state
+            actions.resetTemplate();
+        }
+        else if (actions.goToComponent && state.template?.components?.length > 0) {
+            actions.goToComponent(state.template.components[0].id);
+        }
+        else {
+            console.warn("Could not restart flow. Check your KYC context actions.");
+        }
+    };
     const handleSilentCapture = async (result) => {
         if (isProcessingCaptureRef.current)
             return;
@@ -404,7 +477,6 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             return;
         if (isAnalyzingRef.current)
             return;
-        // USE REFS TO AVOID IOS NATIVE STALE CLOSURE
         const side = currentSideRef.current;
         const captured = capturedImagesRef.current;
         const docType = selectedDocTypeRef.current;
@@ -497,40 +569,51 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             }
             catch (error) {
                 clearTimeout(watchdog);
-                const rawMessage = (error?.message || '').toLowerCase();
+                const rawMessage = (typeof error === 'string' ? error : (error?.message || '')).toLowerCase();
+                const statusCode = error?.response?.status || error?.status;
+                if (statusCode === 401 ||
+                    statusCode === 403 ||
+                    rawMessage.includes('401') ||
+                    rawMessage.includes('unauthorized') ||
+                    rawMessage.includes('token') ||
+                    rawMessage.includes('unauthenticated')) {
+                    setShowCamera(false);
+                    setIsProcessingCapture(false);
+                    setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: '' }));
+                    // Use React Native's native Alert to wait for the user's tap
+                    Alert.alert(state.currentLanguage === 'en' ? 'Session Expired' : 'Session Expirée', state.currentLanguage === 'en'
+                        ? 'Your secure session has expired. Please restart the process.'
+                        : 'Votre session sécurisée a expiré. Veuillez recommencer.', [
+                        {
+                            text: state.currentLanguage === 'en' ? 'Restart' : 'Recommencer',
+                            onPress: () => handleExitKYCFlow() // Redirects ONLY when they click the button
+                        }
+                    ], { cancelable: false } // Forces them to click the button
+                    );
+                    return;
+                }
                 let hintMessage = '';
+                // 2. Business Logic Errors
                 if (rawMessage.includes('pays sélectionné') || rawMessage.includes('country mismatch')) {
-                    hintMessage = state.currentLanguage === 'en'
-                        ? 'Does not match the selected country.'
-                        : 'Ne correspond pas au pays sélectionné.';
+                    hintMessage = state.currentLanguage === 'en' ? 'Does not match the selected country.' : 'Ne correspond pas au pays sélectionné.';
                 }
                 else if (rawMessage.includes('impossible') || rawMessage.includes('unreadable')) {
-                    hintMessage = state.currentLanguage === 'en'
-                        ? 'Move to better lighting.'
-                        : 'Améliorez l\'éclairage.';
+                    hintMessage = state.currentLanguage === 'en' ? 'Move to better lighting and ensure card is in frame.' : 'Améliorez l\'éclairage et assurez-vous que la carte est bien cadrée.';
                 }
                 else if (rawMessage.includes('card_not_fully_in_frame') || rawMessage.includes('frame')) {
-                    hintMessage = state.currentLanguage === 'en'
-                        ? 'Move closer to the document.'
-                        : 'Rapprochez-vous du document.';
+                    hintMessage = state.currentLanguage === 'en' ? 'Move closer to the document.' : 'Rapprochez-vous du document.';
                 }
                 else if (rawMessage.includes('ne correspond pas au recto')) {
-                    hintMessage = state.currentLanguage === 'en'
-                        ? 'Please scan the same ID.'
-                        : 'Veuillez scanner la même pièce.';
+                    hintMessage = state.currentLanguage === 'en' ? 'Please scan the same ID.' : 'Veuillez scanner la même pièce.';
                 }
-                // 2. If it's not a known logical error, assume it's a network/API failure
+                // 3. Fallback to Network/API failure
                 else {
                     const isNetworkError = error.isAxiosError || error.message === 'Network Error' || error.code === 'ECONNABORTED' || rawMessage.includes('network') || !error.response;
                     if (isNetworkError) {
-                        hintMessage = state.currentLanguage === 'en'
-                            ? 'Poor connection. Retrying...'
-                            : 'Connexion faible. Nouvelle tentative...';
+                        hintMessage = state.currentLanguage === 'en' ? 'Poor connection. Retrying...' : 'Connexion faible. Nouvelle tentative...';
                     }
                     else {
-                        hintMessage = state.currentLanguage === 'en'
-                            ? 'Analyzing...' // Generic fallback if an unknown API error occurs
-                            : 'Analyse en cours...';
+                        hintMessage = state.currentLanguage === 'en' ? 'Analyzing...' : 'Analyse en cours...';
                     }
                 }
                 setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: hintMessage }));
@@ -684,7 +767,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                       </View>
                       <Button title={state.currentLanguage === "en" ? "Continue on Phone" : "Continuer sur le téléphone"} onPress={() => setShowQRModal(true)} variant="primary" size="large" fullWidth/>
                     </>) : (<>
-                      <Button title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"} onPress={() => { setShowCamera(true); refreshCamera(); actions.showCustomStepper(false); }} variant="primary" size="large" fullWidth/>
+                    <Button title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"} onPress={handleStartCamera} variant="primary" size="large" fullWidth/>
                       {Platform.OS === 'web' && (<Button title={state.currentLanguage === "en" ? "Continue on Phone" : "Continuer sur le téléphone"} onPress={() => setShowQRModal(true)} variant="outline" size="large" fullWidth/>)}
                     </>)}
                 </View>)}