Feat/mn 569/add damage part select

apps/demo-app/src/local-config.json

@@ -2,7 +2,7 @@
   "id": "demo-app-dev",
   "description": "Config for the dev Demo App.",
   "allowSkipRetake": true,
-  "enableAddDamage": true,
+  "addDamage": "part_select",
   "enableSightGuidelines": true,
   "allowVehicleTypeSelection": true,
   "allowManualLogin": true,

apps/demo-app/test/pages/PhotoCapturePage.test.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { render } from '@testing-library/react';
 import { expectPropsOnChildMock } from '@monkvision/test-utils';
-import { PhotoCapture } from '@monkvision/inspection-capture-web';
+import { PhotoCapture, PhotoCaptureProps } from '@monkvision/inspection-capture-web';
 import { useMonkAppState } from '@monkvision/common';
 import { PhotoCapturePage } from '../../src/pages';
 
@@ -20,7 +20,7 @@ const appState = {
     enforceOrientation: 'test-enforceOrientation-test',
     maxUploadDurationWarning: 'test-maxUploadDurationWarning-test',
     allowSkipRetake: 'test-allowSkipRetake-test',
-    enableAddDamage: 'test-enableAddDamage-test',
+    addDamage: 'test-addDamage-test',
     enableCompliance: 'test-enableCompliance-test',
     enableCompliancePerSight: 'test-enableCompliancePerSight-test',
     complianceIssues: 'test-complianceIssues-test',
@@ -53,7 +53,7 @@ describe('PhotoCapture page', () => {
       enforceOrientation: appState.config.enforceOrientation,
       maxUploadDurationWarning: appState.config.maxUploadDurationWarning,
       allowSkipRetake: appState.config.allowSkipRetake,
-      enableAddDamage: appState.config.enableAddDamage,
+      addDamage: appState.config.addDamage,
       enableCompliance: appState.config.enableCompliance,
       enableCompliancePerSight: appState.config.enableCompliancePerSight,
       complianceIssues: appState.config.complianceIssues,
@@ -62,7 +62,7 @@ describe('PhotoCapture page', () => {
       customComplianceThresholds: appState.config.customComplianceThresholds,
       customComplianceThresholdsPerSight: appState.config.customComplianceThresholdsPerSight,
       additionalTasks: appState.config.additionalTasks,
-    });
+    } as unknown as PhotoCaptureProps);
 
     unmount();
   });
@@ -74,7 +74,7 @@ describe('PhotoCapture page', () => {
     expect(appState.getCurrentSights).toHaveBeenCalled();
     expectPropsOnChildMock(PhotoCapture, {
       sights: appState.getCurrentSights(),
-    });
+    } as PhotoCaptureProps);
 
     unmount();
   });

configs/test-utils/src/__mocks__/@monkvision/common-ui-web.tsx

@@ -18,4 +18,5 @@ export = {
   SVGElement: jest.fn(() => <></>),
   SwitchButton: jest.fn(() => <></>),
   TakePictureButton: jest.fn(() => <></>),
+  VehiclePartSelection: jest.fn(() => <></>),
 };

configs/test-utils/src/__mocks__/@monkvision/common.tsx

@@ -1,5 +1,7 @@
 import { InteractiveStatus } from '@monkvision/types';
 
+const { vehiclePartLabels } = jest.requireActual('@monkvision/common');
+
 function createMockLoadingState() {
   return {
     isLoading: false,
@@ -59,6 +61,7 @@ export = {
   complianceIssueLabels,
   imageStatusLabels,
   getInspectionImages,
+  vehiclePartLabels,
 
   /* Mocks */
   useMonkTheme: jest.fn(() => createTheme()),

configs/test-utils/src/expects/props.tsx

@@ -17,9 +17,9 @@ import {
  * If you want to test the children passed to the child component, you can add the `children` property to the props
  * object.
  */
-export function expectPropsOnChildMock(
-  Component: jest.Mock | FC<any> | ForwardedRef<any>,
-  props: { [key: string]: unknown },
+export function expectPropsOnChildMock<T extends jest.Mock | FC<any> | ForwardedRef<any>>(
+  Component: T,
+  props: T extends (prop: infer P) => any ? Partial<P> : never,
 ): void {
   expect(Component).toHaveBeenCalledWith(expect.objectContaining(props), expect.anything());
 }

documentation/docs/photo-capture-workflow.md

@@ -58,7 +58,7 @@ increase the detection rate. This feature is called `Add Damage`, and there two
   take a close-up picture of the damage.
 
 For now, only the 2-shot workflow is implemented in the PhotoCapture workflow. This feature is enabled by default in the
-`PhotoCapture` component. To disable it, pass the `enableAddDamage` prop to `false`.
+`PhotoCapture` component. To disable it, pass the `addDamage` prop to `AddDamage.DISABLED`.
 
 ## Using Compliance
 The compliance is a feature that allows our AI models to analyze the quality of the pictures taken by the user, and if

documentation/src/utils/schemas.ts

@@ -9,6 +9,7 @@ import {
   SteeringWheelPosition,
   TaskName,
   VehicleType,
+  AddDamage,
 } from '@monkvision/types';
 import { sights } from '@monkvision/sights';
 import { flatten } from '@monkvision/common';
@@ -270,7 +271,7 @@ export const LiveConfigSchema = z
     maxUploadDurationWarning: z.number().positive().or(z.literal(-1)).optional(),
     useAdaptiveImageQuality: z.boolean().optional(),
     allowSkipRetake: z.boolean().optional(),
-    enableAddDamage: z.boolean().optional(),
+    addDamage: z.nativeEnum(AddDamage).optional(),
     enableSightGuidelines: z.boolean().optional(),
     sightGuidelines: z.array(SightGuidelineSchema).optional(),
     enableTutorial: z.nativeEnum(PhotoCaptureTutorialOption).optional(),

packages/common-ui-web/src/components/InspectionGallery/hooks/useInspectionGalleryItems.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { ImageStatus, Sight } from '@monkvision/types';
+import { AddDamage, ImageStatus, Sight } from '@monkvision/types';
 import { getInspectionImages, MonkState, useMonkState } from '@monkvision/common';
 import { useInspectionPoll } from '@monkvision/network';
 import { InspectionGalleryItem, InspectionGalleryProps } from '../types';
@@ -57,7 +57,7 @@ function getItems(
   captureMode: boolean,
   entities: MonkState,
   inspectionSights?: Sight[],
-  enableAddDamage?: boolean,
+  addDamage?: AddDamage,
 ): InspectionGalleryItem[] {
   const images = getInspectionImages(inspectionId, entities.images, captureMode);
   const items: InspectionGalleryItem[] = images.map((image) => ({
@@ -73,7 +73,7 @@ function getItems(
       items.push({ isTaken: false, isAddDamage: false, sightId: sight.id });
     }
   });
-  if (captureMode && enableAddDamage !== false) {
+  if (captureMode && (!addDamage || addDamage !== AddDamage.DISABLED)) {
     items.push({ isAddDamage: true });
   }
   return items.sort((a, b) => compareGalleryItems(a, b, captureMode, inspectionSights));
@@ -93,15 +93,8 @@ export function useInspectionGalleryItems(props: InspectionGalleryProps): Inspec
   const { state } = useMonkState();
 
   const items = useMemo(
-    () =>
-      getItems(
-        props.inspectionId,
-        props.captureMode,
-        state,
-        inspectionSights,
-        props.enableAddDamage,
-      ),
-    [props.inspectionId, props.captureMode, state, inspectionSights, props.enableAddDamage],
+    () => getItems(props.inspectionId, props.captureMode, state, inspectionSights, props.addDamage),
+    [props.inspectionId, props.captureMode, state, inspectionSights, props.addDamage],
   );
   const shouldFetch = useMemo(() => shouldContinueToFetch(items), items);
 

packages/common-ui-web/src/components/InspectionGallery/types.ts

@@ -1,4 +1,4 @@
-import { ComplianceOptions, Image, Sight } from '@monkvision/types';
+import { AddDamage, ComplianceOptions, Image, Sight } from '@monkvision/types';
 import { MonkApiConfig } from '@monkvision/network';
 
 /**
@@ -105,7 +105,7 @@ export type InspectionGalleryProps = {
    *
    * @default true
    */
-  enableAddDamage?: boolean;
+  addDamage: AddDamage;
   /**
    * Custom label for validate button.
    */

packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx

@@ -1,4 +1,3 @@
-import { useMonkTheme } from '@monkvision/common';
 import {
   PartSelectionOrientation,
   VehicleModel,
@@ -68,6 +67,10 @@ function createGetAttributesCallback(
 }
 
 function getVehicleModel(vehicleType: VehicleType): VehicleModel {
+  if (vehicleType === VehicleType.SUV) {
+    // eslint-disable-next-line no-param-reassign
+    vehicleType = VehicleType.CUV;
+  }
   const detail = Object.entries(vehicles)
     .filter(([type]) => type !== VehicleModel.AUDIA7)
     .find(([, details]) => details.type === vehicleType)?.[1];
@@ -91,14 +94,13 @@ export function VehicleDynamicWireframe({
     throw new Error(`No wireframe found for vehicle type ${vehicleType}`);
   }
   const overlay = wireframes[orientation];
-  const { utils } = useMonkTheme();
 
   return (
     <DynamicSVG
       svg={overlay}
       style={{
         width: '100%',
-        color: utils.getColor('text-primary'),
+        height: '100%',
       }}
       getAttributes={createGetAttributesCallback(onClickPart, getPartAttributes)}
     />

packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.style.ts

@@ -2,11 +2,10 @@ import { Styles } from '@monkvision/types';
 
 export const styles: Styles = {
   wrapper: {
-    position: 'absolute',
     display: 'flex',
-    justifyContent: 'center',
     alignItems: 'center',
-    inset: '0 0 0 0',
     gap: '30px',
+    flexGrow: 1,
+    maxHeight: '100%',
   },
 };

packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx

@@ -65,9 +65,8 @@ export function VehiclePartSelection({
     part: VehiclePart,
   ) => ({
     style: {
-      // TODO: need to finalize the color for the selected parts.
-      fill: selectedParts.includes(part) ? palette.primary.xlight : undefined,
-      stroke: palette.primary.light,
+      fill: selectedParts.includes(part) ? palette.primary.base : undefined,
+      stroke: palette.text.primary,
       display: 'block',
     },
   });

packages/common-ui-web/src/icons/assets.ts

@@ -330,7 +330,7 @@ export const MonkIconAssetsMap: IconAssetsMap = {
   'zoom-out':
     '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#000" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.26 4.25c.41.41 1.07.41 1.48 0l.01-.01c.41-.41.41-1.07 0-1.48L15.5 14Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Zm-2-5h4c.28 0 .5.22.5.5s-.22.5-.5.5h-4c-.28 0-.5-.22-.5-.5s.22-.5.5-.5Z"/></svg>',
   'rotate-left':
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.8 13.5c-.1-4.6.9-7 2.5-8.9l-1.9-.9c-.6-.6-.2-1.7.7-1.7h5.6c.5 0 1 .4 1 1v5.6c0 .9-1.1 1.3-1.7.7l-1.9-1.9c-1.2 1.4-1.9 3.1-1.9 5.1 0 3.1 1.7 5.9 4.5 7.2.6.3.8.9.6 1.5-.3.7-1.1 1-1.7.7C10 20.4 9.7 19 8.3 16Z"/></svg>',
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#000" d="M7.8 13.5c-.1-4.6.9-7 2.5-8.9l-1.9-.9c-.6-.6-.2-1.7.7-1.7h5.6c.5 0 1 .4 1 1v5.6c0 .9-1.1 1.3-1.7.7l-1.9-1.9c-1.2 1.4-1.9 3.1-1.9 5.1 0 3.1 1.7 5.9 4.5 7.2.6.3.8.9.6 1.5-.3.7-1.1 1-1.7.7C10 20.4 9.7 19 8.3 16Z"/></svg>',
   'rotate-right':
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.2 13.5c.1-4.6-.9-7-2.5-8.9l1.9-.9c.6-.6.2-1.7-.7-1.7H9.3c-.5 0-1 .4-1 1v5.6c0 .9 1.1 1.3 1.7.7l1.9-1.9c1.2 1.4 1.9 3.1 1.9 5.1 0 2.1-1.7 4.9-4.5 6.2-.6.3-.8.9-.6 1.5.2.5.9.9 1.5.6 3.6-1.5 4.3-2.8 5.3-5.1z"/></svg>',
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#000" d="M16.2 13.5c.1-4.6-.9-7-2.5-8.9l1.9-.9c.6-.6.2-1.7-.7-1.7H9.3c-.5 0-1 .4-1 1v5.6c0 .9 1.1 1.3 1.7.7l1.9-1.9c1.2 1.4 1.9 3.1 1.9 5.1 0 2.1-1.7 4.9-4.5 6.2-.6.3-.8.9-.6 1.5.2.5.9.9 1.5.6 3.6-1.5 4.3-2.8 5.3-5.1z"/></svg>',
 };

packages/common-ui-web/test/components/ImageDetailedView/ImageDetailedViewOverlay/ImageDetailedViewOverlay.test.tsx

@@ -30,7 +30,7 @@ import {
   useImageLabelIcon,
 } from '../../../../src/components/ImageDetailedView/ImageDetailedViewOverlay/hooks';
 import { Image, ImageStatus } from '@monkvision/types';
-import { Button, Icon } from '../../../../src';
+import { Button, Icon, IconName } from '../../../../src';
 import { useObjectTranslation } from '@monkvision/common';
 
 function createProps(): ImageDetailedViewOverlayProps {
@@ -87,7 +87,7 @@ describe('ImageDetailedViewOverlay component', () => {
   it('should display the image label with the proper icon', () => {
     const props = createProps();
     props.image.label = { en: 'test', fr: 'fr', de: 'test-de', nl: 'test-nl' };
-    const icon = 'hello-test-icon';
+    const icon = 'hello-test-icon' as IconName;
     const primaryColor = 'test-primary-test';
     (useImageLabelIcon as jest.Mock).mockImplementationOnce(() => ({ icon, primaryColor }));
     const label = 'valid-test-label';

packages/common-ui-web/test/components/InspectionGallery/InspectionGalleryItemCard/InspectionGalleryItemCard.test.tsx

@@ -164,7 +164,7 @@ describe('InspectionGalleryItemCard component', () => {
     const { unmount } = render(<InspectionGalleryItemCard {...props} />);
 
     expect(useInspectionGalleryItemStatusIconName).toHaveBeenCalled();
-    expectPropsOnChildMock(Icon, { icon: useInspectionGalleryItemStatusIconName({} as any) });
+    expectPropsOnChildMock(Icon, { icon: useInspectionGalleryItemStatusIconName({} as any)! });
 
     unmount();
   });

packages/common-ui-web/test/components/InspectionGallery/hooks/useInspectionGalleryItems.test.ts

@@ -1,6 +1,12 @@
 import { renderHook } from '@testing-library/react-hooks';
 import { sights } from '@monkvision/sights';
-import { ComplianceIssue, ComplianceOptions, Image, ImageStatus } from '@monkvision/types';
+import {
+  AddDamage,
+  ComplianceIssue,
+  ComplianceOptions,
+  Image,
+  ImageStatus,
+} from '@monkvision/types';
 import { createEmptyMonkState, useMonkState } from '@monkvision/common';
 import { useInspectionPoll } from '@monkvision/network';
 import { useInspectionGalleryItems } from '../../../../src/components/InspectionGallery/hooks';
@@ -19,6 +25,7 @@ function createProps(): InspectionGalleryProps {
     },
     refreshIntervalMs: 1234,
     captureMode: true,
+    addDamage: AddDamage.TWO_SHOT,
   };
 }
 

packages/common-ui-web/test/components/LiveConfigAppProvider.test.tsx

@@ -19,7 +19,7 @@ describe('LiveConfigAppProvider component', () => {
   });
 
   it('should fetch the live config and pass it to the MonkAppStateProvider component', async () => {
-    const config = { hello: 'world' };
+    const config = { hello: 'world' } as unknown as CaptureAppConfig;
     (MonkApi.getLiveConfig as jest.Mock).mockImplementationOnce(() => Promise.resolve(config));
     const id = 'test-id-test';
     const { unmount } = render(<LiveConfigAppProvider id={id} />);

packages/common/test/i18n/utils.test.tsx

@@ -72,8 +72,8 @@ describe('Monkvision i18n utils', () => {
     }>;
 
     it('should wrap the component in a I18nextProvider with the given instance', () => {
-      const instance = { test: 'test' };
-      const Wrapped = i18nWrap(TestComponent, instance as unknown as i18n);
+      const instance = { test: 'test' } as unknown as i18n;
+      const Wrapped = i18nWrap(TestComponent, instance);
 
       const { unmount } = render(<Wrapped />);
 

packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx

@@ -24,6 +24,7 @@ import {
   DeviceOrientation,
   PhotoCaptureTutorialOption,
   Sight,
+  AddDamage,
 } from '@monkvision/types';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -59,7 +60,7 @@ export interface PhotoCaptureProps
       | 'showCloseButton'
       | 'enforceOrientation'
       | 'allowSkipRetake'
-      | 'enableAddDamage'
+      | 'addDamage'
       | 'sightGuidelines'
       | 'enableSightGuidelines'
       | 'enableTutorial'
@@ -129,7 +130,7 @@ export function PhotoCapture({
   customComplianceThresholdsPerSight,
   useLiveCompliance = false,
   allowSkipRetake = false,
-  enableAddDamage = true,
+  addDamage = AddDamage.PART_SELECT,
   sightGuidelines,
   enableTutorial = PhotoCaptureTutorialOption.FIRST_TIME_ONLY,
   allowSkipTutorial = true,
@@ -261,14 +262,15 @@ export function PhotoCapture({
     onSelectSight: sightState.selectSight,
     onRetakeSight: sightState.retakeSight,
     onAddDamage: addDamageHandle.handleAddDamage,
+    onAddDamageParts: addDamageHandle.handleAddParts,
     onCancelAddDamage: addDamageHandle.handleCancelAddDamage,
     onRetry: sightState.retryLoadingInspection,
     loading,
     onClose,
     inspectionId,
     showCloseButton,
     images,
-    enableAddDamage,
+    addDamage,
     sightGuidelines,
     enableSightGuidelines,
     currentTutorialStep,
@@ -310,7 +312,7 @@ export function PhotoCapture({
           onBack={handleGalleryBack}
           onNavigateToCapture={handleNavigateToCapture}
           onValidate={handleGalleryValidate}
-          enableAddDamage={enableAddDamage}
+          addDamage={addDamage}
           validateButtonLabel={validateButtonLabel}
           isInspectionCompleted={sightState.isInspectionCompleted}
           {...complianceOptions}