feat: Auto scanning of receipts

package.json

@@ -43,6 +43,7 @@
     "@awesome-cordova-plugins/smartlook": "^6.14.0",
     "@awesome-cordova-plugins/spinner-dialog": "^6.2.0",
     "@capacitor-community/camera-preview": "^7.0.0",
+    "@capacitor-mlkit/document-scanner": "^7.3.0",
     "@capacitor/android": "^7.0.0",
     "@capacitor/app": "^7.0.0",
     "@capacitor/browser": "^7.0.0",

src/app/core/services/mlkit-document-scanner.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { DocumentScanner, ScanResult } from '@capacitor-mlkit/document-scanner';
+import { from, Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MLKitDocumentScannerService {
+  scanDocument(): Observable<string> {
+    return from(DocumentScanner.scanDocument({ resultFormats: 'JPEG', galleryImportAllowed: true, pageLimit: 1 })).pipe(
+      switchMap((result: ScanResult) => {
+        if (result.scannedImages && result.scannedImages.length > 0) {
+          // MLKit returns file URLs, so we need to convert them to base64
+          return from(this.convertFileToBase64(result.scannedImages[0]));
+        }
+        throw new Error('No document scanned');
+      }),
+    );
+  }
+
+  private async convertFileToBase64(fileUrl: string): Promise<string> {
+    try {
+      const response = await fetch(fileUrl);
+      const blob = await response.blob();
+      return new Promise<string>((resolve, reject): void => {
+        const reader = new FileReader();
+        reader.onloadend = (): void => {
+          const base64data = reader.result as string;
+          resolve(base64data);
+        };
+        reader.onerror = (): void => reject(new Error('Failed to convert file to base64'));
+        reader.readAsDataURL(blob);
+      });
+    } catch {
+      throw new Error('Failed to convert file to base64');
+    }
+  }
+}

src/app/shared/components/capture-receipt/capture-receipt.component.ts

@@ -1,4 +1,5 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Input, AfterViewInit, ViewChild, Inject } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Input, AfterViewInit, ViewChild } from '@angular/core';
+import { inject } from '@angular/core';
 import { CameraPreviewPictureOptions } from '@capacitor-community/camera-preview';
 import { ModalController, NavController, PopoverController } from '@ionic/angular';
 import { ReceiptPreviewComponent } from './receipt-preview/receipt-preview.component';
@@ -23,6 +24,7 @@ import { SnackbarPropertiesService } from 'src/app/core/services/snackbar-proper
 import { AuthService } from 'src/app/core/services/auth.service';
 import { CameraService } from 'src/app/core/services/camera.service';
 import { CameraPreviewService } from 'src/app/core/services/camera-preview.service';
+import { MLKitDocumentScannerService } from 'src/app/core/services/mlkit-document-scanner.service';
 import { ReceiptPreviewData } from 'src/app/core/models/receipt-preview-data.model';
 import { TranslocoService } from '@jsverse/transloco';
 
@@ -65,26 +67,43 @@ export class CaptureReceiptComponent implements OnInit, OnDestroy, AfterViewInit
 
   nativeSettings = NativeSettings;
 
-  constructor(
-    private modalController: ModalController,
-    private trackingService: TrackingService,
-    private router: Router,
-    private navController: NavController,
-    private transactionsOutboxService: TransactionsOutboxService,
-    private imagePicker: ImagePicker,
-    private networkService: NetworkService,
-    private popoverController: PopoverController,
-    private loaderService: LoaderService,
-    private orgService: OrgService,
-    private platformEmployeeSettingsService: PlatformEmployeeSettingsService,
-    private matSnackBar: MatSnackBar,
-    private snackbarProperties: SnackbarPropertiesService,
-    private authService: AuthService,
-    private cameraService: CameraService,
-    private cameraPreviewService: CameraPreviewService,
-    @Inject(DEVICE_PLATFORM) private devicePlatform: 'android' | 'ios' | 'web',
-    private translocoService: TranslocoService,
-  ) {}
+  private readonly modalController = inject(ModalController);
+
+  private readonly trackingService = inject(TrackingService);
+
+  private readonly router = inject(Router);
+
+  private readonly navController = inject(NavController);
+
+  private readonly transactionsOutboxService = inject(TransactionsOutboxService);
+
+  private readonly imagePicker = inject(ImagePicker);
+
+  private readonly networkService = inject(NetworkService);
+
+  private readonly popoverController = inject(PopoverController);
+
+  private readonly loaderService = inject(LoaderService);
+
+  private readonly orgService = inject(OrgService);
+
+  private readonly platformEmployeeSettingsService = inject(PlatformEmployeeSettingsService);
+
+  private readonly matSnackBar = inject(MatSnackBar);
+
+  private readonly snackbarProperties = inject(SnackbarPropertiesService);
+
+  private readonly authService = inject(AuthService);
+
+  private readonly cameraService = inject(CameraService);
+
+  private readonly cameraPreviewService = inject(CameraPreviewService);
+
+  private readonly mlkitScanner = inject(MLKitDocumentScannerService);
+
+  private readonly devicePlatform = inject<'android' | 'ios' | 'web'>(DEVICE_PLATFORM);
+
+  private readonly translocoService = inject(TranslocoService);
 
   setupNetworkWatcher(): void {
     const networkWatcherEmitter = new EventEmitter<boolean>();
@@ -382,27 +401,32 @@ export class CaptureReceiptComponent implements OnInit, OnDestroy, AfterViewInit
       this.trackingService.receiptLimitReached();
       this.showLimitReachedPopover().subscribe(noop);
     } else {
-      const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
-        quality: 70,
-      };
-
-      from(this.cameraPreviewService.capture(cameraPreviewPictureOptions)).subscribe((receiptData) => {
-        const base64PictureData = 'data:image/jpeg;base64,' + receiptData.value;
-        this.lastCapturedReceipt = base64PictureData;
-        if (!this.isBulkMode) {
-          this.stopCamera();
-          this.base64ImagesWithSource.push({
-            source: 'MOBILE_DASHCAM_SINGLE',
-            base64Image: base64PictureData,
-          });
-          this.onSingleCapture();
-        } else {
-          this.base64ImagesWithSource.push({
-            source: 'MOBILE_DASHCAM_BULK',
-            base64Image: base64PictureData,
+      this.mlkitScanner.scanDocument().subscribe({
+        next: (base64PictureData) => {
+          this.lastCapturedReceipt = base64PictureData;
+          if (!this.isBulkMode) {
+            this.stopCamera();
+            this.base64ImagesWithSource.push({
+              source: 'MOBILE_DASHCAM_SINGLE',
+              base64Image: base64PictureData,
+            });
+            this.onSingleCapture();
+          } else {
+            this.base64ImagesWithSource.push({
+              source: 'MOBILE_DASHCAM_BULK',
+              base64Image: base64PictureData,
+            });
+            this.onBulkCapture();
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        error: (error) => {
+          this.matSnackBar.openFromComponent(ToastMessageComponent, {
+            ...this.snackbarProperties.setSnackbarProperties('failure', {
+              message: 'Camera not available',
+            }),
           });
-          this.onBulkCapture();
-        }
+        },
       });
     }
   }
@@ -515,14 +539,16 @@ export class CaptureReceiptComponent implements OnInit, OnDestroy, AfterViewInit
   }
 
   setUpAndStartCamera(): void {
-    this.cameraPreview.setUpAndStartCamera();
+    // MLKit scanner will handle camera setup and permissions
+    this.onCaptureReceipt();
+
     if (this.transactionsOutboxService.singleCaptureCount === 3) {
       this.showBulkModeToastMessage();
       this.isBulkModePromptShown = true;
     }
   }
 
   stopCamera(): void {
-    this.cameraPreview.stopCamera();
+    // MLKit scanner handles its own camera lifecycle
   }
 }