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/posthog.ts

@@ -0,0 +1,9 @@
+import { PosthogAnalyticsAdapter } from '@monkvision/posthog';
+
+export const posthogAnalyticsAdapter = new PosthogAnalyticsAdapter({
+  token: 'phc_iNzK7jyK2bLtRi9vNWnzQqy74rIPlXPdgGs0qgJrSfL',
+  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

@@ -2,6 +2,7 @@ import { Camera, CameraHUDProps, CompressionOptions, CameraProps } from '@monkvi
 import { Sight, TaskName } from '@monkvision/types';
 import { useI18nSync, useLoadingState } from '@monkvision/common';
 import { ComplianceOptions, MonkAPIConfig } from '@monkvision/network';
+import { useAnalytics } from '@monkvision/analytics';
 import { useMonitoring } from '@monkvision/monitoring';
 import { PhotoCaptureHUD, PhotoCaptureHUDProps } from './PhotoCaptureHUD';
 import { styles } from './PhotoCapture.styles';
@@ -90,6 +91,7 @@ export function PhotoCapture({
 }: PhotoCaptureProps) {
   useI18nSync(lang);
   const { handleError } = useMonitoring();
+  const analytics = useAnalytics();
   const loading = useLoadingState();
   const addDamageHandle = useAddDamageMode();
   const startTasks = useStartTasksOnComplete({
@@ -103,6 +105,11 @@ export function PhotoCapture({
   const onLastSightTaken = () => {
     startTasks()
       .then(() => {
+        analytics.trackEvent('inspection completed', {
+          inspectionId,
+          haveToCaptureSights: sights.length,
+          category: 'inspection_completed',
+        });
         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, MonkPicture } 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';
@@ -63,6 +64,10 @@ export interface PhotoCaptureHUDProps extends CameraHUDProps {
    * displayed.
    */
   onClose?: () => void;
+  /**
+   * Callback called when the user clicks on the gallery button.
+   */
+  onOpenGallery?: () => void;
   /**
    * Boolean indicating if the close button should be displayed in the HUD on top of the Camera preview.
    *
@@ -88,6 +93,7 @@ export function PhotoCaptureHUD({
   onCancelAddDamage,
   onRetry,
   onClose,
+  onOpenGallery,
   showCloseButton,
   loading,
   handle,
@@ -96,12 +102,25 @@ 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?.();
   };
 
+  const handleOpenGallery = () => {
+    trackEvent('gallery opened', {
+      inspectionId,
+      category: 'gallery_opened',
+    });
+    onOpenGallery?.();
+  };
+
   return (
     <div style={style.container}>
       <div style={style.previewContainer} data-testid='camera-preview'>
@@ -122,6 +141,7 @@ export function PhotoCaptureHUD({
       <PhotoCaptureHUDButtons
         onTakePicture={handle?.takePicture}
         onClose={() => setShowCloseModal(true)}
+        onOpenGallery={handleOpenGallery}
         galleryPreview={lastPictureTaken ?? undefined}
         closeDisabled={!!loading.error || !!handle.error}
         galleryDisabled={!!loading.error || !!handle.error}

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(
     () => ({