Added Analytics to inspection-capture-web and demo-app

apps/demo-app/package.json

@@ -24,11 +24,13 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
+    "@monkvision/analytics": "4.0.0",
     "@monkvision/common": "4.0.0",
     "@monkvision/common-ui-web": "4.0.0",
     "@monkvision/inspection-capture-web": "4.0.0",
     "@monkvision/monitoring": "4.0.0",
     "@monkvision/network": "4.0.0",
+    "@monkvision/posthog": "4.0.0",
     "@monkvision/sentry": "4.0.0",
     "@monkvision/sights": "4.0.0",
     "@monkvision/types": "4.0.0",

apps/demo-app/src/index.tsx

@@ -1,28 +1,31 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import { MonitoringProvider } from '@monkvision/monitoring';
+import { AnalyticsProvider } from '@monkvision/analytics';
 import { Auth0Provider } from '@auth0/auth0-react';
 import { getEnvOrThrow, MonkThemeProvider } from '@monkvision/common';
 import { sentryMonitoringAdapter } from './sentry';
+import { posthogAnalyticsAdapter } from './posthog';
 import { AppRouter } from './components';
 import './index.css';
 import './i18n';
 
 ReactDOM.render(
   <MonitoringProvider adapter={sentryMonitoringAdapter}>
-    <Auth0Provider
-      domain={getEnvOrThrow('REACT_APP_AUTH_DOMAIN')}
-      clientId={getEnvOrThrow('REACT_APP_AUTH_CLIENT_ID')}
-      authorizationParams={{
-        redirect_uri: window.location.origin,
-        audience: getEnvOrThrow('REACT_APP_AUTH_AUDIENCE'),
-        prompt: 'login',
-      }}
-    >
-      <MonkThemeProvider>
-        <AppRouter />
-      </MonkThemeProvider>
-    </Auth0Provider>
+    <AnalyticsProvider adapter={posthogAnalyticsAdapter}>
+      <Auth0Provider
+        domain={getEnvOrThrow('REACT_APP_AUTH_DOMAIN')}
+        clientId={getEnvOrThrow('REACT_APP_AUTH_CLIENT_ID')}
+        authorizationParams={{
+          redirect_uri: window.location.origin,
+          audience: getEnvOrThrow('REACT_APP_AUTH_AUDIENCE'),
+          prompt: 'login',
+        }}
+      >
+        <MonkThemeProvider>
+          <AppRouter />
+        </MonkThemeProvider>
+      </Auth0Provider>
+    </AnalyticsProvider>
   </MonitoringProvider>,
   document.getElementById('root'),
 );

apps/demo-app/src/pages/CreateInspectionPage/CreateInspectionPage.tsx

@@ -6,6 +6,7 @@ import { useMonkApi } from '@monkvision/network';
 import { getEnvOrThrow, useLoadingState, useMonkAppParams } from '@monkvision/common';
 import { useMonitoring } from '@monkvision/monitoring';
 import { TaskName } from '@monkvision/types';
+import { useAnalytics } from '@monkvision/analytics';
 import { Page } from '../pages';
 import styles from './CreateInspectionPage.module.css';
 
@@ -18,13 +19,15 @@ export function CreateInspectionPage() {
     authToken: authToken ?? '',
     apiDomain: getEnvOrThrow('REACT_APP_API_DOMAIN'),
   });
+  const { setUserId } = useAnalytics();
 
   const handleCreateInspection = () => {
     loading.start();
     createInspection({ tasks: [TaskName.DAMAGE_DETECTION, TaskName.WHEEL_ANALYSIS] })
       .then((res) => {
         loading.onSuccess();
         setInspectionId(res.id);
+        setUserId(res.id);
       })
       .catch((err) => {
         loading.onError(err);

apps/demo-app/src/posthog.ts

@@ -0,0 +1,9 @@
+import { PosthogAnalyticsAdapter } from '@monkvision/posthog';
+
+export const posthogAnalyticsAdapter = new PosthogAnalyticsAdapter({
+  token: 'phc_azbiXVxUvUjxUAVLb5zrrlzNCFpf0RSClkiJ9RxTDGU',
+  api_host: 'https://eu.posthog.com',
+  environnement: 'development',
+  projectName: 'test',
+  release: '1.0.0',
+});

documentation/docs/packages/analytics.md

@@ -0,0 +1,20 @@
+---
+sidebar_position: 1
+---
+
+# analytics
+Monk analytics abstraction package.
+
+![npm latest package](https://img.shields.io/npm/v/@monkvision/analytics/latest.svg)
+
+## Overview
+This package provides an abstraction layer for the analytics features in the MonkJs ecosystem. If you plan on using any
+of these features, you can use this package to properly set up the analytics inside your application.
+
+In the MonkJs SDK, we use this "abstraction" package as a way of offering the possibility to developers to choose their
+own Analytics tools and platform if they don't want to use Posthog (the platform used internally by Monk).
+
+## Complete Documentation
+As every other package in the SDK, please refer to
+[its README file](https://github.com/monkvision/monkjs/blob/main/packages/analytics/README.md) for a complete
+documentation on how this package works.

documentation/docs/packages/camera-web.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 # camera-web

documentation/docs/packages/common-ui-web.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # common-ui-web

documentation/docs/packages/common.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 3
 ---
 
 # common

documentation/docs/packages/inspection-capture-web.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 # inspection-capture-web

documentation/docs/packages/inspection-report-web.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # inspection-report-web

documentation/docs/packages/monitoring.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 7
 ---
 
 # monitoring

documentation/docs/packages/network.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 7
+sidebar_position: 8
 ---
 
 # network

documentation/docs/packages/posthog.md

@@ -0,0 +1,20 @@
+---
+sidebar_position: 9
+---
+
+# posthog
+Posthog implementation used to analyze MonkJs SDK and applications.
+
+![npm latest package](https://img.shields.io/npm/v/@monkvision/posthog/latest.svg)
+
+## Overview
+This package provides an implementation of the analytics abstraction layers exposed by the
+[analytics package](docs/packages/analytics.md) using the [Posthog](https://posthog.com/) analytics platform. Posthog is
+the platform used internally by Monk to analyze the user's behaviour in our applications. Unless you already have your own analytics
+platform, and you really don't want to add Posthog as a dependency in your app, we highly recommend installing this
+analytics adapter in your app.
+
+## Complete Documentation
+As every other package in the SDK, please refer to
+[its README file](https://github.com/monkvision/monkjs/blob/main/packages/posthog/README.md) for a complete
+documentation on how this package works.

documentation/docs/packages/sentry.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 8
+sidebar_position: 10
 ---
 
 # sentry

documentation/docs/packages/sights.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 9
+sidebar_position: 11
 ---
 
 # sights

documentation/docs/packages/types.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 10
+sidebar_position: 12
 ---
 
 # types

packages/inspection-capture-web/package.json

@@ -25,6 +25,7 @@
     "lint:fix": "yarn run prettier:fix && yarn run eslint:fix"
   },
   "dependencies": {
+    "@monkvision/analytics": "4.0.0",
     "@monkvision/camera-web": "4.0.0",
     "@monkvision/common": "4.0.0",
     "@monkvision/common-ui-web": "4.0.0",

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

@@ -3,6 +3,7 @@ import { Camera, CameraHUDProps, CameraProps, CompressionOptions } from '@monkvi
 import { ComplianceOptions, DeviceOrientation, Sight, TaskName } from '@monkvision/types';
 import { useI18nSync, useLoadingState, useWindowDimensions } from '@monkvision/common';
 import { MonkApiConfig } from '@monkvision/network';
+import { useAnalytics } from '@monkvision/analytics';
 import { useMonitoring } from '@monkvision/monitoring';
 import {
   Icon,
@@ -13,6 +14,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import {
   useAddDamageMode,
+  useComplianceAnalytics,
   usePhotoCaptureSightState,
   usePictureTaken,
   useStartTasksOnComplete,
@@ -117,8 +119,10 @@ export function PhotoCapture({
   const { handleError } = useMonitoring();
   const [currentScreen, setCurrentScreen] = useState(PhotoCaptureScreen.CAMERA);
   const dimensions = useWindowDimensions();
+  const analytics = useAnalytics();
   const loading = useLoadingState();
   const addDamageHandle = useAddDamageMode();
+  useComplianceAnalytics({ inspectionId, sights });
   const startTasks = useStartTasksOnComplete({
     inspectionId,
     apiConfig,
@@ -152,7 +156,13 @@ export function PhotoCapture({
     uploadQueue,
     tasksBySight,
   });
-  const handleOpenGallery = () => setCurrentScreen(PhotoCaptureScreen.GALLERY);
+  const handleOpenGallery = () => {
+    setCurrentScreen(PhotoCaptureScreen.GALLERY);
+    analytics.trackEvent('Capture Closed', {
+      inspectionId,
+      category: 'capture_closed',
+    });
+  };
   const handleGalleryBack = () => setCurrentScreen(PhotoCaptureScreen.CAMERA);
   const handleNavigateToCapture = (options: NavigateToCaptureOptions) => {
     if (options.reason === NavigateToCaptureReason.ADD_DAMAGE) {
@@ -171,6 +181,11 @@ export function PhotoCapture({
   const handleGalleryValidate = () => {
     startTasks()
       .then(() => {
+        analytics.trackEvent('Capture Completed', {
+          inspectionId,
+          category: 'capture_completed',
+        });
+        analytics.setUserProperties({ captureCompleted: true });
         onComplete?.();
       })
       .catch((err) => {

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

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { BackdropDialog } from '@monkvision/common-ui-web';
 import { CameraHUDProps } from '@monkvision/camera-web';
 import { LoadingState } from '@monkvision/common';
+import { useAnalytics } from '@monkvision/analytics';
 import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons';
 import { usePhotoCaptureHUDStyle } from './hooks';
 import { PhotoCaptureMode } from '../hooks';
@@ -101,9 +102,14 @@ export function PhotoCaptureHUD({
   const { t } = useTranslation();
   const [showCloseModal, setShowCloseModal] = useState(false);
   const style = usePhotoCaptureHUDStyle();
+  const { trackEvent } = useAnalytics();
 
   const handleCloseConfirm = () => {
     setShowCloseModal(false);
+    trackEvent('Capture Closed', {
+      inspectionId,
+      category: 'capture_closed',
+    });
     onClose?.();
   };
 

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

@@ -3,3 +3,4 @@ export * from './useStartTasksOnComplete';
 export * from './useAddDamageMode';
 export * from './useUploadQueue';
 export * from './usePictureTaken';
+export * from './useComplianceAnalytics';

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

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@monkvision/analytics';
 import { useCallback, useMemo, useState } from 'react';
 
 /**
@@ -45,20 +46,31 @@ export interface AddDamageHandle {
  */
 export function useAddDamageMode(): AddDamageHandle {
   const [mode, setMode] = useState(PhotoCaptureMode.SIGHT);
+  const { trackEvent } = useAnalytics();
 
-  const handleAddDamage = useCallback(() => setMode(PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT), []);
+  const handleAddDamage = useCallback(() => {
+    setMode(PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT);
+    trackEvent('AddDamage Selected', {
+      mode: PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT,
+      category: 'addDamage_selected',
+    });
+  }, []);
 
-  const updatePhotoCaptureModeAfterPictureTaken = useCallback(
-    () =>
-      setMode((currentMode) =>
-        currentMode === PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT
-          ? PhotoCaptureMode.ADD_DAMAGE_2ND_SHOT
-          : PhotoCaptureMode.SIGHT,
-      ),
-    [],
-  );
+  const updatePhotoCaptureModeAfterPictureTaken = useCallback(() => {
+    setMode((currentMode) =>
+      currentMode === PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT
+        ? PhotoCaptureMode.ADD_DAMAGE_2ND_SHOT
+        : PhotoCaptureMode.SIGHT,
+    );
+  }, []);
 
-  const handleCancelAddDamage = useCallback(() => setMode(PhotoCaptureMode.SIGHT), []);
+  const handleCancelAddDamage = useCallback(() => {
+    trackEvent('AddDamage Canceled', {
+      mode,
+      category: 'addDamage_canceled',
+    });
+    setMode(PhotoCaptureMode.SIGHT);
+  }, []);
 
   return useMemo(
     () => ({