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

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,20 @@ import {
 import {
   CameraView,
   useCameraPermissions,
-  type CameraCapturedPicture,
 } from 'expo-camera';
+import * as ImageManipulator from 'expo-image-manipulator';
 import type {
   VerificationResult,
   ScannerStatus,
   ScannerOverlayConfig,
 } from '../types';
+import { useTelemetry } from '../telemetry/TelemetryContext';
+import type { TelemetryReporter } from '../telemetry/TelemetryReporter';
 
 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 the image URI when the user captures a photo. */
+  onCapture: (imageUri: 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 +37,62 @@ 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 === 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,
+  };
 }
 
 /**
@@ -43,10 +101,13 @@ export interface VerifyAIScannerProps {
  *
  * @example
  * ```tsx
- * const { verify } = useVerifyAI({ apiKey: 'vai_...' });
+ * const { verifyMultipart } = useVerifyAI({
+ *   apiKey: 'vai_...',
+ *   enableOnDeviceML: true,
+ * });
  *
  * <VerifyAIScanner
- *   onCapture={(base64) => verify({ image: base64, policy: 'scooter_parking' })}
+ *   onCapture={(imageUri) => verifyMultipart({ imageUri, policy: 'scooter_parking' })}
  *   onResult={(result) => {
  *     if (result.is_compliant) navigation.navigate('Success');
  *   }}
@@ -67,33 +128,128 @@ 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,
       });
 
-      if (!photo?.base64) {
+      if (!photo?.uri) {
         throw new Error('Failed to capture photo');
       }
 
+      // Normalize EXIF orientation into actual pixels so the server
+      // receives an upright image (Gemini and other vision APIs ignore EXIF).
+      // An empty actions array makes ImageManipulator apply EXIF rotation only.
+      const normalized = await ImageManipulator.manipulateAsync(
+        photo.uri,
+        [],
+        { compress: 0.8, format: ImageManipulator.SaveFormat.JPEG },
+      );
+
       setStatus('processing');
-      const verificationResult = await onCapture(photo.base64);
+      const verificationResult = await onCapture(normalized.uri);
 
       attemptCountRef.current++;
 
@@ -106,6 +262,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 +271,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 +338,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 +428,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 +460,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} />