@sanctum-key/react-native-sdk 1.0.48 → 1.0.50

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

@@ -18,6 +18,7 @@ import { cropImageWithBBoxWithTolerance } from '../../utils/cropByObb';
 import kycService, { authentification, clearAuthToken } from '../../modules/api/KYCService';
 import { Linking } from 'react-native';
 import { Camera } from 'react-native-vision-camera';
+import { sdkLogger } from '../../utils/logger';
 const ISO_TO_COUNTRY_NAME = {
     'KE': 'Kenya', 'CM': 'Cameroon', 'NG': 'Nigeria', 'CA': 'Canada',
     'FR': 'France', 'GH': 'Ghana', 'ZA': 'South Africa', 'GB': 'Britain',
@@ -73,6 +74,11 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
     const [generatedCode, setGeneratedCode] = useState(null);
     const [isGeneratingCode, setIsGeneratingCode] = useState(false);
     const { actions, state, env, apiKey } = useTemplateKYCFlowContext();
+    useEffect(() => {
+        if (state.session?.session_id) {
+            sdkLogger.info("User started ID document verification step", { side: currentSide });
+        }
+    }, [state.session?.session_id, currentSide]);
     const { width: screenWidth, height: screenHeight } = useWindowDimensions();
     const countrySelectionData = useMemo(() => {
         const countrySelectionComponent = state.template.components.find(c => c.type === 'country_selection');
@@ -192,7 +198,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
         }
     }, [value, currentSide]);
     const handleStartCamera = async () => {
-        // Web browsers handle permissions natively when the media stream is requested
+        sdkLogger.info(`Requesting camera start for ${currentSide} document verification`, { os: Platform.OS }); // 🚨 LOG
         if (Platform.OS === 'web') {
             setShowCamera(true);
             refreshCamera();
@@ -200,45 +206,36 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             return;
         }
         try {
-            // 1. Get current status
             let status = await Camera.getCameraPermissionStatus();
-            // 2. If it's anything other than granted, request it
             if (status !== 'granted') {
+                sdkLogger.info(`Camera permission not granted yet, requesting...`);
                 status = await Camera.requestCameraPermission();
             }
-            // 3. Check final status
             if (status === 'granted') {
-                // Permission given, start camera
+                sdkLogger.info(`Camera permission granted. Mounting 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()
-                    }
+                sdkLogger.warn(`Camera permission denied by user.`);
+                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
+            sdkLogger.error('Failed to request native camera permission', { error: error?.message }); // 🚨 LOG
             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);
+        let instructions = selectedDocumentType
+            ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr)
+            : getLocalizedText(component.instructions);
         if (scanPhase === 'barcode')
             instructions = '';
         const isLandscape = screenWidth > screenHeight;
@@ -256,13 +253,23 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             yMax = yMin + heightPercent;
         }
         else {
+            // Standard Horizontal Frame (Width: 90%, Height: 32%)
             xMin = 5;
             xMax = 95;
             yMin = 34;
             yMax = 66;
         }
-        const platformBbox = { xMin, yMin, xMax, yMax, borderColor: scanPhase === 'barcode' ? '#EAB308' : '#2DBD60', borderWidth: Platform.OS === 'web' ? 2 : 3, cornerRadius: 8 };
-        return { cameraType: Platform.OS === 'web' ? cameraType : 'back', flashMode: 'auto', overlay: { guideText: instructions, bbox: platformBbox } };
+        const platformBbox = {
+            xMin, yMin, xMax, yMax,
+            borderColor: scanPhase === 'barcode' ? '#EAB308' : '#2DBD60',
+            borderWidth: Platform.OS === 'web' ? 2 : 3,
+            cornerRadius: 8
+        };
+        return {
+            cameraType: Platform.OS === 'web' ? cameraType : 'back',
+            flashMode: 'auto',
+            overlay: { guideText: instructions, bbox: platformBbox }
+        };
     }, [selectedDocumentType, locale, component.instructions, cameraType, screenWidth, screenHeight, scanPhase]);
     const retakePicture = (sideToRetake) => {
         setIsProcessingCapture(false);
@@ -341,9 +348,25 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
         try {
             let imagePathForUpload = capturePath;
             const overlayBbox = cameraConfig.overlay.bbox;
-            const uiCropBbox = { minX: overlayBbox.xMin / 100, minY: overlayBbox.yMin / 100, width: (overlayBbox.xMax - overlayBbox.xMin) / 100, height: (overlayBbox.yMax - overlayBbox.yMin) / 100 };
+            // 1. Default: Crop based on the landscape UI box
+            let uiCropBbox = {
+                minX: overlayBbox.xMin / 100,
+                minY: overlayBbox.yMin / 100,
+                width: (overlayBbox.xMax - overlayBbox.xMin) / 100,
+                height: (overlayBbox.yMax - overlayBbox.yMin) / 100
+            };
             try {
-                imagePathForUpload = await cropImageWithBBoxWithTolerance(safeCapturePath, uiCropBbox, 0.06);
+                const isSpecificPortrait = verified.templatePath && verified.templatePath.includes('cameroon_id_front_1_1_new');
+                if (isSpecificPortrait) {
+                    uiCropBbox = {
+                        minX: 0.15,
+                        minY: 0.15,
+                        width: 0.70,
+                        height: 0.70
+                    };
+                }
+                const cropTolerance = isSpecificPortrait ? 0.15 : 0.06;
+                imagePathForUpload = await cropImageWithBBoxWithTolerance(safeCapturePath, uiCropBbox, cropTolerance);
             }
             catch (e) {
                 console.warn("Crop failed, falling back to original image", e);
@@ -351,12 +374,13 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             }
             const safeCroppedPath = (Platform.OS === 'ios' && !imagePathForUpload.startsWith('file://')) ? `file://${imagePathForUpload}` : imagePathForUpload;
             const base64 = await pathToBase64(safeCroppedPath);
-            const side = currentSideRef.current; // Grab live ref
+            const side = currentSideRef.current;
             const newImages = {
                 ...capturedImagesRef.current,
                 [side]: { dir: safeCroppedPath, file: base64, mrz: verified.mrz || "", templatePath: verified.templatePath },
             };
             setCapturedImages(newImages);
+            sdkLogger.info(`User successfully captured ${side} document`);
             if (verified.country && verified.documentType) {
                 const docType = verified.documentType;
                 const resolvedDocumentType = GovernmentDocumentTypeBackend[docType] || (Object.values(GovernmentDocumentTypeBackend).includes(docType) ? docType : null) || Object.entries(GovernmentDocumentTypeBackend).find(([, v]) => v === docType)?.[1] || docType;
@@ -373,6 +397,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             }, 600);
         }
         catch (e) {
+            sdkLogger.error(`Auto-capture formatting/saving failed`, { error: e.message });
             const friendlyError = state.currentLanguage === 'en' ? 'Unable to process document. Please try again.' : 'Impossible de traiter le document. Veuillez réessayer.';
             showAlert('Error', friendlyError);
             setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false }));
@@ -519,6 +544,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                         catch { }
                     }
                 }
+                sdkLogger.info(`Template check passed for ${side}`, { templatePath });
                 const extractedCountryKey = templatePath ? templatePath.split('/')[0] : (ISO_TO_COUNTRY_NAME[cData?.code || ''] || 'root');
                 const regionMappings = getCurrentSideVerification(side, extractedCountryKey, cData);
                 let verificationRes;
@@ -556,6 +582,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                         await autoCapture(safeCapturePath, verifiedResult);
                         return;
                     }
+                    sdkLogger.info(`Verification passed. Waiting for barcode scan phase.`); // 🚨 LOG
                     clearTimeout(watchdog);
                     setPendingCAImage({ path: safeCapturePath, templateResponse, templatePath, bbox });
                     setScanPhase('barcode');
@@ -579,6 +606,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                     rawMessage.includes('unauthorized') ||
                     rawMessage.includes('token') ||
                     rawMessage.includes('unauthenticated')) {
+                    sdkLogger.error(`Secure API Session Expired during AI extraction`);
                     setShowCamera(false);
                     setIsProcessingCapture(false);
                     setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: '' }));
@@ -674,6 +702,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
         else if (errString.includes('notfounderror') || errString.includes('no camera')) {
             friendlyMessage = state.currentLanguage === 'en' ? 'No camera detected.' : 'Aucune caméra détectée.';
         }
+        sdkLogger.error("Hardware Camera Error encountered", { ...event, friendlyMessage }); // 🚨 LOG
         showAlert(state.currentLanguage === 'en' ? 'Camera Error' : 'Erreur', friendlyMessage);
         setShowCamera(false);
         setIsProcessingCapture(false);
@@ -813,9 +842,13 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                     return;
                 }
                 if (currentSide === 'back' || selectedDocumentType.type === 'passport') {
+                    sdkLogger.info("User submitting document captures and advancing to next step", {
+                        documentType: selectedDocumentType.type
+                    });
                     actions.nextComponent();
                 }
                 else {
+                    sdkLogger.info("User finished front verification, proceeding to back");
                     setShowCamera(true);
                     refreshCamera();
                     setCurrentSide('back');