Fixed compliances posthog events resend after page refresh (#802)

monkvision · Jun 25, 2024 · 3b670f5 · 3b670f5
1 parent 5025ce1
commit 3b670f5
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 28 deletions.
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
@@ -1,44 +1,44 @@
-import { useState } from 'react';
+import { useAnalytics } from '@monkvision/analytics';
 import { Camera, CameraHUDProps, CameraProps } from '@monkvision/camera-web';
-import {
-  CaptureAppConfig,
-  ComplianceOptions,
-  DeviceOrientation,
-  Sight,
-  CompressionOptions,
-  CameraConfig,
-} from '@monkvision/types';
 import {
   useI18nSync,
   useLoadingState,
-  useWindowDimensions,
   useObjectMemo,
+  useWindowDimensions,
 } from '@monkvision/common';
-import { MonkApiConfig } from '@monkvision/network';
-import { useAnalytics } from '@monkvision/analytics';
-import { useMonitoring } from '@monkvision/monitoring';
 import {
   BackdropDialog,
   Icon,
   InspectionGallery,
   NavigateToCaptureOptions,
   NavigateToCaptureReason,
 } from '@monkvision/common-ui-web';
+import { useMonitoring } from '@monkvision/monitoring';
+import { MonkApiConfig } from '@monkvision/network';
+import {
+  CameraConfig,
+  CaptureAppConfig,
+  ComplianceOptions,
+  CompressionOptions,
+  DeviceOrientation,
+  Sight,
+} from '@monkvision/types';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { styles } from './PhotoCapture.styles';
+import { PhotoCaptureHUD, PhotoCaptureHUDProps } from './PhotoCaptureHUD';
 import {
+  useAdaptiveCameraConfig,
   useAddDamageMode,
-  usePhotoCaptureImages,
+  useBadConnectionWarning,
   useComplianceAnalytics,
+  usePhotoCaptureImages,
   usePhotoCaptureSightState,
   usePictureTaken,
   useStartTasksOnComplete,
-  useUploadQueue,
-  useBadConnectionWarning,
-  useAdaptiveCameraConfig,
   useTracking,
+  useUploadQueue,
 } from './hooks';
-import { PhotoCaptureHUD, PhotoCaptureHUDProps } from './PhotoCaptureHUD';
-import { styles } from './PhotoCapture.styles';
 
 /**
  * Props of the PhotoCapture component.
@@ -146,7 +146,7 @@ export function PhotoCapture({
   const loading = useLoadingState();
   const addDamageHandle = useAddDamageMode();
   useTracking({ inspectionId, authToken: apiConfig.authToken });
-  useComplianceAnalytics({ inspectionId, sights });
+  const { setIsInitialInspectionFetched } = useComplianceAnalytics({ inspectionId, sights });
   const { adaptiveCameraConfig, uploadEventHandlers: adaptiveUploadEventHandlers } =
     useAdaptiveCameraConfig({
       initialCameraConfig,
@@ -172,6 +172,7 @@ export function PhotoCapture({
     onLastSightTaken,
     tasksBySight,
     complianceOptions,
+    setIsInitialInspectionFetched,
   });
   const {
     isBadConnectionWarningDialogDisplayed,

diff --git a/packages/inspection-capture-web/src/PhotoCapture/hooks/useComplianceAnalytics.ts b/packages/inspection-capture-web/src/PhotoCapture/hooks/useComplianceAnalytics.ts
@@ -26,6 +26,7 @@ export interface ComplianceAnalyticsParams {
  */
 export function useComplianceAnalytics({ inspectionId, sights }: ComplianceAnalyticsParams) {
   const [imagesEventTracking, setImagesEventTracking] = useState<ImageEventTracking[]>([]);
+  const [isInitialInspectionFetched, setIsInitialInspectionFetched] = useState(false);
   const { state } = useMonkState();
   const { trackEvent } = useAnalytics();
 
@@ -38,16 +39,19 @@ export function useComplianceAnalytics({ inspectionId, sights }: ComplianceAnaly
           return imageEventTracking;
         }
         if (image.status === ImageStatus.NOT_COMPLIANT && image.complianceIssues) {
-          trackEvent('Compliance Issue', {
-            complianceIssue: image.complianceIssues.at(0),
-            sightId: image.sightId,
-            sightLabel: sights.find((sight) => sight.id === image.sightId)?.label,
-          });
+          if (isInitialInspectionFetched) {
+            trackEvent('Compliance Issue', {
+              complianceIssue: image.complianceIssues.at(0),
+              sightId: image.sightId,
+              sightLabel: sights.find((sight) => sight.id === image.sightId)?.label,
+            });
+          }
           return { ...image, isAlreadySent: true };
         }
         return { ...image, isAlreadySent: false };
       });
 
     setImagesEventTracking(newImagesEventTracking);
   }, [state]);
+  return { setIsInitialInspectionFetched };
 }
diff --git a/packages/inspection-capture-web/src/PhotoCapture/hooks/usePhotoCaptureSightState.ts b/packages/inspection-capture-web/src/PhotoCapture/hooks/usePhotoCaptureSightState.ts
@@ -85,6 +85,7 @@ export interface PhotoCaptureSightsParams {
    * The options for the compliance conf
    */
   complianceOptions: ComplianceOptions;
+  setIsInitialInspectionFetched: (state: boolean) => void;
   /**
    * Record associating each sight with a list of tasks to execute for it. If not provided, the default tasks of the
    * sight will be used.
@@ -166,6 +167,7 @@ export function usePhotoCaptureSightState({
   loading,
   onLastSightTaken,
   tasksBySight,
+  setIsInitialInspectionFetched,
   complianceOptions,
 }: PhotoCaptureSightsParams): PhotoCaptureSightState {
   if (captureSights.length === 0) {
@@ -182,6 +184,7 @@ export function usePhotoCaptureSightState({
 
   const onFetchInspection = (response: MonkApiResponse<GetInspectionResponse>) => {
     try {
+      setIsInitialInspectionFetched(true);
       assertInspectionIsValid(inspectionId, response, captureSights, tasksBySight);
       const alreadyTakenSights = getSightsTaken(inspectionId, response);
       setSightsTaken(alreadyTakenSights);

diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx
@@ -25,7 +25,9 @@ jest.mock('../../src/PhotoCapture/hooks', () => ({
   })),
   useStartTasksOnComplete: jest.fn(() => jest.fn()),
   usePhotoCaptureImages: jest.fn(() => [{ id: 'test' }]),
-  useComplianceAnalytics: jest.fn(),
+  useComplianceAnalytics: jest.fn(() => ({
+    isInitialInspectionFetched: jest.fn(),
+  })),
   useBadConnectionWarning: jest.fn(() => ({
     isBadConnectionWarningDialogDisplayed: true,
     closeBadConnectionWarningDialog: jest.fn(),

diff --git a/packages/inspection-capture-web/test/PhotoCapture/hooks/useComplianceAnalytics.test.ts b/packages/inspection-capture-web/test/PhotoCapture/hooks/useComplianceAnalytics.test.ts
@@ -22,7 +22,7 @@ describe('useComplianceAnalytics hook', () => {
     jest.clearAllMocks();
   });
 
-  it('should only track non compliant image', () => {
+  it('should not send event for the first inspection fetch', () => {
     const initialProps = createParams();
     const state = createEmptyMonkState();
     state.inspections.push({
@@ -53,7 +53,7 @@ describe('useComplianceAnalytics hook', () => {
     (useMonkState as jest.Mock).mockImplementation(() => ({ state }));
     const { unmount } = renderHook(useComplianceAnalytics, { initialProps });
     const { trackEvent } = (useAnalytics as jest.Mock).mock.results[0].value;
-    expect(trackEvent).toBeCalledTimes(1);
+    expect(trackEvent).not.toBeCalled();
 
     unmount();
   });

diff --git a/packages/inspection-capture-web/test/PhotoCapture/hooks/usePhotoCaptureSightState.test.ts b/packages/inspection-capture-web/test/PhotoCapture/hooks/usePhotoCaptureSightState.test.ts
@@ -35,6 +35,7 @@ function createParams(): PhotoCaptureSightsParams {
       complianceIssuesPerSight: { test: [ComplianceIssue.OVEREXPOSURE] },
       useLiveCompliance: true,
     },
+    setIsInitialInspectionFetched: jest.fn(),
   };
 }