From 881009fb1007781275bf113bdd3ec94285e7c559 Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Thu, 22 Aug 2024 16:48:56 +0530
Subject: [PATCH 01/18] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20enableAddDamage=20to?=
 =?UTF-8?q?=20addDamage=20enum?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/demo-app/src/local-config.json           |  2 +-
 .../test/pages/PhotoCapturePage.test.tsx      |  4 ++--
 documentation/docs/photo-capture-workflow.md  |  2 +-
 documentation/src/utils/schemas.ts            |  3 ++-
 .../hooks/useInspectionGalleryItems.ts        | 17 ++++---------
 .../src/components/InspectionGallery/types.ts |  4 ++--
 .../src/PhotoCapture/PhotoCapture.tsx         |  9 +++----
 .../PhotoCaptureHUD/PhotoCaptureHUD.tsx       |  6 ++---
 .../PhotoCaptureHUDElements.tsx               |  4 ++--
 .../AddDamageButton/AddDamageButton.tsx       |  9 +++----
 .../PhotoCaptureHUDElementsSight.tsx          |  6 ++---
 .../SightGuideline/SightGuideline.tsx         |  9 +++----
 .../PhotoCaptureHUDElementsSight/hooks.ts     |  2 +-
 .../PhotoCaptureHUDTutorial.tsx               |  4 ++--
 .../test/PhotoCapture/PhotoCapture.test.tsx   |  5 ++--
 .../AddDamageButton.test.tsx                  |  9 +++----
 .../SightGuideline.test.tsx                   |  3 ++-
 .../PhotoCaptureHUDTutorial.test.tsx          |  3 ++-
 packages/types/src/config.ts                  | 24 +++++++++++++++----
 19 files changed, 71 insertions(+), 54 deletions(-)

diff --git a/apps/demo-app/src/local-config.json b/apps/demo-app/src/local-config.json
index fec061484..b89d13a6d 100644
--- a/apps/demo-app/src/local-config.json
+++ b/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": "two_shot",
   "enableSightGuidelines": true,
   "allowVehicleTypeSelection": true,
   "allowManualLogin": true,
diff --git a/apps/demo-app/test/pages/PhotoCapturePage.test.tsx b/apps/demo-app/test/pages/PhotoCapturePage.test.tsx
index 187a62d64..82894cf9a 100644
--- a/apps/demo-app/test/pages/PhotoCapturePage.test.tsx
+++ b/apps/demo-app/test/pages/PhotoCapturePage.test.tsx
@@ -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,
diff --git a/documentation/docs/photo-capture-workflow.md b/documentation/docs/photo-capture-workflow.md
index 5490e6453..813c0fe02 100644
--- a/documentation/docs/photo-capture-workflow.md
+++ b/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`. TODO
 
 ## 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
diff --git a/documentation/src/utils/schemas.ts b/documentation/src/utils/schemas.ts
index b64eda6f6..37c696c17 100644
--- a/documentation/src/utils/schemas.ts
+++ b/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(),
diff --git a/packages/common-ui-web/src/components/InspectionGallery/hooks/useInspectionGalleryItems.ts b/packages/common-ui-web/src/components/InspectionGallery/hooks/useInspectionGalleryItems.ts
index 576b3c14c..d29107ee2 100644
--- a/packages/common-ui-web/src/components/InspectionGallery/hooks/useInspectionGalleryItems.ts
+++ b/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);
 
diff --git a/packages/common-ui-web/src/components/InspectionGallery/types.ts b/packages/common-ui-web/src/components/InspectionGallery/types.ts
index 01fbe9410..bb602e4dc 100644
--- a/packages/common-ui-web/src/components/InspectionGallery/types.ts
+++ b/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.
    */
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
index 33cf907bd..ab61087bf 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
+++ b/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.TWO_SHOT,
   sightGuidelines,
   enableTutorial = PhotoCaptureTutorialOption.FIRST_TIME_ONLY,
   allowSkipTutorial = true,
@@ -268,7 +269,7 @@ export function PhotoCapture({
     inspectionId,
     showCloseButton,
     images,
-    enableAddDamage,
+    addDamage,
     sightGuidelines,
     enableSightGuidelines,
     currentTutorialStep,
@@ -310,7 +311,7 @@ export function PhotoCapture({
           onBack={handleGalleryBack}
           onNavigateToCapture={handleNavigateToCapture}
           onValidate={handleGalleryValidate}
-          enableAddDamage={enableAddDamage}
+          addDamage={addDamage}
           validateButtonLabel={validateButtonLabel}
           isInspectionCompleted={sightState.isInspectionCompleted}
           {...complianceOptions}
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
index 67394cce7..18ba9300b 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
@@ -21,7 +21,7 @@ export interface PhotoCaptureHUDProps
       CaptureAppConfig,
       | 'enableSightGuidelines'
       | 'sightGuidelines'
-      | 'enableAddDamage'
+      | 'addDamage'
       | 'showCloseButton'
       | 'allowSkipTutorial'
     > {
@@ -124,7 +124,7 @@ export function PhotoCaptureHUD({
   handle,
   cameraPreview,
   images,
-  enableAddDamage,
+  addDamage,
   sightGuidelines,
   enableSightGuidelines,
   currentTutorialStep,
@@ -169,7 +169,7 @@ export function PhotoCaptureHUD({
           error={loading.error ?? handle.error}
           previewDimensions={handle.previewDimensions}
           images={images}
-          enableAddDamage={enableAddDamage}
+          addDamage={addDamage}
           sightGuidelines={sightGuidelines}
           enableSightGuidelines={enableSightGuidelines}
           tutorialStep={currentTutorialStep}
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx
index 7d68858db..64d1411c1 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx
@@ -8,7 +8,7 @@ import { PhotoCaptureHUDElementsAddDamage2ndShot } from '../PhotoCaptureHUDEleme
  * 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.
    */
@@ -81,7 +81,7 @@ 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}
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton/AddDamageButton.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton/AddDamageButton.tsx
index 44e5dbf65..92a727820 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton/AddDamageButton.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton/AddDamageButton.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@monkvision/common-ui-web';
+import { AddDamage } from '@monkvision/types';
 import { useTranslation } from 'react-i18next';
 import { usePhotoCaptureHUDButtonBackground } from '../../hooks';
 
@@ -13,21 +14,21 @@ export interface AddDamageButtonProps {
   /**
    * Boolean indicating whether the Add Damage feature is enabled. If disabled, the `Add Damage` button will be hidden.
    *
-   * @default true
+   * @default AddDamage.DISABLED
    */
-  enableAddDamage?: boolean;
+  addDamage?: AddDamage;
 }
 
 /**
  * Custom button displayed in the PhotoCapture Camera HUD that allows user to enter add damage mode.
  */
-export function AddDamageButton({ onAddDamage, enableAddDamage }: AddDamageButtonProps) {
+export function AddDamageButton({ onAddDamage, addDamage }: AddDamageButtonProps) {
   const { t } = useTranslation();
   const primaryColor = usePhotoCaptureHUDButtonBackground();
 
   return (
     <>
-      {enableAddDamage && (
+      {addDamage && addDamage !== AddDamage.DISABLED && (
         <Button
           icon='add'
           onClick={onAddDamage}
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/PhotoCaptureHUDElementsSight.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/PhotoCaptureHUDElementsSight.tsx
index eca17bf92..b5682e41d 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/PhotoCaptureHUDElementsSight.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/PhotoCaptureHUDElementsSight.tsx
@@ -20,7 +20,7 @@ export function PhotoCaptureHUDElementsSight({
   sightsTaken,
   previewDimensions,
   images,
-  enableAddDamage,
+  addDamage,
   sightGuidelines,
   enableSightGuidelines,
   tutorialStep,
@@ -39,9 +39,9 @@ export function PhotoCaptureHUDElementsSight({
               sightId={selectedSight.id}
               sightGuidelines={sightGuidelines}
               enableSightGuidelines={enableSightGuidelines}
-              enableAddDamage={enableAddDamage}
+              addDamage={addDamage}
             />
-            <AddDamageButton onAddDamage={onAddDamage} enableAddDamage={enableAddDamage} />
+            <AddDamageButton onAddDamage={onAddDamage} addDamage={addDamage} />
           </div>
           <div style={style.bottom}>
             <PhotoCaptureHUDCounter
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx
index f7720662d..92faf5df6 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Button } from '@monkvision/common-ui-web';
-import { CaptureAppConfig } from '@monkvision/types';
+import { AddDamage, CaptureAppConfig } from '@monkvision/types';
 import { useTranslation } from 'react-i18next';
 import { getLanguage } from '@monkvision/common';
 import { usePhotoCaptureHUDButtonBackground } from '../../hooks';
@@ -10,7 +10,7 @@ import { styles } from './SightGuideline.styles';
  * Props of the SightGuideline component.
  */
 export interface SightGuidelineProps
-  extends Pick<CaptureAppConfig, 'enableAddDamage' | 'sightGuidelines' | 'enableSightGuidelines'> {
+  extends Pick<CaptureAppConfig, 'addDamage' | 'sightGuidelines' | 'enableSightGuidelines'> {
   /**
    * The id of the sight.
    */
@@ -24,13 +24,14 @@ export function SightGuideline({
   sightId,
   sightGuidelines,
   enableSightGuidelines,
-  enableAddDamage,
+  addDamage,
 }: SightGuidelineProps) {
   const [showGuideline, setShowGuideline] = useState(true);
   const primaryColor = usePhotoCaptureHUDButtonBackground();
   const { i18n } = useTranslation();
 
-  const style = enableAddDamage ? styles['container'] : styles['containerWide'];
+  const style =
+    addDamage && addDamage === AddDamage.DISABLED ? styles['containerWide'] : styles['container'];
 
   const guidelineFound = sightGuidelines?.find((value) => value.sightIds.includes(sightId));
 
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/hooks.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/hooks.ts
index 99513078e..023dabe2b 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/hooks.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/hooks.ts
@@ -8,7 +8,7 @@ import { TutorialSteps } from '../../hooks';
  * Props of the PhotoCaptureHUDElementsSight component.
  */
 export interface PhotoCaptureHUDElementsSightProps
-  extends Pick<CaptureAppConfig, 'enableSightGuidelines' | 'sightGuidelines' | 'enableAddDamage'> {
+  extends Pick<CaptureAppConfig, 'enableSightGuidelines' | 'sightGuidelines' | 'addDamage'> {
   /**
    * The list of sights provided to the PhotoCapture component.
    */
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx
index b6004d423..9ca91cd9a 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@monkvision/common-ui-web';
-import { CaptureAppConfig } from '@monkvision/types';
+import { AddDamage, CaptureAppConfig } from '@monkvision/types';
 import { styles } from './PhotoCaptureHUDTutorial.styles';
 import { TutorialSteps } from '../../hooks';
 import { usePhotoCaptureHUDButtonBackground } from '../hooks';
@@ -60,7 +60,7 @@ export function PhotoCaptureHUDTutorial({
               sightId={sightId}
               sightGuidelines={sightGuidelines}
               enableSightGuidelines={currentTutorialStep === TutorialSteps.GUIDELINE}
-              enableAddDamage={true}
+              addDamage={AddDamage.TWO_SHOT}
             />
             <Button
               style={{ ...styles['closeButton'], ...getButtonStyle(allowSkipTutorial) }}
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
index d9e4dc57a..d89f0a138 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
@@ -1,5 +1,6 @@
 import { sights } from '@monkvision/sights';
 import {
+  AddDamage,
   CameraResolution,
   ComplianceIssue,
   CompressionFormat,
@@ -111,7 +112,7 @@ function createProps(): PhotoCaptureProps {
     allowImageUpscaling: true,
     useAdaptiveImageQuality: false,
     allowSkipRetake: true,
-    enableAddDamage: true,
+    addDamage: AddDamage.TWO_SHOT,
     maxUploadDurationWarning: 456,
     enableSightGuidelines: true,
     sightGuidelines: [
@@ -336,7 +337,7 @@ describe('PhotoCapture component', () => {
         showCloseButton: props.showCloseButton,
         onOpenGallery: expect.any(Function),
         images,
-        enableAddDamage: props.enableAddDamage,
+        addDamage: props.addDamage,
         enableSightGuidelines: props.enableSightGuidelines,
         sightGuidelines: props.sightGuidelines,
         currentTutorialStep: tutorial.currentTutorialStep,
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton.test.tsx
index 07c9ed665..37eb1a574 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton.test.tsx
@@ -3,12 +3,13 @@ import { useTranslation } from 'react-i18next';
 import { expectPropsOnChildMock } from '@monkvision/test-utils';
 import { Button } from '@monkvision/common-ui-web';
 import { AddDamageButton } from '../../../../src';
+import { AddDamage } from '@monkvision/types';
 
 describe('AddDamageButton component', () => {
-  it('should not render when enableAddDamage is false', () => {
+  it('should not render when addDamage is disable', () => {
     const onAddDamage = jest.fn();
     const { unmount } = render(
-      <AddDamageButton onAddDamage={onAddDamage} enableAddDamage={false} />,
+      <AddDamageButton onAddDamage={onAddDamage} addDamage={AddDamage.DISABLED} />,
     );
     expect(Button).not.toHaveBeenCalled();
 
@@ -18,7 +19,7 @@ describe('AddDamageButton component', () => {
   it('should pass the onAddDamage callback to the onClick event of the Button', () => {
     const onAddDamage = jest.fn();
     const { unmount } = render(
-      <AddDamageButton onAddDamage={onAddDamage} enableAddDamage={true} />,
+      <AddDamageButton onAddDamage={onAddDamage} addDamage={AddDamage.TWO_SHOT} />,
     );
 
     expectPropsOnChildMock(Button, { onClick: onAddDamage });
@@ -30,7 +31,7 @@ describe('AddDamageButton component', () => {
     const label = 'test-label-ok';
     const tMock = jest.fn(() => label);
     (useTranslation as jest.Mock).mockImplementationOnce(() => ({ t: tMock }));
-    const { unmount } = render(<AddDamageButton enableAddDamage={true} />);
+    const { unmount } = render(<AddDamageButton addDamage={AddDamage.TWO_SHOT} />);
 
     expect(tMock).toHaveBeenCalledWith('photo.hud.sight.addDamageBtn');
     expectPropsOnChildMock(Button, { children: label });
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline.test.tsx
index aadbc94bd..5d2d2073e 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline.test.tsx
@@ -4,6 +4,7 @@ import { expectPropsOnChildMock } from '@monkvision/test-utils';
 import { Button } from '@monkvision/common-ui-web';
 import { SightGuideline } from '../../../../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline';
 import { getLanguage } from '@monkvision/common';
+import { AddDamage } from '@monkvision/types';
 
 function createProps() {
   return {
@@ -18,7 +19,7 @@ function createProps() {
         information: 'info-test',
       },
     ],
-    enableAddDamage: true,
+    addDamage: AddDamage.TWO_SHOT,
     enableSightGuidelines: true,
   };
 }
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureTutorial/PhotoCaptureHUDTutorial.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureTutorial/PhotoCaptureHUDTutorial.test.tsx
index 43604bef9..5c9056dde 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureTutorial/PhotoCaptureHUDTutorial.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureTutorial/PhotoCaptureHUDTutorial.test.tsx
@@ -14,6 +14,7 @@ import {
 } from '../../../../src';
 import { expectPropsOnChildMock } from '@monkvision/test-utils';
 import { TutorialSteps } from '../../../../src/PhotoCapture/hooks';
+import { AddDamage } from '@monkvision/types';
 
 const BACKDROP_TEST_ID = 'backdrop';
 const TITLE_TEST_ID = 'title';
@@ -57,7 +58,7 @@ describe('PhotoCaptureHUDTutorial component', () => {
       sightId: props.sightId,
       sightGuidelines: props.sightGuidelines,
       enableSightGuidelines: props.currentTutorialStep === TutorialSteps.GUIDELINE,
-      enableAddDamage: true,
+      addDamage: AddDamage.TWO_SHOT,
     });
 
     expect(DynamicSVG).not.toHaveBeenCalled();
diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
index 6e06506fb..ffe2a7ec8 100644
--- a/packages/types/src/config.ts
+++ b/packages/types/src/config.ts
@@ -23,6 +23,23 @@ export enum PhotoCaptureTutorialOption {
   FIRST_TIME_ONLY = 'first_time_only',
 }
 
+/**
+ * Enumeration of the possible values for the Add Damage type.
+ */
+export enum AddDamage {
+  /**
+   * The Add Damage feature is disabled.
+   */
+  DISABLED = 'disabled',
+  /**
+   * The Add Damage feature is enabled with two shot. first for the zoom out image and second for the damaged image.
+   */
+  TWO_SHOT = 'two_shot',
+  /**
+   * The Add Damage feature is enabled with a single shot after part selected.
+   */
+  PART_SELECT = 'part_select',
+}
 /**
  * Configuration used to configure the Camera and picture output of the SDK.
  */
@@ -106,12 +123,11 @@ export type CaptureAppConfig = CameraConfig &
      */
     allowSkipRetake?: boolean;
     /**
-     * Boolean indicating if `Add Damage` feature should be enabled or not. If disabled, the `Add Damage` button will
-     * be hidden.
+     * Indicating if Add Damage type. If disabled, the `Add Damage` button will be hidden.
      *
-     * @default true
+     * @default AddDamage.TWO_SHOT
      */
-    enableAddDamage?: boolean;
+    addDamage?: AddDamage;
     /**
      * A collection of sight guidelines in different language with a list of sightIds associate to it.
      */

From 8a3e305599e1e37671ebe84b4cdfa07040e77e7c Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Tue, 27 Aug 2024 13:49:33 +0530
Subject: [PATCH 02/18] =?UTF-8?q?=F0=9F=90=9B=20async=20compliance=20chang?=
 =?UTF-8?q?e=20merge=20cause=20issues=20hash=207ed9bd51def01151ead5d8e3af8?=
 =?UTF-8?q?06fed63c1f024?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VehicleDynamicWireframe/VehicleDynamicWireframe.tsx    | 7 ++++---
 .../VehiclePartSelection/VehiclePartSelection.tsx          | 4 ++--
 packages/common-ui-web/src/icons/assets.ts                 | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx b/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx
index 74a92ab6f..c5b0a9a7b 100644
--- a/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx
+++ b/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,12 @@ 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'),
       }}
       getAttributes={createGetAttributesCallback(onClickPart, getPartAttributes)}
     />
diff --git a/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx b/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx
index 50dadec22..c5e1ca747 100644
--- a/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx
+++ b/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx
@@ -66,8 +66,8 @@ export function VehiclePartSelection({
   ) => ({
     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',
     },
   });
diff --git a/packages/common-ui-web/src/icons/assets.ts b/packages/common-ui-web/src/icons/assets.ts
index 0dac2a587..4f3e6e829 100644
--- a/packages/common-ui-web/src/icons/assets.ts
+++ b/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>',
 };

From 15f6065425481e2eda00bfef6c7bd8817ce1cfa9 Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Wed, 28 Aug 2024 11:09:43 +0530
Subject: [PATCH 03/18] =?UTF-8?q?=E2=99=BB=EF=B8=8FexpectPropsOnChildMock?=
 =?UTF-8?q?=20make=20type=20strict?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/demo-app/test/pages/PhotoCapturePage.test.tsx          | 6 +++---
 configs/test-utils/src/expects/props.tsx                    | 6 +++---
 .../ImageDetailedViewOverlay.test.tsx                       | 4 ++--
 .../InspectionGalleryItemCard.test.tsx                      | 2 +-
 .../test/components/LiveConfigAppProvider.test.tsx          | 2 +-
 .../test/PhotoCapture/PhotoCapture.test.tsx                 | 2 +-
 .../PhotoCaptureHUDElementsSight.test.tsx                   | 3 ++-
 .../test/PhotoCapture/hooks/useUploadQueue.test.ts          | 4 +++-
 8 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/demo-app/test/pages/PhotoCapturePage.test.tsx b/apps/demo-app/test/pages/PhotoCapturePage.test.tsx
index 82894cf9a..53e150d99 100644
--- a/apps/demo-app/test/pages/PhotoCapturePage.test.tsx
+++ b/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';
 
@@ -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();
   });
diff --git a/configs/test-utils/src/expects/props.tsx b/configs/test-utils/src/expects/props.tsx
index 100579f6c..0de9afe62 100644
--- a/configs/test-utils/src/expects/props.tsx
+++ b/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());
 }
diff --git a/packages/common-ui-web/test/components/ImageDetailedView/ImageDetailedViewOverlay/ImageDetailedViewOverlay.test.tsx b/packages/common-ui-web/test/components/ImageDetailedView/ImageDetailedViewOverlay/ImageDetailedViewOverlay.test.tsx
index c90dfb659..41716f413 100644
--- a/packages/common-ui-web/test/components/ImageDetailedView/ImageDetailedViewOverlay/ImageDetailedViewOverlay.test.tsx
+++ b/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';
diff --git a/packages/common-ui-web/test/components/InspectionGallery/InspectionGalleryItemCard/InspectionGalleryItemCard.test.tsx b/packages/common-ui-web/test/components/InspectionGallery/InspectionGalleryItemCard/InspectionGalleryItemCard.test.tsx
index 90960bf18..141e23860 100644
--- a/packages/common-ui-web/test/components/InspectionGallery/InspectionGalleryItemCard/InspectionGalleryItemCard.test.tsx
+++ b/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();
   });
diff --git a/packages/common-ui-web/test/components/LiveConfigAppProvider.test.tsx b/packages/common-ui-web/test/components/LiveConfigAppProvider.test.tsx
index 9d0daccd1..989c63220 100644
--- a/packages/common-ui-web/test/components/LiveConfigAppProvider.test.tsx
+++ b/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} />);
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
index d89f0a138..532e213c4 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
@@ -290,7 +290,7 @@ describe('PhotoCapture component', () => {
     const props = createProps();
     const { unmount } = render(<PhotoCapture {...props} />);
 
-    expectPropsOnChildMock(Camera, { HUDComponent: PhotoCaptureHUD });
+    expectPropsOnChildMock(Camera, { HUDComponent: PhotoCaptureHUD as any });
 
     unmount();
   });
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/PhotoCaptureHUDElementsSight.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/PhotoCaptureHUDElementsSight.test.tsx
index bac9cc830..8c07c3057 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/PhotoCaptureHUDElementsSight.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/PhotoCaptureHUDElementsSight.test.tsx
@@ -1,4 +1,4 @@
-import { Image, ImageStatus } from '@monkvision/types';
+import { AddDamage, Image, ImageStatus } from '@monkvision/types';
 
 jest.mock('../../../../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDCounter', () => ({
   PhotoCaptureHUDCounter: jest.fn(() => <></>),
@@ -48,6 +48,7 @@ function createProps(): PhotoCaptureHUDElementsSightProps {
       { sightId: 'test-sight-2', status: ImageStatus.SUCCESS },
     ] as Image[],
     tutorialStep: null,
+    addDamage: AddDamage.TWO_SHOT,
   };
 }
 
diff --git a/packages/inspection-capture-web/test/PhotoCapture/hooks/useUploadQueue.test.ts b/packages/inspection-capture-web/test/PhotoCapture/hooks/useUploadQueue.test.ts
index dd4b91421..25a26cff3 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/hooks/useUploadQueue.test.ts
+++ b/packages/inspection-capture-web/test/PhotoCapture/hooks/useUploadQueue.test.ts
@@ -7,7 +7,7 @@ import {
   UploadQueueParams,
   useUploadQueue,
 } from '../../../src/PhotoCapture/hooks';
-import { ComplianceIssue, TaskName } from '@monkvision/types';
+import { AddDamage, ComplianceIssue, TaskName } from '@monkvision/types';
 import { ImageUploadType, useMonkApi } from '@monkvision/network';
 import { useMonitoring } from '@monkvision/monitoring';
 import { act } from '@testing-library/react';
@@ -146,6 +146,7 @@ describe('useUploadQueue hook', () => {
       });
       expect(addImageMock).toHaveBeenCalledWith({
         uploadType: ImageUploadType.CLOSE_UP_2_SHOT,
+        closeUpType: AddDamage.TWO_SHOT,
         picture: upload1.picture,
         siblingKey: expect.any(String),
         useThumbnailCaching: true,
@@ -170,6 +171,7 @@ describe('useUploadQueue hook', () => {
 
       expect(addImageMock).toHaveBeenCalledWith({
         uploadType: ImageUploadType.CLOSE_UP_2_SHOT,
+        closeUpType: AddDamage.TWO_SHOT,
         picture: upload2.picture,
         siblingKey,
         useThumbnailCaching: true,

From 3aeac240beb8e692e5333a088d325801e470d84a Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Wed, 28 Aug 2024 11:14:56 +0530
Subject: [PATCH 04/18] =?UTF-8?q?=E2=99=BB=EF=B8=8Fmake=20addDamage=20as?=
 =?UTF-8?q?=20mandatory=20=F0=9F=91=95=20no-non-null-assertion=20turn=20OF?=
 =?UTF-8?q?F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 configs/eslint-config-typescript/index.js     | 68 ++++++++++---------
 .../src/components/InspectionGallery/types.ts |  2 +-
 .../PhotoCaptureHUD/PhotoCaptureHUD.test.tsx  |  3 +-
 .../PhotoCaptureHUDElements.test.tsx          |  3 +-
 packages/types/src/config.ts                  |  2 +-
 5 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/configs/eslint-config-typescript/index.js b/configs/eslint-config-typescript/index.js
index e5c114a7f..acec90771 100644
--- a/configs/eslint-config-typescript/index.js
+++ b/configs/eslint-config-typescript/index.js
@@ -5,58 +5,62 @@ const ERROR = 2;
 module.exports = {
   root: true,
   extends: [
-    '@monkvision/eslint-config-base',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:import/typescript',
+    "@monkvision/eslint-config-base",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/typescript",
   ],
-  plugins: ['@typescript-eslint'],
-  parser: '@typescript-eslint/parser',
+  plugins: ["@typescript-eslint"],
+  parser: "@typescript-eslint/parser",
   settings: {
-    'import/resolver': {
+    "import/resolver": {
       node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        extensions: [".js", ".jsx", ".ts", ".tsx"],
       },
     },
   },
   rules: {
-    'prettier/prettier': ERROR,
-    '@typescript-eslint/lines-between-class-members': OFF,
-    'no-useless-constructor': OFF,
-    '@typescript-eslint/no-empty-function': [ERROR, { allow: ['arrowFunctions'] }],
-    '@typescript-eslint/no-empty-interface': OFF,
-    '@typescript-eslint/no-unused-vars': [
+    "prettier/prettier": ERROR,
+    "@typescript-eslint/lines-between-class-members": OFF,
+    "no-useless-constructor": OFF,
+    "@typescript-eslint/no-empty-function": [
+      ERROR,
+      { allow: ["arrowFunctions"] },
+    ],
+    "@typescript-eslint/no-empty-interface": OFF,
+    "@typescript-eslint/no-non-null-assertion": OFF,
+    "@typescript-eslint/no-unused-vars": [
       ERROR,
       {
-        "argsIgnorePattern": "^_",
-        "varsIgnorePattern": "^_",
-        "caughtErrorsIgnorePattern": "^_"
-      }
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      },
     ],
-    'no-underscore-dangle': OFF,
-    '@typescript-eslint/naming-convention': [
+    "no-underscore-dangle": OFF,
+    "@typescript-eslint/naming-convention": [
       ERROR,
-      { selector: 'interface', format: ['PascalCase'] },
-      { selector: 'enum', format: ['PascalCase'] },
-      { selector: 'typeAlias', format: ['PascalCase'] },
+      { selector: "interface", format: ["PascalCase"] },
+      { selector: "enum", format: ["PascalCase"] },
+      { selector: "typeAlias", format: ["PascalCase"] },
     ],
   },
   overrides: [
     {
-      files: ['*.{ts,tsx}'],
+      files: ["*.{ts,tsx}"],
       rules: {
-        '@typescript-eslint/no-shadow': [ERROR],
-        'no-shadow': OFF,
-        'no-undef': OFF,
+        "@typescript-eslint/no-shadow": [ERROR],
+        "no-shadow": OFF,
+        "no-undef": OFF,
       },
     },
     {
-      files: ['test/**/*.{ts,tsx}'],
+      files: ["test/**/*.{ts,tsx}"],
       rules: {
-        'import/first': OFF,
-        'import/order': OFF,
-        '@typescript-eslint/no-empty-function': OFF,
-        '@typescript-eslint/no-explicit-any': OFF,
-        'class-methods-use-this': OFF,
+        "import/first": OFF,
+        "import/order": OFF,
+        "@typescript-eslint/no-empty-function": OFF,
+        "@typescript-eslint/no-explicit-any": OFF,
+        "class-methods-use-this": OFF,
       },
     },
   ],
diff --git a/packages/common-ui-web/src/components/InspectionGallery/types.ts b/packages/common-ui-web/src/components/InspectionGallery/types.ts
index bb602e4dc..122ca2de6 100644
--- a/packages/common-ui-web/src/components/InspectionGallery/types.ts
+++ b/packages/common-ui-web/src/components/InspectionGallery/types.ts
@@ -105,7 +105,7 @@ export type InspectionGalleryProps = {
    *
    * @default true
    */
-  addDamage?: AddDamage;
+  addDamage: AddDamage;
   /**
    * Custom label for validate button.
    */
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
index e79f71425..d89a92a09 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
@@ -1,4 +1,4 @@
-import { Image, ImageStatus } from '@monkvision/types';
+import { AddDamage, Image, ImageStatus } from '@monkvision/types';
 
 jest.mock('../../../src/PhotoCapture/PhotoCaptureHUD/hooks', () => ({
   ...jest.requireActual('../../../src/PhotoCapture/PhotoCaptureHUD/hooks'),
@@ -60,6 +60,7 @@ function createProps(): PhotoCaptureHUDProps {
       dimensions: { height: 2, width: 4 },
       previewDimensions: { height: 111, width: 2222 },
     } as unknown as CameraHandle,
+    addDamage: AddDamage.TWO_SHOT,
     cameraPreview: <div data-testid={cameraTestId}></div>,
     images: [{ sightId: 'test-sight-1', status: ImageStatus.NOT_COMPLIANT }] as Image[],
     currentTutorialStep: null,
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements.test.tsx
index 1b9d8a475..eaa0dfe81 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements.test.tsx
@@ -1,4 +1,4 @@
-import { Image, ImageStatus } from '@monkvision/types';
+import { AddDamage, Image, ImageStatus } from '@monkvision/types';
 
 jest.mock('../../../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight', () => ({
   PhotoCaptureHUDElementsSight: jest.fn(() => <></>),
@@ -45,6 +45,7 @@ function createProps(): PhotoCaptureHUDElementsProps {
     error: null,
     images: [{ sightId: 'test-sight-1', status: ImageStatus.NOT_COMPLIANT }] as Image[],
     tutorialStep: null,
+    addDamage: AddDamage.TWO_SHOT,
   };
 }
 
diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
index ffe2a7ec8..2b4b211ed 100644
--- a/packages/types/src/config.ts
+++ b/packages/types/src/config.ts
@@ -127,7 +127,7 @@ export type CaptureAppConfig = CameraConfig &
      *
      * @default AddDamage.TWO_SHOT
      */
-    addDamage?: AddDamage;
+    addDamage: AddDamage;
     /**
      * A collection of sight guidelines in different language with a list of sightIds associate to it.
      */

From 7321d8180be9dcf3fadf1c21dde410df3f2769d4 Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Thu, 29 Aug 2024 13:42:56 +0530
Subject: [PATCH 05/18] =?UTF-8?q?=E2=9C=A8add=20AddPartSelectorShot=20comp?=
 =?UTF-8?q?onent=20to=20PhotoCaptureHUDElement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__mocks__/@monkvision/common-ui-web.tsx   |  1 +
 .../src/__mocks__/@monkvision/common.tsx      |  3 +
 .../VehicleDynamicWireframe.tsx               |  1 +
 .../VehiclePartSelection.style.ts             |  5 +-
 .../VehiclePartSelection.tsx                  |  1 -
 .../PhotoCaptureHUDElements.tsx               | 14 +++--
 ...otoCaptureHUDElementsAddPartSelectShot.tsx | 49 ++++++++++++++++
 .../index.ts                                  |  1 +
 ...aptureHUDElementsAddPartSelectShotStyle.ts | 57 +++++++++++++++++++
 ...ptureHUDElementsAddPartSelectShot.test.tsx | 55 ++++++++++++++++++
 10 files changed, 177 insertions(+), 10 deletions(-)
 create mode 100644 packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
 create mode 100644 packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/index.ts
 create mode 100644 packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/usePhotoCaptureHUDElementsAddPartSelectShotStyle.ts
 create mode 100644 packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx

diff --git a/configs/test-utils/src/__mocks__/@monkvision/common-ui-web.tsx b/configs/test-utils/src/__mocks__/@monkvision/common-ui-web.tsx
index 23c141138..9e78b7fc4 100644
--- a/configs/test-utils/src/__mocks__/@monkvision/common-ui-web.tsx
+++ b/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(() => <></>),
 };
diff --git a/configs/test-utils/src/__mocks__/@monkvision/common.tsx b/configs/test-utils/src/__mocks__/@monkvision/common.tsx
index 520a1d654..65cfadc08 100644
--- a/configs/test-utils/src/__mocks__/@monkvision/common.tsx
+++ b/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()),
diff --git a/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx b/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx
index c5b0a9a7b..3d60d7d0a 100644
--- a/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx
+++ b/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx
@@ -100,6 +100,7 @@ export function VehicleDynamicWireframe({
       svg={overlay}
       style={{
         width: '100%',
+        height: '100%',
       }}
       getAttributes={createGetAttributesCallback(onClickPart, getPartAttributes)}
     />
diff --git a/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.style.ts b/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.style.ts
index e00d5c53f..b7898f657 100644
--- a/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.style.ts
+++ b/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%',
   },
 };
diff --git a/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx b/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx
index c5e1ca747..535376d06 100644
--- a/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx
+++ b/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx
@@ -65,7 +65,6 @@ export function VehiclePartSelection({
     part: VehiclePart,
   ) => ({
     style: {
-      // TODO: need to finalize the color for the selected parts.
       fill: selectedParts.includes(part) ? palette.primary.base : undefined,
       stroke: palette.text.primary,
       display: 'block',
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx
index 64d1411c1..8de20a53c 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx
@@ -3,6 +3,7 @@ import { PhotoCaptureMode, TutorialSteps } from '../../hooks';
 import { PhotoCaptureHUDElementsSight } from '../PhotoCaptureHUDElementsSight';
 import { PhotoCaptureHUDElementsAddDamage1stShot } from '../PhotoCaptureHUDElementsAddDamage1stShot';
 import { PhotoCaptureHUDElementsAddDamage2ndShot } from '../PhotoCaptureHUDElementsAddDamage2ndShot';
+import { PhotoCaptureHUDElementsAddPartSelectShot } from '../PhotoCaptureHUDElementsAddPartSelectShot';
 
 /**
  * Props of the PhotoCaptureHUDElements component.
@@ -91,10 +92,11 @@ export function PhotoCaptureHUDElements(params: PhotoCaptureHUDElementsProps) {
   if (params.mode === PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT) {
     return <PhotoCaptureHUDElementsAddDamage1stShot onCancel={params.onCancelAddDamage} />;
   }
-  return (
-    <PhotoCaptureHUDElementsAddDamage2ndShot
-      onCancel={params.onCancelAddDamage}
-      streamDimensions={params.previewDimensions}
-    />
-  );
+  if (params.mode === PhotoCaptureMode.ADD_DAMAGE_2ND_SHOT) {
+    return <PhotoCaptureHUDElementsAddDamage2ndShot onCancel={params.onCancelAddDamage} />;
+  }
+  if (params.mode === PhotoCaptureMode.ADD_DAMAGE_PART_SELECT) {
+    return <PhotoCaptureHUDElementsAddPartSelectShot onCancel={params.onCancelAddDamage} />;
+  }
+  return null as never;
 }
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
new file mode 100644
index 000000000..9ff6d01f3
--- /dev/null
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
@@ -0,0 +1,49 @@
+import { getLanguage, useMonkAppState, useMonkTheme, vehiclePartLabels } from '@monkvision/common';
+import { Button, VehiclePartSelection } from '@monkvision/common-ui-web';
+import { VehiclePart } from '@monkvision/types';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePhotoCaptureHUDElementsAddPartSelectShotStyle } from './usePhotoCaptureHUDElementsAddPartSelectShotStyle';
+
+export function PhotoCaptureHUDElementsAddPartSelectShot({ onCancel }: { onCancel: () => void }) {
+  const { vehicleType } = useMonkAppState();
+  const { palette } = useMonkTheme();
+  const [selectedParts, setSelectedParts] = useState<VehiclePart[]>([]);
+  const { i18n } = useTranslation();
+  const style = usePhotoCaptureHUDElementsAddPartSelectShotStyle();
+
+  return (
+    <div style={style.stackItem}>
+      <Button
+        style={style.closeButton}
+        icon='close'
+        primaryColor={palette.background.dark}
+        onClick={onCancel}
+      />
+      <div style={style.wrapper}>
+        <div
+          style={{
+            ...style.infoNotification,
+            ...style.notification,
+          }}
+        >
+          Please select the parts you want to capture
+        </div>
+        <VehiclePartSelection vehicleType={vehicleType!} onPartsSelected={setSelectedParts} />
+        {selectedParts.length !== 0 && (
+          <div
+            data-testid='part-select-notification'
+            style={{
+              ...style.partSelectNotification,
+              ...style.notification,
+            }}
+          >
+            {selectedParts
+              .map((part) => vehiclePartLabels[part][getLanguage(i18n.language)])
+              .join(', ')}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/index.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/index.ts
new file mode 100644
index 000000000..3d85f16e8
--- /dev/null
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/index.ts
@@ -0,0 +1 @@
+export { PhotoCaptureHUDElementsAddPartSelectShot } from './PhotoCaptureHUDElementsAddPartSelectShot';
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/usePhotoCaptureHUDElementsAddPartSelectShotStyle.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/usePhotoCaptureHUDElementsAddPartSelectShotStyle.ts
new file mode 100644
index 000000000..8ce6a3be7
--- /dev/null
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/usePhotoCaptureHUDElementsAddPartSelectShotStyle.ts
@@ -0,0 +1,57 @@
+import { useMonkTheme } from '@monkvision/common';
+import { CSSProperties } from 'react';
+import { PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
+
+export function usePhotoCaptureHUDElementsAddPartSelectShotStyle(): Record<
+  | 'notification'
+  | 'closeButton'
+  | 'infoNotification'
+  | 'partSelectNotification'
+  | 'stackItem'
+  | 'wrapper',
+  CSSProperties
+> {
+  const { palette } = useMonkTheme();
+  return {
+    notification: {
+      position: 'absolute',
+      padding: '10px 20px',
+      borderRadius: 30,
+      color: palette.information.xdark,
+      backgroundColor: palette.information.xlight,
+    },
+    infoNotification: {
+      top: 20,
+    },
+    partSelectNotification: {
+      bottom: 20,
+      maxWidth: `calc(98% - (${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 8}px))`,
+      fontSize: 14,
+    },
+    stackItem: {
+      position: 'absolute',
+      inset: 0,
+      backgroundColor: palette.background.base,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexDirection: 'column',
+    },
+    wrapper: {
+      width: `calc(98% - (${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 4}px))`,
+      height: '100%',
+      backgroundColor: palette.background.dark,
+      display: 'flex',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      alignItems: 'center',
+    },
+    closeButton: {
+      position: 'absolute',
+      left: 22,
+      top: 22,
+      width: 44,
+      height: 44,
+    },
+  };
+}
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
new file mode 100644
index 000000000..78ceeadb4
--- /dev/null
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
@@ -0,0 +1,55 @@
+/**
+ * 3. select parts should show on UI.
+ */
+
+import { getLanguage, MonkAppState, useMonkAppState } from '@monkvision/common';
+import { Button, VehiclePartSelection } from '@monkvision/common-ui-web';
+import { expectPropsOnChildMock } from '@monkvision/test-utils';
+import { VehiclePart, VehicleType } from '@monkvision/types';
+import { act, fireEvent, prettyDOM, render } from '@testing-library/react';
+import { PhotoCaptureHUDElementsAddPartSelectShot } from '../../../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot';
+import '@testing-library/jest-dom';
+
+describe('PhotoCaptureHUDElementsAddPartSelectShot component', () => {
+  beforeEach(() => {
+    (useMonkAppState as jest.MockedFunction<typeof useMonkAppState>).mockReturnValue({
+      vehicleType: VehicleType.CUV,
+    } as ReturnType<MonkAppState extends (o: { requireInspection: true }) => infer R ? (args: any) => R : never>);
+  });
+  afterEach(() => jest.clearAllMocks());
+
+  it('should call onCancel callback on close button click', () => {
+    const onCancel = jest.fn();
+    (Button as jest.MockedFunction<typeof Button>).mockImplementation(({ onClick }) => (
+      <button onClick={onClick} data-testid='close-button' />
+    ));
+    const { getByTestId } = render(
+      <PhotoCaptureHUDElementsAddPartSelectShot onCancel={onCancel} />,
+    );
+    fireEvent.click(getByTestId('close-button'));
+    expect(onCancel).toHaveBeenCalled();
+  });
+
+  it('should use correct vehicle type', () => {
+    render(<PhotoCaptureHUDElementsAddPartSelectShot onCancel={() => {}} />);
+    expectPropsOnChildMock(VehiclePartSelection, {
+      vehicleType: VehicleType.CUV,
+    });
+  });
+
+  it('should show instruction to select parts', () => {
+    const re = render(<PhotoCaptureHUDElementsAddPartSelectShot onCancel={jest.fn()} />);
+    expect(re.getByText('Please select the parts you want to capture')).toBeInTheDocument();
+  });
+
+  it('should show selected parts', () => {
+    const re = render(<PhotoCaptureHUDElementsAddPartSelectShot onCancel={() => {}} />);
+    const onPartsSelected = (
+      VehiclePartSelection as jest.MockedFunction<typeof VehiclePartSelection>
+    ).mock.calls[0][0].onPartsSelected!;
+    (getLanguage as jest.MockedFunction<typeof getLanguage>).mockReturnValue('en');
+    act(() => onPartsSelected([VehiclePart.BUMPER_BACK]));
+    console.log(prettyDOM(re.container));
+    expect(re.getByTestId('part-select-notification')).toBeInTheDocument();
+  });
+});

From 85e9804db2d7e3f6e0741cf4b397259123275e2d Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Thu, 29 Aug 2024 13:48:09 +0530
Subject: [PATCH 06/18] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20change=20close=20but?=
 =?UTF-8?q?ton=20to=20action=20button=20and=20add=20validate=20action?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PhotoCaptureHUD/PhotoCaptureHUD.tsx       |  7 +-
 .../PhotoCaptureHUDButtons.tsx                | 86 +++++++++++--------
 .../PhotoCaptureHUDButtons/hooks.ts           | 22 ++---
 .../PhotoCapture/hooks/useAddDamageMode.ts    |  4 +
 .../PhotoCaptureHUD/PhotoCaptureHUD.test.tsx  | 10 ++-
 .../PhotoCaptureHUDButtons.test.tsx           | 12 +--
 6 files changed, 81 insertions(+), 60 deletions(-)

diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
index 18ba9300b..2e51896f8 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
@@ -178,14 +178,15 @@ export function PhotoCaptureHUD({
       <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}
+        action={'close'}
+        onAction={() => setShowCloseModal(true)}
+        actionDisabled={!!loading.error || !!handle.error}
+        showActionButton={showCloseButton}
         showGalleryBadge={retakeCount > 0}
         retakeCount={retakeCount}
       />
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx
index 23788e848..0b4fe2ff4 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx
@@ -1,4 +1,4 @@
-import { Icon, TakePictureButton } from '@monkvision/common-ui-web';
+import { Icon, IconName, TakePictureButton } from '@monkvision/common-ui-web';
 import { useInteractiveStatus } from '@monkvision/common';
 import { useCaptureHUDButtonsStyles } from './hooks';
 
@@ -19,11 +19,6 @@ export interface PhotoCaptureHUDButtonsProps {
    * Callback called when the user clicks on the gallery button.
    */
   onOpenGallery?: () => void;
-  /**
-   * Callback called when the user clicks on the close button. If this callback is not provided, the close button will
-   * not be displayed on the screen.
-   */
-  onClose?: () => void;
   /**
    * Boolean indicating if the gallery button is disabled.
    *
@@ -37,75 +32,92 @@ export interface PhotoCaptureHUDButtonsProps {
    */
   takePictureDisabled?: boolean;
   /**
-   * Boolean indicating if the close button is disabled.
+   * Boolean indicating if the little notification badge on top of the gallery button should be displayed.
    *
    * @default false
    */
-  closeDisabled?: boolean;
+  showGalleryBadge?: boolean;
   /**
-   * Boolean indicating if the close button should be displayed in the HUD on top of the Camera preview.
+   * Total number of sights to retake
    *
-   * @default false
+   * @default 0
    */
-  showCloseButton?: boolean;
+  retakeCount?: number;
   /**
-   * Boolean indicating if the little notification badge on top of the gallery button should be displayed.
+   * Type of the action button to display. If the value is 'close', the button will display a close icon.
+   *
+   * @default 'close'
+   */
+  action?: ('close' | 'check') & IconName;
+  /**
+   * Boolean indicating if the action button is disabled.
    *
    * @default false
    */
-  showGalleryBadge?: boolean;
+  actionDisabled?: boolean;
   /**
-   * Total number of sights to retake
+   * Boolean indicating if the action button should be displayed in the HUD on top of the Camera preview.
    *
-   * @default 0
+   * @default false
    */
-  retakeCount?: number;
+  showActionButton?: boolean;
+  /**
+   * Callback called when the user clicks on the action button. If this callback is not provided, the action button will
+   * not be displayed on the screen.
+   */
+  onAction?: () => void;
 }
 
 /**
  * Components implementing the main buttons of the PhotoCapture Camera HUD. This component implements 3 buttons :
  * - A take picture button
  * - A gallery button
- * - A close button (only displayed if the `onClose` callback is defined)
+ * - A action button (only displayed if the `onAction` callback is defined)
  */
 export function PhotoCaptureHUDButtons({
   galleryPreview,
   onTakePicture,
   onOpenGallery,
-  onClose,
   galleryDisabled = false,
   takePictureDisabled = false,
-  closeDisabled = false,
-  showCloseButton = false,
   showGalleryBadge = false,
   retakeCount = 0,
+  onAction,
+  actionDisabled = false,
+  showActionButton = false,
+  action = 'close',
 }: PhotoCaptureHUDButtonsProps) {
   const { status: galleryStatus, eventHandlers: galleryEventHandlers } = useInteractiveStatus({
     disabled: galleryDisabled,
   });
-  const { status: closeStatus, eventHandlers: closeEventHandlers } = useInteractiveStatus({
-    disabled: closeDisabled,
+  const { status: actionButtonStatus, eventHandlers: actionEventHandlers } = useInteractiveStatus({
+    disabled: actionDisabled,
+  });
+  const {
+    containerStyle,
+    gallery,
+    galleryBadgeStyle,
+    actionButton: confirmButton,
+    backgroundCoverStyle,
+  } = useCaptureHUDButtonsStyles({
+    galleryStatus,
+    actionButtonStatus,
+    actionBtnAvailable: !!onAction,
+    galleryPreview,
+    showActionButton,
+    showGalleryBadge,
   });
-  const { containerStyle, gallery, galleryBadgeStyle, close, backgroundCoverStyle } =
-    useCaptureHUDButtonsStyles({
-      galleryStatus,
-      closeStatus,
-      closeBtnAvailable: !!onClose,
-      galleryPreview,
-      showCloseButton,
-      showGalleryBadge,
-    });
 
   return (
     <div style={containerStyle}>
       <button
-        style={close.style}
-        disabled={closeDisabled}
-        onClick={onClose}
-        {...closeEventHandlers}
-        data-testid='monk-close-btn'
+        style={confirmButton.style}
+        disabled={actionDisabled}
+        onClick={onAction}
+        {...actionEventHandlers}
+        data-testid='monk-action-btn'
       >
-        <Icon icon='close' size={30} primaryColor={close.iconColor} />
+        <Icon icon={action} size={30} primaryColor={confirmButton.iconColor} />
       </button>
       <TakePictureButton onClick={onTakePicture} size={85} disabled={takePictureDisabled} />
       <button
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts
index 75b04e54f..8afdc72e0 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts
@@ -14,10 +14,10 @@ import {
 
 interface PhotoCaptureHUDButtonsStylesParams {
   galleryStatus: InteractiveStatus;
-  closeStatus: InteractiveStatus;
-  closeBtnAvailable: boolean;
+  actionButtonStatus: InteractiveStatus;
+  actionBtnAvailable: boolean;
   galleryPreview?: string;
-  showCloseButton?: boolean;
+  showActionButton: boolean;
   showGalleryBadge?: boolean;
 }
 
@@ -28,7 +28,7 @@ interface PhotoCaptureHUDButtonsStyles {
     iconColor: string;
   };
   galleryBadgeStyle: CSSProperties;
-  close: {
+  actionButton: {
     style: CSSProperties;
     iconColor: string;
   };
@@ -76,15 +76,17 @@ export function useCaptureHUDButtonsStyles(
       color: palette.text.primary,
       visibility: params.showGalleryBadge ? 'visible' : 'hidden',
     },
-    close: {
+    actionButton: {
       style: {
         ...styles['button'],
-        backgroundColor: captureButtonBackgroundColors[params.closeStatus],
-        borderColor: captureButtonForegroundColors[params.closeStatus],
-        ...(params.closeStatus === InteractiveStatus.DISABLED ? styles['buttonDisabled'] : {}),
-        visibility: params.showCloseButton ? 'visible' : 'hidden',
+        backgroundColor: captureButtonBackgroundColors[params.actionButtonStatus],
+        borderColor: captureButtonForegroundColors[params.actionButtonStatus],
+        ...(params.actionButtonStatus === InteractiveStatus.DISABLED
+          ? styles['buttonDisabled']
+          : {}),
+        visibility: params.showActionButton ? 'visible' : 'hidden',
       },
-      iconColor: captureButtonForegroundColors[params.closeStatus],
+      iconColor: captureButtonForegroundColors[params.actionButtonStatus],
     },
     backgroundCoverStyle: {
       ...styles['backgroundCover'],
diff --git a/packages/inspection-capture-web/src/PhotoCapture/hooks/useAddDamageMode.ts b/packages/inspection-capture-web/src/PhotoCapture/hooks/useAddDamageMode.ts
index 952fd0db9..670b3e292 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/hooks/useAddDamageMode.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/hooks/useAddDamageMode.ts
@@ -18,6 +18,10 @@ export enum PhotoCaptureMode {
    * ADD_DAMAGE_2ND_SHOT mode : user is asked to take a zoomed picture of a damage on the car.
    */
   ADD_DAMAGE_2ND_SHOT = 'add_damage_2nd_shot',
+  /**
+   * ADD_DAMAGE_PART_SELECT mode : user is asked to take a close-up picture of a damage on the car part.
+   */
+  ADD_DAMAGE_PART_SELECT = 'add_damage_part_select',
 }
 
 /**
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
index d89a92a09..fa4302c41 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
@@ -112,10 +112,11 @@ describe('PhotoCaptureHUD component', () => {
     expectPropsOnChildMock(PhotoCaptureHUDButtons, {
       onTakePicture: props.handle?.takePicture,
       galleryPreview: props.lastPictureTakenUri ?? undefined,
-      closeDisabled: !!props.loading.error || !!props.handle.error,
+      action: 'close',
+      actionDisabled: !!props.loading.error || !!props.handle.error,
       galleryDisabled: !!props.loading.error || !!props.handle.error,
       takePictureDisabled: !!props.loading.error || !!props.handle.error,
-      showCloseButton: props.showCloseButton,
+      showActionButton: props.showCloseButton,
       onOpenGallery: props.onOpenGallery,
     });
 
@@ -155,11 +156,12 @@ describe('PhotoCaptureHUD component', () => {
     const props = createProps();
     const { unmount } = render(<PhotoCaptureHUD {...props} />);
 
-    const { onClose } = (PhotoCaptureHUDButtons as jest.Mock).mock.calls[0][0];
+    const { onAction } = (PhotoCaptureHUDButtons as jest.MockedFn<typeof PhotoCaptureHUDButtons>)
+      .mock.calls[0][0];
     expectPropsOnChildMock(BackdropDialog, { show: false });
     jest.clearAllMocks();
 
-    act(() => onClose());
+    act(() => onAction!());
     expectPropsOnChildMock(BackdropDialog, { show: true });
     const { onConfirm } = (BackdropDialog as jest.Mock).mock.calls[0][0];
     jest.clearAllMocks();
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx
index 7b1955f1f..59d2cea02 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx
@@ -8,7 +8,7 @@ import { captureButtonForegroundColors } from '../../../src/PhotoCapture/PhotoCa
 
 const GALLERY_BTN_TEST_ID = 'monk-gallery-btn';
 const GALLERY_BADGE_TEST_ID = 'monk-gallery-badge';
-const CLOSE_BTN_TEST_ID = 'monk-close-btn';
+const CLOSE_BTN_TEST_ID = 'monk-action-btn';
 
 describe('CaptureHUDButtons component', () => {
   afterEach(() => {
@@ -160,7 +160,7 @@ describe('CaptureHUDButtons component', () => {
     });
 
     it('should displayed when showCloseButton is true', () => {
-      const { unmount } = render(<PhotoCaptureHUDButtons showCloseButton />);
+      const { unmount } = render(<PhotoCaptureHUDButtons showActionButton />);
 
       const closeBtn = screen.getByTestId(CLOSE_BTN_TEST_ID);
       expect(closeBtn).toHaveStyle({ visibility: 'visible' });
@@ -169,7 +169,7 @@ describe('CaptureHUDButtons component', () => {
     });
 
     it('should not be disabled by default', () => {
-      const { unmount } = render(<PhotoCaptureHUDButtons showCloseButton />);
+      const { unmount } = render(<PhotoCaptureHUDButtons showActionButton />);
 
       const closeBtn = screen.getByTestId(CLOSE_BTN_TEST_ID);
       expect(closeBtn.getAttribute('disabled')).toBeNull();
@@ -178,7 +178,7 @@ describe('CaptureHUDButtons component', () => {
     });
 
     it('should be disabled when the closeDisabled prop is true', () => {
-      const { unmount } = render(<PhotoCaptureHUDButtons showCloseButton closeDisabled={true} />);
+      const { unmount } = render(<PhotoCaptureHUDButtons showActionButton actionDisabled={true} />);
 
       const closeBtn = screen.getByTestId(CLOSE_BTN_TEST_ID);
       expect(closeBtn.getAttribute('disabled')).toBeDefined();
@@ -188,7 +188,7 @@ describe('CaptureHUDButtons component', () => {
 
     it('should get passed the onClose callback', () => {
       const onClose = jest.fn();
-      const { unmount } = render(<PhotoCaptureHUDButtons showCloseButton onClose={onClose} />);
+      const { unmount } = render(<PhotoCaptureHUDButtons showActionButton onAction={onClose} />);
 
       const closeBtn = screen.getByTestId(CLOSE_BTN_TEST_ID);
       fireEvent.click(closeBtn);
@@ -199,7 +199,7 @@ describe('CaptureHUDButtons component', () => {
 
     it('should display an image icon', () => {
       const expectedIcon = 'close';
-      const { unmount } = render(<PhotoCaptureHUDButtons showCloseButton />);
+      const { unmount } = render(<PhotoCaptureHUDButtons showActionButton />);
 
       expect((Icon as jest.Mock).mock.calls).toContainEqual([
         {

From 2248f42ca3b65778f1cc601eb44c60f5a722aa08 Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Fri, 30 Aug 2024 16:22:28 +0530
Subject: [PATCH 07/18] =?UTF-8?q?=E2=9C=A8=20add=20check=20action=20button?=
 =?UTF-8?q?=20to=20work=20with=20Add=20damage=20part=20select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/PhotoCapture/PhotoCapture.tsx         |  2 +
 .../PhotoCaptureHUD/PhotoCaptureHUD.tsx       | 48 ++++++++---
 .../PhotoCaptureHUDButtons.model.ts           | 73 +++++++++++++++++
 .../PhotoCaptureHUDButtons.styles.ts          |  7 +-
 .../PhotoCaptureHUDButtons.tsx                | 71 +----------------
 .../PhotoCaptureHUDButtons/hooks.ts           | 24 +++---
 .../PhotoCaptureHUDButtons/index.ts           |  3 +-
 .../PhotoCaptureHUDElements.model.ts          | 69 ++++++++++++++++
 .../PhotoCaptureHUDElements.tsx               | 71 +++--------------
 .../PhotoCaptureHUDElements/index.ts          |  6 +-
 ...otoCaptureHUDElementsAddPartSelectShot.tsx | 21 ++++-
 .../AddDamageButton/AddDamageButton.tsx       |  3 +-
 .../PhotoCapture/hooks/useAddDamageMode.ts    | 42 ++++++++--
 .../PhotoCaptureHUD/PhotoCaptureHUD.test.tsx  | 59 ++++++++++++++
 .../PhotoCaptureHUDButtons.test.tsx           |  8 +-
 .../PhotoCaptureHUDElements.test.tsx          | 22 ++++++
 ...ptureHUDElementsAddPartSelectShot.test.tsx | 61 ++++++++++++--
 .../SightSlider/SightSliderButton.test.tsx    | 79 ++++++++++---------
 .../hooks/useAddDamageMode.test.ts            | 45 +++++++++++
 19 files changed, 500 insertions(+), 214 deletions(-)
 create mode 100644 packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.model.ts
 create mode 100644 packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.model.ts

diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
index ab61087bf..31a56f8bb 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
@@ -262,6 +262,8 @@ export function PhotoCapture({
     onSelectSight: sightState.selectSight,
     onRetakeSight: sightState.retakeSight,
     onAddDamage: addDamageHandle.handleAddDamage,
+    damageVehicleParts: addDamageHandle.vehicleParts,
+    onAddDamageParts: addDamageHandle.handleAddParts,
     onCancelAddDamage: addDamageHandle.handleCancelAddDamage,
     onRetry: sightState.retryLoadingInspection,
     loading,
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
index 2e51896f8..7814da371 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
@@ -1,5 +1,5 @@
 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';
@@ -7,9 +7,9 @@ import { LoadingState } from '@monkvision/common';
 import { useAnalytics } from '@monkvision/analytics';
 import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons';
 import { usePhotoCaptureHUDStyle } from './hooks';
-import { PhotoCaptureMode, TutorialSteps } from '../hooks';
+import { AddDamageHandle, PhotoCaptureMode, TutorialSteps } from '../hooks';
 import { PhotoCaptureHUDOverlay } from './PhotoCaptureHUDOverlay';
-import { PhotoCaptureHUDElements } from './PhotoCaptureHUDElements';
+import { PhotoCaptureHUDElements, PhotoCaptureHUDElementsProps } from './PhotoCaptureHUDElements';
 import { PhotoCaptureHUDTutorial } from './PhotoCaptureHUDTutorial';
 
 /**
@@ -76,11 +76,20 @@ export interface PhotoCaptureHUDProps
   /**
    * Callback to be called when the user clicks on the "Add Damage" button.
    */
-  onAddDamage: () => void;
+  onAddDamage: AddDamageHandle['handleAddDamage'];
+  /**
+   * Used to add damage on part select mode. This is used to store the parts that the user has selected to take a
+   * picture
+   */
+  damageVehicleParts: AddDamageHandle['vehicleParts'];
+  /**
+   * Callback to be called when the user selects the parts to take a picture of.
+   */
+  onAddDamageParts: AddDamageHandle['handleAddParts'];
   /**
    * Callback to be called when the user clicks on the "Cancel" button of the Add Damage mode.
    */
-  onCancelAddDamage: () => void;
+  onCancelAddDamage: AddDamageHandle['handleCancelAddDamage'];
   /**
    * Callback that can be used to retry fetching this state object from the API in case the previous fetch failed.
    */
@@ -115,6 +124,8 @@ export function PhotoCaptureHUD({
   onSelectSight,
   onRetakeSight,
   onAddDamage,
+  damageVehicleParts,
+  onAddDamageParts,
   onCancelAddDamage,
   onOpenGallery,
   onRetry,
@@ -136,6 +147,8 @@ export function PhotoCaptureHUD({
   const [showCloseModal, setShowCloseModal] = useState(false);
   const style = usePhotoCaptureHUDStyle();
   const { trackEvent } = useAnalytics();
+  const [addDamagePartSelectState, setAddDamagePartSelectState] =
+    useState<PhotoCaptureHUDElementsProps['addDamagePartSelectState']>('part-select');
   const retakeCount = useMemo(
     () =>
       images.filter((image) =>
@@ -151,7 +164,8 @@ export function PhotoCaptureHUD({
     trackEvent('Capture Closed');
     onClose?.();
   };
-
+  const showValidateAction =
+    mode === PhotoCaptureMode.ADD_DAMAGE_PART_SELECT && addDamagePartSelectState === 'part-select';
   return (
     <div style={style.container}>
       <div style={style.previewContainer} data-testid='camera-preview'>
@@ -162,6 +176,8 @@ export function PhotoCaptureHUD({
           sightsTaken={sightsTaken}
           mode={mode}
           onAddDamage={onAddDamage}
+          addDamagePartSelectState={addDamagePartSelectState}
+          onAddDamageParts={onAddDamageParts}
           onCancelAddDamage={onCancelAddDamage}
           onSelectSight={onSelectSight}
           onRetakeSight={onRetakeSight}
@@ -181,12 +197,22 @@ export function PhotoCaptureHUD({
         galleryPreview={lastPictureTakenUri ?? undefined}
         galleryDisabled={!!loading.error || !!handle.error}
         takePictureDisabled={
-          !!loading.error || !!handle.error || handle.isLoading || loading.isLoading
+          !!loading.error ||
+          !!handle.error ||
+          handle.isLoading ||
+          loading.isLoading ||
+          showValidateAction
+        }
+        action={showValidateAction ? 'check' : 'close'}
+        onAction={() =>
+          showValidateAction
+            ? setAddDamagePartSelectState('image-capture')
+            : setShowCloseModal(true)
+        }
+        actionDisabled={
+          !!loading.error || !!handle.error || (showValidateAction && !damageVehicleParts.length)
         }
-        action={'close'}
-        onAction={() => setShowCloseModal(true)}
-        actionDisabled={!!loading.error || !!handle.error}
-        showActionButton={showCloseButton}
+        showActionButton={showCloseButton || showValidateAction}
         showGalleryBadge={retakeCount > 0}
         retakeCount={retakeCount}
       />
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.model.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.model.ts
new file mode 100644
index 000000000..195ffdb6b
--- /dev/null
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.model.ts
@@ -0,0 +1,73 @@
+import { IconName } from '@monkvision/common-ui-web';
+
+/**
+ * Photo capture action button props.
+ */
+export interface ActionButtonProps {
+  /**
+   * Type of the action button to display. If the value is 'close', the button will display a close icon.
+   *
+   * @default 'close'
+   */
+  action?: ('close' | 'check') & IconName;
+  /**
+   * Boolean indicating if the action button is disabled.
+   *
+   * @default false
+   */
+  actionDisabled?: boolean;
+  /**
+   * Boolean indicating if the action button should be displayed in the HUD on top of the Camera preview.
+   *
+   * @default false
+   */
+  showActionButton?: boolean;
+  /**
+   * Callback called when the user clicks on the action button. If this callback is not provided, the action button will
+   * not be displayed on the screen.
+   */
+  onAction?: () => void;
+}
+
+/**
+ * Props of the PhotoCaptureHUDButtons component.
+ */
+export type PhotoCaptureHUDButtonsProps = ActionButtonProps & {
+  /**
+   * URI of the picture displayed in the gallery button icon. Usually, this is the last picture taken by the user. If no
+   * picture is provided, a gallery icon will be displayed instead.
+   */
+  galleryPreview?: string;
+  /**
+   * Callback called when the user clicks on the take picture button.
+   */
+  onTakePicture?: () => void;
+  /**
+   * Callback called when the user clicks on the gallery button.
+   */
+  onOpenGallery?: () => void;
+  /**
+   * Boolean indicating if the gallery button is disabled.
+   *
+   * @default false
+   */
+  galleryDisabled?: boolean;
+  /**
+   * Boolean indicating if the take picture button is disabled.
+   *
+   * @default false
+   */
+  takePictureDisabled?: boolean;
+  /**
+   * Boolean indicating if the little notification badge on top of the gallery button should be displayed.
+   *
+   * @default false
+   */
+  showGalleryBadge?: boolean;
+  /**
+   * Total number of sights to retake
+   *
+   * @default 0
+   */
+  retakeCount?: number;
+};
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts
index 16da8d336..e8a14e3c2 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts
@@ -7,7 +7,7 @@ const BUTTON_BORDER_WIDTH = 2;
 export const PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH =
   BUTTON_SIZE + BUTTON_PADDING + BUTTON_BORDER_WIDTH;
 
-export const captureButtonForegroundColors = getInteractiveVariants(
+export const actionButtonForegroundColors = getInteractiveVariants(
   '#f3f3f3',
   InteractiveVariation.DARKEN,
 );
@@ -15,6 +15,10 @@ export const captureButtonBackgroundColors = getInteractiveVariants(
   '#1b1c1e',
   InteractiveVariation.LIGHTEN,
 );
+export const checkButtonBackgroundColors = getInteractiveVariants(
+  '#0A84FF',
+  InteractiveVariation.DARKEN,
+);
 
 export const styles: Styles = {
   container: {
@@ -68,6 +72,7 @@ export const styles: Styles = {
   },
   buttonDisabled: {
     cursor: 'default',
+    opacity: 0.3,
   },
   backgroundCover: {
     width: '100%',
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx
index 0b4fe2ff4..e9336c7ad 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx
@@ -1,72 +1,7 @@
-import { Icon, IconName, TakePictureButton } from '@monkvision/common-ui-web';
+import { Icon, TakePictureButton } from '@monkvision/common-ui-web';
 import { useInteractiveStatus } from '@monkvision/common';
 import { useCaptureHUDButtonsStyles } from './hooks';
-
-/**
- * Props of the PhotoCaptureHUDButtons component.
- */
-export interface PhotoCaptureHUDButtonsProps {
-  /**
-   * URI of the picture displayed in the gallery button icon. Usually, this is the last picture taken by the user. If no
-   * picture is provided, a gallery icon will be displayed instead.
-   */
-  galleryPreview?: string;
-  /**
-   * Callback called when the user clicks on the take picture button.
-   */
-  onTakePicture?: () => void;
-  /**
-   * Callback called when the user clicks on the gallery button.
-   */
-  onOpenGallery?: () => void;
-  /**
-   * Boolean indicating if the gallery button is disabled.
-   *
-   * @default false
-   */
-  galleryDisabled?: boolean;
-  /**
-   * Boolean indicating if the take picture button is disabled.
-   *
-   * @default false
-   */
-  takePictureDisabled?: boolean;
-  /**
-   * Boolean indicating if the little notification badge on top of the gallery button should be displayed.
-   *
-   * @default false
-   */
-  showGalleryBadge?: boolean;
-  /**
-   * Total number of sights to retake
-   *
-   * @default 0
-   */
-  retakeCount?: number;
-  /**
-   * Type of the action button to display. If the value is 'close', the button will display a close icon.
-   *
-   * @default 'close'
-   */
-  action?: ('close' | 'check') & IconName;
-  /**
-   * Boolean indicating if the action button is disabled.
-   *
-   * @default false
-   */
-  actionDisabled?: boolean;
-  /**
-   * Boolean indicating if the action button should be displayed in the HUD on top of the Camera preview.
-   *
-   * @default false
-   */
-  showActionButton?: boolean;
-  /**
-   * Callback called when the user clicks on the action button. If this callback is not provided, the action button will
-   * not be displayed on the screen.
-   */
-  onAction?: () => void;
-}
+import { PhotoCaptureHUDButtonsProps } from './PhotoCaptureHUDButtons.model';
 
 /**
  * Components implementing the main buttons of the PhotoCapture Camera HUD. This component implements 3 buttons :
@@ -102,9 +37,11 @@ export function PhotoCaptureHUDButtons({
   } = useCaptureHUDButtonsStyles({
     galleryStatus,
     actionButtonStatus,
+    actionDisabled,
     actionBtnAvailable: !!onAction,
     galleryPreview,
     showActionButton,
+    action,
     showGalleryBadge,
   });
 
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts
index 8afdc72e0..4b505983a 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts
@@ -7,19 +7,20 @@ import {
   useResponsiveStyle,
 } from '@monkvision/common';
 import {
-  captureButtonBackgroundColors,
-  captureButtonForegroundColors,
+  actionButtonForegroundColors,
   styles,
+  captureButtonBackgroundColors,
+  checkButtonBackgroundColors,
 } from './PhotoCaptureHUDButtons.styles';
+import { ActionButtonProps } from './PhotoCaptureHUDButtons.model';
 
-interface PhotoCaptureHUDButtonsStylesParams {
+type PhotoCaptureHUDButtonsStylesParams = Exclude<ActionButtonProps, 'onAction'> & {
   galleryStatus: InteractiveStatus;
   actionButtonStatus: InteractiveStatus;
   actionBtnAvailable: boolean;
   galleryPreview?: string;
-  showActionButton: boolean;
   showGalleryBadge?: boolean;
-}
+};
 
 interface PhotoCaptureHUDButtonsStyles {
   containerStyle: CSSProperties;
@@ -65,10 +66,10 @@ export function useCaptureHUDButtonsStyles(
       style: {
         ...styles['button'],
         backgroundColor: captureButtonBackgroundColors[params.galleryStatus],
-        borderColor: captureButtonForegroundColors[params.galleryStatus],
+        borderColor: actionButtonForegroundColors[params.galleryStatus],
         ...(params.galleryStatus === InteractiveStatus.DISABLED ? styles['buttonDisabled'] : {}),
       },
-      iconColor: captureButtonForegroundColors[params.galleryStatus],
+      iconColor: actionButtonForegroundColors[params.galleryStatus],
     },
     galleryBadgeStyle: {
       ...styles['buttonBadge'],
@@ -79,14 +80,17 @@ export function useCaptureHUDButtonsStyles(
     actionButton: {
       style: {
         ...styles['button'],
-        backgroundColor: captureButtonBackgroundColors[params.actionButtonStatus],
-        borderColor: captureButtonForegroundColors[params.actionButtonStatus],
+        backgroundColor:
+          params.action === 'close'
+            ? captureButtonBackgroundColors[params.galleryStatus]
+            : checkButtonBackgroundColors[params.galleryStatus],
+        borderColor: actionButtonForegroundColors[params.actionButtonStatus],
         ...(params.actionButtonStatus === InteractiveStatus.DISABLED
           ? styles['buttonDisabled']
           : {}),
         visibility: params.showActionButton ? 'visible' : 'hidden',
       },
-      iconColor: captureButtonForegroundColors[params.actionButtonStatus],
+      iconColor: actionButtonForegroundColors[params.actionButtonStatus],
     },
     backgroundCoverStyle: {
       ...styles['backgroundCover'],
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/index.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/index.ts
index d256f5ba0..b2888e88e 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/index.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/index.ts
@@ -1 +1,2 @@
-export { PhotoCaptureHUDButtons, type PhotoCaptureHUDButtonsProps } from './PhotoCaptureHUDButtons';
+export { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons';
+export { type PhotoCaptureHUDButtonsProps } from './PhotoCaptureHUDButtons.model';
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.model.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.model.ts
new file mode 100644
index 000000000..e244c7ec0
--- /dev/null
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.model.ts
@@ -0,0 +1,69 @@
+import { CaptureAppConfig, Image, PixelDimensions, Sight } from '@monkvision/types';
+import { AddDamageHandle, PhotoCaptureMode, TutorialSteps } from '../../hooks';
+
+/**
+ * Props of the PhotoCaptureHUDElements component.
+ */
+export interface PhotoCaptureHUDElementsProps
+  extends Pick<CaptureAppConfig, 'enableSightGuidelines' | 'sightGuidelines' | 'addDamage'> {
+  /**
+   * The currently selected sight in the PhotoCapture component : the sight that the user needs to capture.
+   */
+  selectedSight: Sight;
+  /**
+   * The list of sights provided to the PhotoCapture component.
+   */
+  sights: Sight[];
+  /**
+   * Array containing the list of sights that the user has already captured.
+   */
+  sightsTaken: Sight[];
+  /**
+   * The current mode of the component.
+   */
+  mode: PhotoCaptureMode;
+  /**
+   * The current tutorial step in PhotoCapture component.
+   */
+  tutorialStep: TutorialSteps | null;
+  /**
+   * Callback to be called when the user clicks on the "Add Damage" button.
+   */
+  onAddDamage: AddDamageHandle['handleAddDamage'];
+  /**
+   * Callback to be called when the user selects the parts to take a picture of.
+   */
+  onAddDamageParts: AddDamageHandle['handleAddParts'];
+  /**
+   * The current state of the Add Damage mode of part selection.
+   */
+  addDamagePartSelectState: 'part-select' | 'image-capture';
+  /**
+   * Callback to be called when the user clicks on the "Cancel" button of the Add Damage mode.
+   */
+  onCancelAddDamage: AddDamageHandle['handleCancelAddDamage'];
+  /**
+   * Callback called when the user manually select a new sight.
+   */
+  onSelectSight: (sight: Sight) => void;
+  /**
+   * Callback called when the user manually selects a sight to retake.
+   */
+  onRetakeSight: (sight: string) => void;
+  /**
+   * The effective pixel dimensions of the Camera video stream on the screen.
+   */
+  previewDimensions: PixelDimensions | null;
+  /**
+   * Boolean indicating if the global loading state of the PhotoCapture component is loading or not.
+   */
+  isLoading?: boolean;
+  /**
+   * The error that occurred in the PhotoCapture component. Set this value to `null` if there is no error.
+   */
+  error?: unknown | null;
+  /**
+   * The current images taken by the user (ignoring retaken pictures etc.).
+   */
+  images: Image[];
+}
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx
index 8de20a53c..b5846040d 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx
@@ -1,68 +1,9 @@
-import { CaptureAppConfig, Image, PixelDimensions, Sight } from '@monkvision/types';
-import { PhotoCaptureMode, TutorialSteps } from '../../hooks';
+import { PhotoCaptureMode } from '../../hooks';
 import { PhotoCaptureHUDElementsSight } from '../PhotoCaptureHUDElementsSight';
 import { PhotoCaptureHUDElementsAddDamage1stShot } from '../PhotoCaptureHUDElementsAddDamage1stShot';
 import { PhotoCaptureHUDElementsAddDamage2ndShot } from '../PhotoCaptureHUDElementsAddDamage2ndShot';
 import { PhotoCaptureHUDElementsAddPartSelectShot } from '../PhotoCaptureHUDElementsAddPartSelectShot';
-
-/**
- * Props of the PhotoCaptureHUDElements component.
- */
-export interface PhotoCaptureHUDElementsProps
-  extends Pick<CaptureAppConfig, 'enableSightGuidelines' | 'sightGuidelines' | 'addDamage'> {
-  /**
-   * The currently selected sight in the PhotoCapture component : the sight that the user needs to capture.
-   */
-  selectedSight: Sight;
-  /**
-   * The list of sights provided to the PhotoCapture component.
-   */
-  sights: Sight[];
-  /**
-   * Array containing the list of sights that the user has already captured.
-   */
-  sightsTaken: Sight[];
-  /**
-   * The current mode of the component.
-   */
-  mode: PhotoCaptureMode;
-  /**
-   * The current tutorial step in PhotoCapture component.
-   */
-  tutorialStep: TutorialSteps | null;
-  /**
-   * Callback called when the user presses the Add Damage button.
-   */
-  onAddDamage: () => void;
-  /**
-   * Callback called when the user cancels the Add Damage mode.
-   */
-  onCancelAddDamage: () => void;
-  /**
-   * Callback called when the user manually select a new sight.
-   */
-  onSelectSight: (sight: Sight) => void;
-  /**
-   * Callback called when the user manually selects a sight to retake.
-   */
-  onRetakeSight: (sight: string) => void;
-  /**
-   * The effective pixel dimensions of the Camera video stream on the screen.
-   */
-  previewDimensions: PixelDimensions | null;
-  /**
-   * Boolean indicating if the global loading state of the PhotoCapture component is loading or not.
-   */
-  isLoading?: boolean;
-  /**
-   * The error that occurred in the PhotoCapture component. Set this value to `null` if there is no error.
-   */
-  error?: unknown | null;
-  /**
-   * The current images taken by the user (ignoring retaken pictures etc.).
-   */
-  images: Image[];
-}
+import { PhotoCaptureHUDElementsProps } from './PhotoCaptureHUDElements.model';
 
 /**
  * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process.
@@ -96,7 +37,13 @@ export function PhotoCaptureHUDElements(params: PhotoCaptureHUDElementsProps) {
     return <PhotoCaptureHUDElementsAddDamage2ndShot onCancel={params.onCancelAddDamage} />;
   }
   if (params.mode === PhotoCaptureMode.ADD_DAMAGE_PART_SELECT) {
-    return <PhotoCaptureHUDElementsAddPartSelectShot onCancel={params.onCancelAddDamage} />;
+    return (
+      <PhotoCaptureHUDElementsAddPartSelectShot
+        onCancel={params.onCancelAddDamage}
+        onAddDamageParts={params.onAddDamageParts}
+        partSelectState={params.addDamagePartSelectState}
+      />
+    );
   }
   return null as never;
 }
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/index.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/index.ts
index 69ae70798..da53dcba5 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/index.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/index.ts
@@ -1,4 +1,2 @@
-export {
-  PhotoCaptureHUDElements,
-  type PhotoCaptureHUDElementsProps,
-} from './PhotoCaptureHUDElements';
+export { PhotoCaptureHUDElements } from './PhotoCaptureHUDElements';
+export { type PhotoCaptureHUDElementsProps } from './PhotoCaptureHUDElements.model';
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
index 9ff6d01f3..213c5b9ed 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
@@ -1,17 +1,32 @@
 import { getLanguage, useMonkAppState, useMonkTheme, vehiclePartLabels } from '@monkvision/common';
 import { Button, VehiclePartSelection } from '@monkvision/common-ui-web';
 import { VehiclePart } from '@monkvision/types';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PhotoCaptureHUDElementsProps } from '../PhotoCaptureHUDElements/PhotoCaptureHUDElements.model';
 import { usePhotoCaptureHUDElementsAddPartSelectShotStyle } from './usePhotoCaptureHUDElementsAddPartSelectShotStyle';
 
-export function PhotoCaptureHUDElementsAddPartSelectShot({ onCancel }: { onCancel: () => void }) {
+type PhotoCaptureHUDElementsAddPartSelectShotProps = Pick<
+  PhotoCaptureHUDElementsProps,
+  'onAddDamageParts'
+> & {
+  onCancel: PhotoCaptureHUDElementsProps['onCancelAddDamage'];
+  partSelectState: PhotoCaptureHUDElementsProps['addDamagePartSelectState'];
+};
+export function PhotoCaptureHUDElementsAddPartSelectShot({
+  onCancel,
+  onAddDamageParts,
+  partSelectState,
+}: PhotoCaptureHUDElementsAddPartSelectShotProps) {
   const { vehicleType } = useMonkAppState();
   const { palette } = useMonkTheme();
   const [selectedParts, setSelectedParts] = useState<VehiclePart[]>([]);
   const { i18n } = useTranslation();
   const style = usePhotoCaptureHUDElementsAddPartSelectShotStyle();
-
+  useEffect(() => onAddDamageParts(selectedParts), [selectedParts]);
+  if (partSelectState === 'image-capture') {
+    return null;
+  }
   return (
     <div style={style.stackItem}>
       <Button
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton/AddDamageButton.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton/AddDamageButton.tsx
index 92a727820..98565f97c 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton/AddDamageButton.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton/AddDamageButton.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@monkvision/common-ui-web';
 import { AddDamage } from '@monkvision/types';
 import { useTranslation } from 'react-i18next';
+import { AddDamageHandle } from '../../../hooks';
 import { usePhotoCaptureHUDButtonBackground } from '../../hooks';
 
 /**
@@ -10,7 +11,7 @@ export interface AddDamageButtonProps {
   /**
    * Callback called when the user presses the button.
    */
-  onAddDamage?: () => void;
+  onAddDamage?: AddDamageHandle['handleAddDamage'];
   /**
    * Boolean indicating whether the Add Damage feature is enabled. If disabled, the `Add Damage` button will be hidden.
    *
diff --git a/packages/inspection-capture-web/src/PhotoCapture/hooks/useAddDamageMode.ts b/packages/inspection-capture-web/src/PhotoCapture/hooks/useAddDamageMode.ts
index 670b3e292..976fad6f1 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/hooks/useAddDamageMode.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/hooks/useAddDamageMode.ts
@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react';
-import { useObjectMemo } from '@monkvision/common';
+import { useMonkAppState, useObjectMemo } from '@monkvision/common';
 import { useAnalytics } from '@monkvision/analytics';
+import { AddDamage, VehiclePart } from '@monkvision/types';
 
 /**
  * Enum of the different picture taking modes that the PhotoCapture component can be in.
@@ -32,12 +33,20 @@ export interface AddDamageHandle {
    * The current mode of the component.
    */
   mode: PhotoCaptureMode;
+  /**
+   * The list of parts that the user has selected to take a picture of.
+   */
+  vehicleParts: VehiclePart[];
   /**
    * Callback to be called when the user clicks on the "Add Damage" button.
    */
   handleAddDamage: () => void;
   /**
-   * Callback to be called everytime the user takes a picture to update the mode after it.
+   * Callback to be called when the user selects the parts to take a picture of.
+   */
+  handleAddParts: (parts: VehiclePart[]) => void;
+  /**
+   * Callback to be called every time the user takes a picture to update the mode after it.
    */
   updatePhotoCaptureModeAfterPictureTaken: () => void;
   /**
@@ -51,13 +60,29 @@ export interface AddDamageHandle {
  */
 export function useAddDamageMode(): AddDamageHandle {
   const [mode, setMode] = useState(PhotoCaptureMode.SIGHT);
+  const [vehicleParts, setVehicleParts] = useState<VehiclePart[]>([]);
   const { trackEvent } = useAnalytics();
+  const { config } = useMonkAppState();
 
   const handleAddDamage = useCallback(() => {
-    setMode(PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT);
-    trackEvent('AddDamage Selected', {
-      mode: PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT,
-    });
+    switch (config.addDamage) {
+      case AddDamage.TWO_SHOT:
+        setMode(PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT);
+        trackEvent('AddDamage Selected', {
+          mode: PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT,
+        });
+        return;
+      case AddDamage.PART_SELECT:
+        setMode(PhotoCaptureMode.ADD_DAMAGE_PART_SELECT);
+        trackEvent('AddDamage Selected', {
+          mode: PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT,
+        });
+        return;
+      case AddDamage.DISABLED:
+        throw new Error('Add Damage feature is disabled');
+      default:
+        throw new Error('Unknown Add Damage type');
+    }
   }, []);
 
   const updatePhotoCaptureModeAfterPictureTaken = useCallback(() => {
@@ -75,9 +100,14 @@ export function useAddDamageMode(): AddDamageHandle {
     setMode(PhotoCaptureMode.SIGHT);
   }, []);
 
+  const handleAddParts = useCallback((parts: VehiclePart[]) => {
+    setVehicleParts(parts);
+  }, []);
   return useObjectMemo({
     mode,
+    vehicleParts,
     handleAddDamage,
+    handleAddParts,
     updatePhotoCaptureModeAfterPictureTaken,
     handleCancelAddDamage,
   });
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
index fa4302c41..f0a34bc34 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
@@ -48,6 +48,8 @@ function createProps(): PhotoCaptureHUDProps {
     loading: { isLoading: false, error: null } as unknown as LoadingState,
     onSelectSight: jest.fn(),
     onRetakeSight: jest.fn(),
+    damageVehicleParts: [],
+    onAddDamageParts: jest.fn(),
     onAddDamage: jest.fn(),
     onCancelAddDamage: jest.fn(),
     onRetry: jest.fn(),
@@ -203,4 +205,61 @@ describe('PhotoCaptureHUD component', () => {
 
     unmount();
   });
+
+  it('should set takePictureDisabled to true when on part select', () => {
+    const props = createProps();
+    props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
+    render(<PhotoCaptureHUD {...props} />);
+    expectPropsOnChildMock(PhotoCaptureHUDButtons, { takePictureDisabled: true });
+  });
+
+  it('should set actionDisabled to true when on part select no parts are selected', () => {
+    const props = createProps();
+    props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
+    render(<PhotoCaptureHUD {...props} />);
+    expectPropsOnChildMock(PhotoCaptureHUDButtons, { actionDisabled: true });
+  });
+
+  it('should set showActionButton to true on part select', () => {
+    const props = createProps();
+    props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
+    render(<PhotoCaptureHUD {...props} />);
+    expectPropsOnChildMock(PhotoCaptureHUDButtons, { showActionButton: true });
+  });
+
+  it('should set takePictureDisabled to false when on image-capture mode', () => {
+    const props = createProps();
+    props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
+    render(<PhotoCaptureHUD {...props} />);
+    act(() => {
+      (PhotoCaptureHUDButtons as jest.MockedFunction<typeof PhotoCaptureHUDButtons>).mock
+        .calls[0][0].onAction!();
+    });
+    expectPropsOnChildMock(PhotoCaptureHUDButtons, { takePictureDisabled: false });
+  });
+
+  it('should use check action when on part select mode', () => {
+    const props = createProps();
+    props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
+    render(<PhotoCaptureHUD {...props} />);
+    expectPropsOnChildMock(PhotoCaptureHUDButtons, { action: 'check' });
+  });
+
+  it('should use close action when not on part select mode', () => {
+    const props = createProps();
+    render(<PhotoCaptureHUD {...props} />);
+    expectPropsOnChildMock(PhotoCaptureHUDButtons, { action: 'close' });
+  });
+
+  it('onAction should setAddDamagePartSelectState to image-capture when on part select mode', () => {
+    const props = createProps();
+    props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
+    render(<PhotoCaptureHUD {...props} />);
+    act(() => {
+      (PhotoCaptureHUDButtons as jest.MockedFunction<typeof PhotoCaptureHUDButtons>).mock
+        .calls[0][0].onAction!();
+    });
+    expect(props.onAddDamageParts).not.toHaveBeenCalled();
+    expect(props.onClose).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx
index 59d2cea02..9b046a0e7 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx
@@ -4,7 +4,7 @@ import { InteractiveStatus } from '@monkvision/types';
 import { TakePictureButton, Icon } from '@monkvision/common-ui-web';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { PhotoCaptureHUDButtons } from '../../../src';
-import { captureButtonForegroundColors } from '../../../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
+import { actionButtonForegroundColors } from '../../../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 const GALLERY_BTN_TEST_ID = 'monk-gallery-btn';
 const GALLERY_BADGE_TEST_ID = 'monk-gallery-badge';
@@ -62,7 +62,7 @@ describe('CaptureHUDButtons component', () => {
         {
           icon: expectedIcon,
           size: 30,
-          primaryColor: captureButtonForegroundColors[InteractiveStatus.DEFAULT],
+          primaryColor: actionButtonForegroundColors[InteractiveStatus.DEFAULT],
         },
         expect.anything(),
       ]);
@@ -149,7 +149,7 @@ describe('CaptureHUDButtons component', () => {
     });
   });
 
-  describe('Close button', () => {
+  describe('Action button', () => {
     it('should not be displayed by default', () => {
       const { unmount } = render(<PhotoCaptureHUDButtons />);
 
@@ -205,7 +205,7 @@ describe('CaptureHUDButtons component', () => {
         {
           icon: expectedIcon,
           size: 30,
-          primaryColor: captureButtonForegroundColors[InteractiveStatus.DEFAULT],
+          primaryColor: actionButtonForegroundColors[InteractiveStatus.DEFAULT],
         },
         expect.anything(),
       ]);
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements.test.tsx
index eaa0dfe81..8e2b7a3ae 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements.test.tsx
@@ -16,6 +16,13 @@ jest.mock(
   }),
 );
 
+jest.mock(
+  '../../../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot',
+  () => ({
+    PhotoCaptureHUDElementsAddPartSelectShot: jest.fn(() => <></>),
+  }),
+);
+
 import { sights } from '@monkvision/sights';
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
@@ -28,6 +35,7 @@ import {
   PhotoCaptureHUDElementsProps,
   PhotoCaptureHUDElementsSight,
 } from '../../../src';
+import { PhotoCaptureHUDElementsAddPartSelectShot } from '../../../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot';
 
 function createProps(): PhotoCaptureHUDElementsProps {
   const captureSights = [sights['test-sight-1'], sights['test-sight-2'], sights['test-sight-3']];
@@ -46,6 +54,8 @@ function createProps(): PhotoCaptureHUDElementsProps {
     images: [{ sightId: 'test-sight-1', status: ImageStatus.NOT_COMPLIANT }] as Image[],
     tutorialStep: null,
     addDamage: AddDamage.TWO_SHOT,
+    onAddDamageParts: jest.fn(),
+    addDamagePartSelectState: 'part-select',
   };
 }
 
@@ -121,4 +131,16 @@ describe('PhotoCaptureHUDElements component', () => {
 
     unmount();
   });
+  it('should return the PhotoCaptureHUDElementsAddPartSelectShot componet if the mode is part select', () => {
+    const props = createProps();
+    props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
+    render(<PhotoCaptureHUDElements {...props} />);
+    expectPropsOnChildMock(PhotoCaptureHUDElementsAddPartSelectShot, {
+      onCancel: props.onCancelAddDamage,
+      onAddDamageParts: props.onAddDamageParts,
+      partSelectState: props.addDamagePartSelectState,
+    });
+    expect(PhotoCaptureHUDElementsSight).not.toHaveBeenCalled();
+    expect(PhotoCaptureHUDElementsAddDamage1stShot).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
index 78ceeadb4..7b4fc40b1 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
@@ -1,7 +1,3 @@
-/**
- * 3. select parts should show on UI.
- */
-
 import { getLanguage, MonkAppState, useMonkAppState } from '@monkvision/common';
 import { Button, VehiclePartSelection } from '@monkvision/common-ui-web';
 import { expectPropsOnChildMock } from '@monkvision/test-utils';
@@ -24,26 +20,48 @@ describe('PhotoCaptureHUDElementsAddPartSelectShot component', () => {
       <button onClick={onClick} data-testid='close-button' />
     ));
     const { getByTestId } = render(
-      <PhotoCaptureHUDElementsAddPartSelectShot onCancel={onCancel} />,
+      <PhotoCaptureHUDElementsAddPartSelectShot
+        onCancel={onCancel}
+        onAddDamageParts={() => {}}
+        partSelectState='part-select'
+      />,
     );
     fireEvent.click(getByTestId('close-button'));
     expect(onCancel).toHaveBeenCalled();
   });
 
   it('should use correct vehicle type', () => {
-    render(<PhotoCaptureHUDElementsAddPartSelectShot onCancel={() => {}} />);
+    render(
+      <PhotoCaptureHUDElementsAddPartSelectShot
+        onCancel={() => {}}
+        onAddDamageParts={() => {}}
+        partSelectState='part-select'
+      />,
+    );
     expectPropsOnChildMock(VehiclePartSelection, {
       vehicleType: VehicleType.CUV,
     });
   });
 
   it('should show instruction to select parts', () => {
-    const re = render(<PhotoCaptureHUDElementsAddPartSelectShot onCancel={jest.fn()} />);
+    const re = render(
+      <PhotoCaptureHUDElementsAddPartSelectShot
+        onCancel={jest.fn()}
+        onAddDamageParts={() => {}}
+        partSelectState='part-select'
+      />,
+    );
     expect(re.getByText('Please select the parts you want to capture')).toBeInTheDocument();
   });
 
   it('should show selected parts', () => {
-    const re = render(<PhotoCaptureHUDElementsAddPartSelectShot onCancel={() => {}} />);
+    const re = render(
+      <PhotoCaptureHUDElementsAddPartSelectShot
+        onCancel={() => {}}
+        onAddDamageParts={() => {}}
+        partSelectState='part-select'
+      />,
+    );
     const onPartsSelected = (
       VehiclePartSelection as jest.MockedFunction<typeof VehiclePartSelection>
     ).mock.calls[0][0].onPartsSelected!;
@@ -52,4 +70,31 @@ describe('PhotoCaptureHUDElementsAddPartSelectShot component', () => {
     console.log(prettyDOM(re.container));
     expect(re.getByTestId('part-select-notification')).toBeInTheDocument();
   });
+
+  it('should return null on image-capture', () => {
+    const { container } = render(
+      <PhotoCaptureHUDElementsAddPartSelectShot
+        onCancel={() => {}}
+        onAddDamageParts={() => {}}
+        partSelectState='image-capture'
+      />,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('should callback the updated selectedParts to onAddDamageParts', () => {
+    const onAddDamageParts = jest.fn();
+    render(
+      <PhotoCaptureHUDElementsAddPartSelectShot
+        onCancel={() => {}}
+        onAddDamageParts={onAddDamageParts}
+        partSelectState='part-select'
+      />,
+    );
+    const onPartsSelected = (
+      VehiclePartSelection as jest.MockedFunction<typeof VehiclePartSelection>
+    ).mock.calls[0][0].onPartsSelected!;
+    act(() => onPartsSelected([VehiclePart.BUMPER_BACK]));
+    expect(onAddDamageParts).toHaveBeenCalledWith([VehiclePart.BUMPER_BACK]);
+  });
 });
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightSlider/SightSliderButton.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightSlider/SightSliderButton.test.tsx
index 8fa0749d4..4474c5350 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightSlider/SightSliderButton.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightSlider/SightSliderButton.test.tsx
@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react';
 import { expectPropsOnChildMock } from '@monkvision/test-utils';
-import { Button } from '@monkvision/common-ui-web';
+import { Button, ButtonProps } from '@monkvision/common-ui-web';
 import { ImageStatus } from '@monkvision/types';
-import { SightSliderButton } from '../../../../../src';
+import { SightSliderButton, SightSliderButtonProps } from '../../../../../src';
 
 describe('SightSliderButton component', () => {
   it('should display a Button with the proper label', () => {
@@ -30,40 +30,47 @@ describe('SightSliderButton component', () => {
     unmount();
   });
 
-  [
-    {
-      status: ImageStatus.UPLOADING,
-      icon: 'processing',
-      primaryColor: 'background-base',
-      disabled: true,
-    },
-    {
-      status: ImageStatus.COMPLIANCE_RUNNING,
-      icon: 'processing',
-      primaryColor: 'background-base',
-      disabled: true,
-    },
-    { status: ImageStatus.SUCCESS, icon: 'check-circle', primaryColor: 'primary', disabled: true },
-    {
-      status: ImageStatus.UPLOAD_FAILED,
-      icon: 'wifi-off',
-      primaryColor: 'alert-dark',
-      disabled: false,
-    },
-    {
-      status: ImageStatus.UPLOAD_ERROR,
-      icon: 'sync-problem',
-      primaryColor: 'alert-dark',
-      disabled: false,
-    },
-    {
-      status: ImageStatus.NOT_COMPLIANT,
-      icon: 'error',
-      primaryColor: 'alert-dark',
-      disabled: false,
-    },
-    { status: null, icon: undefined, primaryColor: 'background-base', disabled: false },
-  ].forEach(({ status, icon, primaryColor, disabled }) => {
+  (
+    [
+      {
+        status: ImageStatus.UPLOADING,
+        icon: 'processing',
+        primaryColor: 'background-base',
+        disabled: true,
+      },
+      {
+        status: ImageStatus.COMPLIANCE_RUNNING,
+        icon: 'processing',
+        primaryColor: 'background-base',
+        disabled: true,
+      },
+      {
+        status: ImageStatus.SUCCESS,
+        icon: 'check-circle',
+        primaryColor: 'primary',
+        disabled: true,
+      },
+      {
+        status: ImageStatus.UPLOAD_FAILED,
+        icon: 'wifi-off',
+        primaryColor: 'alert-dark',
+        disabled: false,
+      },
+      {
+        status: ImageStatus.UPLOAD_ERROR,
+        icon: 'sync-problem',
+        primaryColor: 'alert-dark',
+        disabled: false,
+      },
+      {
+        status: ImageStatus.NOT_COMPLIANT,
+        icon: 'error',
+        primaryColor: 'alert-dark',
+        disabled: false,
+      },
+      { status: null, icon: undefined, primaryColor: 'background-base', disabled: false },
+    ] as Array<SightSliderButtonProps & ButtonProps>
+  ).forEach(({ status, icon, primaryColor, disabled }) => {
     it(`should properly handle the ${status} status`, () => {
       const { unmount } = render(<SightSliderButton status={status} />);
 
diff --git a/packages/inspection-capture-web/test/PhotoCapture/hooks/useAddDamageMode.test.ts b/packages/inspection-capture-web/test/PhotoCapture/hooks/useAddDamageMode.test.ts
index d819ec617..230f56d6a 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/hooks/useAddDamageMode.test.ts
+++ b/packages/inspection-capture-web/test/PhotoCapture/hooks/useAddDamageMode.test.ts
@@ -1,8 +1,15 @@
 import { renderHook } from '@testing-library/react-hooks';
 import { PhotoCaptureMode, useAddDamageMode } from '../../../src/PhotoCapture/hooks';
 import { act } from '@testing-library/react';
+import { MonkAppState, useMonkAppState } from '@monkvision/common';
+import { AddDamage, VehiclePart } from '@monkvision/types';
 
 describe('useAddDamageMode hook', () => {
+  beforeEach(() => {
+    (useMonkAppState as jest.MockedFunction<typeof useMonkAppState>).mockReturnValue({
+      config: { addDamage: AddDamage.TWO_SHOT },
+    } as ReturnType<MonkAppState extends (o: { requireInspection: true }) => infer R ? (args: any) => R : never>);
+  });
   it('should be in the SIGHT mode by default', () => {
     const { result, unmount } = renderHook(useAddDamageMode);
     expect(result.current.mode).toEqual(PhotoCaptureMode.SIGHT);
@@ -44,4 +51,42 @@ describe('useAddDamageMode hook', () => {
     expect(result.current.mode).toEqual(PhotoCaptureMode.SIGHT);
     unmount();
   });
+
+  it('should switch to ADD_DAMAGE_PART_SELECT', () => {
+    (useMonkAppState as jest.MockedFunction<typeof useMonkAppState>).mockReturnValue({
+      config: { addDamage: AddDamage.PART_SELECT },
+    } as ReturnType<MonkAppState extends (o: { requireInspection: true }) => infer R ? (args: any) => R : never>);
+    const { result } = renderHook(useAddDamageMode);
+    act(() => result.current.handleAddDamage());
+    expect(result.current.mode).toEqual(PhotoCaptureMode.ADD_DAMAGE_PART_SELECT);
+  });
+
+  it('should throw error if add damage is disabled', () => {
+    (useMonkAppState as jest.MockedFunction<typeof useMonkAppState>).mockReturnValue({
+      config: { addDamage: AddDamage.DISABLED },
+    } as ReturnType<MonkAppState extends (o: { requireInspection: true }) => infer R ? (args: any) => R : never>);
+    const { result } = renderHook(useAddDamageMode);
+    expect(() => act(() => result.current.handleAddDamage())).toThrowError(
+      'Add Damage feature is disabled',
+    );
+  });
+
+  it('should throw error if add damage type is unknown', () => {
+    (useMonkAppState as jest.MockedFunction<typeof useMonkAppState>).mockReturnValue({
+      config: { addDamage: 'unknown' as AddDamage },
+    } as ReturnType<MonkAppState extends (o: { requireInspection: true }) => infer R ? (args: any) => R : never>);
+    const { result } = renderHook(useAddDamageMode);
+    expect(() => act(() => result.current.handleAddDamage())).toThrowError(
+      'Unknown Add Damage type',
+    );
+  });
+
+  it('should set the vehicle parts', () => {
+    const { result } = renderHook(useAddDamageMode);
+    act(() => result.current.handleAddParts([VehiclePart.BUMPER_BACK, VehiclePart.BUMPER_FRONT]));
+    expect(result.current.vehicleParts).toEqual([
+      VehiclePart.BUMPER_BACK,
+      VehiclePart.BUMPER_FRONT,
+    ]);
+  });
 });

From 9e05110a053b61c3afd01a5dbb7f097a87236b22 Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Fri, 30 Aug 2024 17:38:30 +0530
Subject: [PATCH 08/18] =?UTF-8?q?=E2=9C=A8=20sending=20image=20to=20backen?=
 =?UTF-8?q?d.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/PhotoCapture/PhotoCapture.tsx         |  2 +
 .../PhotoCapture/hooks/useAddDamageMode.ts    |  2 +-
 .../src/PhotoCapture/hooks/useUploadQueue.ts  | 43 ++++++++-
 packages/network/src/api/image/requests.ts    | 88 ++++++++++++++++---
 packages/network/src/api/models/image.ts      |  1 +
 5 files changed, 121 insertions(+), 15 deletions(-)

diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
index 31a56f8bb..da21d25b1 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
@@ -25,6 +25,7 @@ import {
   PhotoCaptureTutorialOption,
   Sight,
   AddDamage,
+  VehiclePart,
 } from '@monkvision/types';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -204,6 +205,7 @@ export function PhotoCapture({
     additionalTasks,
     complianceOptions,
     eventHandlers: [adaptiveUploadEventHandlers, badConnectionWarningUploadEventHandlers],
+    damageVehicleParts: [VehiclePart.BUMPER_FRONT], // TODO: Handle this properly
   });
   const images = usePhotoCaptureImages(inspectionId);
   const handlePictureTaken = usePictureTaken({
diff --git a/packages/inspection-capture-web/src/PhotoCapture/hooks/useAddDamageMode.ts b/packages/inspection-capture-web/src/PhotoCapture/hooks/useAddDamageMode.ts
index 976fad6f1..1f3a933a1 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/hooks/useAddDamageMode.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/hooks/useAddDamageMode.ts
@@ -75,7 +75,7 @@ export function useAddDamageMode(): AddDamageHandle {
       case AddDamage.PART_SELECT:
         setMode(PhotoCaptureMode.ADD_DAMAGE_PART_SELECT);
         trackEvent('AddDamage Selected', {
-          mode: PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT,
+          mode: PhotoCaptureMode.ADD_DAMAGE_PART_SELECT,
         });
         return;
       case AddDamage.DISABLED:
diff --git a/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts b/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts
index 1e4aaf280..e96b8fbeb 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts
@@ -1,6 +1,13 @@
 import { Queue, uniq, useQueue } from '@monkvision/common';
 import { AddImageOptions, ImageUploadType, MonkApiConfig, useMonkApi } from '@monkvision/network';
-import { CaptureAppConfig, ComplianceOptions, MonkPicture, TaskName } from '@monkvision/types';
+import {
+  CaptureAppConfig,
+  ComplianceOptions,
+  ImageType,
+  MonkPicture,
+  TaskName,
+  VehiclePart,
+} from '@monkvision/types';
 import { useRef } from 'react';
 import { useMonitoring } from '@monkvision/monitoring';
 import { PhotoCaptureMode } from './useAddDamageMode';
@@ -41,6 +48,10 @@ export interface UploadQueueParams extends Pick<CaptureAppConfig, 'additionalTas
    * A collection of event handlers listening to upload events.
    */
   eventHandlers?: UploadEventHandlers[];
+  /**
+   * The vehicle parts that have been damaged.
+   */
+  damageVehicleParts?: VehiclePart[];
 }
 
 /**
@@ -93,13 +104,27 @@ export interface AddDamage2ndShotPictureUpload {
   picture: MonkPicture;
 }
 
+/**
+ * Upload options for a part select picture in the add damage process.
+ */
+export interface AddDamagePartSelectPictureUpload {
+  /**
+   * Upload mode : `PhotoCaptureMode.ADD_DAMAGE_PART_SELECTION`.
+   */
+  mode: PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
+  /**
+   * The picture to upload.
+   */
+  picture: MonkPicture;
+}
 /**
  * Union type describing every possible upload configurations for a picture taken.
  */
 export type PictureUpload =
   | SightPictureUpload
   | AddDamage1stShotPictureUpload
-  | AddDamage2ndShotPictureUpload;
+  | AddDamage2ndShotPictureUpload
+  | AddDamagePartSelectPictureUpload;
 
 function createAddImageOptions(
   upload: PictureUpload,
@@ -108,6 +133,7 @@ function createAddImageOptions(
   enableThumbnail: boolean,
   additionalTasks?: CaptureAppConfig['additionalTasks'],
   compliance?: ComplianceOptions,
+  vehicleParts?: VehiclePart[],
 ): AddImageOptions {
   if (upload.mode === PhotoCaptureMode.SIGHT) {
     return {
@@ -120,6 +146,17 @@ function createAddImageOptions(
       useThumbnailCaching: enableThumbnail,
     };
   }
+  if (upload.mode === PhotoCaptureMode.ADD_DAMAGE_PART_SELECT) {
+    return {
+      uploadType: ImageUploadType.PART_SELECT_SHOT,
+      picture: upload.picture,
+      inspectionId,
+      vehicleParts: vehicleParts!,
+      compliance,
+      image_type: ImageType.CLOSE_UP,
+      useThumbnailCaching: enableThumbnail,
+    };
+  }
   return {
     uploadType: ImageUploadType.CLOSE_UP_2_SHOT,
     picture: upload.picture,
@@ -140,6 +177,7 @@ export function useUploadQueue({
   additionalTasks,
   complianceOptions,
   eventHandlers,
+  damageVehicleParts,
 }: UploadQueueParams): Queue<PictureUpload> {
   const { handleError } = useMonitoring();
   const siblingIdRef = useRef(0);
@@ -159,6 +197,7 @@ export function useUploadQueue({
           true,
           additionalTasks,
           complianceOptions,
+          damageVehicleParts,
         ),
       );
       const uploadDurationMs = Date.now() - startTs;
diff --git a/packages/network/src/api/image/requests.ts b/packages/network/src/api/image/requests.ts
index 682329e72..df2987746 100644
--- a/packages/network/src/api/image/requests.ts
+++ b/packages/network/src/api/image/requests.ts
@@ -1,6 +1,11 @@
 import ky from 'ky';
 import { Dispatch } from 'react';
-import { getFileExtensions, MonkActionType, MonkCreatedOneImageAction } from '@monkvision/common';
+import {
+  getFileExtensions,
+  MonkActionType,
+  MonkCreatedOneImageAction,
+  vehiclePartLabels,
+} from '@monkvision/common';
 import {
   ComplianceOptions,
   Image,
@@ -12,6 +17,7 @@ import {
   MonkPicture,
   TaskName,
   TranslationObject,
+  VehiclePart,
 } from '@monkvision/types';
 import { v4 } from 'uuid';
 import { labels, sights } from '@monkvision/sights';
@@ -33,6 +39,11 @@ export enum ImageUploadType {
    * add damage workflow.
    */
   CLOSE_UP_2_SHOT = 'close_up_2_shot',
+  /**
+   * Upload type corresponding to a part selection shot in the PhotoCapture process. when using the part select add
+   * damage workflow.
+   */
+  PART_SELECT_SHOT = 'part_select_shot',
   /**
    * Upload type corresponding to a video frame in the VideoCapture process.
    */
@@ -110,6 +121,15 @@ export interface Add2ShotCloseUpImageOptions {
   compliance?: ComplianceOptions;
 }
 
+export type AddPartSelectCloseUpImageOptions = Pick<
+  Add2ShotCloseUpImageOptions,
+  'picture' | 'inspectionId' | 'compliance' | 'useThumbnailCaching'
+> & {
+  uploadType: ImageUploadType.PART_SELECT_SHOT;
+  image_type: ImageType.CLOSE_UP;
+  vehicleParts: VehiclePart[];
+};
+
 /**
  * Options specififed when adding a video frame to a VideoCapture inspection.
  */
@@ -143,7 +163,8 @@ export interface AddVideoFrameOptions {
 export type AddImageOptions =
   | AddBeautyShotImageOptions
   | Add2ShotCloseUpImageOptions
-  | AddVideoFrameOptions;
+  | AddVideoFrameOptions
+  | AddPartSelectCloseUpImageOptions;
 
 interface AddImageData {
   filename: string;
@@ -151,7 +172,10 @@ interface AddImageData {
 }
 
 function getImageType(options: AddImageOptions): ImageType {
-  if (options.uploadType === ImageUploadType.CLOSE_UP_2_SHOT) {
+  if (
+    options.uploadType === ImageUploadType.CLOSE_UP_2_SHOT ||
+    options.uploadType === ImageUploadType.PART_SELECT_SHOT
+  ) {
     return ImageType.CLOSE_UP;
   }
   return ImageType.BEAUTY_SHOT;
@@ -169,12 +193,24 @@ function getImageLabel(options: AddImageOptions): TranslationObject | undefined
       nl: `Videoframe ${options.frameIndex}`,
     };
   }
-  return {
-    en: options.firstShot ? 'Close Up (part)' : 'Close Up (damage)',
-    fr: options.firstShot ? 'Photo Zoomée (partie)' : 'Photo Zoomée (dégât)',
-    de: options.firstShot ? 'Gezoomtes Foto (Teil)' : 'Close Up (Schaden)',
-    nl: options.firstShot ? 'Nabij (onderdeel)' : 'Nabij (schade)',
-  };
+  if (options.uploadType === ImageUploadType.PART_SELECT_SHOT) {
+    const partsTranslation = options.vehicleParts.map((part) => vehiclePartLabels[part]);
+    return {
+      en: `Damage on ${partsTranslation.map((part) => part.en).join(', ')}`,
+      fr: `Dommages sur ${partsTranslation.map((part) => part.en).join(', ')}`,
+      de: `Schaden an ${partsTranslation.map((part) => part.en).join(', ')}`,
+      nl: `Schade aan ${partsTranslation.map((part) => part.en).join(', ')}`,
+    };
+  }
+  if (options.uploadType === ImageUploadType.CLOSE_UP_2_SHOT) {
+    return {
+      en: options.firstShot ? 'Close Up (part)' : 'Close Up (damage)',
+      fr: options.firstShot ? 'Photo Zoomée (partie)' : 'Photo Zoomée (dégât)',
+      de: options.firstShot ? 'Gezoomtes Foto (Teil)' : 'Close Up (Schaden)',
+      nl: options.firstShot ? 'Nabij (onderdeel)' : 'Nabij (schade)',
+    };
+  }
+  return undefined as never;
 }
 
 function getAdditionalData(options: AddImageOptions): ImageAdditionalData {
@@ -229,7 +265,33 @@ function createBeautyShotImageData(
   return { filename, body };
 }
 
-function createCloseUpImageData(
+function createPartSelectImageData(options: AddPartSelectCloseUpImageOptions): AddImageData {
+  const filename = `part-select-${options.inspectionId}-${Date.now()}.jpg`;
+
+  const body: ApiImagePost = {
+    acquisition: {
+      strategy: 'upload_multipart_form_keys',
+      file_key: MULTIPART_KEY_IMAGE,
+    },
+    image_type: ImageType.CLOSE_UP,
+    tasks: [
+      TaskName.DAMAGE_DETECTION,
+      {
+        name: TaskName.COMPLIANCES,
+        wait_for_result:
+          options.compliance?.enableCompliance && options.compliance?.useLiveCompliance,
+      },
+    ],
+    detailed_viewpoint: {
+      centers_on: options.vehicleParts,
+    },
+    additional_data: getAdditionalData(options),
+  };
+
+  return { filename, body };
+}
+
+function createCloseUp2ShotImageData(
   options: Add2ShotCloseUpImageOptions,
   filetype: string,
 ): AddImageData {
@@ -278,11 +340,13 @@ function getAddImageData(options: AddImageOptions, filetype: string): AddImageDa
     case ImageUploadType.BEAUTY_SHOT:
       return createBeautyShotImageData(options, filetype);
     case ImageUploadType.CLOSE_UP_2_SHOT:
-      return createCloseUpImageData(options, filetype);
+      return createCloseUp2ShotImageData(options, filetype);
     case ImageUploadType.VIDEO_FRAME:
       return createVideoFrameData(options, filetype);
+    case ImageUploadType.PART_SELECT_SHOT:
+      return createPartSelectImageData(options);
     default:
-      throw new Error('Unknown image upload type.');
+      return 'Unknown image upload type.' as never;
   }
 }
 
diff --git a/packages/network/src/api/models/image.ts b/packages/network/src/api/models/image.ts
index 06da6b64f..a6a9b9ff7 100644
--- a/packages/network/src/api/models/image.ts
+++ b/packages/network/src/api/models/image.ts
@@ -90,4 +90,5 @@ export interface ApiImagePost {
   image_sibling_key?: string;
   compliances?: ApiCompliance;
   additional_data?: ApiImageAdditionalData;
+  detailed_viewpoint?: ApiViewpointComponent;
 }

From 4ba14497b6f472dbf294c2bf97837e159427ae06 Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Mon, 2 Sep 2024 21:12:16 +0530
Subject: [PATCH 09/18] =?UTF-8?q?=F0=9F=90=9B=20fix=20the=20vehicle=20part?=
 =?UTF-8?q?s=20to=20be=20sent=20for=20the=20backend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 documentation/docs/photo-capture-workflow.md  |  2 +-
 .../hooks/useInspectionGalleryItems.test.ts   |  9 ++++-
 .../src/PhotoCapture/PhotoCapture.tsx         |  2 -
 .../PhotoCaptureHUD/PhotoCaptureHUD.tsx       |  2 +-
 ...otoCaptureHUDElementsAddPartSelectShot.tsx |  4 +-
 .../src/PhotoCapture/hooks/usePictureTaken.ts | 35 ++++++++++++------
 .../src/PhotoCapture/hooks/useUploadQueue.ts  | 37 ++++++++++---------
 .../src/translations/de.json                  |  3 +-
 .../src/translations/en.json                  |  3 +-
 .../src/translations/fr.json                  |  3 +-
 .../src/translations/nl.json                  |  3 +-
 ...ptureHUDElementsAddPartSelectShot.test.tsx |  2 +-
 .../PhotoCapture/hooks/useUploadQueue.test.ts |  4 +-
 packages/network/src/api/image/requests.ts    | 12 ++++++
 14 files changed, 78 insertions(+), 43 deletions(-)

diff --git a/documentation/docs/photo-capture-workflow.md b/documentation/docs/photo-capture-workflow.md
index 813c0fe02..682be0f81 100644
--- a/documentation/docs/photo-capture-workflow.md
+++ b/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 `addDamage` prop to `AddDamage.DISABLED`. TODO
+`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
diff --git a/packages/common-ui-web/test/components/InspectionGallery/hooks/useInspectionGalleryItems.test.ts b/packages/common-ui-web/test/components/InspectionGallery/hooks/useInspectionGalleryItems.test.ts
index 9dd7f0869..0022ef346 100644
--- a/packages/common-ui-web/test/components/InspectionGallery/hooks/useInspectionGalleryItems.test.ts
+++ b/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,
   };
 }
 
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
index da21d25b1..31a56f8bb 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
@@ -25,7 +25,6 @@ import {
   PhotoCaptureTutorialOption,
   Sight,
   AddDamage,
-  VehiclePart,
 } from '@monkvision/types';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -205,7 +204,6 @@ export function PhotoCapture({
     additionalTasks,
     complianceOptions,
     eventHandlers: [adaptiveUploadEventHandlers, badConnectionWarningUploadEventHandlers],
-    damageVehicleParts: [VehiclePart.BUMPER_FRONT], // TODO: Handle this properly
   });
   const images = usePhotoCaptureImages(inspectionId);
   const handlePictureTaken = usePictureTaken({
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
index 7814da371..f3c8273b3 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { CaptureAppConfig, Image, ImageStatus, Sight, VehiclePart } from '@monkvision/types';
+import { CaptureAppConfig, Image, ImageStatus, Sight } from '@monkvision/types';
 import { useTranslation } from 'react-i18next';
 import { BackdropDialog } from '@monkvision/common-ui-web';
 import { CameraHUDProps } from '@monkvision/camera-web';
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
index 213c5b9ed..8506bf0de 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
@@ -21,7 +21,7 @@ export function PhotoCaptureHUDElementsAddPartSelectShot({
   const { vehicleType } = useMonkAppState();
   const { palette } = useMonkTheme();
   const [selectedParts, setSelectedParts] = useState<VehiclePart[]>([]);
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation();
   const style = usePhotoCaptureHUDElementsAddPartSelectShotStyle();
   useEffect(() => onAddDamageParts(selectedParts), [selectedParts]);
   if (partSelectState === 'image-capture') {
@@ -42,7 +42,7 @@ export function PhotoCaptureHUDElementsAddPartSelectShot({
             ...style.notification,
           }}
         >
-          Please select the parts you want to capture
+          {t('photo.hud.addDamage.selectParts ')}
         </div>
         <VehiclePartSelection vehicleType={vehicleType!} onPartsSelected={setSelectedParts} />
         {selectedParts.length !== 0 && (
diff --git a/packages/inspection-capture-web/src/PhotoCapture/hooks/usePictureTaken.ts b/packages/inspection-capture-web/src/PhotoCapture/hooks/usePictureTaken.ts
index 9c898aa26..3aa39710b 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/hooks/usePictureTaken.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/hooks/usePictureTaken.ts
@@ -44,19 +44,32 @@ export function usePictureTaken({
   tasksBySight,
 }: UseTakePictureParams): HandleTakePictureFunction {
   const { trackEvent } = useAnalytics();
-  return useCallback(
+  return useCallback<HandleTakePictureFunction>(
     (picture: MonkPicture) => {
       sightState.setLastPictureTakenUri(picture.uri);
-      const upload: PictureUpload =
-        addDamageHandle.mode === PhotoCaptureMode.SIGHT
-          ? {
-              mode: addDamageHandle.mode,
-              picture,
-              sightId: sightState.selectedSight.id,
-              tasks: tasksBySight?.[sightState.selectedSight.id] ?? sightState.selectedSight.tasks,
-            }
-          : { mode: addDamageHandle.mode, picture };
-      uploadQueue.push(upload);
+      switch (addDamageHandle.mode) {
+        case PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT:
+        case PhotoCaptureMode.ADD_DAMAGE_2ND_SHOT:
+          uploadQueue.push({ mode: addDamageHandle.mode, picture });
+          break;
+        case PhotoCaptureMode.SIGHT:
+          uploadQueue.push({
+            mode: addDamageHandle.mode,
+            picture,
+            sightId: sightState.selectedSight.id,
+            tasks: tasksBySight?.[sightState.selectedSight.id] ?? sightState.selectedSight.tasks,
+          });
+          break;
+        case PhotoCaptureMode.ADD_DAMAGE_PART_SELECT:
+          uploadQueue.push({
+            mode: addDamageHandle.mode,
+            picture,
+            vehicleParts: addDamageHandle.vehicleParts,
+          });
+          break;
+        default:
+          throw new Error('Not Implemented Photo Capture Mode');
+      }
       if (addDamageHandle.mode === PhotoCaptureMode.SIGHT) {
         sightState.takeSelectedSight();
       } else {
diff --git a/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts b/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts
index e96b8fbeb..9302642c2 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts
@@ -48,10 +48,6 @@ export interface UploadQueueParams extends Pick<CaptureAppConfig, 'additionalTas
    * A collection of event handlers listening to upload events.
    */
   eventHandlers?: UploadEventHandlers[];
-  /**
-   * The vehicle parts that have been damaged.
-   */
-  damageVehicleParts?: VehiclePart[];
 }
 
 /**
@@ -116,6 +112,10 @@ export interface AddDamagePartSelectPictureUpload {
    * The picture to upload.
    */
   picture: MonkPicture;
+  /**
+   * User selected damaged parts.
+   */
+  vehicleParts: VehiclePart[];
 }
 /**
  * Union type describing every possible upload configurations for a picture taken.
@@ -133,7 +133,6 @@ function createAddImageOptions(
   enableThumbnail: boolean,
   additionalTasks?: CaptureAppConfig['additionalTasks'],
   compliance?: ComplianceOptions,
-  vehicleParts?: VehiclePart[],
 ): AddImageOptions {
   if (upload.mode === PhotoCaptureMode.SIGHT) {
     return {
@@ -151,21 +150,27 @@ function createAddImageOptions(
       uploadType: ImageUploadType.PART_SELECT_SHOT,
       picture: upload.picture,
       inspectionId,
-      vehicleParts: vehicleParts!,
+      vehicleParts: upload.vehicleParts!,
       compliance,
       image_type: ImageType.CLOSE_UP,
       useThumbnailCaching: enableThumbnail,
     };
   }
-  return {
-    uploadType: ImageUploadType.CLOSE_UP_2_SHOT,
-    picture: upload.picture,
-    siblingKey: `closeup-sibling-key-${siblingId}`,
-    firstShot: upload.mode === PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT,
-    inspectionId,
-    compliance,
-    useThumbnailCaching: enableThumbnail,
-  };
+  if (
+    upload.mode === PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT ||
+    upload.mode === PhotoCaptureMode.ADD_DAMAGE_2ND_SHOT
+  ) {
+    return {
+      uploadType: ImageUploadType.CLOSE_UP_2_SHOT,
+      picture: upload.picture,
+      siblingKey: `closeup-sibling-key-${siblingId}`,
+      firstShot: upload.mode === PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT,
+      inspectionId,
+      compliance,
+      useThumbnailCaching: enableThumbnail,
+    };
+  }
+  return '' as never;
 }
 
 /**
@@ -177,7 +182,6 @@ export function useUploadQueue({
   additionalTasks,
   complianceOptions,
   eventHandlers,
-  damageVehicleParts,
 }: UploadQueueParams): Queue<PictureUpload> {
   const { handleError } = useMonitoring();
   const siblingIdRef = useRef(0);
@@ -197,7 +201,6 @@ export function useUploadQueue({
           true,
           additionalTasks,
           complianceOptions,
-          damageVehicleParts,
         ),
       );
       const uploadDurationMs = Date.now() - startTs;
diff --git a/packages/inspection-capture-web/src/translations/de.json b/packages/inspection-capture-web/src/translations/de.json
index 760e2ee9b..16f0c387b 100644
--- a/packages/inspection-capture-web/src/translations/de.json
+++ b/packages/inspection-capture-web/src/translations/de.json
@@ -17,7 +17,8 @@
         "damagedPartCounter": "1 / 2 • Beschädigtes Teil",
         "closeupPictureCounter": "2 / 2 • Nahaufnahme-Vorschau",
         "infoBtn": "Richte das Ziel auf den beschädigten Teil aus und tippe dann auf den Auslöserknopf",
-        "infoCloseup": "Ein Nahaufnahmebild von dem Schaden machen"
+        "infoCloseup": "Ein Nahaufnahmebild von dem Schaden machen",
+        "selectParts": "Wählen Sie die Teile aus, an denen Sie Schaden nehmen"
       },
       "error": {
         "retry": "Erneut versuchen",
diff --git a/packages/inspection-capture-web/src/translations/en.json b/packages/inspection-capture-web/src/translations/en.json
index dc1378eb6..14fbe56f6 100644
--- a/packages/inspection-capture-web/src/translations/en.json
+++ b/packages/inspection-capture-web/src/translations/en.json
@@ -17,7 +17,8 @@
         "damagedPartCounter": "1 / 2 • Damaged part",
         "closeupPictureCounter": "2 / 2 • Closeup Picture",
         "infoBtn": "Aim the target at the damaged part then tap the shutter button",
-        "infoCloseup": "Take a closeup picture of the damage"
+        "infoCloseup": "Take a closeup picture of the damage",
+        "selectParts": "Select the parts where you damage is"
       },
       "error": {
         "retry": "Retry",
diff --git a/packages/inspection-capture-web/src/translations/fr.json b/packages/inspection-capture-web/src/translations/fr.json
index b3b893e4c..05bdda44a 100644
--- a/packages/inspection-capture-web/src/translations/fr.json
+++ b/packages/inspection-capture-web/src/translations/fr.json
@@ -17,7 +17,8 @@
         "damagedPartCounter": "1 / 2 • Pièce endommagée",
         "closeupPictureCounter": "2 / 2 • Dégât en gros plan",
         "infoBtn": "Placer le viseur sur la pièce endommagée puis enclencher le bouton capture de la photo",
-        "infoCloseup": "Prendre une photo en gros plan du dégât"
+        "infoCloseup": "Prendre une photo en gros plan du dégât",
+        "selectParts": "Sélectionnez les pièces où vous endommagez"
       },
       "error": {
         "retry": "Réessayer",
diff --git a/packages/inspection-capture-web/src/translations/nl.json b/packages/inspection-capture-web/src/translations/nl.json
index 8feb5160d..a8625fea3 100644
--- a/packages/inspection-capture-web/src/translations/nl.json
+++ b/packages/inspection-capture-web/src/translations/nl.json
@@ -17,7 +17,8 @@
         "damagedPartCounter": "1 / 2 • Beschadigd onderdeel",
         "closeupPictureCounter": "2 / 2 • Closeup foto",
         "infoBtn": "Richt de markering op het beschadigde onderdeel en tik vervolgens op de sluitertknop",
-        "infoCloseup": "Neem een closeup foto van de schade"
+        "infoCloseup": "Neem een closeup foto van de schade",
+        "selectParts": "Selecteer de onderdelen waar je schade zit"
       },
       "error": {
         "retry": "Opnieuw proberen",
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
index 7b4fc40b1..4860d872c 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
@@ -51,7 +51,7 @@ describe('PhotoCaptureHUDElementsAddPartSelectShot component', () => {
         partSelectState='part-select'
       />,
     );
-    expect(re.getByText('Please select the parts you want to capture')).toBeInTheDocument();
+    expect(re.getByText('photo.hud.addDamage.selectParts')).toBeInTheDocument();
   });
 
   it('should show selected parts', () => {
diff --git a/packages/inspection-capture-web/test/PhotoCapture/hooks/useUploadQueue.test.ts b/packages/inspection-capture-web/test/PhotoCapture/hooks/useUploadQueue.test.ts
index 25a26cff3..dd4b91421 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/hooks/useUploadQueue.test.ts
+++ b/packages/inspection-capture-web/test/PhotoCapture/hooks/useUploadQueue.test.ts
@@ -7,7 +7,7 @@ import {
   UploadQueueParams,
   useUploadQueue,
 } from '../../../src/PhotoCapture/hooks';
-import { AddDamage, ComplianceIssue, TaskName } from '@monkvision/types';
+import { ComplianceIssue, TaskName } from '@monkvision/types';
 import { ImageUploadType, useMonkApi } from '@monkvision/network';
 import { useMonitoring } from '@monkvision/monitoring';
 import { act } from '@testing-library/react';
@@ -146,7 +146,6 @@ describe('useUploadQueue hook', () => {
       });
       expect(addImageMock).toHaveBeenCalledWith({
         uploadType: ImageUploadType.CLOSE_UP_2_SHOT,
-        closeUpType: AddDamage.TWO_SHOT,
         picture: upload1.picture,
         siblingKey: expect.any(String),
         useThumbnailCaching: true,
@@ -171,7 +170,6 @@ describe('useUploadQueue hook', () => {
 
       expect(addImageMock).toHaveBeenCalledWith({
         uploadType: ImageUploadType.CLOSE_UP_2_SHOT,
-        closeUpType: AddDamage.TWO_SHOT,
         picture: upload2.picture,
         siblingKey,
         useThumbnailCaching: true,
diff --git a/packages/network/src/api/image/requests.ts b/packages/network/src/api/image/requests.ts
index df2987746..f4e095e26 100644
--- a/packages/network/src/api/image/requests.ts
+++ b/packages/network/src/api/image/requests.ts
@@ -121,12 +121,24 @@ export interface Add2ShotCloseUpImageOptions {
   compliance?: ComplianceOptions;
 }
 
+/**
+ * Options specified when adding a close up (an "add damage" image) to an inspection using the part select process.
+ */
 export type AddPartSelectCloseUpImageOptions = Pick<
   Add2ShotCloseUpImageOptions,
   'picture' | 'inspectionId' | 'compliance' | 'useThumbnailCaching'
 > & {
+  /**
+   * The type of the image upload : `ImageUploadType.PART_SELECT_SHOT`;
+   */
   uploadType: ImageUploadType.PART_SELECT_SHOT;
+  /**
+   * To mark image type as close up.
+   */
   image_type: ImageType.CLOSE_UP;
+  /**
+   * List of damage parts chosen by User with part selected wireframe
+   */
   vehicleParts: VehiclePart[];
 };
 

From f393bb6b7d6158e08d229bfc0c6f1ebfd5627083 Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Mon, 2 Sep 2024 21:31:56 +0530
Subject: [PATCH 10/18] =?UTF-8?q?=E2=9C=85=20fix=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/test/i18n/utils.test.tsx                      | 4 ++--
 .../SightGuideline/SightGuideline.tsx                         | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/common/test/i18n/utils.test.tsx b/packages/common/test/i18n/utils.test.tsx
index f23c536dc..5cef6ee70 100644
--- a/packages/common/test/i18n/utils.test.tsx
+++ b/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 />);
 
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx
index 92faf5df6..ead5af692 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx
@@ -10,7 +10,8 @@ import { styles } from './SightGuideline.styles';
  * Props of the SightGuideline component.
  */
 export interface SightGuidelineProps
-  extends Pick<CaptureAppConfig, 'addDamage' | 'sightGuidelines' | 'enableSightGuidelines'> {
+  extends Pick<CaptureAppConfig, 'sightGuidelines' | 'enableSightGuidelines'>,
+    Partial<Pick<CaptureAppConfig, 'addDamage'>> {
   /**
    * The id of the sight.
    */

From f19e335c86799d34677600c65733843bf3fdb091 Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Wed, 4 Sep 2024 11:45:03 +0530
Subject: [PATCH 11/18] =?UTF-8?q?=F0=9F=90=9B=20to=20reset=20UI=20to=20par?=
 =?UTF-8?q?t=20select=20insterd=20of=20camera=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx    | 6 ++++--
 .../PhotoCaptureHUDElementsAddPartSelectShot.tsx            | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
index f3c8273b3..1208bfcd2 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { CaptureAppConfig, Image, ImageStatus, Sight } from '@monkvision/types';
 import { useTranslation } from 'react-i18next';
 import { BackdropDialog } from '@monkvision/common-ui-web';
@@ -158,7 +158,9 @@ export function PhotoCaptureHUD({
       ).length,
     [images],
   );
-
+  useEffect(() => {
+    setAddDamagePartSelectState('part-select');
+  }, [mode]);
   const handleCloseConfirm = () => {
     setShowCloseModal(false);
     trackEvent('Capture Closed');
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
index 8506bf0de..3bf0b4f5f 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
@@ -42,7 +42,7 @@ export function PhotoCaptureHUDElementsAddPartSelectShot({
             ...style.notification,
           }}
         >
-          {t('photo.hud.addDamage.selectParts ')}
+          {t('photo.hud.addDamage.selectParts')}
         </div>
         <VehiclePartSelection vehicleType={vehicleType!} onPartsSelected={setSelectedParts} />
         {selectedParts.length !== 0 && (

From 68cf838318ff4391ccb0c9eb3d2d4610e0e67da9 Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Fri, 6 Sep 2024 09:44:34 +0530
Subject: [PATCH 12/18] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20remove=20action=20bu?=
 =?UTF-8?q?tton=20logic=20Revert=20"=E2=99=BB=EF=B8=8F=20change=20close=20?=
 =?UTF-8?q?button=20to=20action=20button=20and=20add=20validate=20action"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit d79b8258a306e92af99d18cc129b0889d4f0e06f.
---
 .../PhotoCaptureHUD/PhotoCaptureHUD.tsx       | 13 ++---
 .../PhotoCaptureHUDButtons.model.ts           | 14 +++---
 .../PhotoCaptureHUDButtons.styles.ts          |  6 +--
 .../PhotoCaptureHUDButtons.tsx                | 49 ++++++++-----------
 .../PhotoCaptureHUDButtons/hooks.ts           | 32 +++++-------
 .../test/PhotoCapture/PhotoCapture.test.tsx   |  1 -
 .../PhotoCaptureHUD/PhotoCaptureHUD.test.tsx  | 45 +++--------------
 .../PhotoCaptureHUDButtons.test.tsx           | 18 +++----
 8 files changed, 60 insertions(+), 118 deletions(-)

diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
index 1208bfcd2..f8947ccb6 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
@@ -196,7 +196,9 @@ export function PhotoCaptureHUD({
       <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 ||
@@ -205,16 +207,7 @@ export function PhotoCaptureHUD({
           loading.isLoading ||
           showValidateAction
         }
-        action={showValidateAction ? 'check' : 'close'}
-        onAction={() =>
-          showValidateAction
-            ? setAddDamagePartSelectState('image-capture')
-            : setShowCloseModal(true)
-        }
-        actionDisabled={
-          !!loading.error || !!handle.error || (showValidateAction && !damageVehicleParts.length)
-        }
-        showActionButton={showCloseButton || showValidateAction}
+        showCloseButton={showCloseButton}
         showGalleryBadge={retakeCount > 0}
         retakeCount={retakeCount}
       />
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.model.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.model.ts
index 195ffdb6b..219313a6e 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.model.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.model.ts
@@ -9,24 +9,24 @@ export interface ActionButtonProps {
    *
    * @default 'close'
    */
-  action?: ('close' | 'check') & IconName;
+  action?: 'close' & IconName;
   /**
-   * Boolean indicating if the action button is disabled.
+   * Boolean indicating if the close button is disabled.
    *
    * @default false
    */
-  actionDisabled?: boolean;
+  closeDisabled?: boolean;
   /**
-   * Boolean indicating if the action button should be displayed in the HUD on top of the Camera preview.
+   * Boolean indicating if the close button should be displayed in the HUD on top of the Camera preview.
    *
    * @default false
    */
-  showActionButton?: boolean;
+  showCloseButton?: boolean;
   /**
-   * Callback called when the user clicks on the action button. If this callback is not provided, the action button will
+   * Callback called when the user clicks on the close button. If this callback is not provided, the close button will
    * not be displayed on the screen.
    */
-  onAction?: () => void;
+  onClose?: () => void;
 }
 
 /**
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts
index e8a14e3c2..505728017 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts
@@ -7,7 +7,7 @@ const BUTTON_BORDER_WIDTH = 2;
 export const PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH =
   BUTTON_SIZE + BUTTON_PADDING + BUTTON_BORDER_WIDTH;
 
-export const actionButtonForegroundColors = getInteractiveVariants(
+export const captureButtonForegroundColors = getInteractiveVariants(
   '#f3f3f3',
   InteractiveVariation.DARKEN,
 );
@@ -15,10 +15,6 @@ export const captureButtonBackgroundColors = getInteractiveVariants(
   '#1b1c1e',
   InteractiveVariation.LIGHTEN,
 );
-export const checkButtonBackgroundColors = getInteractiveVariants(
-  '#0A84FF',
-  InteractiveVariation.DARKEN,
-);
 
 export const styles: Styles = {
   container: {
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx
index e9336c7ad..ccccee400 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx
@@ -7,54 +7,47 @@ import { PhotoCaptureHUDButtonsProps } from './PhotoCaptureHUDButtons.model';
  * Components implementing the main buttons of the PhotoCapture Camera HUD. This component implements 3 buttons :
  * - A take picture button
  * - A gallery button
- * - A action button (only displayed if the `onAction` callback is defined)
+ * - A close button (only displayed if the `onClose` callback is defined)
  */
 export function PhotoCaptureHUDButtons({
   galleryPreview,
   onTakePicture,
   onOpenGallery,
+  onClose,
   galleryDisabled = false,
   takePictureDisabled = false,
+  closeDisabled = false,
+  showCloseButton = false,
   showGalleryBadge = false,
   retakeCount = 0,
-  onAction,
-  actionDisabled = false,
-  showActionButton = false,
   action = 'close',
 }: PhotoCaptureHUDButtonsProps) {
   const { status: galleryStatus, eventHandlers: galleryEventHandlers } = useInteractiveStatus({
     disabled: galleryDisabled,
   });
-  const { status: actionButtonStatus, eventHandlers: actionEventHandlers } = useInteractiveStatus({
-    disabled: actionDisabled,
-  });
-  const {
-    containerStyle,
-    gallery,
-    galleryBadgeStyle,
-    actionButton: confirmButton,
-    backgroundCoverStyle,
-  } = useCaptureHUDButtonsStyles({
-    galleryStatus,
-    actionButtonStatus,
-    actionDisabled,
-    actionBtnAvailable: !!onAction,
-    galleryPreview,
-    showActionButton,
-    action,
-    showGalleryBadge,
+  const { status: closeStatus, eventHandlers: closeEventHandlers } = useInteractiveStatus({
+    disabled: closeDisabled,
   });
+  const { containerStyle, gallery, galleryBadgeStyle, close, backgroundCoverStyle } =
+    useCaptureHUDButtonsStyles({
+      galleryStatus,
+      closeStatus,
+      closeBtnAvailable: !!onClose,
+      galleryPreview,
+      showCloseButton,
+      showGalleryBadge,
+    });
 
   return (
     <div style={containerStyle}>
       <button
-        style={confirmButton.style}
-        disabled={actionDisabled}
-        onClick={onAction}
-        {...actionEventHandlers}
-        data-testid='monk-action-btn'
+        style={close.style}
+        disabled={closeDisabled}
+        onClick={onClose}
+        {...closeEventHandlers}
+        data-testid='monk-close-btn'
       >
-        <Icon icon={action} size={30} primaryColor={confirmButton.iconColor} />
+        <Icon icon={action} size={30} primaryColor={close.iconColor} />
       </button>
       <TakePictureButton onClick={onTakePicture} size={85} disabled={takePictureDisabled} />
       <button
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts
index 4b505983a..dadc41bcb 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts
@@ -7,17 +7,16 @@ import {
   useResponsiveStyle,
 } from '@monkvision/common';
 import {
-  actionButtonForegroundColors,
+  captureButtonForegroundColors,
   styles,
   captureButtonBackgroundColors,
-  checkButtonBackgroundColors,
 } from './PhotoCaptureHUDButtons.styles';
 import { ActionButtonProps } from './PhotoCaptureHUDButtons.model';
 
-type PhotoCaptureHUDButtonsStylesParams = Exclude<ActionButtonProps, 'onAction'> & {
+type PhotoCaptureHUDButtonsStylesParams = Exclude<ActionButtonProps, 'onClose'> & {
   galleryStatus: InteractiveStatus;
-  actionButtonStatus: InteractiveStatus;
-  actionBtnAvailable: boolean;
+  closeStatus: InteractiveStatus;
+  closeBtnAvailable: boolean;
   galleryPreview?: string;
   showGalleryBadge?: boolean;
 };
@@ -29,7 +28,7 @@ interface PhotoCaptureHUDButtonsStyles {
     iconColor: string;
   };
   galleryBadgeStyle: CSSProperties;
-  actionButton: {
+  close: {
     style: CSSProperties;
     iconColor: string;
   };
@@ -66,10 +65,10 @@ export function useCaptureHUDButtonsStyles(
       style: {
         ...styles['button'],
         backgroundColor: captureButtonBackgroundColors[params.galleryStatus],
-        borderColor: actionButtonForegroundColors[params.galleryStatus],
+        borderColor: captureButtonForegroundColors[params.galleryStatus],
         ...(params.galleryStatus === InteractiveStatus.DISABLED ? styles['buttonDisabled'] : {}),
       },
-      iconColor: actionButtonForegroundColors[params.galleryStatus],
+      iconColor: captureButtonForegroundColors[params.galleryStatus],
     },
     galleryBadgeStyle: {
       ...styles['buttonBadge'],
@@ -77,20 +76,15 @@ export function useCaptureHUDButtonsStyles(
       color: palette.text.primary,
       visibility: params.showGalleryBadge ? 'visible' : 'hidden',
     },
-    actionButton: {
+    close: {
       style: {
         ...styles['button'],
-        backgroundColor:
-          params.action === 'close'
-            ? captureButtonBackgroundColors[params.galleryStatus]
-            : checkButtonBackgroundColors[params.galleryStatus],
-        borderColor: actionButtonForegroundColors[params.actionButtonStatus],
-        ...(params.actionButtonStatus === InteractiveStatus.DISABLED
-          ? styles['buttonDisabled']
-          : {}),
-        visibility: params.showActionButton ? 'visible' : 'hidden',
+        backgroundColor: captureButtonBackgroundColors[params.closeStatus],
+        borderColor: captureButtonForegroundColors[params.closeStatus],
+        ...(params.closeStatus === InteractiveStatus.DISABLED ? styles['buttonDisabled'] : {}),
+        visibility: params.showCloseButton ? 'visible' : 'hidden',
       },
-      iconColor: actionButtonForegroundColors[params.actionButtonStatus],
+      iconColor: captureButtonForegroundColors[params.closeStatus],
     },
     backgroundCoverStyle: {
       ...styles['backgroundCover'],
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
index 532e213c4..268ce29fe 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
@@ -319,7 +319,6 @@ describe('PhotoCapture component', () => {
     expect(usePhotoCaptureImages).toHaveBeenCalledWith(props.inspectionId);
     const images = (usePhotoCaptureImages as jest.Mock).mock.results[0].value;
     const tutorial = (usePhotoCaptureTutorial as jest.Mock).mock.results[0].value;
-    console.log(tutorial);
     expectPropsOnChildMock(Camera, {
       hudProps: {
         sights: props.sights,
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
index f0a34bc34..6520c6698 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
@@ -114,11 +114,10 @@ describe('PhotoCaptureHUD component', () => {
     expectPropsOnChildMock(PhotoCaptureHUDButtons, {
       onTakePicture: props.handle?.takePicture,
       galleryPreview: props.lastPictureTakenUri ?? undefined,
-      action: 'close',
-      actionDisabled: !!props.loading.error || !!props.handle.error,
+      closeDisabled: !!props.loading.error || !!props.handle.error,
       galleryDisabled: !!props.loading.error || !!props.handle.error,
       takePictureDisabled: !!props.loading.error || !!props.handle.error,
-      showActionButton: props.showCloseButton,
+      showCloseButton: props.showCloseButton,
       onOpenGallery: props.onOpenGallery,
     });
 
@@ -158,12 +157,11 @@ describe('PhotoCaptureHUD component', () => {
     const props = createProps();
     const { unmount } = render(<PhotoCaptureHUD {...props} />);
 
-    const { onAction } = (PhotoCaptureHUDButtons as jest.MockedFn<typeof PhotoCaptureHUDButtons>)
-      .mock.calls[0][0];
+    const { onClose } = (PhotoCaptureHUDButtons as jest.Mock).mock.calls[0][0];
     expectPropsOnChildMock(BackdropDialog, { show: false });
     jest.clearAllMocks();
 
-    act(() => onAction!());
+    act(() => onClose());
     expectPropsOnChildMock(BackdropDialog, { show: true });
     const { onConfirm } = (BackdropDialog as jest.Mock).mock.calls[0][0];
     jest.clearAllMocks();
@@ -213,42 +211,11 @@ describe('PhotoCaptureHUD component', () => {
     expectPropsOnChildMock(PhotoCaptureHUDButtons, { takePictureDisabled: true });
   });
 
-  it('should set actionDisabled to true when on part select no parts are selected', () => {
-    const props = createProps();
-    props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
-    render(<PhotoCaptureHUD {...props} />);
-    expectPropsOnChildMock(PhotoCaptureHUDButtons, { actionDisabled: true });
-  });
-
   it('should set showActionButton to true on part select', () => {
     const props = createProps();
     props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
     render(<PhotoCaptureHUD {...props} />);
-    expectPropsOnChildMock(PhotoCaptureHUDButtons, { showActionButton: true });
-  });
-
-  it('should set takePictureDisabled to false when on image-capture mode', () => {
-    const props = createProps();
-    props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
-    render(<PhotoCaptureHUD {...props} />);
-    act(() => {
-      (PhotoCaptureHUDButtons as jest.MockedFunction<typeof PhotoCaptureHUDButtons>).mock
-        .calls[0][0].onAction!();
-    });
-    expectPropsOnChildMock(PhotoCaptureHUDButtons, { takePictureDisabled: false });
-  });
-
-  it('should use check action when on part select mode', () => {
-    const props = createProps();
-    props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
-    render(<PhotoCaptureHUD {...props} />);
-    expectPropsOnChildMock(PhotoCaptureHUDButtons, { action: 'check' });
-  });
-
-  it('should use close action when not on part select mode', () => {
-    const props = createProps();
-    render(<PhotoCaptureHUD {...props} />);
-    expectPropsOnChildMock(PhotoCaptureHUDButtons, { action: 'close' });
+    expectPropsOnChildMock(PhotoCaptureHUDButtons, { showCloseButton: true });
   });
 
   it('onAction should setAddDamagePartSelectState to image-capture when on part select mode', () => {
@@ -257,7 +224,7 @@ describe('PhotoCaptureHUD component', () => {
     render(<PhotoCaptureHUD {...props} />);
     act(() => {
       (PhotoCaptureHUDButtons as jest.MockedFunction<typeof PhotoCaptureHUDButtons>).mock
-        .calls[0][0].onAction!();
+        .calls[0][0].onClose!();
     });
     expect(props.onAddDamageParts).not.toHaveBeenCalled();
     expect(props.onClose).not.toHaveBeenCalled();
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx
index 9b046a0e7..fe8f76d01 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons.test.tsx
@@ -4,11 +4,11 @@ import { InteractiveStatus } from '@monkvision/types';
 import { TakePictureButton, Icon } from '@monkvision/common-ui-web';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { PhotoCaptureHUDButtons } from '../../../src';
-import { actionButtonForegroundColors } from '../../../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
+import { captureButtonForegroundColors } from '../../../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 const GALLERY_BTN_TEST_ID = 'monk-gallery-btn';
 const GALLERY_BADGE_TEST_ID = 'monk-gallery-badge';
-const CLOSE_BTN_TEST_ID = 'monk-action-btn';
+const CLOSE_BTN_TEST_ID = 'monk-close-btn';
 
 describe('CaptureHUDButtons component', () => {
   afterEach(() => {
@@ -62,7 +62,7 @@ describe('CaptureHUDButtons component', () => {
         {
           icon: expectedIcon,
           size: 30,
-          primaryColor: actionButtonForegroundColors[InteractiveStatus.DEFAULT],
+          primaryColor: captureButtonForegroundColors[InteractiveStatus.DEFAULT],
         },
         expect.anything(),
       ]);
@@ -160,7 +160,7 @@ describe('CaptureHUDButtons component', () => {
     });
 
     it('should displayed when showCloseButton is true', () => {
-      const { unmount } = render(<PhotoCaptureHUDButtons showActionButton />);
+      const { unmount } = render(<PhotoCaptureHUDButtons showCloseButton />);
 
       const closeBtn = screen.getByTestId(CLOSE_BTN_TEST_ID);
       expect(closeBtn).toHaveStyle({ visibility: 'visible' });
@@ -169,7 +169,7 @@ describe('CaptureHUDButtons component', () => {
     });
 
     it('should not be disabled by default', () => {
-      const { unmount } = render(<PhotoCaptureHUDButtons showActionButton />);
+      const { unmount } = render(<PhotoCaptureHUDButtons showCloseButton />);
 
       const closeBtn = screen.getByTestId(CLOSE_BTN_TEST_ID);
       expect(closeBtn.getAttribute('disabled')).toBeNull();
@@ -178,7 +178,7 @@ describe('CaptureHUDButtons component', () => {
     });
 
     it('should be disabled when the closeDisabled prop is true', () => {
-      const { unmount } = render(<PhotoCaptureHUDButtons showActionButton actionDisabled={true} />);
+      const { unmount } = render(<PhotoCaptureHUDButtons showCloseButton closeDisabled={true} />);
 
       const closeBtn = screen.getByTestId(CLOSE_BTN_TEST_ID);
       expect(closeBtn.getAttribute('disabled')).toBeDefined();
@@ -188,7 +188,7 @@ describe('CaptureHUDButtons component', () => {
 
     it('should get passed the onClose callback', () => {
       const onClose = jest.fn();
-      const { unmount } = render(<PhotoCaptureHUDButtons showActionButton onAction={onClose} />);
+      const { unmount } = render(<PhotoCaptureHUDButtons showCloseButton onClose={onClose} />);
 
       const closeBtn = screen.getByTestId(CLOSE_BTN_TEST_ID);
       fireEvent.click(closeBtn);
@@ -199,13 +199,13 @@ describe('CaptureHUDButtons component', () => {
 
     it('should display an image icon', () => {
       const expectedIcon = 'close';
-      const { unmount } = render(<PhotoCaptureHUDButtons showActionButton />);
+      const { unmount } = render(<PhotoCaptureHUDButtons showCloseButton />);
 
       expect((Icon as jest.Mock).mock.calls).toContainEqual([
         {
           icon: expectedIcon,
           size: 30,
-          primaryColor: actionButtonForegroundColors[InteractiveStatus.DEFAULT],
+          primaryColor: captureButtonForegroundColors[InteractiveStatus.DEFAULT],
         },
         expect.anything(),
       ]);

From 7326748e3da3ce055cc361959327e7a91adee35f Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Fri, 6 Sep 2024 21:49:38 +0530
Subject: [PATCH 13/18] =?UTF-8?q?=E2=9C=A8=20use=20pop=20up=20instead=20of?=
 =?UTF-8?q?=20page=20to=20handle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/PhotoCapture/PhotoCapture.tsx         |   1 -
 .../PhotoCaptureHUD/PhotoCaptureHUD.tsx       |  20 +---
 .../PhotoCaptureHUDElements.model.ts          |   4 -
 .../PhotoCaptureHUDElements.tsx               |   1 -
 ...otoCaptureHUDElementsAddPartSelectShot.tsx |  82 +++++++-------
 ...aptureHUDElementsAddPartSelectShotStyle.ts |  56 +++-------
 .../src/translations/de.json                  |   4 +-
 .../src/translations/en.json                  |   4 +-
 .../src/translations/fr.json                  |   4 +-
 .../src/translations/nl.json                  |   4 +-
 .../PhotoCaptureHUD/PhotoCaptureHUD.test.tsx  |   8 --
 .../PhotoCaptureHUDElements.test.tsx          |   2 -
 ...ptureHUDElementsAddPartSelectShot.test.tsx | 102 +++++++++---------
 13 files changed, 123 insertions(+), 169 deletions(-)

diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
index 31a56f8bb..075c55caa 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
@@ -262,7 +262,6 @@ export function PhotoCapture({
     onSelectSight: sightState.selectSight,
     onRetakeSight: sightState.retakeSight,
     onAddDamage: addDamageHandle.handleAddDamage,
-    damageVehicleParts: addDamageHandle.vehicleParts,
     onAddDamageParts: addDamageHandle.handleAddParts,
     onCancelAddDamage: addDamageHandle.handleCancelAddDamage,
     onRetry: sightState.retryLoadingInspection,
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
index f8947ccb6..77bab5754 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
@@ -77,11 +77,6 @@ export interface PhotoCaptureHUDProps
    * Callback to be called when the user clicks on the "Add Damage" button.
    */
   onAddDamage: AddDamageHandle['handleAddDamage'];
-  /**
-   * Used to add damage on part select mode. This is used to store the parts that the user has selected to take a
-   * picture
-   */
-  damageVehicleParts: AddDamageHandle['vehicleParts'];
   /**
    * Callback to be called when the user selects the parts to take a picture of.
    */
@@ -124,7 +119,6 @@ export function PhotoCaptureHUD({
   onSelectSight,
   onRetakeSight,
   onAddDamage,
-  damageVehicleParts,
   onAddDamageParts,
   onCancelAddDamage,
   onOpenGallery,
@@ -147,8 +141,6 @@ export function PhotoCaptureHUD({
   const [showCloseModal, setShowCloseModal] = useState(false);
   const style = usePhotoCaptureHUDStyle();
   const { trackEvent } = useAnalytics();
-  const [addDamagePartSelectState, setAddDamagePartSelectState] =
-    useState<PhotoCaptureHUDElementsProps['addDamagePartSelectState']>('part-select');
   const retakeCount = useMemo(
     () =>
       images.filter((image) =>
@@ -158,16 +150,11 @@ export function PhotoCaptureHUD({
       ).length,
     [images],
   );
-  useEffect(() => {
-    setAddDamagePartSelectState('part-select');
-  }, [mode]);
   const handleCloseConfirm = () => {
     setShowCloseModal(false);
     trackEvent('Capture Closed');
     onClose?.();
   };
-  const showValidateAction =
-    mode === PhotoCaptureMode.ADD_DAMAGE_PART_SELECT && addDamagePartSelectState === 'part-select';
   return (
     <div style={style.container}>
       <div style={style.previewContainer} data-testid='camera-preview'>
@@ -178,7 +165,6 @@ export function PhotoCaptureHUD({
           sightsTaken={sightsTaken}
           mode={mode}
           onAddDamage={onAddDamage}
-          addDamagePartSelectState={addDamagePartSelectState}
           onAddDamageParts={onAddDamageParts}
           onCancelAddDamage={onCancelAddDamage}
           onSelectSight={onSelectSight}
@@ -201,11 +187,7 @@ export function PhotoCaptureHUD({
         closeDisabled={!!loading.error || !!handle.error}
         galleryDisabled={!!loading.error || !!handle.error}
         takePictureDisabled={
-          !!loading.error ||
-          !!handle.error ||
-          handle.isLoading ||
-          loading.isLoading ||
-          showValidateAction
+          !!loading.error || !!handle.error || handle.isLoading || loading.isLoading
         }
         showCloseButton={showCloseButton}
         showGalleryBadge={retakeCount > 0}
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.model.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.model.ts
index e244c7ec0..fa240fa9a 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.model.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.model.ts
@@ -34,10 +34,6 @@ export interface PhotoCaptureHUDElementsProps
    * Callback to be called when the user selects the parts to take a picture of.
    */
   onAddDamageParts: AddDamageHandle['handleAddParts'];
-  /**
-   * The current state of the Add Damage mode of part selection.
-   */
-  addDamagePartSelectState: 'part-select' | 'image-capture';
   /**
    * Callback to be called when the user clicks on the "Cancel" button of the Add Damage mode.
    */
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx
index b5846040d..9c53e2a6b 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx
@@ -41,7 +41,6 @@ export function PhotoCaptureHUDElements(params: PhotoCaptureHUDElementsProps) {
       <PhotoCaptureHUDElementsAddPartSelectShot
         onCancel={params.onCancelAddDamage}
         onAddDamageParts={params.onAddDamageParts}
-        partSelectState={params.addDamagePartSelectState}
       />
     );
   }
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
index 3bf0b4f5f..bc1c274cb 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
@@ -1,64 +1,68 @@
 import { getLanguage, useMonkAppState, useMonkTheme, vehiclePartLabels } from '@monkvision/common';
-import { Button, VehiclePartSelection } from '@monkvision/common-ui-web';
+import { BackdropDialog, Button, VehiclePartSelection } from '@monkvision/common-ui-web';
 import { VehiclePart } from '@monkvision/types';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PhotoCaptureHUDElementsProps } from '../PhotoCaptureHUDElements/PhotoCaptureHUDElements.model';
 import { usePhotoCaptureHUDElementsAddPartSelectShotStyle } from './usePhotoCaptureHUDElementsAddPartSelectShotStyle';
 
-type PhotoCaptureHUDElementsAddPartSelectShotProps = Pick<
+export type PhotoCaptureHUDElementsAddPartSelectShotProps = Pick<
   PhotoCaptureHUDElementsProps,
   'onAddDamageParts'
 > & {
+  /**
+   * Callback called when the user cancels the Add Damage mode.
+   */
   onCancel: PhotoCaptureHUDElementsProps['onCancelAddDamage'];
-  partSelectState: PhotoCaptureHUDElementsProps['addDamagePartSelectState'];
 };
 export function PhotoCaptureHUDElementsAddPartSelectShot({
   onCancel,
   onAddDamageParts,
-  partSelectState,
 }: PhotoCaptureHUDElementsAddPartSelectShotProps) {
   const { vehicleType } = useMonkAppState();
   const { palette } = useMonkTheme();
   const [selectedParts, setSelectedParts] = useState<VehiclePart[]>([]);
   const { i18n, t } = useTranslation();
   const style = usePhotoCaptureHUDElementsAddPartSelectShotStyle();
-  useEffect(() => onAddDamageParts(selectedParts), [selectedParts]);
-  if (partSelectState === 'image-capture') {
-    return null;
-  }
+  const [showDialog, setShowDialog] = useState(true);
+  const closeDialog = () => {
+    setShowDialog(false);
+    onCancel();
+  };
+  const acceptDialog = () => {
+    setShowDialog(false);
+    onAddDamageParts(selectedParts);
+  };
   return (
-    <div style={style.stackItem}>
-      <Button
-        style={style.closeButton}
-        icon='close'
-        primaryColor={palette.background.dark}
-        onClick={onCancel}
-      />
-      <div style={style.wrapper}>
-        <div
-          style={{
-            ...style.infoNotification,
-            ...style.notification,
-          }}
-        >
+    <BackdropDialog
+      show={showDialog}
+      dialog={
+        <div style={style.popup}>
           {t('photo.hud.addDamage.selectParts')}
+          <span style={style.vehicleSelect}>
+            <VehiclePartSelection vehicleType={vehicleType!} onPartsSelected={setSelectedParts} />
+          </span>
+          {selectedParts
+            .map((part) => vehiclePartLabels[part][getLanguage(i18n.language)])
+            .join(', ')}
+          <span style={style.dialogButtonGroup}>
+            <Button
+              primaryColor={palette.background.dark}
+              onClick={acceptDialog}
+              style={style.button}
+            >
+              {t('photo.hud.addDamage.accept')}
+            </Button>
+            <Button
+              primaryColor={palette.background.dark}
+              onClick={closeDialog}
+              style={style.button}
+            >
+              {t('photo.hud.addDamage.cancel')}
+            </Button>
+          </span>
         </div>
-        <VehiclePartSelection vehicleType={vehicleType!} onPartsSelected={setSelectedParts} />
-        {selectedParts.length !== 0 && (
-          <div
-            data-testid='part-select-notification'
-            style={{
-              ...style.partSelectNotification,
-              ...style.notification,
-            }}
-          >
-            {selectedParts
-              .map((part) => vehiclePartLabels[part][getLanguage(i18n.language)])
-              .join(', ')}
-          </div>
-        )}
-      </div>
-    </div>
+      }
+    />
   );
 }
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/usePhotoCaptureHUDElementsAddPartSelectShotStyle.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/usePhotoCaptureHUDElementsAddPartSelectShotStyle.ts
index 8ce6a3be7..ed18c0d91 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/usePhotoCaptureHUDElementsAddPartSelectShotStyle.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/usePhotoCaptureHUDElementsAddPartSelectShotStyle.ts
@@ -1,57 +1,29 @@
 import { useMonkTheme } from '@monkvision/common';
 import { CSSProperties } from 'react';
-import { PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 export function usePhotoCaptureHUDElementsAddPartSelectShotStyle(): Record<
-  | 'notification'
-  | 'closeButton'
-  | 'infoNotification'
-  | 'partSelectNotification'
-  | 'stackItem'
-  | 'wrapper',
+  'popup' | 'dialogButtonGroup' | 'vehicleSelect' | 'button',
   CSSProperties
 > {
   const { palette } = useMonkTheme();
+  const minValueWithAspectRatio = (width: number) => `min(${width}dvw, calc(${width}dvh * 1.5))`;
   return {
-    notification: {
-      position: 'absolute',
-      padding: '10px 20px',
-      borderRadius: 30,
-      color: palette.information.xdark,
-      backgroundColor: palette.information.xlight,
-    },
-    infoNotification: {
-      top: 20,
-    },
-    partSelectNotification: {
-      bottom: 20,
-      maxWidth: `calc(98% - (${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 8}px))`,
-      fontSize: 14,
-    },
-    stackItem: {
-      position: 'absolute',
-      inset: 0,
+    popup: {
+      width: `clamp(${minValueWithAspectRatio(80)}, 80%, ${minValueWithAspectRatio(90)})`,
       backgroundColor: palette.background.base,
       display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      flexDirection: 'column',
-    },
-    wrapper: {
-      width: `calc(98% - (${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 4}px))`,
-      height: '100%',
-      backgroundColor: palette.background.dark,
-      display: 'flex',
-      justifyContent: 'center',
       flexDirection: 'column',
+      justifyItems: 'center',
+      padding: '3svw',
+      gap: 10,
+      borderRadius: '3svmin',
       alignItems: 'center',
+      boxSizing: 'border-box',
+      overflow: 'scroll',
+      maxHeight: '100%',
     },
-    closeButton: {
-      position: 'absolute',
-      left: 22,
-      top: 22,
-      width: 44,
-      height: 44,
-    },
+    dialogButtonGroup: { display: 'flex', gap: 20 },
+    vehicleSelect: { alignSelf: 'stretch', justifySelf: 'stretch' },
+    button: { padding: '.5svw 2svw', fontSize: 'min(14px, 3svmin)', borderRadius: '4svmin' },
   };
 }
diff --git a/packages/inspection-capture-web/src/translations/de.json b/packages/inspection-capture-web/src/translations/de.json
index 16f0c387b..9f5479e5a 100644
--- a/packages/inspection-capture-web/src/translations/de.json
+++ b/packages/inspection-capture-web/src/translations/de.json
@@ -18,7 +18,9 @@
         "closeupPictureCounter": "2 / 2 • Nahaufnahme-Vorschau",
         "infoBtn": "Richte das Ziel auf den beschädigten Teil aus und tippe dann auf den Auslöserknopf",
         "infoCloseup": "Ein Nahaufnahmebild von dem Schaden machen",
-        "selectParts": "Wählen Sie die Teile aus, an denen Sie Schaden nehmen"
+        "selectParts": "Wählen Sie die Teile aus, an denen Sie Schaden nehmen",
+        "accept": "Akzeptieren",
+        "cancel": "Stornieren"
       },
       "error": {
         "retry": "Erneut versuchen",
diff --git a/packages/inspection-capture-web/src/translations/en.json b/packages/inspection-capture-web/src/translations/en.json
index 14fbe56f6..8486c42b5 100644
--- a/packages/inspection-capture-web/src/translations/en.json
+++ b/packages/inspection-capture-web/src/translations/en.json
@@ -18,7 +18,9 @@
         "closeupPictureCounter": "2 / 2 • Closeup Picture",
         "infoBtn": "Aim the target at the damaged part then tap the shutter button",
         "infoCloseup": "Take a closeup picture of the damage",
-        "selectParts": "Select the parts where you damage is"
+        "selectParts": "Select the parts where you damage is",
+        "accept": "Accept",
+        "cancel": "Cancel"
       },
       "error": {
         "retry": "Retry",
diff --git a/packages/inspection-capture-web/src/translations/fr.json b/packages/inspection-capture-web/src/translations/fr.json
index 05bdda44a..7b25c7b0d 100644
--- a/packages/inspection-capture-web/src/translations/fr.json
+++ b/packages/inspection-capture-web/src/translations/fr.json
@@ -18,7 +18,9 @@
         "closeupPictureCounter": "2 / 2 • Dégât en gros plan",
         "infoBtn": "Placer le viseur sur la pièce endommagée puis enclencher le bouton capture de la photo",
         "infoCloseup": "Prendre une photo en gros plan du dégât",
-        "selectParts": "Sélectionnez les pièces où vous endommagez"
+        "selectParts": "Sélectionnez les pièces où vous endommagez",
+        "accept": "Accepter",
+        "cancel": "Annuler"
       },
       "error": {
         "retry": "Réessayer",
diff --git a/packages/inspection-capture-web/src/translations/nl.json b/packages/inspection-capture-web/src/translations/nl.json
index a8625fea3..08b805592 100644
--- a/packages/inspection-capture-web/src/translations/nl.json
+++ b/packages/inspection-capture-web/src/translations/nl.json
@@ -18,7 +18,9 @@
         "closeupPictureCounter": "2 / 2 • Closeup foto",
         "infoBtn": "Richt de markering op het beschadigde onderdeel en tik vervolgens op de sluitertknop",
         "infoCloseup": "Neem een closeup foto van de schade",
-        "selectParts": "Selecteer de onderdelen waar je schade zit"
+        "selectParts": "Selecteer de onderdelen waar je schade zit",
+        "accept": "Accepteren",
+        "cancel": "Annuleren"
       },
       "error": {
         "retry": "Opnieuw proberen",
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
index 6520c6698..58d70167d 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
@@ -48,7 +48,6 @@ function createProps(): PhotoCaptureHUDProps {
     loading: { isLoading: false, error: null } as unknown as LoadingState,
     onSelectSight: jest.fn(),
     onRetakeSight: jest.fn(),
-    damageVehicleParts: [],
     onAddDamageParts: jest.fn(),
     onAddDamage: jest.fn(),
     onCancelAddDamage: jest.fn(),
@@ -204,13 +203,6 @@ describe('PhotoCaptureHUD component', () => {
     unmount();
   });
 
-  it('should set takePictureDisabled to true when on part select', () => {
-    const props = createProps();
-    props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
-    render(<PhotoCaptureHUD {...props} />);
-    expectPropsOnChildMock(PhotoCaptureHUDButtons, { takePictureDisabled: true });
-  });
-
   it('should set showActionButton to true on part select', () => {
     const props = createProps();
     props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements.test.tsx
index 8e2b7a3ae..33949e78a 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements.test.tsx
@@ -55,7 +55,6 @@ function createProps(): PhotoCaptureHUDElementsProps {
     tutorialStep: null,
     addDamage: AddDamage.TWO_SHOT,
     onAddDamageParts: jest.fn(),
-    addDamagePartSelectState: 'part-select',
   };
 }
 
@@ -138,7 +137,6 @@ describe('PhotoCaptureHUDElements component', () => {
     expectPropsOnChildMock(PhotoCaptureHUDElementsAddPartSelectShot, {
       onCancel: props.onCancelAddDamage,
       onAddDamageParts: props.onAddDamageParts,
-      partSelectState: props.addDamagePartSelectState,
     });
     expect(PhotoCaptureHUDElementsSight).not.toHaveBeenCalled();
     expect(PhotoCaptureHUDElementsAddDamage1stShot).not.toHaveBeenCalled();
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
index 4860d872c..878b91762 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
@@ -1,5 +1,10 @@
 import { getLanguage, MonkAppState, useMonkAppState } from '@monkvision/common';
-import { Button, VehiclePartSelection } from '@monkvision/common-ui-web';
+import {
+  BackdropDialog,
+  BackdropDialogProps,
+  Button,
+  VehiclePartSelection,
+} from '@monkvision/common-ui-web';
 import { expectPropsOnChildMock } from '@monkvision/test-utils';
 import { VehiclePart, VehicleType } from '@monkvision/types';
 import { act, fireEvent, prettyDOM, render } from '@testing-library/react';
@@ -11,90 +16,89 @@ describe('PhotoCaptureHUDElementsAddPartSelectShot component', () => {
     (useMonkAppState as jest.MockedFunction<typeof useMonkAppState>).mockReturnValue({
       vehicleType: VehicleType.CUV,
     } as ReturnType<MonkAppState extends (o: { requireInspection: true }) => infer R ? (args: any) => R : never>);
+    (BackdropDialog as jest.MockedFunction<typeof BackdropDialog>).mockImplementation((props) => {
+      const { dialog } = props as Extract<BackdropDialogProps, { dialog: any }>;
+      return dialog;
+    });
+    (Button as jest.MockedFunction<typeof Button>).mockImplementation((props) => {
+      const { children, onClick } = props;
+      return <button onClick={onClick}>{children}</button>;
+    });
   });
   afterEach(() => jest.clearAllMocks());
 
-  it('should call onCancel callback on close button click', () => {
-    const onCancel = jest.fn();
-    (Button as jest.MockedFunction<typeof Button>).mockImplementation(({ onClick }) => (
-      <button onClick={onClick} data-testid='close-button' />
-    ));
-    const { getByTestId } = render(
-      <PhotoCaptureHUDElementsAddPartSelectShot
-        onCancel={onCancel}
-        onAddDamageParts={() => {}}
-        partSelectState='part-select'
-      />,
+  it('should have message of select parts', () => {
+    const { getByText } = render(
+      <PhotoCaptureHUDElementsAddPartSelectShot onCancel={() => {}} onAddDamageParts={() => {}} />,
     );
-    fireEvent.click(getByTestId('close-button'));
-    expect(onCancel).toHaveBeenCalled();
+    expect(getByText('photo.hud.addDamage.selectParts')).toBeInTheDocument();
   });
 
-  it('should use correct vehicle type', () => {
+  it('should call VehiclePartSelection', () => {
     render(
-      <PhotoCaptureHUDElementsAddPartSelectShot
-        onCancel={() => {}}
-        onAddDamageParts={() => {}}
-        partSelectState='part-select'
-      />,
+      <PhotoCaptureHUDElementsAddPartSelectShot onCancel={() => {}} onAddDamageParts={() => {}} />,
     );
     expectPropsOnChildMock(VehiclePartSelection, {
       vehicleType: VehicleType.CUV,
     });
   });
 
-  it('should show instruction to select parts', () => {
-    const re = render(
-      <PhotoCaptureHUDElementsAddPartSelectShot
-        onCancel={jest.fn()}
-        onAddDamageParts={() => {}}
-        partSelectState='part-select'
-      />,
+  it('should have accept and cancel buttons', () => {
+    const { getByText } = render(
+      <PhotoCaptureHUDElementsAddPartSelectShot onCancel={() => {}} onAddDamageParts={() => {}} />,
+    );
+    expect(getByText('photo.hud.addDamage.accept')).toBeInTheDocument();
+    expect(getByText('photo.hud.addDamage.cancel')).toBeInTheDocument();
+  });
+
+  it('should call onCancel when cancel button is clicked', () => {
+    const onCancel = jest.fn();
+    const { getByText } = render(
+      <PhotoCaptureHUDElementsAddPartSelectShot onCancel={onCancel} onAddDamageParts={() => {}} />,
     );
-    expect(re.getByText('photo.hud.addDamage.selectParts')).toBeInTheDocument();
+    fireEvent.click(getByText('photo.hud.addDamage.cancel'));
+    expect(onCancel).toHaveBeenCalled();
   });
 
-  it('should show selected parts', () => {
-    const re = render(
+  it('should call onAddDamageParts and hide the popup when accept button is clicked', () => {
+    const onAddDamageParts = jest.fn();
+    const { getByText } = render(
       <PhotoCaptureHUDElementsAddPartSelectShot
         onCancel={() => {}}
-        onAddDamageParts={() => {}}
-        partSelectState='part-select'
+        onAddDamageParts={onAddDamageParts}
       />,
     );
+    fireEvent.click(getByText('photo.hud.addDamage.accept'));
+    expect(onAddDamageParts).toHaveBeenCalled();
+  });
+
+  it('should show the selected parts on UI', () => {
+    (getLanguage as jest.MockedFunction<typeof getLanguage>).mockReturnValue('en');
+    const { getByText, container } = render(
+      <PhotoCaptureHUDElementsAddPartSelectShot onCancel={() => {}} onAddDamageParts={() => {}} />,
+    );
     const onPartsSelected = (
       VehiclePartSelection as jest.MockedFunction<typeof VehiclePartSelection>
     ).mock.calls[0][0].onPartsSelected!;
-    (getLanguage as jest.MockedFunction<typeof getLanguage>).mockReturnValue('en');
+    expect(getByText('photo.hud.addDamage.selectParts')).toBeInTheDocument();
     act(() => onPartsSelected([VehiclePart.BUMPER_BACK]));
-    console.log(prettyDOM(re.container));
-    expect(re.getByTestId('part-select-notification')).toBeInTheDocument();
+    console.log(prettyDOM(container));
+    expect(getByText('photo.hud.addDamage.selectPartsRear Bumper')).toBeInTheDocument();
   });
 
-  it('should return null on image-capture', () => {
-    const { container } = render(
-      <PhotoCaptureHUDElementsAddPartSelectShot
-        onCancel={() => {}}
-        onAddDamageParts={() => {}}
-        partSelectState='image-capture'
-      />,
-    );
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it('should callback the updated selectedParts to onAddDamageParts', () => {
+  it('should emit the selected parts to onAddDamageParts', () => {
     const onAddDamageParts = jest.fn();
-    render(
+    const { getByText } = render(
       <PhotoCaptureHUDElementsAddPartSelectShot
         onCancel={() => {}}
         onAddDamageParts={onAddDamageParts}
-        partSelectState='part-select'
       />,
     );
     const onPartsSelected = (
       VehiclePartSelection as jest.MockedFunction<typeof VehiclePartSelection>
     ).mock.calls[0][0].onPartsSelected!;
     act(() => onPartsSelected([VehiclePart.BUMPER_BACK]));
+    fireEvent.click(getByText('photo.hud.addDamage.accept'));
     expect(onAddDamageParts).toHaveBeenCalledWith([VehiclePart.BUMPER_BACK]);
   });
 });

From da056413226d6eff29456ebf933055cc27fff3ab Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Fri, 6 Sep 2024 21:51:50 +0530
Subject: [PATCH 14/18] =?UTF-8?q?=F0=9F=91=8C=F0=9F=8F=BC=20change=20addDa?=
 =?UTF-8?q?mage=20type=20to=20part=5Fselect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/demo-app/src/local-config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/demo-app/src/local-config.json b/apps/demo-app/src/local-config.json
index b89d13a6d..87da6eeaa 100644
--- a/apps/demo-app/src/local-config.json
+++ b/apps/demo-app/src/local-config.json
@@ -2,7 +2,7 @@
   "id": "demo-app-dev",
   "description": "Config for the dev Demo App.",
   "allowSkipRetake": true,
-  "addDamage": "two_shot",
+  "addDamage": "part_select",
   "enableSightGuidelines": true,
   "allowVehicleTypeSelection": true,
   "allowManualLogin": true,

From e7e3e646547c118e61bc2394108aed4e2eded709 Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Fri, 6 Sep 2024 22:25:52 +0530
Subject: [PATCH 15/18] =?UTF-8?q?=F0=9F=91=8C=F0=9F=8F=BC=20fix=20comments?=
 =?UTF-8?q?=20language=20and=20quotes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 configs/eslint-config-typescript/index.js     | 69 +++++++++----------
 .../src/PhotoCapture/PhotoCapture.tsx         |  2 +-
 .../PhotoCaptureHUD/PhotoCaptureHUD.tsx       |  1 +
 ...otoCaptureHUDElementsAddPartSelectShot.tsx |  1 +
 .../PhotoCaptureHUDTutorial.tsx               |  5 +-
 .../src/PhotoCapture/hooks/usePictureTaken.ts | 10 +--
 .../src/translations/en.json                  |  2 +-
 .../src/translations/fr.json                  |  4 +-
 .../PhotoCaptureHUDTutorial.test.tsx          |  1 +
 packages/network/src/api/image/requests.ts    |  2 +-
 packages/types/src/config.ts                  |  2 +-
 11 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/configs/eslint-config-typescript/index.js b/configs/eslint-config-typescript/index.js
index acec90771..77738ea9b 100644
--- a/configs/eslint-config-typescript/index.js
+++ b/configs/eslint-config-typescript/index.js
@@ -5,62 +5,59 @@ const ERROR = 2;
 module.exports = {
   root: true,
   extends: [
-    "@monkvision/eslint-config-base",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/typescript",
+    '@monkvision/eslint-config-base',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/typescript',
   ],
-  plugins: ["@typescript-eslint"],
-  parser: "@typescript-eslint/parser",
+  plugins: ['@typescript-eslint'],
+  parser: '@typescript-eslint/parser',
   settings: {
-    "import/resolver": {
+    'import/resolver': {
       node: {
-        extensions: [".js", ".jsx", ".ts", ".tsx"],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       },
     },
   },
   rules: {
-    "prettier/prettier": ERROR,
-    "@typescript-eslint/lines-between-class-members": OFF,
-    "no-useless-constructor": OFF,
-    "@typescript-eslint/no-empty-function": [
-      ERROR,
-      { allow: ["arrowFunctions"] },
-    ],
-    "@typescript-eslint/no-empty-interface": OFF,
-    "@typescript-eslint/no-non-null-assertion": OFF,
-    "@typescript-eslint/no-unused-vars": [
+    'prettier/prettier': ERROR,
+    '@typescript-eslint/lines-between-class-members': OFF,
+    'no-useless-constructor': OFF,
+    '@typescript-eslint/no-empty-function': [ERROR, { allow: ['arrowFunctions'] }],
+    '@typescript-eslint/no-empty-interface': OFF,
+    '@typescript-eslint/no-non-null-assertion': OFF,
+    '@typescript-eslint/no-unused-vars': [
       ERROR,
       {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_",
-        caughtErrorsIgnorePattern: "^_",
-      },
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
     ],
-    "no-underscore-dangle": OFF,
-    "@typescript-eslint/naming-convention": [
+    'no-underscore-dangle': OFF,
+    '@typescript-eslint/naming-convention': [
       ERROR,
-      { selector: "interface", format: ["PascalCase"] },
-      { selector: "enum", format: ["PascalCase"] },
-      { selector: "typeAlias", format: ["PascalCase"] },
+      { selector: 'interface', format: ['PascalCase'] },
+      { selector: 'enum', format: ['PascalCase'] },
+      { selector: 'typeAlias', format: ['PascalCase'] },
     ],
   },
   overrides: [
     {
-      files: ["*.{ts,tsx}"],
+      files: ['*.{ts,tsx}'],
       rules: {
-        "@typescript-eslint/no-shadow": [ERROR],
-        "no-shadow": OFF,
-        "no-undef": OFF,
+        '@typescript-eslint/no-shadow': [ERROR],
+        'no-shadow': OFF,
+        'no-undef': OFF,
       },
     },
     {
-      files: ["test/**/*.{ts,tsx}"],
+      files: ['test/**/*.{ts,tsx}'],
       rules: {
-        "import/first": OFF,
-        "import/order": OFF,
-        "@typescript-eslint/no-empty-function": OFF,
-        "@typescript-eslint/no-explicit-any": OFF,
-        "class-methods-use-this": OFF,
+        'import/first': OFF,
+        'import/order': OFF,
+        '@typescript-eslint/no-empty-function': OFF,
+        '@typescript-eslint/no-explicit-any': OFF,
+        'class-methods-use-this': OFF,
       },
     },
   ],
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
index 075c55caa..58308c1a7 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
@@ -130,7 +130,7 @@ export function PhotoCapture({
   customComplianceThresholdsPerSight,
   useLiveCompliance = false,
   allowSkipRetake = false,
-  addDamage = AddDamage.TWO_SHOT,
+  addDamage = AddDamage.PART_SELECT,
   sightGuidelines,
   enableTutorial = PhotoCaptureTutorialOption.FIRST_TIME_ONLY,
   allowSkipTutorial = true,
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
index 77bab5754..3e6fe95e5 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
@@ -214,6 +214,7 @@ export function PhotoCaptureHUD({
         onCloseTutorial={onCloseTutorial}
         allowSkipTutorial={allowSkipTutorial}
         sightId={selectedSight.id}
+        addDamage={addDamage}
         sightGuidelines={sightGuidelines}
       />
     </div>
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
index bc1c274cb..de4733dca 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
@@ -15,6 +15,7 @@ export type PhotoCaptureHUDElementsAddPartSelectShotProps = Pick<
    */
   onCancel: PhotoCaptureHUDElementsProps['onCancelAddDamage'];
 };
+
 export function PhotoCaptureHUDElementsAddPartSelectShot({
   onCancel,
   onAddDamageParts,
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx
index 9ca91cd9a..27854f40e 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx
@@ -13,7 +13,7 @@ import { DisplayText } from './DisplayText';
  * Props of the PhotoCaptureHUDTutorial component.
  */
 export interface PhotoCaptureHUDTutorialProps
-  extends Pick<CaptureAppConfig, 'allowSkipTutorial' | 'sightGuidelines'> {
+  extends Pick<CaptureAppConfig, 'allowSkipTutorial' | 'sightGuidelines' | 'addDamage'> {
   /**
    * The id of the sight.
    */
@@ -46,6 +46,7 @@ export function PhotoCaptureHUDTutorial({
   sightId,
   onNextTutorialStep,
   onCloseTutorial,
+  addDamage,
 }: PhotoCaptureHUDTutorialProps) {
   const { t } = useTranslation();
   const primaryColor = usePhotoCaptureHUDButtonBackground();
@@ -60,7 +61,7 @@ export function PhotoCaptureHUDTutorial({
               sightId={sightId}
               sightGuidelines={sightGuidelines}
               enableSightGuidelines={currentTutorialStep === TutorialSteps.GUIDELINE}
-              addDamage={AddDamage.TWO_SHOT}
+              addDamage={addDamage}
             />
             <Button
               style={{ ...styles['closeButton'], ...getButtonStyle(allowSkipTutorial) }}
diff --git a/packages/inspection-capture-web/src/PhotoCapture/hooks/usePictureTaken.ts b/packages/inspection-capture-web/src/PhotoCapture/hooks/usePictureTaken.ts
index 3aa39710b..9e9a30cdb 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/hooks/usePictureTaken.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/hooks/usePictureTaken.ts
@@ -52,19 +52,19 @@ export function usePictureTaken({
         case PhotoCaptureMode.ADD_DAMAGE_2ND_SHOT:
           uploadQueue.push({ mode: addDamageHandle.mode, picture });
           break;
-        case PhotoCaptureMode.SIGHT:
+        case PhotoCaptureMode.ADD_DAMAGE_PART_SELECT:
           uploadQueue.push({
             mode: addDamageHandle.mode,
             picture,
-            sightId: sightState.selectedSight.id,
-            tasks: tasksBySight?.[sightState.selectedSight.id] ?? sightState.selectedSight.tasks,
+            vehicleParts: addDamageHandle.vehicleParts,
           });
           break;
-        case PhotoCaptureMode.ADD_DAMAGE_PART_SELECT:
+        case PhotoCaptureMode.SIGHT:
           uploadQueue.push({
             mode: addDamageHandle.mode,
             picture,
-            vehicleParts: addDamageHandle.vehicleParts,
+            sightId: sightState.selectedSight.id,
+            tasks: tasksBySight?.[sightState.selectedSight.id] ?? sightState.selectedSight.tasks,
           });
           break;
         default:
diff --git a/packages/inspection-capture-web/src/translations/en.json b/packages/inspection-capture-web/src/translations/en.json
index 8486c42b5..e054327b9 100644
--- a/packages/inspection-capture-web/src/translations/en.json
+++ b/packages/inspection-capture-web/src/translations/en.json
@@ -18,7 +18,7 @@
         "closeupPictureCounter": "2 / 2 • Closeup Picture",
         "infoBtn": "Aim the target at the damaged part then tap the shutter button",
         "infoCloseup": "Take a closeup picture of the damage",
-        "selectParts": "Select the parts where you damage is",
+        "selectParts": "Select the parts where the damage is",
         "accept": "Accept",
         "cancel": "Cancel"
       },
diff --git a/packages/inspection-capture-web/src/translations/fr.json b/packages/inspection-capture-web/src/translations/fr.json
index 7b25c7b0d..08b1d7779 100644
--- a/packages/inspection-capture-web/src/translations/fr.json
+++ b/packages/inspection-capture-web/src/translations/fr.json
@@ -17,8 +17,8 @@
         "damagedPartCounter": "1 / 2 • Pièce endommagée",
         "closeupPictureCounter": "2 / 2 • Dégât en gros plan",
         "infoBtn": "Placer le viseur sur la pièce endommagée puis enclencher le bouton capture de la photo",
-        "infoCloseup": "Prendre une photo en gros plan du dégât",
-        "selectParts": "Sélectionnez les pièces où vous endommagez",
+        "infoCloseup": "Veuillez prendre une photo en gros plan du dégât",
+        "selectParts": "Veuillez sélectionner les pièces endommagées",
         "accept": "Accepter",
         "cancel": "Annuler"
       },
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureTutorial/PhotoCaptureHUDTutorial.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureTutorial/PhotoCaptureHUDTutorial.test.tsx
index 5c9056dde..54c74a400 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureTutorial/PhotoCaptureHUDTutorial.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureTutorial/PhotoCaptureHUDTutorial.test.tsx
@@ -28,6 +28,7 @@ function createProps(): PhotoCaptureHUDTutorialProps {
     allowSkipTutorial: false,
     sightGuidelines: [],
     sightId: 'test-sight-id',
+    addDamage: AddDamage.TWO_SHOT,
   };
 }
 
diff --git a/packages/network/src/api/image/requests.ts b/packages/network/src/api/image/requests.ts
index f4e095e26..fd52a9171 100644
--- a/packages/network/src/api/image/requests.ts
+++ b/packages/network/src/api/image/requests.ts
@@ -209,7 +209,7 @@ function getImageLabel(options: AddImageOptions): TranslationObject | undefined
     const partsTranslation = options.vehicleParts.map((part) => vehiclePartLabels[part]);
     return {
       en: `Damage on ${partsTranslation.map((part) => part.en).join(', ')}`,
-      fr: `Dommages sur ${partsTranslation.map((part) => part.en).join(', ')}`,
+      fr: `Dégât sur ${partsTranslation.map((part) => part.en).join(', ')}`,
       de: `Schaden an ${partsTranslation.map((part) => part.en).join(', ')}`,
       nl: `Schade aan ${partsTranslation.map((part) => part.en).join(', ')}`,
     };
diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
index 2b4b211ed..38d07edf6 100644
--- a/packages/types/src/config.ts
+++ b/packages/types/src/config.ts
@@ -125,7 +125,7 @@ export type CaptureAppConfig = CameraConfig &
     /**
      * Indicating if Add Damage type. If disabled, the `Add Damage` button will be hidden.
      *
-     * @default AddDamage.TWO_SHOT
+     * @default AddDamage.PART_SELECT
      */
     addDamage: AddDamage;
     /**

From 6ed9e92439873ebbc0e9706066b6a8d8ffefdbb6 Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Fri, 6 Sep 2024 22:39:21 +0530
Subject: [PATCH 16/18] =?UTF-8?q?=F0=9F=91=95lint=20fix=20after=20merge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx      | 4 ++--
 .../PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
index 3e6fe95e5..84c45157f 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { CaptureAppConfig, Image, ImageStatus, Sight } from '@monkvision/types';
 import { useTranslation } from 'react-i18next';
 import { BackdropDialog } from '@monkvision/common-ui-web';
@@ -9,7 +9,7 @@ import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons';
 import { usePhotoCaptureHUDStyle } from './hooks';
 import { AddDamageHandle, PhotoCaptureMode, TutorialSteps } from '../hooks';
 import { PhotoCaptureHUDOverlay } from './PhotoCaptureHUDOverlay';
-import { PhotoCaptureHUDElements, PhotoCaptureHUDElementsProps } from './PhotoCaptureHUDElements';
+import { PhotoCaptureHUDElements } from './PhotoCaptureHUDElements';
 import { PhotoCaptureHUDTutorial } from './PhotoCaptureHUDTutorial';
 
 /**
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx
index 27854f40e..42a72ac85 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@monkvision/common-ui-web';
-import { AddDamage, CaptureAppConfig } from '@monkvision/types';
+import { CaptureAppConfig } from '@monkvision/types';
 import { styles } from './PhotoCaptureHUDTutorial.styles';
 import { TutorialSteps } from '../../hooks';
 import { usePhotoCaptureHUDButtonBackground } from '../hooks';

From 2a8b6f78fa7e138bc5853b5cd8f7401eddb985ed Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Tue, 10 Sep 2024 12:27:52 +0530
Subject: [PATCH 17/18] =?UTF-8?q?=F0=9F=91=95undo=20removing=20no-non-null?=
 =?UTF-8?q?-assertion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 configs/eslint-config-typescript/index.js     |  1 -
 ...otoCaptureHUDElementsAddPartSelectShot.tsx |  5 ++++-
 .../src/PhotoCapture/hooks/useUploadQueue.ts  |  2 +-
 .../PhotoCaptureHUD/PhotoCaptureHUD.test.tsx  | 13 +++++++++----
 ...ptureHUDElementsAddPartSelectShot.test.tsx | 19 ++++++++++++-------
 5 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/configs/eslint-config-typescript/index.js b/configs/eslint-config-typescript/index.js
index 77738ea9b..e5c114a7f 100644
--- a/configs/eslint-config-typescript/index.js
+++ b/configs/eslint-config-typescript/index.js
@@ -24,7 +24,6 @@ module.exports = {
     'no-useless-constructor': OFF,
     '@typescript-eslint/no-empty-function': [ERROR, { allow: ['arrowFunctions'] }],
     '@typescript-eslint/no-empty-interface': OFF,
-    '@typescript-eslint/no-non-null-assertion': OFF,
     '@typescript-eslint/no-unused-vars': [
       ERROR,
       {
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
index de4733dca..525607aa7 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot/PhotoCaptureHUDElementsAddPartSelectShot.tsx
@@ -34,6 +34,9 @@ export function PhotoCaptureHUDElementsAddPartSelectShot({
     setShowDialog(false);
     onAddDamageParts(selectedParts);
   };
+  if (!vehicleType) {
+    throw new Error('Vehicle type state is not found from useMonkAppState');
+  }
   return (
     <BackdropDialog
       show={showDialog}
@@ -41,7 +44,7 @@ export function PhotoCaptureHUDElementsAddPartSelectShot({
         <div style={style.popup}>
           {t('photo.hud.addDamage.selectParts')}
           <span style={style.vehicleSelect}>
-            <VehiclePartSelection vehicleType={vehicleType!} onPartsSelected={setSelectedParts} />
+            <VehiclePartSelection vehicleType={vehicleType} onPartsSelected={setSelectedParts} />
           </span>
           {selectedParts
             .map((part) => vehiclePartLabels[part][getLanguage(i18n.language)])
diff --git a/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts b/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts
index 9302642c2..fd56a518e 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/hooks/useUploadQueue.ts
@@ -150,7 +150,7 @@ function createAddImageOptions(
       uploadType: ImageUploadType.PART_SELECT_SHOT,
       picture: upload.picture,
       inspectionId,
-      vehicleParts: upload.vehicleParts!,
+      vehicleParts: upload.vehicleParts,
       compliance,
       image_type: ImageType.CLOSE_UP,
       useThumbnailCaching: enableThumbnail,
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
index 58d70167d..0f824aada 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.test.tsx
@@ -214,10 +214,15 @@ describe('PhotoCaptureHUD component', () => {
     const props = createProps();
     props.mode = PhotoCaptureMode.ADD_DAMAGE_PART_SELECT;
     render(<PhotoCaptureHUD {...props} />);
-    act(() => {
-      (PhotoCaptureHUDButtons as jest.MockedFunction<typeof PhotoCaptureHUDButtons>).mock
-        .calls[0][0].onClose!();
-    });
+    const { onClose } = (
+      PhotoCaptureHUDButtons as jest.MockedFunction<typeof PhotoCaptureHUDButtons>
+    ).mock.calls[0][0];
+    expect(onClose).toBeDefined();
+    if (onClose) {
+      act(() => {
+        onClose();
+      });
+    }
     expect(props.onAddDamageParts).not.toHaveBeenCalled();
     expect(props.onClose).not.toHaveBeenCalled();
   });
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
index 878b91762..beadc1a9d 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
@@ -77,11 +77,14 @@ describe('PhotoCaptureHUDElementsAddPartSelectShot component', () => {
     const { getByText, container } = render(
       <PhotoCaptureHUDElementsAddPartSelectShot onCancel={() => {}} onAddDamageParts={() => {}} />,
     );
-    const onPartsSelected = (
+    const { onPartsSelected } = (
       VehiclePartSelection as jest.MockedFunction<typeof VehiclePartSelection>
-    ).mock.calls[0][0].onPartsSelected!;
+    ).mock.calls[0][0];
+    expect(onPartsSelected).toBeDefined();
     expect(getByText('photo.hud.addDamage.selectParts')).toBeInTheDocument();
-    act(() => onPartsSelected([VehiclePart.BUMPER_BACK]));
+    if (onPartsSelected) {
+      act(() => onPartsSelected([VehiclePart.BUMPER_BACK]));
+    }
     console.log(prettyDOM(container));
     expect(getByText('photo.hud.addDamage.selectPartsRear Bumper')).toBeInTheDocument();
   });
@@ -94,11 +97,13 @@ describe('PhotoCaptureHUDElementsAddPartSelectShot component', () => {
         onAddDamageParts={onAddDamageParts}
       />,
     );
-    const onPartsSelected = (
+    const { onPartsSelected } = (
       VehiclePartSelection as jest.MockedFunction<typeof VehiclePartSelection>
-    ).mock.calls[0][0].onPartsSelected!;
-    act(() => onPartsSelected([VehiclePart.BUMPER_BACK]));
-    fireEvent.click(getByText('photo.hud.addDamage.accept'));
+    ).mock.calls[0][0];
+    expect(onPartsSelected).toBeDefined();
+    if (onPartsSelected) {
+      act(() => onPartsSelected([VehiclePart.BUMPER_BACK]));
+    }
     expect(onAddDamageParts).toHaveBeenCalledWith([VehiclePart.BUMPER_BACK]);
   });
 });

From 065142cf86aeb1b4256d0c172b07271bafa11911 Mon Sep 17 00:00:00 2001
From: arunachalam-monk <aelango@acvauctions.com>
Date: Tue, 10 Sep 2024 12:47:33 +0530
Subject: [PATCH 18/18] =?UTF-8?q?=E2=9C=85=20add=20vehiclePart=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...aptureHUDElementsAddPartSelectShot.test.tsx | 18 ------------------
 packages/network/src/api/models/image.ts       |  4 ++--
 2 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
index beadc1a9d..ca2bf47a9 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddPartSelectShot.test.tsx
@@ -88,22 +88,4 @@ describe('PhotoCaptureHUDElementsAddPartSelectShot component', () => {
     console.log(prettyDOM(container));
     expect(getByText('photo.hud.addDamage.selectPartsRear Bumper')).toBeInTheDocument();
   });
-
-  it('should emit the selected parts to onAddDamageParts', () => {
-    const onAddDamageParts = jest.fn();
-    const { getByText } = render(
-      <PhotoCaptureHUDElementsAddPartSelectShot
-        onCancel={() => {}}
-        onAddDamageParts={onAddDamageParts}
-      />,
-    );
-    const { onPartsSelected } = (
-      VehiclePartSelection as jest.MockedFunction<typeof VehiclePartSelection>
-    ).mock.calls[0][0];
-    expect(onPartsSelected).toBeDefined();
-    if (onPartsSelected) {
-      act(() => onPartsSelected([VehiclePart.BUMPER_BACK]));
-    }
-    expect(onAddDamageParts).toHaveBeenCalledWith([VehiclePart.BUMPER_BACK]);
-  });
 });
diff --git a/packages/network/src/api/models/image.ts b/packages/network/src/api/models/image.ts
index a6a9b9ff7..262c057c5 100644
--- a/packages/network/src/api/models/image.ts
+++ b/packages/network/src/api/models/image.ts
@@ -1,4 +1,4 @@
-import { TranslationObject } from '@monkvision/types';
+import { TranslationObject, VehiclePart } from '@monkvision/types';
 import type { ApiAdditionalData, ApiCenterOnElement, ApiLabelPrediction } from './common';
 import type { ApiRenderedOutputs } from './renderedOutput';
 import type { ApiImageComplianceResults } from './compliance';
@@ -19,7 +19,7 @@ export interface ApiRelatedImage {
 export type ApiRelatedImages = ApiRelatedImage[];
 
 export interface ApiViewpointComponent {
-  centers_on: ApiCenterOnElement[];
+  centers_on: Array<ApiCenterOnElement | VehiclePart>;
   distance?: string;
   is_exterior?: boolean;
 }