From 454794c9261c0e4764c566298ee231f0bca1b477 Mon Sep 17 00:00:00 2001
From: David Ly <v-dly@acvauctions.com>
Date: Tue, 30 Apr 2024 12:30:16 +0200
Subject: [PATCH] Added disable option for AddDamage feature

---
 .../src/pages/PhotoCapturePage/PhotoCapturePage.tsx   |  1 +
 .../src/PhotoCapture/PhotoCapture.tsx                 |  8 ++++++++
 .../PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx  |  8 ++++++++
 .../PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx |  7 +++++++
 .../AddDamageButton/AddDamageButton.tsx               | 10 +++++++++-
 .../PhotoCaptureHUDPreviewSight.tsx                   |  9 ++++++++-
 .../SightSlider/SightSlider.styles.ts                 |  2 +-
 .../test/PhotoCapture/PhotoCapture.test.tsx           |  2 ++
 .../AddDamageButton.test.tsx                          | 11 +++++++++++
 9 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/apps/drive-app/src/pages/PhotoCapturePage/PhotoCapturePage.tsx b/apps/drive-app/src/pages/PhotoCapturePage/PhotoCapturePage.tsx
index 0995e962d..48c5ebb5b 100644
--- a/apps/drive-app/src/pages/PhotoCapturePage/PhotoCapturePage.tsx
+++ b/apps/drive-app/src/pages/PhotoCapturePage/PhotoCapturePage.tsx
@@ -44,6 +44,7 @@ export function PhotoCapturePage() {
         enforceOrientation={DeviceOrientation.LANDSCAPE}
         allowSkipRetake={false}
         useLiveCompliance={true}
+        disableAddDamage={true}
       />
     </div>
   );
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
index 1e311cb13..c99e6c4c0 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
@@ -89,6 +89,12 @@ export interface PhotoCaptureProps
    * @default false
    */
   allowSkipRetake?: boolean;
+  /**
+   * Boolean indicating whether the Add Damage feature is disabled. If disabled, the `Add Damage` button will be hidden.
+   *
+   * @default false
+   */
+  disableAddDamage?: boolean;
 }
 
 enum PhotoCaptureScreen {
@@ -109,6 +115,7 @@ export function PhotoCapture({
   enableCompliance = true,
   useLiveCompliance = false,
   allowSkipRetake = false,
+  disableAddDamage = false,
   complianceIssues,
   lang,
   enforceOrientation,
@@ -204,6 +211,7 @@ export function PhotoCapture({
     inspectionId,
     showCloseButton,
     images,
+    disableAddDamage,
   };
 
   return (
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
index 155f3066d..aecc069d2 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
@@ -77,6 +77,12 @@ export interface PhotoCaptureHUDProps extends CameraHUDProps {
    * The current images taken by the user (ignoring retaken pictures etc.).
    */
   images: Image[];
+  /**
+   * Boolean indicating whether the Add Damage feature is disabled. If disabled, the `Add Damage` button will be hidden.
+   *
+   * @default false
+   */
+  disableAddDamage?: boolean;
 }
 
 /**
@@ -102,6 +108,7 @@ export function PhotoCaptureHUD({
   handle,
   cameraPreview,
   images,
+  disableAddDamage,
 }: PhotoCaptureHUDProps) {
   const { t } = useTranslation();
   const [showCloseModal, setShowCloseModal] = useState(false);
@@ -135,6 +142,7 @@ export function PhotoCaptureHUD({
           error={loading.error ?? handle.error}
           streamDimensions={handle.dimensions}
           images={images}
+          disableAddDamage={disableAddDamage}
         />
       </div>
       <PhotoCaptureHUDButtons
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx
index 14129d596..226160f07 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreview/PhotoCaptureHUDPreview.tsx
@@ -52,6 +52,12 @@ export interface PhotoCaptureHUDPreviewProps {
    * The current images taken by the user (ignoring retaken pictures etc.).
    */
   images: Image[];
+  /**
+   * Boolean indicating whether the Add Damage feature is disabled. If disabled, the `Add Damage` button will be hidden.
+   *
+   * @default false
+   */
+  disableAddDamage?: boolean;
 }
 
 /**
@@ -71,6 +77,7 @@ export function PhotoCaptureHUDPreview(params: PhotoCaptureHUDPreviewProps) {
         onAddDamage={params.onAddDamage}
         streamDimensions={params.streamDimensions}
         images={params.images}
+        disableAddDamage={params.disableAddDamage}
       />
     );
   }
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/AddDamageButton/AddDamageButton.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/AddDamageButton/AddDamageButton.tsx
index c88e6d7ae..0b6221eb7 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/AddDamageButton/AddDamageButton.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/AddDamageButton/AddDamageButton.tsx
@@ -10,18 +10,26 @@ export interface AddDamageButtonProps {
    * Callback called when the user presses the button.
    */
   onAddDamage?: () => void;
+  /**
+   * Boolean indicating whether the Add Damage feature is disabled. If disabled, the `Add Damage` button will be hidden.
+   *
+   * @default false
+   */
+  disableAddDamage?: boolean;
 }
 
 /**
  * Custom button displayed in the PhotoCapture Camera HUD that allows user to enter add damage mode.
  */
-export function AddDamageButton({ onAddDamage }: AddDamageButtonProps) {
+export function AddDamageButton({ onAddDamage, disableAddDamage }: AddDamageButtonProps) {
   const { t } = useTranslation();
   const primaryColor = usePhotoCaptureHUDButtonBackground();
 
   return (
     <Button
       icon='add'
+      style={{ visibility: disableAddDamage ? 'hidden' : 'visible' }}
+      disabled={disableAddDamage}
       onClick={onAddDamage}
       data-testid='monk-test-btn'
       primaryColor={primaryColor}
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.tsx
index 9fc21d71c..06e1ebf9c 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.tsx
@@ -39,6 +39,12 @@ export interface PhotoCaptureHUDSightPreviewProps {
    * The current images taken by the user (ignoring retaken pictures etc.).
    */
   images: Image[];
+  /**
+   * Boolean indicating whether the Add Damage feature is disabled. If disabled, the `Add Damage` button will be hidden.
+   *
+   * @default false
+   */
+  disableAddDamage?: boolean;
 }
 
 /**
@@ -53,6 +59,7 @@ export function PhotoCaptureHUDPreviewSight({
   sightsTaken,
   streamDimensions,
   images,
+  disableAddDamage,
 }: PhotoCaptureHUDSightPreviewProps) {
   const style = usePhotoCaptureHUDSightPreviewStyle();
   const aspectRatio = `${streamDimensions?.width}/${streamDimensions?.height}`;
@@ -68,7 +75,7 @@ export function PhotoCaptureHUDPreviewSight({
           totalSights={sights.length}
           sightsTaken={sightsTaken.length}
         />
-        <AddDamageButton onAddDamage={onAddDamage} />
+        <AddDamageButton onAddDamage={onAddDamage} disableAddDamage={disableAddDamage} />
       </div>
       <SightSlider
         sights={sights}
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.styles.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.styles.ts
index 0fec91cad..6f4722ef5 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.styles.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.styles.ts
@@ -15,7 +15,7 @@ export const styles: Styles = {
     scrollbarWidth: 'none',
     maxWidth: '60vw',
     zIndex: '9',
-    bottom: '0',
+    bottom: '10px',
     right: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2}px`,
     left: '0',
   },
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
index d3e1986b6..378feaf4a 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
@@ -63,6 +63,7 @@ function createProps(): PhotoCaptureProps {
     showCloseButton: true,
     lang: 'de',
     allowSkipRetake: true,
+    disableAddDamage: false,
   };
 }
 
@@ -233,6 +234,7 @@ describe('PhotoCapture component', () => {
         showCloseButton: props.showCloseButton,
         onOpenGallery: expect.any(Function),
         images,
+        disableAddDamage: props.disableAddDamage,
       },
     });
 
diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/AddDamageButton.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/AddDamageButton.test.tsx
index b6ca1585d..396378760 100644
--- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/AddDamageButton.test.tsx
+++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/AddDamageButton.test.tsx
@@ -25,4 +25,15 @@ describe('AddDamageButton component', () => {
 
     unmount();
   });
+
+  it('should be disable and not visible when disableAddDamage is true', () => {
+    const onAddDamage = jest.fn();
+    const { unmount } = render(
+      <AddDamageButton onAddDamage={onAddDamage} disableAddDamage={true} />,
+    );
+
+    expectPropsOnChildMock(Button, { style: { visibility: 'hidden' }, disabled: true });
+
+    unmount();
+  });
 });