@switchlabs/verify-ai-react-native 1.1.0 → 1.1.2

package/src/components/VerifyAIScanner.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
 import {
   View,
   Text,
@@ -10,18 +10,26 @@ import {
 import {
   CameraView,
   useCameraPermissions,
-  type CameraCapturedPicture,
 } from 'expo-camera';
 import type {
   VerificationResult,
   ScannerStatus,
   ScannerOverlayConfig,
 } from '../types';
+import { useTelemetry } from '../telemetry/TelemetryContext';
+import type { TelemetryReporter } from '../telemetry/TelemetryReporter';
+
+/** Quality used when expo-image-manipulator is not available (lower = smaller). */
+const FALLBACK_QUALITY = 0.5;
+/** Quality used when expo-image-manipulator IS available (resize handles size). */
+const MANIPULATOR_QUALITY = 0.7;
+/** Max dimension (px) on longest side when resize is available. */
+const MAX_DIMENSION = 2048;
 
 export interface VerifyAIScannerProps {
-  /** Called with the base64 image data when the user captures a photo. */
-  onCapture: (base64Image: string) => Promise<VerificationResult | null>;
-  /** Called when verification completes successfully. */
+  /** Called with base64 image data when the user captures a photo. */
+  onCapture: (base64: string) => Promise<VerificationResult | null>;
+  /** Called when a terminal verification result is reached. */
   onResult?: (result: VerificationResult) => void;
   /** Called when an error occurs. */
   onError?: (error: Error) => void;
@@ -35,6 +43,64 @@ export interface VerifyAIScannerProps {
   captureRef?: React.MutableRefObject<(() => void) | null>;
   /** Whether to enable the camera torch/flashlight. */
   enableTorch?: boolean;
+  /** Optional telemetry reporter (falls back to TelemetryContext). */
+  telemetry?: TelemetryReporter | null;
+}
+
+type ErrorWithDetails = Error & {
+  status?: number;
+  requestId?: string;
+  code?: string;
+  body?: {
+    request_id?: string;
+    code?: string;
+    status?: number;
+  };
+};
+
+function getErrorDisplay(error: ErrorWithDetails | null, showTechnicalDetails?: boolean): { title: string; message: string } {
+  if (!error) {
+    return {
+      title: 'Something went wrong',
+      message: "We couldn't process your photo. Please try again.",
+    };
+  }
+
+  const status = error.status ?? error.body?.status;
+  const code = error.code ?? error.body?.code;
+  const requestId = error.requestId ?? error.body?.request_id;
+
+  let message = error.message?.trim() || "We couldn't process your photo. Please try again.";
+
+  if (code === 'timeout' || status === 408 || error.name === 'AbortError') {
+    message = 'Verification timed out. Please try again.';
+  } else if (code === 'network_error' || status === 0) {
+    message = 'Network request failed. Check your connection and try again.';
+  } else if (status === 401) {
+    message = 'Verification is not configured correctly.';
+  } else if (status === 413) {
+    message = 'Image is too large. Please try again — the photo will be resized automatically.';
+  } else if (status === 429) {
+    message = 'Verification is temporarily unavailable. Please try again.';
+  } else if (status !== undefined && status >= 500) {
+    message = 'Verify AI is unavailable right now. Please try again.';
+  }
+
+  if (showTechnicalDetails) {
+    const details = [
+      status != null ? `status ${status}` : null,
+      requestId ? `request ${requestId}` : null,
+    ].filter(Boolean).join(' · ');
+
+    if (details) {
+      message = `${message}\n\n${details}`;
+    }
+  }
+
+  return {
+    title: 'Verification failed',
+    message,
+  };
 }
 
 /**
@@ -67,33 +133,204 @@ export function VerifyAIScanner({
   showCaptureButton = true,
   captureRef,
   enableTorch,
+  telemetry: telemetryProp,
 }: VerifyAIScannerProps) {
+  const contextTelemetry = useTelemetry();
+  const telemetry = telemetryProp ?? contextTelemetry;
+
   const cameraRef = useRef<CameraView>(null);
   const [status, setStatus] = useState<ScannerStatus>('idle');
   const [result, setResult] = useState<VerificationResult | null>(null);
+  const [lastError, setLastError] = useState<ErrorWithDetails | null>(null);
   const [permission, requestPermission] = useCameraPermissions();
   const attemptCountRef = useRef(0);
   const [exhausted, setExhausted] = useState(false);
+  const [terminated, setTerminated] = useState(false);
+  const [cameraReady, setCameraReady] = useState(false);
+  const cameraReadyRef = useRef(false);
+  const cameraInitFailedRef = useRef(false);
+  const permissionDeniedTrackedRef = useRef(false);
+
+  // Release camera (and torch) when a terminal result is reached or on unmount.
+  const releaseCamera = useCallback(() => {
+    setTerminated(true);
+    cameraRef.current?.pausePreview?.().catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      cameraRef.current?.pausePreview?.().catch(() => {});
+    };
+  }, []);
+
+  // Camera init callbacks
+  const onCameraReady = useCallback(() => {
+    setCameraReady(true);
+    cameraReadyRef.current = true;
+    cameraInitFailedRef.current = false;
+  }, []);
+
+  const onMountError = useCallback((event: { message?: string }) => {
+    const error = new Error(event.message || 'Camera mount error') as ErrorWithDetails;
+    setResult(null);
+    setLastError(error);
+    setStatus('error');
+    setCameraReady(false);
+    cameraReadyRef.current = false;
+    cameraInitFailedRef.current = true;
+    onError?.(error);
+    telemetry?.track('camera_init_failure', {
+      component: 'scanner',
+      error,
+    });
+  }, [onError, telemetry]);
+
+  // Startup watchdog — if camera hasn't fired onCameraReady within 5s, report timeout
+  useEffect(() => {
+    if (!permission?.granted || terminated) return;
+
+    const timer = setTimeout(() => {
+      if (!cameraReadyRef.current && !cameraInitFailedRef.current) {
+        telemetry?.track('camera_preview_timeout', {
+          component: 'scanner',
+          error: 'Camera did not initialize within 5 seconds',
+        });
+      }
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, [permission?.granted, terminated, telemetry]);
+
+  // Track permission denied
+  useEffect(() => {
+    if (
+      permission &&
+      !permission.granted &&
+      permission.canAskAgain === false &&
+      !permissionDeniedTrackedRef.current
+    ) {
+      permissionDeniedTrackedRef.current = true;
+      telemetry?.track('camera_permission_denied', { component: 'scanner' });
+    }
+  }, [permission, telemetry]);
 
   const handleCapture = useCallback(async () => {
     if (!cameraRef.current || status === 'capturing' || status === 'processing' || exhausted) return;
+    if (!cameraReadyRef.current) {
+      const error = new Error('Camera is not ready yet. Please wait a moment and try again.') as ErrorWithDetails;
+      setResult(null);
+      setLastError(error);
+      setStatus('error');
+      onError?.(error);
+      telemetry?.track('camera_not_ready', {
+        component: 'scanner',
+        error,
+      });
+      setTimeout(() => setStatus('idle'), 2000);
+      return;
+    }
 
     setStatus('capturing');
     setResult(null);
+    setLastError(null);
 
     try {
-      const photo = await cameraRef.current.takePictureAsync({
-        base64: true,
-        quality: 0.8,
-        exif: false,
-      });
+      // --- Capture + best-effort resize ---
+      // Strategy: try to dynamically import expo-image-manipulator.
+      //   If available → resize to MAX_DIMENSION, EXIF-normalize, return base64.
+      //   If not available → use expo-camera's built-in base64 at lower quality.
+      // This keeps expo-image-manipulator as an *optional* dependency.
+      let base64: string;
+      let origWidth = 0;
+      let origHeight = 0;
+      let processedWidth = 0;
+      let processedHeight = 0;
+      let didResize = false;
 
-      if (!photo?.base64) {
-        throw new Error('Failed to capture photo');
+      let ImageManipulator: typeof import('expo-image-manipulator') | null = null;
+      try {
+        ImageManipulator = await import('expo-image-manipulator');
+      } catch {
+        // Not installed — fall back to camera-only base64 below
       }
 
+      if (ImageManipulator) {
+        // Capture without base64 — ImageManipulator will produce it after resize.
+        const photo = await cameraRef.current.takePictureAsync({
+          quality: 0.8,
+          exif: false,
+        });
+
+        if (!photo?.uri) {
+          throw new Error('Failed to capture photo');
+        }
+
+        origWidth = photo.width ?? 0;
+        origHeight = photo.height ?? 0;
+
+        const actions: Array<{ resize: { width?: number; height?: number } }> = [];
+        if (origWidth > MAX_DIMENSION || origHeight > MAX_DIMENSION) {
+          if (origWidth >= origHeight) {
+            actions.push({ resize: { width: MAX_DIMENSION } });
+          } else {
+            actions.push({ resize: { height: MAX_DIMENSION } });
+          }
+          didResize = true;
+        }
+
+        const normalized = await ImageManipulator.manipulateAsync(
+          photo.uri,
+          actions,
+          {
+            compress: MANIPULATOR_QUALITY,
+            format: ImageManipulator.SaveFormat.JPEG,
+            base64: true,
+          },
+        );
+
+        if (!normalized.base64) {
+          throw new Error('ImageManipulator did not return base64');
+        }
+
+        base64 = normalized.base64;
+        processedWidth = normalized.width;
+        processedHeight = normalized.height;
+      } else {
+        // Fallback: capture base64 directly from the camera at reduced quality.
+        // No resize is possible without ImageManipulator, but the lower quality
+        // significantly reduces payload size (e.g. 50 MP @ 0.5 ≈ 3–4 MB base64).
+        const photo = await cameraRef.current.takePictureAsync({
+          base64: true,
+          quality: FALLBACK_QUALITY,
+          exif: false,
+        });
+
+        if (!photo?.base64) {
+          throw new Error('Failed to capture photo');
+        }
+
+        origWidth = photo.width ?? 0;
+        origHeight = photo.height ?? 0;
+        processedWidth = origWidth;
+        processedHeight = origHeight;
+        base64 = photo.base64;
+      }
+
+      // Best-effort telemetry — never blocks capture
+      telemetry?.track('image_processed', {
+        component: 'scanner',
+        metadata: {
+          original_width: origWidth,
+          original_height: origHeight,
+          processed_width: processedWidth,
+          processed_height: processedHeight,
+          resized: didResize ? 1 : 0,
+          has_manipulator: ImageManipulator ? 1 : 0,
+        },
+      });
+
       setStatus('processing');
-      const verificationResult = await onCapture(photo.base64);
+      const verificationResult = await onCapture(base64);
 
       attemptCountRef.current++;
 
@@ -106,6 +343,7 @@ export function VerifyAIScanner({
             maxAttempts != null &&
             attemptCountRef.current >= maxAttempts) {
           setExhausted(true);
+          releaseCamera();
           if (autoApprove) {
             const approvedResult: VerificationResult = { ...verificationResult, is_compliant: true };
             setResult(approvedResult);
@@ -114,26 +352,48 @@ export function VerifyAIScanner({
           } else {
             setResult(verificationResult);
             setStatus('error');
+            onResult?.(verificationResult);
           }
           return;
         }
 
+        if (!verificationResult.is_compliant &&
+            maxAttempts != null &&
+            attemptCountRef.current < maxAttempts) {
+          setResult(verificationResult);
+          setStatus('error');
+          setTimeout(() => setStatus('idle'), 3000);
+          return;
+        }
+
+        releaseCamera();
         setResult(verificationResult);
         setStatus('success');
         onResult?.(verificationResult);
-        setTimeout(() => setStatus('idle'), 3000);
       } else {
         // null result means queued for offline
         setStatus('idle');
       }
     } catch (err) {
-      const error = err instanceof Error ? err : new Error(String(err));
+      const error = (err instanceof Error ? err : new Error(String(err))) as ErrorWithDetails;
+      setLastError(error);
       setStatus('error');
       onError?.(error);
+
+      // Track the error
+      const isCaptureFail = error.message?.includes('capture') || error.message?.includes('photo');
+      const isImageFail = error.message?.includes('manipulate') || error.message?.includes('image');
+      telemetry?.track(
+        isCaptureFail ? 'capture_failure'
+          : isImageFail ? 'image_manipulation_failure'
+          : 'unknown_error',
+        { component: 'scanner', error },
+      );
+
       // Reset after a brief pause
       setTimeout(() => setStatus('idle'), 2000);
     }
-  }, [status, exhausted, onCapture, onResult, onError, overlay?.maxAttempts, overlay?.autoApproveOnExhaust]);
+  }, [status, exhausted, onCapture, onResult, onError, overlay?.maxAttempts, overlay?.autoApproveOnExhaust, releaseCamera, telemetry]);
 
   // Expose capture to parent via ref
   if (captureRef) {
@@ -159,7 +419,7 @@ export function VerifyAIScanner({
 
   return (
     <View style={[styles.container, style]}>
-      <CameraView ref={cameraRef} style={styles.camera} facing="back" enableTorch={enableTorch}>
+      <CameraView ref={cameraRef} style={styles.camera} facing="back" enableTorch={!terminated && enableTorch} onCameraReady={onCameraReady} onMountError={onMountError}>
         {/* Overlay */}
         <View style={styles.overlay}>
           {overlay?.title && (
@@ -249,8 +509,9 @@ export function VerifyAIScanner({
                 const template = overlay?.retryMessage || 'Please try again. {remaining} attempts left.';
                 errorMessage = template.replace('{remaining}', String(remaining));
               } else {
-                errorTitle = 'Something went wrong';
-                errorMessage = "We couldn't process your photo. Please try again.";
+                const display = getErrorDisplay(lastError, overlay?.showTechnicalErrorDetails);
+                errorTitle = display.title;
+                errorMessage = display.message;
               }
 
               return (
@@ -280,11 +541,11 @@ export function VerifyAIScanner({
                     <TouchableOpacity
                       style={[
                         styles.captureButton,
-                        (status === 'capturing' || status === 'processing') &&
+                        (!cameraReady || status === 'capturing' || status === 'processing') &&
                           styles.captureButtonDisabled,
                       ]}
                       onPress={handleCapture}
-                      disabled={status === 'capturing' || status === 'processing'}
+                      disabled={!cameraReady || status === 'capturing' || status === 'processing'}
                       activeOpacity={0.7}
                     >
                       <View style={styles.captureButtonInner} />