Added 'part_select' addDamage feature + fixed import from common hook…

…s and components

documentation/src/utils/schemas.ts

@@ -1,5 +1,6 @@
 import { z, CustomErrorParams } from 'zod';
 import {
+  AddDamage,
   CameraResolution,
   ComplianceIssue,
   CompressionFormat,
@@ -307,7 +308,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/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx

@@ -17,6 +17,7 @@ import {
 import { useMonitoring } from '@monkvision/monitoring';
 import { MonkApiConfig } from '@monkvision/network';
 import {
+  AddDamage,
   CameraConfig,
   CaptureAppConfig,
   ComplianceOptions,
@@ -31,18 +32,20 @@ import { useTranslation } from 'react-i18next';
 import { styles } from './PhotoCapture.styles';
 import { PhotoCaptureHUD, PhotoCaptureHUDProps } from './PhotoCaptureHUD';
 import {
-  useAdaptiveCameraConfig,
-  useAddDamageMode,
-  useBadConnectionWarning,
   useComplianceAnalytics,
-  usePhotoCaptureImages,
   usePhotoCaptureSightState,
   usePhotoCaptureTutorial,
-  usePictureTaken,
   useStartTasksOnComplete,
-  useTracking,
-  useUploadQueue,
 } from './hooks';
+import {
+  usePictureTaken,
+  useAddDamageMode,
+  useUploadQueue,
+  usePhotoCaptureImages,
+  useAdaptiveCameraConfig,
+  useBadConnectionWarning,
+  useTracking,
+} from '../hooks';
 
 /**
  * Props of the PhotoCapture component.
@@ -60,7 +63,7 @@ export interface PhotoCaptureProps
       | 'showCloseButton'
       | 'enforceOrientation'
       | 'allowSkipRetake'
-      | 'enableAddDamage'
+      | 'addDamage'
       | 'sightGuidelines'
       | 'enableSightGuidelines'
       | 'enableTutorial'
@@ -135,7 +138,7 @@ export function PhotoCapture({
   customComplianceThresholdsPerSight,
   useLiveCompliance = false,
   allowSkipRetake = false,
-  enableAddDamage = true,
+  addDamage = AddDamage.PART_SELECT,
   sightGuidelines,
   enableTutorial = PhotoCaptureTutorialOption.FIRST_TIME_ONLY,
   allowSkipTutorial = true,
@@ -163,7 +166,14 @@ export function PhotoCapture({
   const dimensions = useWindowDimensions();
   const analytics = useAnalytics();
   const loading = useLoadingState();
-  const addDamageHandle = useAddDamageMode();
+  const handleOpenGallery = () => {
+    setCurrentScreen(PhotoCaptureScreen.GALLERY);
+    analytics.trackEvent('Gallery Opened');
+  };
+  const addDamageHandle = useAddDamageMode({
+    addDamage,
+    handleOpenGallery,
+  });
   useTracking({ inspectionId, authToken: apiConfig.authToken });
   const { setIsInitialInspectionFetched } = useComplianceAnalytics({ inspectionId, sights });
   const { adaptiveCameraConfig, uploadEventHandlers: adaptiveUploadEventHandlers } =
@@ -218,10 +228,6 @@ export function PhotoCapture({
     tasksBySight,
     onPictureTaken,
   });
-  const handleOpenGallery = () => {
-    setCurrentScreen(PhotoCaptureScreen.GALLERY);
-    analytics.trackEvent('Gallery Opened');
-  };
   const handleGalleryBack = () => setCurrentScreen(PhotoCaptureScreen.CAMERA);
   const handleNavigateToCapture = (options: NavigateToCaptureOptions) => {
     if (options.reason === NavigateToCaptureReason.ADD_DAMAGE) {
@@ -264,18 +270,21 @@ export function PhotoCapture({
     sightsTaken: sightState.sightsTaken,
     lastPictureTakenUri: sightState.lastPictureTakenUri,
     mode: addDamageHandle.mode,
+    vehicleParts: addDamageHandle.vehicleParts,
     onOpenGallery: handleOpenGallery,
     onSelectSight: sightState.selectSight,
     onRetakeSight: sightState.retakeSight,
     onAddDamage: addDamageHandle.handleAddDamage,
+    onAddDamagePartsSelected: addDamageHandle.handleAddDamagePartsSelected,
     onCancelAddDamage: addDamageHandle.handleCancelAddDamage,
     onRetry: sightState.retryLoadingInspection,
     loading,
     onClose,
     inspectionId,
     showCloseButton,
     images,
-    enableAddDamage,
+    addDamage,
+    onValidateVehicleParts: addDamageHandle.handleValidateVehicleParts,
     sightGuidelines,
     enableSightGuidelines,
     currentTutorialStep,
@@ -317,7 +326,7 @@ export function PhotoCapture({
           onBack={handleGalleryBack}
           onNavigateToCapture={handleNavigateToCapture}
           onValidate={handleGalleryValidate}
-          enableAddDamage={enableAddDamage}
+          addDamage={addDamage}
           validateButtonLabel={validateButtonLabel}
           isInspectionCompleted={sightState.isInspectionCompleted}
           {...complianceOptions}

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

@@ -1,16 +1,16 @@
 import { useMemo, useState } from 'react';
-import { CaptureAppConfig, Image, ImageStatus, Sight } from '@monkvision/types';
+import { CaptureAppConfig, Image, ImageStatus, Sight, VehiclePart } from '@monkvision/types';
 import { useTranslation } from 'react-i18next';
 import { BackdropDialog } from '@monkvision/common-ui-web';
 import { CameraHUDProps } from '@monkvision/camera-web';
 import { LoadingState } from '@monkvision/common';
 import { useAnalytics } from '@monkvision/analytics';
-import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons';
 import { usePhotoCaptureHUDStyle } from './hooks';
-import { PhotoCaptureMode, TutorialSteps } from '../hooks';
-import { PhotoCaptureHUDOverlay } from './PhotoCaptureHUDOverlay';
+import { TutorialSteps } from '../hooks';
 import { PhotoCaptureHUDElements } from './PhotoCaptureHUDElements';
 import { PhotoCaptureHUDTutorial } from './PhotoCaptureHUDTutorial';
+import { CaptureMode } from '../../types';
+import { HUDButtons, HUDOverlay } from '../../components';
 
 /**
  * Props of the PhotoCaptureHUD component.
@@ -21,7 +21,7 @@ export interface PhotoCaptureHUDProps
       CaptureAppConfig,
       | 'enableSightGuidelines'
       | 'sightGuidelines'
-      | 'enableAddDamage'
+      | 'addDamage'
       | 'showCloseButton'
       | 'allowSkipTutorial'
     > {
@@ -48,7 +48,7 @@ export interface PhotoCaptureHUDProps
   /**
    * The current mode of the component.
    */
-  mode: PhotoCaptureMode;
+  mode: CaptureMode;
   /**
    * Global loading state of the PhotoCapture component.
    */
@@ -57,6 +57,10 @@ export interface PhotoCaptureHUDProps
    * The current tutorial step in PhotoCapture component.
    */
   currentTutorialStep: TutorialSteps | null;
+  /**
+   * Current vehicle parts selected to take a picture of.
+   */
+  vehicleParts: VehiclePart[];
   /**
    * Callback called when the user clicks on "Next" button in PhotoCapture tutorial.
    */
@@ -74,11 +78,15 @@ export interface PhotoCaptureHUDProps
    */
   onRetakeSight: (sight: string) => void;
   /**
-   * Callback to be called when the user clicks on the "Add Damage" button.
+   * Callback called when the user clicks on the "Add Damage" button.
    */
   onAddDamage: () => void;
   /**
-   * Callback to be called when the user clicks on the "Cancel" button of the Add Damage mode.
+   * Callback called when the user selects the parts to take a picture of.
+   */
+  onAddDamagePartsSelected?: (parts: VehiclePart[]) => void;
+  /**
+   * Callback called when the user clicks on the "Cancel" button of the Add Damage mode.
    */
   onCancelAddDamage: () => void;
   /**
@@ -89,6 +97,10 @@ export interface PhotoCaptureHUDProps
    * Callback called when the user clicks on the gallery icon.
    */
   onOpenGallery: () => void;
+  /**
+   * Callback called when the user clicks on the "Validate" button of the Add Damage mode.
+   */
+  onValidateVehicleParts: () => void;
   /**
    * Callback called when the user clicks on the close button. If this callback is not provided, the close button is not
    * displayed.
@@ -112,9 +124,12 @@ export function PhotoCaptureHUD({
   sightsTaken,
   lastPictureTakenUri,
   mode,
+  vehicleParts,
   onSelectSight,
   onRetakeSight,
   onAddDamage,
+  onAddDamagePartsSelected,
+  onValidateVehicleParts,
   onCancelAddDamage,
   onOpenGallery,
   onRetry,
@@ -124,7 +139,7 @@ export function PhotoCaptureHUD({
   handle,
   cameraPreview,
   images,
-  enableAddDamage,
+  addDamage,
   sightGuidelines,
   enableSightGuidelines,
   currentTutorialStep,
@@ -161,35 +176,40 @@ export function PhotoCaptureHUD({
           sights={sights}
           sightsTaken={sightsTaken}
           mode={mode}
+          vehicleParts={vehicleParts}
           onAddDamage={onAddDamage}
           onCancelAddDamage={onCancelAddDamage}
+          onAddDamagePartsSelected={onAddDamagePartsSelected}
           onSelectSight={onSelectSight}
           onRetakeSight={onRetakeSight}
+          onValidateVehicleParts={onValidateVehicleParts}
           isLoading={loading.isLoading}
           error={loading.error ?? handle.error}
           previewDimensions={handle.previewDimensions}
           images={images}
-          enableAddDamage={enableAddDamage}
+          addDamage={addDamage}
           sightGuidelines={sightGuidelines}
           enableSightGuidelines={enableSightGuidelines}
           tutorialStep={currentTutorialStep}
         />
       </div>
-      <PhotoCaptureHUDButtons
-        onOpenGallery={onOpenGallery}
-        onTakePicture={handle?.takePicture}
-        onClose={() => setShowCloseModal(true)}
-        galleryPreview={lastPictureTakenUri ?? undefined}
-        closeDisabled={!!loading.error || !!handle.error}
-        galleryDisabled={!!loading.error || !!handle.error}
-        takePictureDisabled={
-          !!loading.error || !!handle.error || handle.isLoading || loading.isLoading
-        }
-        showCloseButton={showCloseButton}
-        showGalleryBadge={retakeCount > 0}
-        retakeCount={retakeCount}
-      />
-      <PhotoCaptureHUDOverlay
+      {mode !== CaptureMode.ADD_DAMAGE_PART_SELECT && (
+        <HUDButtons
+          onOpenGallery={onOpenGallery}
+          onTakePicture={handle?.takePicture}
+          onClose={() => setShowCloseModal(true)}
+          galleryPreview={lastPictureTakenUri ?? undefined}
+          closeDisabled={!!loading.error || !!handle.error}
+          galleryDisabled={!!loading.error || !!handle.error}
+          takePictureDisabled={
+            !!loading.error || !!handle.error || handle.isLoading || loading.isLoading
+          }
+          showCloseButton={showCloseButton}
+          showGalleryBadge={retakeCount > 0}
+          retakeCount={retakeCount}
+        />
+      )}
+      <HUDOverlay
         inspectionId={inspectionId}
         handle={handle}
         isCaptureLoading={loading.isLoading}
@@ -211,6 +231,7 @@ export function PhotoCaptureHUD({
         allowSkipTutorial={allowSkipTutorial}
         sightId={selectedSight.id}
         sightGuidelines={sightGuidelines}
+        addDamage={addDamage}
       />
     </div>
   );

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

@@ -1,14 +1,14 @@
-import { CaptureAppConfig, Image, PixelDimensions, Sight } from '@monkvision/types';
-import { PhotoCaptureMode, TutorialSteps } from '../../hooks';
+import { CaptureAppConfig, Image, PixelDimensions, Sight, VehiclePart } from '@monkvision/types';
+import { TutorialSteps } from '../../hooks';
 import { PhotoCaptureHUDElementsSight } from '../PhotoCaptureHUDElementsSight';
-import { PhotoCaptureHUDElementsAddDamage1stShot } from '../PhotoCaptureHUDElementsAddDamage1stShot';
-import { PhotoCaptureHUDElementsAddDamage2ndShot } from '../PhotoCaptureHUDElementsAddDamage2ndShot';
+import { CloseUpShot, ZoomOutShot, PartSelection } from '../../../components';
+import { CaptureMode } from '../../../types';
 
 /**
  * Props of the PhotoCaptureHUDElements component.
  */
 export interface PhotoCaptureHUDElementsProps
-  extends Pick<CaptureAppConfig, 'enableSightGuidelines' | 'sightGuidelines' | 'enableAddDamage'> {
+  extends Pick<CaptureAppConfig, 'enableSightGuidelines' | 'sightGuidelines' | 'addDamage'> {
   /**
    * The currently selected sight in the PhotoCapture component : the sight that the user needs to capture.
    */
@@ -24,15 +24,23 @@ export interface PhotoCaptureHUDElementsProps
   /**
    * The current mode of the component.
    */
-  mode: PhotoCaptureMode;
+  mode: CaptureMode;
   /**
    * The current tutorial step in PhotoCapture component.
    */
   tutorialStep: TutorialSteps | null;
+  /**
+   * Current vehicle parts selected to take a picture of.
+   */
+  vehicleParts: VehiclePart[];
   /**
    * Callback called when the user presses the Add Damage button.
    */
   onAddDamage: () => void;
+  /**
+   * Callback called when the user selects the parts to take a picture of.
+   */
+  onAddDamagePartsSelected?: (parts: VehiclePart[]) => void;
   /**
    * Callback called when the user cancels the Add Damage mode.
    */
@@ -45,6 +53,10 @@ export interface PhotoCaptureHUDElementsProps
    * Callback called when the user manually selects a sight to retake.
    */
   onRetakeSight: (sight: string) => void;
+  /**
+   * Callback called when the user clicks on the "Validate" button of the Add Damage mode.
+   */
+  onValidateVehicleParts: () => void;
   /**
    * The effective pixel dimensions of the Camera video stream on the screen.
    */
@@ -70,7 +82,7 @@ export function PhotoCaptureHUDElements(params: PhotoCaptureHUDElementsProps) {
   if (params.isLoading || !!params.error) {
     return null;
   }
-  if (params.mode === PhotoCaptureMode.SIGHT) {
+  if (params.mode === CaptureMode.SIGHT) {
     return (
       <PhotoCaptureHUDElementsSight
         sights={params.sights}
@@ -81,20 +93,34 @@ export function PhotoCaptureHUDElements(params: PhotoCaptureHUDElementsProps) {
         onAddDamage={params.onAddDamage}
         previewDimensions={params.previewDimensions}
         images={params.images}
-        enableAddDamage={params.enableAddDamage}
+        addDamage={params.addDamage}
         sightGuidelines={params.sightGuidelines}
         enableSightGuidelines={params.enableSightGuidelines}
         tutorialStep={params.tutorialStep}
       />
     );
   }
-  if (params.mode === PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT) {
-    return <PhotoCaptureHUDElementsAddDamage1stShot onCancel={params.onCancelAddDamage} />;
+  if (params.mode === CaptureMode.ADD_DAMAGE_1ST_SHOT) {
+    return <ZoomOutShot onCancel={params.onCancelAddDamage} />;
+  }
+  if (
+    [CaptureMode.ADD_DAMAGE_2ND_SHOT, CaptureMode.ADD_DAMAGE_PART_SELECT_SHOT].includes(params.mode)
+  ) {
+    return (
+      <CloseUpShot
+        onCancel={params.onCancelAddDamage}
+        streamDimensions={params.previewDimensions}
+        showCounter={params.mode === CaptureMode.ADD_DAMAGE_2ND_SHOT}
+      />
+    );
   }
   return (
-    <PhotoCaptureHUDElementsAddDamage2ndShot
+    <PartSelection
       onCancel={params.onCancelAddDamage}
-      streamDimensions={params.previewDimensions}
+      vehicleParts={params.vehicleParts}
+      disabled={params.mode === CaptureMode.ADD_DAMAGE_PART_SELECT}
+      onValidateVehicleParts={params.onValidateVehicleParts}
+      onAddDamagePartsSelected={params.onAddDamagePartsSelected}
     />
   );
 }