Added PhotoCapture Tutorial

apps/demo-app/src/local-config.json

@@ -1,4 +1,6 @@
 {
+  "id": "demo-app-dev",
+  "description": "Config for the dev Demo App.",
   "allowSkipRetake": true,
   "enableAddDamage": true,
   "enableSightGuidelines": true,
@@ -11,6 +13,9 @@
   },
   "apiDomain": "api.preview.monk.ai/v1",
   "thumbnailDomain": "europe-west1-monk-preview-321715.cloudfunctions.net/image_resize",
+  "enableTutorial": "enabled",
+  "allowSkipTutorial": true,
+  "enableSightTutorial": false,
   "startTasksOnComplete": true,
   "showCloseButton": false,
   "enforceOrientation": "landscape",

apps/drive-app/src/local-config.json

@@ -12,6 +12,9 @@
   },
   "apiDomain": "api.preview.monk.ai/v1",
   "thumbnailDomain": "europe-west1-monk-preview-321715.cloudfunctions.net/image_resize",
+  "enableTutorial": "first_time_only",
+  "allowSkipTutorial": false,
+  "enableSightTutorial": false,
   "startTasksOnComplete": true,
   "showCloseButton": false,
   "enforceOrientation": "landscape",

apps/lux-demo-app/src/local-config.json

@@ -10,6 +10,9 @@
   },
   "apiDomain": "api.preview.monk.ai/v1",
   "thumbnailDomain": "europe-west1-monk-preview-321715.cloudfunctions.net/image_resize",
+  "enableTutorial": "enabled",
+  "allowSkipTutorial": true,
+  "enableSightTutorial": false,
   "startTasksOnComplete": true,
   "showCloseButton": false,
   "enforceOrientation": "landscape",

apps/renault-demo-app/src/local-config.json

@@ -10,6 +10,9 @@
   },
   "apiDomain": "api.preview.monk.ai/v1",
   "thumbnailDomain": "europe-west1-monk-preview-321715.cloudfunctions.net/image_resize",
+  "enableTutorial": "enabled",
+  "allowSkipTutorial": true,
+  "enableSightTutorial": false,
   "startTasksOnComplete": true,
   "showCloseButton": false,
   "enforceOrientation": "landscape",

documentation/src/utils/schemas.ts

@@ -5,6 +5,7 @@ import {
   CompressionFormat,
   DeviceOrientation,
   MonkApiPermission,
+  PhotoCaptureTutorialOption,
   SteeringWheelPosition,
   TaskName,
   VehicleType,
@@ -272,6 +273,9 @@ export const LiveConfigSchema = z
     enableAddDamage: z.boolean().optional(),
     enableSightGuidelines: z.boolean().optional(),
     sightGuidelines: z.array(SightGuidelineSchema).optional(),
+    enableTutorial: z.nativeEnum(PhotoCaptureTutorialOption).optional(),
+    allowSkipTutorial: z.boolean().optional(),
+    enableSightTutorial: z.boolean().optional(),
     defaultVehicleType: z.nativeEnum(VehicleType),
     allowManualLogin: z.boolean(),
     allowVehicleTypeSelection: z.boolean(),

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

@@ -22,6 +22,7 @@ import {
   ComplianceOptions,
   CompressionOptions,
   DeviceOrientation,
+  PhotoCaptureTutorialOption,
   Sight,
 } from '@monkvision/types';
 import { useState } from 'react';
@@ -35,6 +36,7 @@ import {
   useComplianceAnalytics,
   usePhotoCaptureImages,
   usePhotoCaptureSightState,
+  usePhotoCaptureTutorial,
   usePictureTaken,
   useStartTasksOnComplete,
   useTracking,
@@ -60,6 +62,9 @@ export interface PhotoCaptureProps
       | 'enableAddDamage'
       | 'sightGuidelines'
       | 'enableSightGuidelines'
+      | 'enableTutorial'
+      | 'allowSkipTutorial'
+      | 'enableSightTutorial'
     >,
     Partial<CompressionOptions>,
     Partial<ComplianceOptions> {
@@ -126,6 +131,9 @@ export function PhotoCapture({
   allowSkipRetake = false,
   enableAddDamage = true,
   sightGuidelines,
+  enableTutorial = PhotoCaptureTutorialOption.FIRST_TIME_ONLY,
+  allowSkipTutorial = true,
+  enableSightTutorial = true,
   enableSightGuidelines = true,
   useAdaptiveImageQuality = true,
   lang,
@@ -179,6 +187,11 @@ export function PhotoCapture({
     complianceOptions,
     setIsInitialInspectionFetched,
   });
+  const { currentTutorialStep, goToNextTutorialStep, closeTutorial } = usePhotoCaptureTutorial({
+    enableTutorial,
+    enableSightGuidelines,
+    enableSightTutorial,
+  });
   const {
     isBadConnectionWarningDialogDisplayed,
     closeBadConnectionWarningDialog,
@@ -257,6 +270,10 @@ export function PhotoCapture({
     enableAddDamage,
     sightGuidelines,
     enableSightGuidelines,
+    currentTutorialStep,
+    onNextTutorialStep: goToNextTutorialStep,
+    onCloseTutorial: closeTutorial,
+    allowSkipTutorial,
   };
 
   return (

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

@@ -7,16 +7,24 @@ import { LoadingState } from '@monkvision/common';
 import { useAnalytics } from '@monkvision/analytics';
 import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons';
 import { usePhotoCaptureHUDStyle } from './hooks';
-import { PhotoCaptureMode } from '../hooks';
+import { PhotoCaptureMode, TutorialSteps } from '../hooks';
 import { PhotoCaptureHUDOverlay } from './PhotoCaptureHUDOverlay';
 import { PhotoCaptureHUDElements } from './PhotoCaptureHUDElements';
+import { PhotoCaptureHUDTutorial } from './PhotoCaptureHUDTutorial';
 
 /**
  * Props of the PhotoCaptureHUD component.
  */
 export interface PhotoCaptureHUDProps
   extends CameraHUDProps,
-    Pick<CaptureAppConfig, 'enableSightGuidelines' | 'sightGuidelines' | 'enableAddDamage'> {
+    Pick<
+      CaptureAppConfig,
+      | 'enableSightGuidelines'
+      | 'sightGuidelines'
+      | 'enableAddDamage'
+      | 'showCloseButton'
+      | 'allowSkipTutorial'
+    > {
   /**
    * The inspection ID.
    */
@@ -45,6 +53,18 @@ export interface PhotoCaptureHUDProps
    * Global loading state of the PhotoCapture component.
    */
   loading: LoadingState;
+  /**
+   * The current tutorial step in PhotoCapture component.
+   */
+  currentTutorialStep: TutorialSteps | null;
+  /**
+   * Callback called when the user clicks on "Next" button in PhotoCapture tutorial.
+   */
+  onNextTutorialStep: () => void;
+  /**
+   * Callback called when the user clicks on "Close" button in PhotoCapture tutorial.
+   */
+  onCloseTutorial: () => void;
   /**
    * Callback called when the user manually select a new sight.
    */
@@ -74,12 +94,6 @@ export interface PhotoCaptureHUDProps
    * displayed.
    */
   onClose?: () => void;
-  /**
-   * Boolean indicating if the close button should be displayed in the HUD on top of the Camera preview.
-   *
-   * @default false
-   */
-  showCloseButton?: boolean;
   /**
    * The current images taken by the user (ignoring retaken pictures etc.).
    */
@@ -113,6 +127,10 @@ export function PhotoCaptureHUD({
   enableAddDamage,
   sightGuidelines,
   enableSightGuidelines,
+  currentTutorialStep,
+  allowSkipTutorial,
+  onNextTutorialStep,
+  onCloseTutorial,
 }: PhotoCaptureHUDProps) {
   const { t } = useTranslation();
   const [showCloseModal, setShowCloseModal] = useState(false);
@@ -154,6 +172,7 @@ export function PhotoCaptureHUD({
           enableAddDamage={enableAddDamage}
           sightGuidelines={sightGuidelines}
           enableSightGuidelines={enableSightGuidelines}
+          tutorialStep={currentTutorialStep}
         />
       </div>
       <PhotoCaptureHUDButtons
@@ -185,6 +204,14 @@ export function PhotoCaptureHUD({
         onCancel={() => setShowCloseModal(false)}
         onConfirm={handleCloseConfirm}
       />
+      <PhotoCaptureHUDTutorial
+        tutorialStep={handle.error || loading.error ? null : currentTutorialStep}
+        onNextTutorialStep={onNextTutorialStep}
+        onCloseTutorial={onCloseTutorial}
+        allowSkipTutorial={allowSkipTutorial}
+        sightId={selectedSight.id}
+        sightGuidelines={sightGuidelines}
+      />
     </div>
   );
 }

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

@@ -1,5 +1,5 @@
 import { CaptureAppConfig, Image, PixelDimensions, Sight } from '@monkvision/types';
-import { PhotoCaptureMode } from '../../hooks';
+import { PhotoCaptureMode, TutorialSteps } from '../../hooks';
 import { PhotoCaptureHUDElementsSight } from '../PhotoCaptureHUDElementsSight';
 import { PhotoCaptureHUDElementsAddDamage1stShot } from '../PhotoCaptureHUDElementsAddDamage1stShot';
 import { PhotoCaptureHUDElementsAddDamage2ndShot } from '../PhotoCaptureHUDElementsAddDamage2ndShot';
@@ -25,6 +25,10 @@ export interface PhotoCaptureHUDElementsProps
    * The current mode of the component.
    */
   mode: PhotoCaptureMode;
+  /**
+   * The current tutorial step in PhotoCapture component.
+   */
+  tutorialStep: TutorialSteps | null;
   /**
    * Callback called when the user presses the Add Damage button.
    */
@@ -80,6 +84,7 @@ export function PhotoCaptureHUDElements(params: PhotoCaptureHUDElementsProps) {
         enableAddDamage={params.enableAddDamage}
         sightGuidelines={params.sightGuidelines}
         enableSightGuidelines={params.enableSightGuidelines}
+        tutorialStep={params.tutorialStep}
       />
     );
   }

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/PhotoCaptureHUDElementsSight.styles.ts

@@ -15,7 +15,6 @@ export const styles: Styles = {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'space-between',
-    zIndex: 9,
   },
   elementsContainerPortrait: {
     __media: { portrait: true },

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

@@ -4,7 +4,7 @@ import { styles } from './PhotoCaptureHUDElementsSight.styles';
 import { AddDamageButton } from './AddDamageButton';
 import { PhotoCaptureHUDElementsSightProps, usePhotoCaptureHUDSightPreviewStyle } from './hooks';
 import { PhotoCaptureHUDCounter } from '../PhotoCaptureHUDCounter';
-import { PhotoCaptureMode } from '../../hooks';
+import { PhotoCaptureMode, TutorialSteps } from '../../hooks';
 import { SightGuideline } from './SightGuideline';
 
 /**
@@ -23,38 +23,43 @@ export function PhotoCaptureHUDElementsSight({
   enableAddDamage,
   sightGuidelines,
   enableSightGuidelines,
+  tutorialStep,
 }: PhotoCaptureHUDElementsSightProps) {
   const style = usePhotoCaptureHUDSightPreviewStyle({ previewDimensions });
 
+  const showSight = previewDimensions && (!tutorialStep || tutorialStep === TutorialSteps.SIGHT);
+
   return (
     <div style={styles['container']}>
-      {previewDimensions && <SightOverlay style={style.overlay} sight={selectedSight} />}
-      <div style={style.elementsContainer}>
-        <div style={style.top}>
-          <SightGuideline
-            sightId={selectedSight.id}
-            sightGuidelines={sightGuidelines}
-            enableSightGuidelines={enableSightGuidelines}
-            enableAddDamage={enableAddDamage}
-          />
-          <AddDamageButton onAddDamage={onAddDamage} enableAddDamage={enableAddDamage} />
-        </div>
-        <div style={style.bottom}>
-          <PhotoCaptureHUDCounter
-            mode={PhotoCaptureMode.SIGHT}
-            totalSights={sights.length}
-            sightsTaken={sightsTaken.length}
-          />
-          <SightSlider
-            sights={sights}
-            selectedSight={selectedSight}
-            sightsTaken={sightsTaken}
-            onSelectedSight={onSelectedSight}
-            onRetakeSight={onRetakeSight}
-            images={images}
-          />
+      {showSight && <SightOverlay style={style.overlay} sight={selectedSight} />}
+      {!tutorialStep && (
+        <div style={style.elementsContainer}>
+          <div style={style.top}>
+            <SightGuideline
+              sightId={selectedSight.id}
+              sightGuidelines={sightGuidelines}
+              enableSightGuidelines={enableSightGuidelines}
+              enableAddDamage={enableAddDamage}
+            />
+            <AddDamageButton onAddDamage={onAddDamage} enableAddDamage={enableAddDamage} />
+          </div>
+          <div style={style.bottom}>
+            <PhotoCaptureHUDCounter
+              mode={PhotoCaptureMode.SIGHT}
+              totalSights={sights.length}
+              sightsTaken={sightsTaken.length}
+            />
+            <SightSlider
+              sights={sights}
+              selectedSight={selectedSight}
+              sightsTaken={sightsTaken}
+              onSelectedSight={onSelectedSight}
+              onRetakeSight={onRetakeSight}
+              images={images}
+            />
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/hooks.ts

@@ -2,6 +2,7 @@ import { CaptureAppConfig, Image, PixelDimensions, Sight } from '@monkvision/typ
 import { useResponsiveStyle } from '@monkvision/common';
 import { CSSProperties } from 'react';
 import { styles } from './PhotoCaptureHUDElementsSight.styles';
+import { TutorialSteps } from '../../hooks';
 
 /**
  * Props of the PhotoCaptureHUDElementsSight component.
@@ -16,6 +17,10 @@ export interface PhotoCaptureHUDElementsSightProps
    * The currently selected sight in the PhotoCapture component : the sight that the user needs to capture.
    */
   selectedSight: Sight;
+  /**
+   * The current tutorial step in PhotoCapture component.
+   */
+  tutorialStep: TutorialSteps | null;
   /**
    * Callback called when the user manually select a new sight.
    */

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/index.ts

@@ -1,4 +1,5 @@
 export * from './SightSlider';
 export * from './AddDamageButton';
+export * from './SightGuideline';
 export { PhotoCaptureHUDElementsSight } from './PhotoCaptureHUDElementsSight';
 export { type PhotoCaptureHUDElementsSightProps } from './hooks';