Updated photoCapture and inspectionGallery with thumbnail

monkvision · Jul 22, 2024 · d995399 · d995399
1 parent 9e335ba
commit d995399
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 28 deletions.
diff --git a/packages/common-ui-web/src/components/CreateInspection/CreateInspection.tsx b/packages/common-ui-web/src/components/CreateInspection/CreateInspection.tsx
@@ -45,6 +45,7 @@ export const CreateInspection = i18nWrap(({ lang, onInspectionCreated }: CreateI
   const { createInspection } = useMonkApi({
     authToken: authToken ?? '',
     apiDomain: config.apiDomain,
+    thumbnailDomain: config.thumbnailDomain,
   });
   const analytics = useAnalytics();
 

diff --git a/packages/common-ui-web/src/components/InspectionGallery/InspectionGallery.tsx b/packages/common-ui-web/src/components/InspectionGallery/InspectionGallery.tsx
@@ -1,4 +1,4 @@
-import { i18nWrap, useI18nSync, useThumbnail } from '@monkvision/common';
+import { i18nWrap, useI18nSync } from '@monkvision/common';
 import { useMemo, useState } from 'react';
 import { Image, ImageType } from '@monkvision/types';
 import { InspectionGalleryItem, InspectionGalleryProps, NavigateToCaptureReason } from './types';
@@ -44,7 +44,6 @@ export const InspectionGallery = i18nWrap((props: InspectionGalleryProps) => {
     captureMode: props.captureMode,
     isFilterActive: currentFilter !== null,
   });
-  const { getThumbnailUrl } = useThumbnail(props.thumbnailDomain);
 
   const handleItemClick = (item: InspectionGalleryItem) => {
     if (item.isAddDamage && props.captureMode) {
@@ -114,7 +113,6 @@ export const InspectionGallery = i18nWrap((props: InspectionGalleryProps) => {
           <div style={itemStyle} key={getItemKey(item)}>
             <InspectionGalleryItemCard
               item={item}
-              getThumbnailUrl={getThumbnailUrl}
               captureMode={props.captureMode}
               onClick={() => handleItemClick(item)}
             />

diff --git a/.../src/components/InspectionGallery/InspectionGalleryItemCard/InspectionGalleryItemCard.tsx b/.../src/components/InspectionGallery/InspectionGalleryItemCard/InspectionGalleryItemCard.tsx
@@ -11,7 +11,6 @@ import { SightOverlay } from '../../SightOverlay';
 
 export function InspectionGalleryItemCard({
   item,
-  getThumbnailUrl,
   captureMode,
   onClick,
 }: InspectionGalleryItemCardProps) {
@@ -24,7 +23,7 @@ export function InspectionGalleryItemCard({
     statusIcon,
     sightOverlay,
     addDamageIcon,
-  } = useInspectionGalleryItemCardStyles({ item, captureMode, status, getThumbnailUrl });
+  } = useInspectionGalleryItemCardStyles({ item, captureMode, status });
   const statusIconName = useInspectionGalleryItemStatusIconName({ item, captureMode });
   const label = useInspectionGalleryItemLabel(item);
 

diff --git a/packages/common-ui-web/src/components/InspectionGallery/InspectionGalleryItemCard/hooks.ts b/packages/common-ui-web/src/components/InspectionGallery/InspectionGalleryItemCard/hooks.ts
@@ -10,7 +10,6 @@ import { IconName } from '../../../icons';
 export interface InspectionGalleryItemCardProps {
   item: InspectionGalleryItem;
   captureMode: boolean;
-  getThumbnailUrl: (image: Image) => string;
   onClick?: () => void;
 }
 
@@ -56,14 +55,12 @@ export function useInspectionGalleryItemStatusIconName({
 export interface UseInspectionGalleryItemCardStylesParams {
   item: InspectionGalleryItem;
   status: InteractiveStatus;
-  getThumbnailUrl: (image: Image) => string;
   captureMode: boolean;
 }
 
 export function useInspectionGalleryItemCardStyles({
   item,
   status,
-  getThumbnailUrl,
   captureMode,
 }: UseInspectionGalleryItemCardStylesParams) {
   const { palette } = useMonkTheme();
@@ -96,13 +93,6 @@ export function useInspectionGalleryItemCardStyles({
     }
   }
 
-  let backgroundImage = 'none';
-  if (!item.isAddDamage && item.isTaken) {
-    backgroundImage = item.image.path.startsWith('blob')
-      ? `url(${item.image.path})`
-      : `url(${getThumbnailUrl(item.image)})`;
-  }
-
   return {
     cardStyle: {
       ...styles['card'],
@@ -113,7 +103,8 @@ export function useInspectionGalleryItemCardStyles({
     previewStyle: {
       ...styles['preview'],
       backgroundColor: colors.previewBackground,
-      backgroundImage,
+      backgroundImage:
+        !item.isAddDamage && item.isTaken ? `url(${item.image.thumbnailPath})` : 'none',
     },
     previewOverlayStyle: {
       ...styles['previewOverlay'],

diff --git a/packages/common-ui-web/src/components/InspectionGallery/types.ts b/packages/common-ui-web/src/components/InspectionGallery/types.ts
@@ -72,10 +72,6 @@ export type InspectionGalleryProps = {
    * The config used to communicate with the API.
    */
   apiConfig: MonkApiConfig;
-  /**
-   * The API domain used to communicate with the resize micro service
-   */
-  thumbnailDomain: string;
   /**
    * The language used by the InspectionGallery component.
    *

diff --git a/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.tsx b/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.tsx
@@ -82,6 +82,7 @@ export const VehicleTypeSelection = i18nWrap((props: VehicleTypeSelectionProps)
   const { getInspection } = useMonkApi({
     authToken: props.authToken ?? '',
     apiDomain: props.apiDomain ?? '',
+    thumbnailDomain: props.thumbnailDomain ?? '',
   });
   const loading = useLoadingState();
   const { handleError, setTags, setUserId } = useMonitoring();

diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
@@ -60,7 +60,6 @@ export interface PhotoCaptureProps
       | 'enableAddDamage'
       | 'sightGuidelines'
       | 'enableSightGuidelines'
-      | 'thumbnailDomain'
     >,
     Partial<CompressionOptions>,
     Partial<ComplianceOptions> {
@@ -132,7 +131,6 @@ export function PhotoCapture({
   lang,
   enforceOrientation,
   validateButtonLabel,
-  thumbnailDomain,
   ...initialCameraConfig
 }: PhotoCaptureProps) {
   useI18nSync(lang);
@@ -286,7 +284,6 @@ export function PhotoCapture({
         <InspectionGallery
           inspectionId={inspectionId}
           apiConfig={apiConfig}
-          thumbnailDomain={thumbnailDomain}
           captureMode={true}
           lang={lang}
           showBackButton={true}

diff --git a/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts b/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts
@@ -105,6 +105,7 @@ function createAddImageOptions(
   upload: PictureUpload,
   inspectionId: string,
   siblingId: number,
+  enableThumbnail: boolean,
   additionalTasks?: CaptureAppConfig['additionalTasks'],
   compliance?: ComplianceOptions,
 ): AddImageOptions {
@@ -116,6 +117,7 @@ function createAddImageOptions(
       tasks: additionalTasks ? uniq([...upload.tasks, ...additionalTasks]) : upload.tasks,
       inspectionId,
       compliance,
+      enableThumbnail,
     };
   }
   return {
@@ -125,6 +127,7 @@ function createAddImageOptions(
     firstShot: upload.mode === PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT,
     inspectionId,
     compliance,
+    enableThumbnail,
   };
 }
 
@@ -153,6 +156,7 @@ export function useUploadQueue({
           upload,
           inspectionId,
           siblingIdRef.current,
+          true,
           additionalTasks,
           complianceOptions,
         ),

diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
@@ -73,8 +73,12 @@ function createProps(): PhotoCaptureProps {
   return {
     sights: [sights['test-sight-1'], sights['test-sight-2'], sights['test-sight-3']],
     inspectionId: 'test-inspection-test',
-    apiConfig: { apiDomain: 'test-api-domain-test', authToken: 'test-auth-token-test' },
-    thumbnailDomain: 'test-thumbnail-domain',
+    apiConfig: {
+      apiDomain: 'test-api-domain-test',
+      authToken: 'test-auth-token-test',
+      thumbnailDomain: 'test-thumbnail-domain',
+    },
+
     additionalTasks: [TaskName.DASHBOARD_OCR],
     tasksBySight: { 'test-sight-1': [TaskName.IMAGE_EDITING] },
     startTasksOnComplete: [TaskName.COMPLIANCES],

diff --git a/packages/inspection-capture-web/test/PhotoCapture/hooks/usePhotoCaptureSightState.test.ts b/packages/inspection-capture-web/test/PhotoCapture/hooks/usePhotoCaptureSightState.test.ts
@@ -21,7 +21,11 @@ function createParams(): PhotoCaptureSightsParams {
       sights['test-sight-3'],
       sights['test-sight-4'],
     ],
-    apiConfig: { apiDomain: 'test-api-domain', authToken: 'test-auth-token' },
+    apiConfig: {
+      apiDomain: 'test-api-domain',
+      authToken: 'test-auth-token',
+      thumbnailDomain: 'test-thumbnail-domain',
+    },
     loading: {
       start: jest.fn(),
       onSuccess: jest.fn(),

diff --git a/packages/inspection-capture-web/test/PhotoCapture/hooks/useStartTasksOnComplete.test.ts b/packages/inspection-capture-web/test/PhotoCapture/hooks/useStartTasksOnComplete.test.ts
@@ -14,7 +14,11 @@ import {
 function createParams(): UseStartTasksOnCompleteParams {
   return {
     inspectionId: 'test-inspection-id',
-    apiConfig: { apiDomain: 'test-api-domain', authToken: 'test-auth-token' },
+    apiConfig: {
+      apiDomain: 'test-api-domain',
+      authToken: 'test-auth-token',
+      thumbnailDomain: 'test-thumbnail-domain',
+    },
     sights: [
       sights['test-sight-1'],
       sights['test-sight-2'],

diff --git a/packages/inspection-capture-web/test/PhotoCapture/hooks/useUploadQueue.test.ts b/packages/inspection-capture-web/test/PhotoCapture/hooks/useUploadQueue.test.ts
@@ -15,7 +15,11 @@ import { act } from '@testing-library/react';
 function createParams(): UploadQueueParams {
   return {
     inspectionId: 'test-inspection-id',
-    apiConfig: { apiDomain: 'test-api-domain', authToken: 'test-auth-token' },
+    apiConfig: {
+      apiDomain: 'test-api-domain',
+      authToken: 'test-auth-token',
+      thumbnailDomain: 'test-thumbnail-domain',
+    },
     complianceOptions: {
       enableCompliance: true,
       complianceIssues: [ComplianceIssue.INTERIOR_NOT_SUPPORTED],
@@ -84,6 +88,7 @@ describe('useUploadQueue hook', () => {
         tasks: defaultUploadOptions.tasks,
         compliance: initialProps.complianceOptions,
         inspectionId: initialProps.inspectionId,
+        enableThumbnail: true,
       });
 
       unmount();
@@ -105,6 +110,7 @@ describe('useUploadQueue hook', () => {
         uploadType: ImageUploadType.BEAUTY_SHOT,
         picture: defaultUploadOptions.picture,
         sightId: defaultUploadOptions.sightId,
+        enableThumbnail: true,
         tasks: expect.arrayContaining([
           TaskName.DAMAGE_DETECTION,
           TaskName.IMAGE_EDITING,
@@ -142,6 +148,7 @@ describe('useUploadQueue hook', () => {
         uploadType: ImageUploadType.CLOSE_UP_2_SHOT,
         picture: upload1.picture,
         siblingKey: expect.any(String),
+        enableThumbnail: true,
         firstShot: true,
         compliance: initialProps.complianceOptions,
         inspectionId: initialProps.inspectionId,
@@ -165,6 +172,7 @@ describe('useUploadQueue hook', () => {
         uploadType: ImageUploadType.CLOSE_UP_2_SHOT,
         picture: upload2.picture,
         siblingKey,
+        enableThumbnail: true,
         firstShot: false,
         compliance: initialProps.complianceOptions,
         inspectionId: initialProps.inspectionId,