Implemented useShowImageReference logic (#953)

* Implemented useShowImageReference logic

* Added TS doc and improved naming

* Added sight as dependency for toggle

* Changed hook logic to onRetake

* Fixed naming of test cases

* Merge commit '918df5a9fde358ba94029e23a2b38eb9304adeaa'

---------

Co-authored-by: Gabriel Tira <gtira@acvautions.com>

Author: gabrieltmonkai

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

@@ -194,6 +194,12 @@ export function PhotoCapture({
   const onLastSightTaken = () => {
     setCurrentScreen(PhotoCaptureScreen.GALLERY);
   };
+  const { currentTutorialStep, goToNextTutorialStep, closeTutorial } = usePhotoCaptureTutorial({
+    enableTutorial,
+    enableSightGuidelines,
+    enableSightTutorial,
+  });
+  const { showSightTutorial, toggleSightTutorial } = usePhotoCaptureSightTutorial();
   const sightState = usePhotoCaptureSightState({
     inspectionId,
     captureSights: sights,
@@ -203,13 +209,8 @@ export function PhotoCapture({
     tasksBySight,
     complianceOptions,
     setIsInitialInspectionFetched,
+    toggleSightTutorial,
   });
-  const { currentTutorialStep, goToNextTutorialStep, closeTutorial } = usePhotoCaptureTutorial({
-    enableTutorial,
-    enableSightGuidelines,
-    enableSightTutorial,
-  });
-  const { showSightTutorial, toggleSightTutorial } = usePhotoCaptureSightTutorial();
   const { showSightGuidelines, handleDisableSightGuidelines } = usePhotoCaptureSightGuidelines({
     enableSightGuidelines,
   });

packages/inspection-capture-web/src/PhotoCapture/hooks/usePhotoCaptureSightState.ts

@@ -22,6 +22,7 @@ import {
   TaskName,
   ImageStatus,
   ProgressStatus,
+  CAR_COVERAGE_COMPLIANCE_ISSUES,
 } from '@monkvision/types';
 import { sights } from '@monkvision/sights';
 import { useAnalytics } from '@monkvision/analytics';
@@ -114,6 +115,8 @@ export interface PhotoCaptureSightsParams {
    * sight will be used.
    */
   tasksBySight?: Record<string, TaskName[]>;
+  /** Callback called to show the tutorial when retaking a non Car Coverage compliant sight. */
+  toggleSightTutorial: () => void;
 }
 
 function getCaptureTasks(
@@ -209,6 +212,7 @@ export function usePhotoCaptureSightState({
   tasksBySight,
   setIsInitialInspectionFetched,
   complianceOptions,
+  toggleSightTutorial,
 }: PhotoCaptureSightsParams): PhotoCaptureSightState {
   if (captureSights.length === 0) {
     throw new Error('Empty sight list given to the Monk PhotoCapture component.');
@@ -334,6 +338,17 @@ export function usePhotoCaptureSightState({
       if (sightToRetake) {
         setSelectedSight(sightToRetake);
       }
+
+      const hasCarCoverageComplianceIssues = state.images.some((image) => {
+        return (
+          image.sightId === id &&
+          image.complianceIssues &&
+          image.complianceIssues.some((issue) => CAR_COVERAGE_COMPLIANCE_ISSUES.includes(issue))
+        );
+      });
+      if (hasCarCoverageComplianceIssues) {
+        toggleSightTutorial();
+      }
     },
     [captureSights],
   );

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

@@ -234,6 +234,7 @@ describe('PhotoCapture component', () => {
       apiConfig: props.apiConfig,
       loading,
       onLastSightTaken: expect.any(Function),
+      toggleSightTutorial: expect.any(Function),
       tasksBySight: props.tasksBySight,
       complianceOptions: {
         enableCompliance: props.enableCompliance,

packages/inspection-capture-web/test/PhotoCapture/hooks/usePhotoCaptureSightState.test.ts

@@ -48,6 +48,7 @@ function createParams(): PhotoCaptureSightsParams {
       useLiveCompliance: true,
     },
     setIsInitialInspectionFetched: jest.fn(),
+    toggleSightTutorial: jest.fn(),
   };
 }
 
@@ -332,6 +333,35 @@ describe('usePhotoCaptureSightState hook', () => {
     unmount();
   });
 
+  it('should not trigger tutorial when a new sight is taken', () => {
+    const initialProps = createParams();
+    const { result, unmount } = renderHook(usePhotoCaptureSightState, { initialProps });
+
+    act(() => result.current.selectSight(initialProps.captureSights[0]));
+    expect((initialProps.toggleSightTutorial as jest.Mock).mock.calls.length).toBe(0);
+
+    unmount();
+  });
+
+  it('should trigger tutorial only when retaking a non-compliant Car Coverage sight', () => {
+    const initialProps = createParams();
+    (useMonkState as jest.Mock).mockImplementationOnce(() => ({
+      state: {
+        images: [
+          { sightId: 'test-sight-1', complianceIssues: [ComplianceIssue.NO_VEHICLE] }, // Car Coverage issue
+          { sightId: 'test-sight-2', complianceIssues: [ComplianceIssue.TOO_ZOOMED] }, // Non Car Coverage issue
+        ],
+      },
+    }));
+    const { result, unmount } = renderHook(usePhotoCaptureSightState, { initialProps });
+
+    act(() => result.current.retakeSight('test-sight-1'));
+    act(() => result.current.retakeSight('test-sight-2'));
+    expect((initialProps.toggleSightTutorial as jest.Mock).mock.calls.length).toBe(1);
+
+    unmount();
+  });
+
   it('should change the sightSelected when retaking a sight', () => {
     const initialProps = createParams();
     const { result, unmount } = renderHook(usePhotoCaptureSightState, { initialProps });