Added sight guidelines

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

@@ -1,6 +1,7 @@
 {
   "allowSkipRetake": true,
-  "enableAddDamage": true,
+  "enableAddDamage": false,
+  "enableSightGuideline": true,
   "allowVehicleTypeSelection": true,
   "allowManualLogin": true,
   "fetchFromSearchParams": true,
@@ -183,6 +184,22 @@
       "ff150-7nvlys8r"
     ]
   },
+  "sightGuidelines": [
+    {
+      "en": "Stand centred in front of the vehicle",
+      "fr": "Placez-vous centré devant le véhicule",
+      "de": "Stellen Sie sich zentriert vor das Fahrzeug",
+      "nl": "Plaats jezelf in het midden voor het voertuig",
+      "sightIds": ["jgc21-QIvfeg0X", "ff150-zXbg0l3z"]
+    },
+    {
+      "en": "Stand centred in front of the vehicle, aligned with the front grille. Center the vehicle in the frame, ensuring the entire hood, windshield and side mirrors are visible. Include the top of the vehicle in the shot.",
+      "fr": "Placez-vous au centré devant le véhicule, aligné avec la calandre avant. Centrez le véhicule dans le cadre, en veillant à ce que l'ensemble du capot, du pare-brise et des rétroviseurs soient visibles. Incluez le haut du véhicule dans la prise de vue.",
+      "de": "Stellen Sie sich zentriert vor das Fahrzeug, ausgerichtet an der Frontstoßstange. Zentrieren Sie das Fahrzeug im Rahmen, achten Sie darauf, dass die gesamte Motorhaube, die Windschutzscheibe und die Seitenspiegel sichtbar sind. Nehmen Sie die Oberseite des Fahrzeugs in den Schuss auf.",
+      "nl": "Plaats jezelf in het midden voor het voertuig, uitgelijnd met de voorgril. Centreren Sie het voertuig in de beeldframe, zorg ervoor dat de hele motorkap, de voorruit en de zijspiegels zichtbaar zijn. Neem de bovenkant van het voertuig op in de opname.",
+      "sightIds": ["jgc21-KyUUVU2P", "ffocus18-XlfgjQb9 ", "ff150-3he9UOwy"]
+    }
+  ],
   "requiredApiPermissions": [
     "monk_core_api:compliances",
     "monk_core_api:damage_detection",

configs/test-utils/src/__mocks__/@monkvision/common.tsx

@@ -119,4 +119,5 @@ export = {
   useSearchParams: jest.fn(() => ({ get: jest.fn(() => null) })),
   useObjectMemo: jest.fn((obj) => obj),
   usePreventExit: jest.fn(),
+  getLanguage: jest.fn(),
 };

documentation/src/utils/schemas.ts

@@ -92,6 +92,14 @@ export const ComplianceOptionsSchema = z.object({
     .refine(validateSightIds, getInvalidSightIdsMessage),
 });
 
+export const SightGuidelineSchema = z.object({
+  sightIds: z.array(z.string()),
+  en: z.string(),
+  fr: z.string(),
+  de: z.string(),
+  nl: z.string(),
+});
+
 export const AccentColorVariantsSchema = z.object({
   xdark: z.string(),
   dark: z.string(),
@@ -220,6 +228,8 @@ export const LiveConfigSchema = z
     useAdaptiveImageQuality: z.boolean().optional(),
     allowSkipRetake: z.boolean().optional(),
     enableAddDamage: z.boolean().optional(),
+    enableSightGuideline: z.boolean().optional(),
+    sightGuidelines: z.array(SightGuidelineSchema),
     defaultVehicleType: z.nativeEnum(VehicleType),
     allowManualLogin: z.boolean(),
     allowVehicleTypeSelection: z.boolean(),

packages/common-ui-web/src/components/Button/Button.tsx

@@ -72,12 +72,14 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       () => (
         <>
           {icon && (
-            <Icon
-              icon={icon}
-              size={iconStyle.size}
-              primaryColor={iconStyle.color}
-              style={iconStyle.style}
-            />
+            <div style={{ width: iconStyle.size, height: iconStyle.size, ...iconStyle.style }}>
+              <Icon
+                icon={icon}
+                primaryColor={iconStyle.color}
+                size={iconStyle.size}
+                style={iconStyle.style}
+              />
+            </div>
           )}
           {children}
         </>

packages/common-ui-web/src/components/Button/hooks.ts

@@ -156,6 +156,12 @@ export function useButtonStyle(params: MonkButtonStyleParams): MonkButtonStyle {
     const contentSize =
       params.size === 'normal' ? BUTTON_CONTENT_SIZE_NORMAL : BUTTON_CONTENT_SIZE_SMALL;
 
+    const iconStyle = {
+      ...styles['icon'],
+      ...(params.size === 'small' ? styles['iconSmall'] : {}),
+      ...(!params.hasChildren ? styles['iconOnly'] : {}),
+    };
+
     return {
       style: {
         ...styles['button'],
@@ -172,14 +178,17 @@ export function useButtonStyle(params: MonkButtonStyleParams): MonkButtonStyle {
         backgroundColor,
       },
       iconStyle: {
-        style: {
-          ...styles['icon'],
-          ...(params.size === 'small' ? styles['iconSmall'] : {}),
-          ...(!params.hasChildren ? styles['iconOnly'] : {}),
-        },
+        style: iconStyle,
         color: foregroundColor,
         size: contentSize,
       },
+      iconContainerStyle: {
+        style: {
+          width: contentSize,
+          height: contentSize,
+          ...iconStyle,
+        },
+      },
       spinnerStyle: {
         style: {
           top: `calc(50% - ${contentSize / 2}px)`,

packages/common/src/hooks/useObjectTranslation.ts

@@ -1,6 +1,7 @@
-import { MonkLanguage, TranslationObject } from '@monkvision/types';
+import { TranslationObject } from '@monkvision/types';
 import { useTranslation } from 'react-i18next';
 import { useCallback } from 'react';
+import { getLanguage } from '../i18n';
 
 /**
  * The result of the useObjectTranslation. It contains a function which takes a LabelTranslation object and return the
@@ -20,8 +21,7 @@ export function useObjectTranslation(): UseObjectTranslationResult {
   const { i18n } = useTranslation();
   const tObj = useCallback(
     (obj: TranslationObject) => {
-      const lang = i18n.language.slice(0, 2) as MonkLanguage;
-      return obj[lang] ?? 'translation-not-found';
+      return obj[getLanguage(i18n.language)] ?? 'translation-not-found';
     },
     [i18n.language],
   );

packages/common/src/i18n/utils.tsx

@@ -9,7 +9,7 @@ import {
   useEffect,
 } from 'react';
 import { I18nextProvider, initReactI18next, useTranslation } from 'react-i18next';
-import { monkLanguages } from '@monkvision/types';
+import { MonkLanguage, monkLanguages } from '@monkvision/types';
 
 /**
  * This custom hook automatically updates the current i18n instance's language with the given language if is it not null
@@ -88,3 +88,16 @@ export function i18nWrap<T, P>(
     </I18nextProvider>
   ));
 }
+
+/**
+ * This function retrieves the language prefix from a given language string.
+ * If the prefix is not found in the list of supported languages (monkLanguages in Types package), defaults to 'en'.
+ *
+ * @param language - The full language string (e.g., 'en-US', 'fr-CA').
+ * @returns The language prefix if it is supported; otherwise, 'en'.
+ *
+ */
+export function getLanguage(language: string): MonkLanguage {
+  const languagePrefix = language.slice(0, 2) as MonkLanguage;
+  return monkLanguages.includes(languagePrefix) ? languagePrefix : 'en';
+}

packages/inspection-capture-web/README.md

@@ -88,3 +88,5 @@ export function MonkPhotoCapturePage({ authToken }) {
 | customComplianceThresholds         | `CustomComplianceThresholds`                 | Custom thresholds that can be used to modify the strictness of the compliance for certain compliance issues.                                                                                     |          |                             |
 | customComplianceThresholdsPerSight | `Record<string, CustomComplianceThresholds>` | A map associating Sight IDs to custom compliance thresholds.                                                                                                                                     |          |                             |
 | validateButtonLabel                | `string`                                     | Custom label for validate button in gallery view.                                                                                                                                                |          |                             |
+| enableSightGuideline               | `boolean`                                    | Boolean indicating whether the sight guideline feature is enabled. If disabled, the guideline text will be hidden.                                                                               |          | `true`                      |
+| sightGuidelines                    | `sightGuideline[]`                           | A collection of sight guidelines in different language with a list of sightIds associate to it.                                                                                                  |          |                             |

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

@@ -57,6 +57,8 @@ export interface PhotoCaptureProps
       | 'enforceOrientation'
       | 'allowSkipRetake'
       | 'enableAddDamage'
+      | 'sightGuidelines'
+      | 'enableSightGuidelines'
     >,
     Partial<CompressionOptions>,
     Partial<ComplianceOptions> {
@@ -122,6 +124,8 @@ export function PhotoCapture({
   useLiveCompliance = false,
   allowSkipRetake = false,
   enableAddDamage = true,
+  sightGuidelines,
+  enableSightGuidelines = true,
   useAdaptiveImageQuality = true,
   lang,
   enforceOrientation,
@@ -249,6 +253,8 @@ export function PhotoCapture({
     showCloseButton,
     images,
     enableAddDamage,
+    sightGuidelines,
+    enableSightGuidelines,
   };
 
   return (

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

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Image, ImageStatus, Sight } from '@monkvision/types';
+import { CaptureAppConfig, Image, ImageStatus, Sight } from '@monkvision/types';
 import { useTranslation } from 'react-i18next';
 import { BackdropDialog } from '@monkvision/common-ui-web';
 import { CameraHUDProps } from '@monkvision/camera-web';
@@ -14,7 +14,9 @@ import { PhotoCaptureHUDElements } from './PhotoCaptureHUDElements';
 /**
  * Props of the PhotoCaptureHUD component.
  */
-export interface PhotoCaptureHUDProps extends CameraHUDProps {
+export interface PhotoCaptureHUDProps
+  extends CameraHUDProps,
+    Pick<CaptureAppConfig, 'enableSightGuidelines' | 'sightGuidelines' | 'enableAddDamage'> {
   /**
    * The inspection ID.
    */
@@ -82,12 +84,6 @@ export interface PhotoCaptureHUDProps extends CameraHUDProps {
    * The current images taken by the user (ignoring retaken pictures etc.).
    */
   images: Image[];
-  /**
-   * Boolean indicating if `Add Damage` feature should be enabled or not. If disabled, the `Add Damage` button will be hidden.
-   *
-   * @default true
-   */
-  enableAddDamage?: boolean;
 }
 
 /**
@@ -115,6 +111,8 @@ export function PhotoCaptureHUD({
   cameraPreview,
   images,
   enableAddDamage,
+  sightGuidelines,
+  enableSightGuidelines,
 }: PhotoCaptureHUDProps) {
   const { t } = useTranslation();
   const [showCloseModal, setShowCloseModal] = useState(false);
@@ -154,6 +152,8 @@ export function PhotoCaptureHUD({
           previewDimensions={handle.previewDimensions}
           images={images}
           enableAddDamage={enableAddDamage}
+          sightGuidelines={sightGuidelines}
+          enableSightGuidelines={enableSightGuidelines}
         />
       </div>
       <PhotoCaptureHUDButtons

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

@@ -24,7 +24,6 @@ export const styles: Styles = {
     justifyContent: 'space-evenly',
     flexDirection: 'column',
     padding: '30px 40px',
-    zIndex: '9',
     backgroundColor: '#00000080',
     position: 'absolute',
   },

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

@@ -1,4 +1,4 @@
-import { Image, PixelDimensions, Sight } from '@monkvision/types';
+import { CaptureAppConfig, Image, PixelDimensions, Sight } from '@monkvision/types';
 import { PhotoCaptureMode } from '../../hooks';
 import { PhotoCaptureHUDElementsSight } from '../PhotoCaptureHUDElementsSight';
 import { PhotoCaptureHUDElementsAddDamage1stShot } from '../PhotoCaptureHUDElementsAddDamage1stShot';
@@ -7,7 +7,8 @@ import { PhotoCaptureHUDElementsAddDamage2ndShot } from '../PhotoCaptureHUDEleme
 /**
  * Props of the PhotoCaptureHUDElements component.
  */
-export interface PhotoCaptureHUDElementsProps {
+export interface PhotoCaptureHUDElementsProps
+  extends Pick<CaptureAppConfig, 'enableSightGuidelines' | 'sightGuidelines' | 'enableAddDamage'> {
   /**
    * The currently selected sight in the PhotoCapture component : the sight that the user needs to capture.
    */
@@ -56,12 +57,6 @@ export interface PhotoCaptureHUDElementsProps {
    * The current images taken by the user (ignoring retaken pictures etc.).
    */
   images: Image[];
-  /**
-   * Boolean indicating if `Add Damage` feature should be enabled or not. If disabled, the `Add Damage` button will be hidden.
-   *
-   * @default true
-   */
-  enableAddDamage?: boolean;
 }
 
 /**
@@ -83,6 +78,8 @@ export function PhotoCaptureHUDElements(params: PhotoCaptureHUDElementsProps) {
         previewDimensions={params.previewDimensions}
         images={params.images}
         enableAddDamage={params.enableAddDamage}
+        sightGuidelines={params.sightGuidelines}
+        enableSightGuidelines={params.enableSightGuidelines}
       />
     );
   }

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

@@ -1,5 +1,4 @@
 import { Button } from '@monkvision/common-ui-web';
-import { CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePhotoCaptureHUDButtonBackground } from '../../hooks';
 
@@ -19,10 +18,6 @@ export interface AddDamageButtonProps {
   enableAddDamage?: boolean;
 }
 
-function getButtonStyle(enableAddDamage?: boolean): CSSProperties {
-  return { visibility: enableAddDamage ? 'visible' : 'hidden' };
-}
-
 /**
  * Custom button displayed in the PhotoCapture Camera HUD that allows user to enter add damage mode.
  */
@@ -31,15 +26,17 @@ export function AddDamageButton({ onAddDamage, enableAddDamage }: AddDamageButto
   const primaryColor = usePhotoCaptureHUDButtonBackground();
 
   return (
-    <Button
-      icon='add'
-      style={getButtonStyle(enableAddDamage)}
-      disabled={!enableAddDamage}
-      onClick={onAddDamage}
-      data-testid='monk-test-btn'
-      primaryColor={primaryColor}
-    >
-      {t('photo.hud.sight.addDamageBtn')}
-    </Button>
+    <>
+      {enableAddDamage && (
+        <Button
+          icon='add'
+          onClick={onAddDamage}
+          data-testid='monk-test-btn'
+          primaryColor={primaryColor}
+        >
+          {t('photo.hud.sight.addDamageBtn')}
+        </Button>
+      )}
+    </>
   );
 }

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

@@ -24,9 +24,9 @@ export const styles: Styles = {
   top: {
     display: 'flex',
     alignSelf: 'stretch',
-    flexDirection: 'row',
     alignItems: 'start',
-    justifyContent: 'end',
+    justifyContent: 'space-between',
+    gap: 10,
     margin: 10,
   },
   bottom: {
@@ -36,7 +36,4 @@ export const styles: Styles = {
     alignItems: 'center',
     zIndex: 9,
   },
-  overlay: {
-    zIndex: 9,
-  },
 };

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

@@ -5,6 +5,7 @@ import { AddDamageButton } from './AddDamageButton';
 import { PhotoCaptureHUDElementsSightProps, usePhotoCaptureHUDSightPreviewStyle } from './hooks';
 import { PhotoCaptureHUDCounter } from '../PhotoCaptureHUDCounter';
 import { PhotoCaptureMode } from '../../hooks';
+import { SightGuideline } from './SightGuideline';
 
 /**
  * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process when the current
@@ -20,14 +21,22 @@ export function PhotoCaptureHUDElementsSight({
   previewDimensions,
   images,
   enableAddDamage,
+  sightGuidelines,
+  enableSightGuidelines,
 }: PhotoCaptureHUDElementsSightProps) {
   const style = usePhotoCaptureHUDSightPreviewStyle({ previewDimensions });
 
   return (
     <div style={styles['container']}>
-      {previewDimensions && <SightOverlay style={style.overlay} sight={selectedSight} />}
+      {previewDimensions && <SightOverlay 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}>