Added SightTutorial to PhotoCapture

Author: dlymonkai

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

@@ -14,8 +14,8 @@
   },
   "apiDomain": "api.preview.monk.ai/v1",
   "thumbnailDomain": "api.preview.monk.ai/image_resize",
-  "enableSightTutorial": false,
   "enableTutorial": "first_time_only",
+  "enableSightTutorial": "classic",
   "startTasksOnComplete": true,
   "showCloseButton": false,
   "enforceOrientation": "landscape",

documentation/src/utils/schemas.ts

@@ -105,6 +105,14 @@ export const SightGuidelineSchema = z.object({
   nl: z.string(),
 });
 
+export const SightTutorialSchema = z.object({
+  imageReferenceBySightId: z.record(z.string().nullable()),
+  en: z.string(),
+  fr: z.string(),
+  de: z.string(),
+  nl: z.string(),
+});
+
 export const AccentColorVariantsSchema = z.object({
   xdark: z.string(),
   dark: z.string(),
@@ -322,6 +330,7 @@ export const LiveConfigSchema = z
     enableTutorial: z.nativeEnum(PhotoCaptureTutorialOption).optional(),
     allowSkipTutorial: z.boolean().optional(),
     enableSightTutorial: z.boolean().optional(),
+    sightTutorial: z.array(SightGuidelineSchema).optional(),
     defaultVehicleType: z.nativeEnum(VehicleType),
     allowManualLogin: z.boolean(),
     allowVehicleTypeSelection: z.boolean(),

documentation/src/utils/schemas/photoCaptureConfig.schema.ts

@@ -4,6 +4,7 @@ import { ComplianceOptionsSchema } from '@site/src/utils/schemas/compliance.sche
 import {
   CaptureWorkflow,
   PhotoCaptureSightGuidelinesOption,
+  PhotoCaptureSightTutorialOption,
   PhotoCaptureTutorialOption,
   TaskName,
   VehicleType,
@@ -33,7 +34,7 @@ export const PhotoCaptureAppConfigSchema = z
     allowVehicleTypeSelection: z.boolean(),
     enableTutorial: z.nativeEnum(PhotoCaptureTutorialOption).optional(),
     allowSkipTutorial: z.boolean().optional(),
-    enableSightTutorial: z.boolean().optional(),
+    enableSightTutorial: z.nativeEnum(PhotoCaptureSightTutorialOption).optional(),
   })
   .and(SharedCaptureAppConfigSchema)
   .and(ComplianceOptionsSchema)

packages/inspection-capture-web/README.md

@@ -85,6 +85,7 @@ export function MonkPhotoCapturePage({ authToken }) {
 | enableSightGuideline               | `boolean`                                    | Boolean indicating whether the sight guideline feature is enabled. If disabled, the guideline text will be hidden.                                                                               |          | `true`                                       |
 | enableTutorial                     | `PhotoCaptureTutorialOption`                 | Options for displaying the photo capture tutorial.                                                                                                                                               |          | `PhotoCaptureTutorialOption.FIRST_TIME_ONLY` |
 | allowSkipTutorial                  | `boolean`                                    | Boolean indicating if the user can skip the PhotoCapture tutorial.                                                                                                                               |          | `true`                                       |
+| sightTutorial                      | `sightTutorial[]`                            | A collection of sight tutorial in different language with a list of sightIds associate to it.                                                                                                    |          |                                              |
 | enableSightTutorial                | `boolean`                                    | Boolean indicating whether the sight tutorial feature is enabled.                                                                                                                                |          | `true`                                       |
 | enableCompliance                   | `boolean`                                    | Indicates if compliance checks should be enabled or not.                                                                                                                                         |          | `true`                                       |
 | enableCompliancePerSight           | `string[]`                                   | Array of Sight IDs that indicates for which sight IDs the compliance should be enabled.                                                                                                          |          |                                              |

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

@@ -2,7 +2,7 @@ import { Styles } from '@monkvision/types';
 
 export const styles: Styles = {
   container: {
-    height: '100%',
+    height: '100dvh',
     width: '100%',
   },
 };

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

@@ -16,6 +16,7 @@ import {
   PhotoCaptureAppConfig,
   PhotoCaptureSightGuidelinesOption,
   PhotoCaptureTutorialOption,
+  PhotoCaptureSightTutorialOption,
   Sight,
   VehicleType,
 } from '@monkvision/types';
@@ -38,6 +39,7 @@ import {
   usePhotoCaptureSightState,
   usePhotoCaptureTutorial,
   usePhotoCaptureSightGuidelines,
+  usePhotoCaptureSightTutorial,
   useInspectionComplete,
 } from './hooks';
 
@@ -62,6 +64,7 @@ export interface PhotoCaptureProps
       | 'enableTutorial'
       | 'allowSkipTutorial'
       | 'enableSightTutorial'
+      | 'sightTutorial'
     >,
     Partial<ComplianceOptions> {
   /**
@@ -138,7 +141,8 @@ export function PhotoCapture({
   sightGuidelines,
   enableTutorial = PhotoCaptureTutorialOption.FIRST_TIME_ONLY,
   allowSkipTutorial = true,
-  enableSightTutorial = true,
+  enableSightTutorial = PhotoCaptureSightTutorialOption.DISABLED,
+  sightTutorial,
   enableSightGuidelines = PhotoCaptureSightGuidelinesOption.EPHEMERAL,
   useAdaptiveImageQuality = true,
   lang,
@@ -205,6 +209,7 @@ export function PhotoCapture({
     enableSightGuidelines,
     enableSightTutorial,
   });
+  const { showSightTutorial, toggleSightTutorial } = usePhotoCaptureSightTutorial();
   const { showSightGuidelines, handleDisableSightGuidelines } = usePhotoCaptureSightGuidelines({
     enableSightGuidelines,
   });
@@ -280,6 +285,10 @@ export function PhotoCapture({
     allowSkipTutorial,
     enforceOrientation,
     vehicleType,
+    sightTutorial,
+    enableSightTutorial,
+    showSightTutorial,
+    toggleSightTutorial,
   };
 
   return (

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

@@ -18,6 +18,7 @@ import { PhotoCaptureHUDElements } from './PhotoCaptureHUDElements';
 import { PhotoCaptureHUDTutorial } from './PhotoCaptureHUDTutorial';
 import { CaptureMode } from '../../types';
 import { HUDButtons, HUDOverlay, OrientationEnforcer } from '../../components';
+import { PhotoCaptureHUDSightTutorial } from './PhotoCaptureHUDSightTutorial';
 
 /**
  * Props of the PhotoCaptureHUD component.
@@ -31,6 +32,8 @@ export interface PhotoCaptureHUDProps
       | 'showCloseButton'
       | 'allowSkipTutorial'
       | 'enforceOrientation'
+      | 'enableSightTutorial'
+      | 'sightTutorial'
     > {
   /**
    * The inspection ID.
@@ -129,6 +132,14 @@ export interface PhotoCaptureHUDProps
    * Boolean indicating whether the sight guidelines should be displayed.
    */
   showSightGuidelines: boolean;
+  /**
+   * Boolean indicating whether the sight tutorial should be displayed.
+   */
+  showSightTutorial: boolean;
+  /**
+   * Callback called when the user clicks on the "help" button in PhotoCapture.
+   */
+  toggleSightTutorial: () => void;
 }
 
 /**
@@ -168,6 +179,10 @@ export function PhotoCaptureHUD({
   enforceOrientation,
   vehicleType,
   onDisableSightGuidelines,
+  sightTutorial,
+  enableSightTutorial,
+  showSightTutorial,
+  toggleSightTutorial,
 }: PhotoCaptureHUDProps) {
   const { t } = useTranslation();
   const [showCloseModal, setShowCloseModal] = useState(false);
@@ -214,6 +229,8 @@ export function PhotoCaptureHUD({
           tutorialStep={currentTutorialStep}
           vehicleType={vehicleType}
           onDisableSightGuidelines={onDisableSightGuidelines}
+          enableSightTutorial={enableSightTutorial}
+          toggleSightTutorial={toggleSightTutorial}
         />
       </div>
       {mode !== CaptureMode.ADD_DAMAGE_PART_SELECT && (
@@ -255,6 +272,14 @@ export function PhotoCaptureHUD({
         sightId={selectedSight.id}
         sightGuidelines={sightGuidelines}
         addDamage={addDamage}
+        toggleSightTutorial={toggleSightTutorial}
+      />
+      <PhotoCaptureHUDSightTutorial
+        show={showSightTutorial}
+        sightTutorial={sightTutorial}
+        selectedSight={selectedSight}
+        onClose={toggleSightTutorial}
+        enableSightTutorial={enableSightTutorial}
       />
       <OrientationEnforcer orientation={enforceOrientation} />
     </div>

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

@@ -15,7 +15,7 @@ import { CaptureMode } from '../../../types';
  * Props of the PhotoCaptureHUDElements component.
  */
 export interface PhotoCaptureHUDElementsProps
-  extends Pick<PhotoCaptureAppConfig, 'sightGuidelines' | 'addDamage'> {
+  extends Pick<PhotoCaptureAppConfig, 'sightGuidelines' | 'addDamage' | 'enableSightTutorial'> {
   /**
    * The currently selected sight in the PhotoCapture component : the sight that the user needs to capture.
    */
@@ -88,6 +88,10 @@ export interface PhotoCaptureHUDElementsProps
    * Boolean indicating whether the sight guidelines should be displayed.
    */
   showSightGuidelines?: boolean;
+  /**
+   * Callback called when the user clicks on the "help" button in PhotoCapture.
+   */
+  toggleSightTutorial?: () => void;
 }
 
 /**
@@ -113,6 +117,8 @@ export function PhotoCaptureHUDElements(params: PhotoCaptureHUDElementsProps) {
         showSightGuidelines={params.showSightGuidelines}
         tutorialStep={params.tutorialStep}
         onDisableSightGuidelines={params.onDisableSightGuidelines}
+        enableSightTutorial={params.enableSightTutorial}
+        toggleSightTutorial={params.toggleSightTutorial}
       />
     );
   }

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

@@ -36,4 +36,5 @@ export const styles: Styles = {
     zIndex: 9,
     paddingBottom: '12px',
   },
+  sightTutorialButton: { padding: '8px' },
 };

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

@@ -1,11 +1,12 @@
 import { SightOverlay } from '@monkvision/common-ui-web';
+import { PhotoCaptureSightTutorialOption } from '@monkvision/types';
 import { SightSlider } from './SightSlider';
 import { styles } from './PhotoCaptureHUDElementsSight.styles';
 import { AddDamageButton } from './AddDamageButton';
 import { PhotoCaptureHUDElementsSightProps, usePhotoCaptureHUDSightPreviewStyle } from './hooks';
 import { TutorialSteps } from '../../hooks';
 import { SightGuideline } from './SightGuideline';
-import { Counter } from '../../../components';
+import { Counter, SightTutorialButton } from '../../../components';
 import { CaptureMode } from '../../../types';
 
 /**
@@ -26,6 +27,8 @@ export function PhotoCaptureHUDElementsSight({
   sightGuidelines,
   showSightGuidelines,
   tutorialStep,
+  enableSightTutorial,
+  toggleSightTutorial,
 }: PhotoCaptureHUDElementsSightProps) {
   const style = usePhotoCaptureHUDSightPreviewStyle({ previewDimensions });
 
@@ -37,6 +40,9 @@ export function PhotoCaptureHUDElementsSight({
       {!tutorialStep && (
         <div style={style.elementsContainer}>
           <div style={style.top}>
+            {enableSightTutorial !== PhotoCaptureSightTutorialOption.DISABLED && (
+              <SightTutorialButton toggleSightTutorial={toggleSightTutorial} />
+            )}
             <SightGuideline
               sightId={selectedSight.id}
               sightGuidelines={sightGuidelines}

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

@@ -8,7 +8,7 @@ import { TutorialSteps } from '../../hooks';
  * Props of the PhotoCaptureHUDElementsSight component.
  */
 export interface PhotoCaptureHUDElementsSightProps
-  extends Pick<PhotoCaptureAppConfig, 'sightGuidelines' | 'addDamage'> {
+  extends Pick<PhotoCaptureAppConfig, 'sightGuidelines' | 'addDamage' | 'enableSightTutorial'> {
   /**
    * The list of sights provided to the PhotoCapture component.
    */
@@ -53,6 +53,10 @@ export interface PhotoCaptureHUDElementsSightProps
    * Boolean indicating whether the sight guidelines should be displayed.
    */
   showSightGuidelines?: boolean;
+  /**
+   * Callback called when the user clicks on the "help" button in PhotoCapture.
+   */
+  toggleSightTutorial?: () => void;
 }
 
 export function usePhotoCaptureHUDSightPreviewStyle({