Disable option for AddDamage feature

apps/drive-app/src/pages/PhotoCapturePage/PhotoCapturePage.tsx

@@ -44,6 +44,7 @@ export function PhotoCapturePage() {
         enforceOrientation={DeviceOrientation.LANDSCAPE}
         allowSkipRetake={false}
         useLiveCompliance={true}
+        enableAddDamage={false}
       />
     </div>
   );

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

@@ -89,6 +89,12 @@ export interface PhotoCaptureProps
    * @default false
    */
   allowSkipRetake?: boolean;
+  /**
+   * Boolean indicating if `Add Damage` feature should be enabled or not. If disabled, the `Add Damage` button will be hidden.
+   *
+   * @default true
+   */
+  enableAddDamage?: boolean;
 }
 
 enum PhotoCaptureScreen {
@@ -109,6 +115,7 @@ export function PhotoCapture({
   enableCompliance = true,
   useLiveCompliance = false,
   allowSkipRetake = false,
+  enableAddDamage = true,
   complianceIssues,
   lang,
   enforceOrientation,
@@ -204,6 +211,7 @@ export function PhotoCapture({
     inspectionId,
     showCloseButton,
     images,
+    enableAddDamage,
   };
 
   return (

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 if `Add Damage` feature should be enabled or not. If disabled, the `Add Damage` button will be hidden.
+   *
+   * @default true
+   */
+  enableAddDamage?: boolean;
 }
 
 /**
@@ -102,6 +108,7 @@ export function PhotoCaptureHUD({
   handle,
   cameraPreview,
   images,
+  enableAddDamage,
 }: 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}
+          enableAddDamage={enableAddDamage}
         />
       </div>
       <PhotoCaptureHUDButtons

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 if `Add Damage` feature should be enabled or not. If disabled, the `Add Damage` button will be hidden.
+   *
+   * @default true
+   */
+  enableAddDamage?: boolean;
 }
 
 /**
@@ -71,6 +77,7 @@ export function PhotoCaptureHUDPreview(params: PhotoCaptureHUDPreviewProps) {
         onAddDamage={params.onAddDamage}
         streamDimensions={params.streamDimensions}
         images={params.images}
+        enableAddDamage={params.enableAddDamage}
       />
     );
   }

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

@@ -1,4 +1,5 @@
 import { Button } from '@monkvision/common-ui-web';
+import { CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePhotoCaptureHUDButtonBackground } from '../../hooks';
 
@@ -10,18 +11,30 @@ export interface AddDamageButtonProps {
    * Callback called when the user presses the button.
    */
   onAddDamage?: () => void;
+  /**
+   * Boolean indicating whether the Add Damage feature is enabled. If disabled, the `Add Damage` button will be hidden.
+   *
+   * @default true
+   */
+  enableAddDamage?: boolean;
+}
+
+function getButtonStyle(enableAddDamage?: boolean): CSSProperties {
+  return { visibility: enableAddDamage ? 'visible' : 'hidden' };
 }
 
 /**
  * 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, enableAddDamage }: AddDamageButtonProps) {
   const { t } = useTranslation();
   const primaryColor = usePhotoCaptureHUDButtonBackground();
 
   return (
     <Button
       icon='add'
+      style={getButtonStyle(enableAddDamage)}
+      disabled={!enableAddDamage}
       onClick={onAddDamage}
       data-testid='monk-test-btn'
       primaryColor={primaryColor}

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 true
+   */
+  enableAddDamage?: boolean;
 }
 
 /**
@@ -53,6 +59,7 @@ export function PhotoCaptureHUDPreviewSight({
   sightsTaken,
   streamDimensions,
   images,
+  enableAddDamage,
 }: 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} enableAddDamage={enableAddDamage} />
       </div>
       <SightSlider
         sights={sights}

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',
   },

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

@@ -63,6 +63,7 @@ function createProps(): PhotoCaptureProps {
     showCloseButton: true,
     lang: 'de',
     allowSkipRetake: true,
+    enableAddDamage: true,
   };
 }
 
@@ -233,6 +234,7 @@ describe('PhotoCapture component', () => {
         showCloseButton: props.showCloseButton,
         onOpenGallery: expect.any(Function),
         images,
+        enableAddDamage: props.enableAddDamage,
       },
     });
 

packages/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/AddDamageButton.test.tsx

@@ -25,4 +25,15 @@ describe('AddDamageButton component', () => {
 
     unmount();
   });
+
+  it('should be disabled and not visible when enableAddDamage is false', () => {
+    const onAddDamage = jest.fn();
+    const { unmount } = render(
+      <AddDamageButton onAddDamage={onAddDamage} enableAddDamage={false} />,
+    );
+
+    expectPropsOnChildMock(Button, { style: { visibility: 'hidden' }, disabled: true });
+
+    unmount();
+  });
 });