@sanctum-key/react-native-sdk 1.0.49 → 1.0.51

package/src/components/KYCElements/DocumentTypeSelection.tsx

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
 import { KYCElement, KYCElementOption } from '../../types/KYC.types';
+import { sdkLogger } from '../../utils/logger'; // 🚨 IMPORT SDK LOGGER
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow'; // 🚨 IMPORT CONTEXT
 
 interface DocumentTypeSelectionProps {
   element: KYCElement;
@@ -10,30 +12,10 @@ interface DocumentTypeSelectionProps {
 }
 
 const defaultDocumentTypes: KYCElementOption[] = [
-  { 
-    value: 'passport', 
-    label: 'Passeport', 
-    icon: '📘',
-    description: 'Document de voyage officiel'
-  },
-  { 
-    value: 'id_card', 
-    label: 'Carte d\'identité', 
-    icon: '🆔',
-    description: 'Carte d\'identité nationale'
-  },
-  { 
-    value: 'drivers_license', 
-    label: 'Permis de conduire', 
-    icon: '🚗',
-    description: 'Permis de conduire valide'
-  },
-  { 
-    value: 'other', 
-    label: 'Autre document', 
-    icon: '📄',
-    description: 'Autre document d\'identité officiel'
-  },
+  { value: 'passport', label: 'Passeport', icon: '📘', description: 'Document de voyage officiel' },
+  { value: 'id_card', label: 'Carte d\'identité', icon: '🆔', description: 'Carte d\'identité nationale' },
+  { value: 'drivers_license', label: 'Permis de conduire', icon: '🚗', description: 'Permis de conduire valide' },
+  { value: 'other', label: 'Autre document', icon: '📄', description: 'Autre document d\'identité officiel' },
 ];
 
 export const DocumentTypeSelection: React.FC<DocumentTypeSelectionProps> = ({
@@ -43,12 +25,19 @@ export const DocumentTypeSelection: React.FC<DocumentTypeSelectionProps> = ({
   error,
 }) => {
   const documentTypes = element.options || defaultDocumentTypes;
+  const { state } = useTemplateKYCFlowContext();
+
+  useEffect(() => {
+    if (state.session?.session_id) {
+      sdkLogger.info("User started standalone document type selection step");
+    }
+  }, [state.session?.session_id]);
 
   return (
     <View style={styles.container}>
       <Text style={styles.title}>{element.title}</Text>
       <Text style={styles.description}>{element.description}</Text>
-      
+
       <ScrollView style={styles.optionsContainer} showsVerticalScrollIndicator={false}>
         {documentTypes.map((docType) => (
           <TouchableOpacity
@@ -57,7 +46,10 @@ export const DocumentTypeSelection: React.FC<DocumentTypeSelectionProps> = ({
               styles.option,
               value === docType.value && styles.selectedOption
             ]}
-            onPress={() => onValueChange(docType.value)}
+            onPress={() => {
+              sdkLogger.info("User selected document type", { documentType: docType.value }); // 🚨 LOG
+              onValueChange(docType.value);
+            }}
           >
             <Text style={styles.optionIcon}>{docType.icon}</Text>
             <View style={styles.optionContent}>
@@ -88,86 +80,18 @@ export const DocumentTypeSelection: React.FC<DocumentTypeSelectionProps> = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 16,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#333',
-    marginBottom: 8,
-    textAlign: 'center',
-  },
-  description: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 24,
-    lineHeight: 22,
-  },
-  optionsContainer: {
-    flex: 1,
-  },
-  option: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-    backgroundColor: 'white',
-    borderRadius: 12,
-    marginBottom: 12,
-    borderWidth: 2,
-    borderColor: '#e5e5e5',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 3.84,
-    elevation: 5,
-  },
-  selectedOption: {
-    borderColor: '#4CAF50',
-    backgroundColor: '#f0f9f0',
-  },
-  optionIcon: {
-    fontSize: 32,
-    marginRight: 16,
-  },
-  optionContent: {
-    flex: 1,
-  },
-  optionLabel: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#333',
-  },
-  selectedOptionLabel: {
-    color: '#4CAF50',
-  },
-  optionDescription: {
-    fontSize: 14,
-    color: '#666',
-    marginTop: 4,
-  },
-  checkmark: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: '#4CAF50',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  checkmarkText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  errorText: {
-    color: '#dc2626',
-    fontSize: 14,
-    marginTop: 8,
-    textAlign: 'center',
-  },
-}); 
+  container: { flex: 1, padding: 16, },
+  title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, textAlign: 'center', },
+  description: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22, },
+  optionsContainer: { flex: 1, },
+  option: { flexDirection: 'row', alignItems: 'center', padding: 16, backgroundColor: 'white', borderRadius: 12, marginBottom: 12, borderWidth: 2, borderColor: '#e5e5e5', shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.1, shadowRadius: 3.84, elevation: 5, },
+  selectedOption: { borderColor: '#4CAF50', backgroundColor: '#f0f9f0', },
+  optionIcon: { fontSize: 32, marginRight: 16, },
+  optionContent: { flex: 1, },
+  optionLabel: { fontSize: 18, fontWeight: '600', color: '#333', },
+  selectedOptionLabel: { color: '#4CAF50', },
+  optionDescription: { fontSize: 14, color: '#666', marginTop: 4, },
+  checkmark: { width: 24, height: 24, borderRadius: 12, backgroundColor: '#4CAF50', justifyContent: 'center', alignItems: 'center', },
+  checkmarkText: { color: 'white', fontSize: 16, fontWeight: 'bold', },
+  errorText: { color: '#dc2626', fontSize: 14, marginTop: 8, textAlign: 'center', },
+});

package/src/components/KYCElements/IDCardCapture.tsx

@@ -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: Record<string, string> = {
   'KE': 'Kenya', 'CM': 'Cameroon', 'NG': 'Nigeria', 'CA': 'Canada', 
@@ -95,8 +96,15 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   const scannedBarcodeRef = useRef<string | null>(null);
   const [generatedCode, setGeneratedCode] = useState<string | null>(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();
 
 
@@ -216,51 +224,37 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   }, [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();
       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') {
+        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
+        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.',
+          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() 
-            }
+            { 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
+    } catch (error: any) {
+      sdkLogger.error('Failed to request native camera permission', { error: error?.message }); // 🚨 LOG
       setShowCamera(true);
       refreshCamera();
       actions.showCustomStepper(false);
@@ -268,7 +262,10 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   };
 
   const cameraConfig = useMemo(() => {
-    let instructions = selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions as Record<string, LocalizedText>);
+    let instructions = selectedDocumentType 
+      ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) 
+      : getLocalizedText(component.instructions as Record<string, LocalizedText>);
+    
     if (scanPhase === 'barcode') instructions = '';
     
     const isLandscape = screenWidth > screenHeight;
@@ -276,22 +273,38 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     
     if (Platform.OS === 'web') {
       const boxWidthPercent = isLandscape ? 0.40 : 0.85;
-      xMin = isLandscape ? 30 : 7.5;
+      xMin = isLandscape ? 30 : 7.5; 
       xMax = xMin + (boxWidthPercent * 100);
       const containerWidth = Math.min(screenWidth * 0.95, 1000);
       const containerHeight = isLandscape ? screenHeight * 0.80 : screenHeight * 0.90;
       const boxPixelWidth = containerWidth * boxWidthPercent;
       const boxPixelHeight = boxPixelWidth / 1.59;
       const heightPercent = (boxPixelHeight / containerHeight) * 100;
-      yMin = (100 - heightPercent) / 2.5;
+      yMin = (100 - heightPercent) / 2.5; 
       yMax = yMin + heightPercent;
     } else {
-      xMin = 5; xMax = 95; yMin = 34; yMax = 66;
+      // 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' as const, 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' as const, 
+      overlay: { guideText: instructions, bbox: platformBbox } 
+    };
   }, [selectedDocumentType, locale, component.instructions, cameraType, screenWidth, screenHeight, scanPhase]);
 
+
   const retakePicture = (sideToRetake: 'front' | 'back') => {
     setIsProcessingCapture(false); setProcessingImagePath(null); scannedBarcodeRef.current = null;
     setScanPhase('image'); setPendingCAImage(null);
@@ -357,11 +370,31 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     
     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 };
-      
-      try {
-        imagePathForUpload = await cropImageWithBBoxWithTolerance(safeCapturePath, uiCropBbox, 0.06);
+        const overlayBbox = cameraConfig.overlay.bbox;
+        
+        // 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 {
+          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);
         imagePathForUpload = safeCapturePath;
@@ -369,7 +402,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       
       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,
@@ -377,6 +410,9 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       };
       
       setCapturedImages(newImages);
+
+      sdkLogger.info(`User successfully captured ${side} document`);
+
       if (verified.country && verified.documentType) {
         const docType = verified.documentType as string;
         const resolvedDocumentType = GovernmentDocumentTypeBackend[docType] || (Object.values(GovernmentDocumentTypeBackend).includes(docType as GovernmentDocumentType) ? docType : null) || Object.entries(GovernmentDocumentTypeBackend).find(([, v]) => v === docType)?.[1] || docType;
@@ -391,6 +427,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       }, 600);
       
     } catch (e: any) {
+      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 }));
@@ -536,6 +573,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
           }
         }
 
+        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: any;
@@ -574,7 +612,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
             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');
@@ -602,6 +640,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
           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: '' }));
@@ -713,6 +752,8 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     if (errString.includes('notreadableerror') || errString.includes('trackstarterror') || errString.includes('in use') || errString.includes('concurrent') || errString.includes('camera unavailable')) { friendlyMessage = state.currentLanguage === 'en' ? 'Camera is in use by another app.' : 'Caméra utilisée par une autre application.'; }
     else if (errString.includes('notallowederror') || errString.includes('permission')) { friendlyMessage = state.currentLanguage === 'en' ? 'Allow camera access in settings.' : 'Autorisez l\'accès à la caméra.'; }
     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);
   };
@@ -886,8 +927,21 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                   <Button title={t('kyc.idCardCapture.retakeButton')} onPress={() => retakePicture(currentSide)} variant="outline" size="medium" fullWidth />
                   <Button title={t('common.next')} onPress={() => {
                     if (!selectedDocumentType) { showAlert('Error', 'Document type not selected'); return; }
-                    if (currentSide === 'back' || selectedDocumentType.type === 'passport') { actions.nextComponent(); } else { setShowCamera(true); refreshCamera(); setCurrentSide('back'); setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '', templatePath: undefined }); setIsProcessingCapture(false); setProcessingImagePath(null); setScanPhase('image'); setPendingCAImage(null); }
-                  }} variant="primary" size="large" fullWidth />
+                    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'); 
+                        setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '', templatePath: undefined }); setIsProcessingCapture(false); setProcessingImagePath(null); setScanPhase('image'); setPendingCAImage(null); 
+                      }
+                  }} 
+                  variant="primary" size="large" fullWidth />
                 </>
               )}
             </View>

package/src/components/KYCElements/InitializationStep.tsx

@@ -3,21 +3,36 @@ import { SessionState } from "../../types/KYC.types"
 import { useEffect } from "react"
 import { useTemplateKYCFlowContext } from "../../hooks/useTemplateKYCFlow"
 import { useI18n } from "../../hooks/useI18n"
+import { sdkLogger } from "../../utils/logger" // 🚨 IMPORT SDK LOGGER
 
 export const InitializationStep = ({ session }: { session: SessionState }) => {
     const { t } = useI18n();
     const { initializeSession } = useTemplateKYCFlowContext()
+
     useEffect(() => {
+        sdkLogger.info("Started KYC session initialization");
         initializeSession()
     }, [])
 
-
+    useEffect(() => {
+        if (session.error) {
+            sdkLogger.error("Session initialization failed", { 
+                error: session.error 
+            });
+        }
+    }, [session.error]);
 
     if (session.error) {
         return (
             <View style={styles.container}>
                 <Text style={styles.errorText}>{t('errors.serverError')}</Text>
-                <Button title={t('common.retry')} onPress={initializeSession} />
+                <Button 
+                    title={t('common.retry')} 
+                    onPress={() => {
+                        sdkLogger.info("User requested session initialization retry"); // 🚨 LOG
+                        initializeSession();
+                    }} 
+                />
             </View>
         )
     }