@sanctum-key/react-native-sdk 1.0.14 → 1.0.16

package/src/components/EnhancedCameraView.tsx

@@ -1,34 +1,201 @@
+// import React, { useCallback, useEffect, useRef, useState } from 'react';
+// import { View, StyleSheet, Text, AppState } from 'react-native';
+// import { Camera, useCameraDevice, useCameraFormat } from 'react-native-vision-camera'; 
+// import VisionCameraModule from '../modules/camera/VisionCameraModule';
+// import { useI18n } from '../hooks/useI18n';
+// import { EnhancedCameraViewProps } from './OverLay/type';
+// import { Button } from './ui/Button';
+
+// export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
+//   showCamera,
+//   cameraType: initialCameraType = 'front',
+//   style,
+//   onError,
+//   onSilentCapture,
+//   silentCaptureResult,
+//   isProcessing = false,
+//   overlayComponent,
+// }) => {
+//   const { t } = useI18n();
+//   const camera = useRef<Camera>(null);
+
+//   const isCapturingRef = useRef(false);
+//   const isProcessingRef = useRef(isProcessing);
+
+//   const [cameraType] = useState<'front' | 'back'>(initialCameraType);
+//   const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+//   const [isInitialized, setIsInitialized] = useState(false);
+//   const [refreshCamera, setRefreshCamera] = useState(false);
+//   const [layout, setLayout] = useState({ width: 0, height: 0 });
+
+
+//   const device = useCameraDevice(cameraType, {
+//     physicalDevices: [
+//       'wide-angle-camera' // Explicitly request standard 1x lens
+//     ]
+//   });
+
+//   const targetRatio = layout.width > 0 ? layout.height / layout.width : 16 / 9;
+
+//   const format = useCameraFormat(device, [
+//     { photoAspectRatio: targetRatio },
+//     { photoResolution: 'max' } 
+//   ]);
+
+//   useEffect(() => {
+//     isProcessingRef.current = isProcessing;
+//   }, [isProcessing]);
+
+//   const checkPermissions = async () => {
+//     try {
+//       const hasAllPermissions = await VisionCameraModule.hasAllPermissions();
+//       if (!hasAllPermissions) {
+//         const granted = await VisionCameraModule.requestAllPermissions();
+//         if (!granted) {
+//           setHasPermission(false);
+//           onError?.({ message: t('camera.permissionRequired') });
+//           return;
+//         }
+//       }
+//       setHasPermission(true);
+//     } catch (error) {
+//       setHasPermission(false);
+//       onError?.({ message: t('camera.errorOccurred') });
+//     }
+//   };
+
+//   useEffect(() => {
+//     if (showCamera) checkPermissions();
+//   }, [showCamera, refreshCamera]);
+
+//   useEffect(() => {
+//     const subscription = AppState.addEventListener('change', nextAppState => {
+//       if (nextAppState === 'active' && showCamera && hasPermission === false) {
+//         checkPermissions();
+//       }
+//     });
+//     return () => subscription.remove();
+//   }, [showCamera, hasPermission]);
+
+//   const onInitialized = useCallback(() => setIsInitialized(true), []);
+//   const onCameraError = useCallback((error: any) => {
+//     onError?.({ message: error.message || t('camera.errorOccurred') });
+//   }, [onError, t]);
+
+//   const captureSilentPhoto = useCallback(async () => {
+//     if (!camera.current || !isInitialized || isProcessingRef.current || isCapturingRef.current) return;
+//     if (silentCaptureResult?.isAnalyzing) return;
+
+//     try {
+//       isCapturingRef.current = true;
+//       const photo = await camera.current.takePhoto({
+//         enableShutterSound: false,
+//         flash: 'off',
+//       });
+//       const result = await VisionCameraModule.processPhotoResult(photo);
+
+//       onSilentCapture?.({
+//         ...result,
+//         path: result.path || photo.path,
+//       });
+//     } catch (error) {
+//       // Silent background fail
+//     } finally {
+//       isCapturingRef.current = false;
+//     }
+//   }, [isInitialized, onSilentCapture, silentCaptureResult]);
+
+//   useEffect(() => {
+//     if (!showCamera || !isInitialized || isProcessing) return;
+//     let isActive = true;
+//     let intervalId: ReturnType<typeof setInterval>;
+
+//     const warmupTimer = setTimeout(() => {
+//       if (!isActive) return;
+//       intervalId = setInterval(() => {
+//         captureSilentPhoto();
+//       }, 1500);
+//     }, 1000);
+
+//     return () => {
+//       isActive = false;
+//       clearTimeout(warmupTimer);
+//       if (intervalId) clearInterval(intervalId);
+//     };
+//   }, [showCamera, isInitialized, isProcessing, captureSilentPhoto]);
+
+//   if (hasPermission === null) return <View style={[styles.container, style]} />;
+
+//   if (hasPermission === false) {
+//     return (
+//       <View style={[styles.container, style, { justifyContent: 'center', alignItems: 'center' }]}>
+//         <Text style={styles.permissionMessage}>{t('camera.permissionRequired')}</Text>
+//         <Button title="Refresh Camera" onPress={() => setRefreshCamera(prev => !prev)} variant="primary" />
+//       </View>
+//     );
+//   }
+
+//   if (!device || !showCamera) return <View style={[styles.container, style]} />;
+
+//   return (
+//     <View 
+//       style={[styles.container, style]}
+//       onLayout={(e) => setLayout({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height })}
+//     >
+//       <Camera
+//         ref={camera}
+//         style={StyleSheet.absoluteFill}
+//         device={device}
+//         format={format}           
+//         resizeMode="cover"        
+//         isActive={showCamera && !isProcessing}
+//         photo={true}
+//         video={false}
+//         audio={false}
+//         onInitialized={onInitialized}
+//         onError={onCameraError}
+//       />
+//       {overlayComponent}
+//     </View>
+//   );
+// };
+
+// const styles = StyleSheet.create({
+//   container: { flex: 1, backgroundColor: 'black' },
+//   permissionMessage: { color: 'white', textAlign: 'center', margin: 20, fontSize: 16 },
+// });
+
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { View, StyleSheet, Text, AppState } from 'react-native';
-import { Camera, useCameraDevice } from 'react-native-vision-camera';
+import { Camera, useCameraDevice } from 'react-native-vision-camera'; 
 import VisionCameraModule from '../modules/camera/VisionCameraModule';
 import { useI18n } from '../hooks/useI18n';
 import { EnhancedCameraViewProps } from './OverLay/type';
 import { Button } from './ui/Button';
 
-export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({ 
+export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
   showCamera,
   cameraType: initialCameraType = 'front',
   style,
   onError,
-  onSilentCapture, 
+  onSilentCapture,
   silentCaptureResult,
-  isProcessing = false, 
+  isProcessing = false,
   overlayComponent,
 }) => {
   const { t } = useI18n();
   const camera = useRef<Camera>(null);
-  
+
   const isCapturingRef = useRef(false);
   const isProcessingRef = useRef(isProcessing);
 
   const [cameraType] = useState<'front' | 'back'>(initialCameraType);
-  
-  // 🚨 BUG FIX: Initialize to null to prevent the "Flicker" on retake
   const [hasPermission, setHasPermission] = useState<boolean | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
   const [refreshCamera, setRefreshCamera] = useState(false);
 
+  // 🚨 THE FIX: Removed the strict physical device filtering and custom format.
+  // This allows Android to select its own supported, stable hardware stream, preventing crashes.
   const device = useCameraDevice(cameraType);
 
   useEffect(() => {
@@ -76,27 +243,25 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
     if (silentCaptureResult?.isAnalyzing) return;
 
     try {
-      isCapturingRef.current = true; 
+      isCapturingRef.current = true;
       const photo = await camera.current.takePhoto({
-        enableShutterSound: false, 
-        flash: 'off', 
+        enableShutterSound: false,
+        flash: 'off',
       });
-
-      const result = await VisionCameraModule.processPhotoResult(photo);
       
+      const result = await VisionCameraModule.processPhotoResult(photo);
+
       onSilentCapture?.({
-          ...result,
-          path: result.path || photo.path, 
+        ...result,
+        path: result.path || photo.path,
       });
-
     } catch (error) {
       // Silent background fail
     } finally {
-      isCapturingRef.current = false; 
+      isCapturingRef.current = false;
     }
   }, [isInitialized, onSilentCapture, silentCaptureResult]);
 
-  // 🚨 BUG FIX: The Warm-up Timer (Fixes Blurry Images)
   useEffect(() => {
     if (!showCamera || !isInitialized || isProcessing) return;
     
@@ -107,9 +272,9 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
       if (!isActive) return;
       intervalId = setInterval(() => {
         captureSilentPhoto();
-      }, 1500); // 1.5s gives the hardware more time to stabilize between shots
-    }, 1000); 
-    
+      }, 1500);
+    }, 1000);
+
     return () => {
       isActive = false;
       clearTimeout(warmupTimer);
@@ -117,22 +282,13 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
     };
   }, [showCamera, isInitialized, isProcessing, captureSilentPhoto]);
 
-  // --- RENDERERS ---
-  
-  // 🚨 BUG FIX: Show nothing while checking permissions (Stops flicker)
-  if (hasPermission === null) {
-    return <View style={[styles.container, style]} />;
-  }
+  if (hasPermission === null) return <View style={[styles.container, style]} />;
 
   if (hasPermission === false) {
     return (
       <View style={[styles.container, style, { justifyContent: 'center', alignItems: 'center' }]}>
         <Text style={styles.permissionMessage}>{t('camera.permissionRequired')}</Text>
-        <Button 
-           title="Refresh Camera" 
-           onPress={() => setRefreshCamera(prev => !prev)} 
-           variant="primary"
-        />
+        <Button title="Refresh Camera" onPress={() => setRefreshCamera(prev => !prev)} variant="primary" />
       </View>
     );
   }
@@ -145,10 +301,11 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
         ref={camera}
         style={StyleSheet.absoluteFill}
         device={device}
+        resizeMode="cover"        
         isActive={showCamera && !isProcessing}
         photo={true}
-        video={false} 
-        audio={false} 
+        video={false}
+        audio={false}
         onInitialized={onInitialized}
         onError={onCameraError}
       />

package/src/components/KYCElements/IDCardCapture.tsx

@@ -87,9 +87,12 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   const cameraConfig = useMemo(() => {
     const instructions = selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions as Record<string, LocalizedText>);
     return {
-      cameraType: Platform.OS === 'web' ? cameraType : 'back', // Keep strictly 'back' on mobile
+      cameraType: Platform.OS === 'web' ? cameraType : 'back',
       flashMode: 'auto' as const,
-      overlay: { guideText: instructions, bbox: { xMin: 15, yMin: 20, xMax: 85, yMax: 70, borderColor: '#2DBD60', borderWidth: 3, cornerRadius: 8 } }
+      overlay: { 
+        guideText: instructions, 
+        bbox: { xMin: 5, yMin: 15, xMax: 95, yMax: 85, borderColor: '#2DBD60', borderWidth: 3, cornerRadius: 8 } 
+      }
     };
   }, [selectedDocumentType, locale, component.instructions, cameraType]);
 
@@ -153,21 +156,37 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     if (isProcessingCapture) return;
     setIsProcessingCapture(true);
     setProcessingImagePath(capturePath);
+
     try {
       let imagePathForUpload = capturePath;
-      if (verified.bbox) {
-        try {
-          imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, verified.bbox, 0.15);
-        } catch {
-          imagePathForUpload = capturePath;
-        }
+      
+      // 🚨 THE FIX: Ignore the backend's broken absolute pixels. 
+      // Calculate the crop using the Green UI Frame percentages (0.0 to 1.0)
+      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 {
+        // Apply the crop using the UI percentages and a tight 2% tolerance
+        imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, uiCropBbox, 0.02);
+        // imagePathForUpload = await cropToCenterScanArea(capturePath, 0.91, 1.59);
+      } catch (e) {
+        console.warn("Crop failed, falling back to original image", e);
+        imagePathForUpload = capturePath; // Fallback to raw image if crop fails
       }
+      
       const base64 = await pathToBase64(imagePathForUpload);
       const newImages = {
         ...capturedImages,
         [currentSide]: { dir: imagePathForUpload, file: base64, mrz: verified.mrz || "", templatePath: verified.templatePath },
       };
+      
       setCapturedImages(newImages);
+      
       if (verified.country && verified.documentType) {
         onValueChange({
           ...newImages,
@@ -175,6 +194,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
           documentType: GovernmentDocumentTypeBackend[verified.documentType as keyof typeof GovernmentDocumentTypeBackend] || '',
         });
       }
+      
       setTimeout(() => {
         setShowCamera(false);
         actions.showCustomStepper(true);
@@ -182,6 +202,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
         setIsProcessingCapture(false);
         setProcessingImagePath(null);
       }, 600);
+      
     } catch (e: any) {
       console.error("Backend Error:", e);
       const friendlyError = state.currentLanguage === 'en' ? 'Unable to process document. Please try again.' : 'Impossible de traiter le document. Veuillez réessayer.';
@@ -242,15 +263,29 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
         if (bbox) setBboxBySide(prev => ({ ...prev, [currentSide]: bbox }));
         await autoCapture(result.path, verifiedResult);
       } catch (error: any) {
-        console.error("Backend Error:", error); 
+        // 1. Keep the technical log for your debugging console
+        console.error("Backend Verification Error:", error);
         
-        const isCardNotFullyInFrame = error?.message === 'CARD_NOT_FULLY_IN_FRAME' || error?.message?.includes('entirement');
+        // 2. Define a map of technical keywords to user-friendly messages
+        const rawMessage = (error?.message || '').toLowerCase();
         
-        const errorMessage = isCardNotFullyInFrame 
-          ? t('kyc.idCardCapture.cardNotFullyInFrame') 
-          : (t('errors.genericVerificationFailed') || 'Verification failed. Please ensure the document is clear and try again.');
-          
-        setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: errorMessage }));
+        let userFriendlyMessage ='Verification failed. Please try again.';
+      
+        if (rawMessage.includes('impossible') || rawMessage.includes('unreadable')) {
+          userFriendlyMessage = 'Document unreadable. Please hold the camera steady in good light.';
+        } else if (rawMessage.includes('country mismatch') || rawMessage.includes('pays sélectionné')) {
+          userFriendlyMessage = 'The document does not match your selected country.';
+        } else if (rawMessage.includes('too far') || rawMessage.includes('card_not_fully_in_frame')) {
+          userFriendlyMessage = 'Move closer to the document and ensure all corners are visible.';
+        }
+      
+        // 3. Set ONLY the friendly message to the UI state
+        setSilentCaptureResult(prev => ({ 
+          ...prev, 
+          isAnalyzing: false, 
+          success: false, 
+          error: userFriendlyMessage 
+        }));
       }
     }
   };