@monkvision/inspection-capture-web 5.0.21 → 5.1.0

package/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.                                                                                                          |          |                                              |

package/lib/PhotoCapture/PhotoCapture.d.ts

@@ -4,7 +4,7 @@ import { CameraConfig, ComplianceOptions, MonkPicture, PhotoCaptureAppConfig, Si
 /**
  * Props of the PhotoCapture component.
  */
-export interface PhotoCaptureProps extends Pick<PhotoCaptureAppConfig, keyof CameraConfig | 'maxUploadDurationWarning' | 'useAdaptiveImageQuality' | 'additionalTasks' | 'tasksBySight' | 'startTasksOnComplete' | 'showCloseButton' | 'enforceOrientation' | 'allowSkipRetake' | 'addDamage' | 'sightGuidelines' | 'enableSightGuidelines' | 'enableTutorial' | 'allowSkipTutorial' | 'enableSightTutorial'>, Partial<ComplianceOptions> {
+export interface PhotoCaptureProps extends Pick<PhotoCaptureAppConfig, keyof CameraConfig | 'maxUploadDurationWarning' | 'useAdaptiveImageQuality' | 'additionalTasks' | 'tasksBySight' | 'startTasksOnComplete' | 'showCloseButton' | 'enforceOrientation' | 'allowSkipRetake' | 'addDamage' | 'sightGuidelines' | 'enableSightGuidelines' | 'enableTutorial' | 'allowSkipTutorial' | 'enableSightTutorial' | 'sightTutorial'>, Partial<ComplianceOptions> {
     /**
      * The list of sights to take pictures of. The values in this array should be retreived from the `@monkvision/sights`
      * package.
@@ -48,4 +48,4 @@ export interface PhotoCaptureProps extends Pick<PhotoCaptureAppConfig, keyof Cam
      */
     validateButtonLabel?: string;
 }
-export declare function PhotoCapture({ sights, inspectionId, apiConfig, additionalTasks, tasksBySight, startTasksOnComplete, onClose, onComplete, onPictureTaken, maxUploadDurationWarning, showCloseButton, enableCompliance, enableCompliancePerSight, complianceIssues, complianceIssuesPerSight, customComplianceThresholds, customComplianceThresholdsPerSight, useLiveCompliance, allowSkipRetake, addDamage, sightGuidelines, enableTutorial, allowSkipTutorial, enableSightTutorial, enableSightGuidelines, useAdaptiveImageQuality, lang, enforceOrientation, validateButtonLabel, vehicleType, ...initialCameraConfig }: PhotoCaptureProps): JSX.Element;
+export declare function PhotoCapture({ sights, inspectionId, apiConfig, additionalTasks, tasksBySight, startTasksOnComplete, onClose, onComplete, onPictureTaken, maxUploadDurationWarning, showCloseButton, enableCompliance, enableCompliancePerSight, complianceIssues, complianceIssuesPerSight, customComplianceThresholds, customComplianceThresholdsPerSight, useLiveCompliance, allowSkipRetake, addDamage, sightGuidelines, enableTutorial, allowSkipTutorial, enableSightTutorial, sightTutorial, enableSightGuidelines, useAdaptiveImageQuality, lang, enforceOrientation, validateButtonLabel, vehicleType, ...initialCameraConfig }: PhotoCaptureProps): JSX.Element;

package/lib/PhotoCapture/PhotoCapture.js

@@ -42,7 +42,7 @@ var PhotoCaptureScreen;
 })(PhotoCaptureScreen || (PhotoCaptureScreen = {}));
 // No ts-doc for this component : the component exported is PhotoCaptureHOC
 function PhotoCapture(_a) {
-    var sights = _a.sights, inspectionId = _a.inspectionId, apiConfig = _a.apiConfig, additionalTasks = _a.additionalTasks, tasksBySight = _a.tasksBySight, _b = _a.startTasksOnComplete, startTasksOnComplete = _b === void 0 ? true : _b, onClose = _a.onClose, onComplete = _a.onComplete, onPictureTaken = _a.onPictureTaken, _c = _a.maxUploadDurationWarning, maxUploadDurationWarning = _c === void 0 ? 15000 : _c, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? false : _d, _e = _a.enableCompliance, enableCompliance = _e === void 0 ? true : _e, enableCompliancePerSight = _a.enableCompliancePerSight, complianceIssues = _a.complianceIssues, complianceIssuesPerSight = _a.complianceIssuesPerSight, customComplianceThresholds = _a.customComplianceThresholds, customComplianceThresholdsPerSight = _a.customComplianceThresholdsPerSight, _f = _a.useLiveCompliance, useLiveCompliance = _f === void 0 ? false : _f, _g = _a.allowSkipRetake, allowSkipRetake = _g === void 0 ? false : _g, _h = _a.addDamage, addDamage = _h === void 0 ? types_1.AddDamage.PART_SELECT : _h, sightGuidelines = _a.sightGuidelines, _j = _a.enableTutorial, enableTutorial = _j === void 0 ? types_1.PhotoCaptureTutorialOption.FIRST_TIME_ONLY : _j, _k = _a.allowSkipTutorial, allowSkipTutorial = _k === void 0 ? true : _k, _l = _a.enableSightTutorial, enableSightTutorial = _l === void 0 ? true : _l, _m = _a.enableSightGuidelines, enableSightGuidelines = _m === void 0 ? types_1.PhotoCaptureSightGuidelinesOption.EPHEMERAL : _m, _o = _a.useAdaptiveImageQuality, useAdaptiveImageQuality = _o === void 0 ? true : _o, lang = _a.lang, enforceOrientation = _a.enforceOrientation, validateButtonLabel = _a.validateButtonLabel, _p = _a.vehicleType, vehicleType = _p === void 0 ? types_1.VehicleType.SEDAN : _p, initialCameraConfig = __rest(_a, ["sights", "inspectionId", "apiConfig", "additionalTasks", "tasksBySight", "startTasksOnComplete", "onClose", "onComplete", "onPictureTaken", "maxUploadDurationWarning", "showCloseButton", "enableCompliance", "enableCompliancePerSight", "complianceIssues", "complianceIssuesPerSight", "customComplianceThresholds", "customComplianceThresholdsPerSight", "useLiveCompliance", "allowSkipRetake", "addDamage", "sightGuidelines", "enableTutorial", "allowSkipTutorial", "enableSightTutorial", "enableSightGuidelines", "useAdaptiveImageQuality", "lang", "enforceOrientation", "validateButtonLabel", "vehicleType"]);
+    var sights = _a.sights, inspectionId = _a.inspectionId, apiConfig = _a.apiConfig, additionalTasks = _a.additionalTasks, tasksBySight = _a.tasksBySight, _b = _a.startTasksOnComplete, startTasksOnComplete = _b === void 0 ? true : _b, onClose = _a.onClose, onComplete = _a.onComplete, onPictureTaken = _a.onPictureTaken, _c = _a.maxUploadDurationWarning, maxUploadDurationWarning = _c === void 0 ? 15000 : _c, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? false : _d, _e = _a.enableCompliance, enableCompliance = _e === void 0 ? true : _e, enableCompliancePerSight = _a.enableCompliancePerSight, complianceIssues = _a.complianceIssues, complianceIssuesPerSight = _a.complianceIssuesPerSight, customComplianceThresholds = _a.customComplianceThresholds, customComplianceThresholdsPerSight = _a.customComplianceThresholdsPerSight, _f = _a.useLiveCompliance, useLiveCompliance = _f === void 0 ? false : _f, _g = _a.allowSkipRetake, allowSkipRetake = _g === void 0 ? false : _g, _h = _a.addDamage, addDamage = _h === void 0 ? types_1.AddDamage.PART_SELECT : _h, sightGuidelines = _a.sightGuidelines, _j = _a.enableTutorial, enableTutorial = _j === void 0 ? types_1.PhotoCaptureTutorialOption.FIRST_TIME_ONLY : _j, _k = _a.allowSkipTutorial, allowSkipTutorial = _k === void 0 ? true : _k, _l = _a.enableSightTutorial, enableSightTutorial = _l === void 0 ? types_1.PhotoCaptureSightTutorialOption.DISABLED : _l, sightTutorial = _a.sightTutorial, _m = _a.enableSightGuidelines, enableSightGuidelines = _m === void 0 ? types_1.PhotoCaptureSightGuidelinesOption.EPHEMERAL : _m, _o = _a.useAdaptiveImageQuality, useAdaptiveImageQuality = _o === void 0 ? true : _o, lang = _a.lang, enforceOrientation = _a.enforceOrientation, validateButtonLabel = _a.validateButtonLabel, _p = _a.vehicleType, vehicleType = _p === void 0 ? types_1.VehicleType.SEDAN : _p, initialCameraConfig = __rest(_a, ["sights", "inspectionId", "apiConfig", "additionalTasks", "tasksBySight", "startTasksOnComplete", "onClose", "onComplete", "onPictureTaken", "maxUploadDurationWarning", "showCloseButton", "enableCompliance", "enableCompliancePerSight", "complianceIssues", "complianceIssuesPerSight", "customComplianceThresholds", "customComplianceThresholdsPerSight", "useLiveCompliance", "allowSkipRetake", "addDamage", "sightGuidelines", "enableTutorial", "allowSkipTutorial", "enableSightTutorial", "sightTutorial", "enableSightGuidelines", "useAdaptiveImageQuality", "lang", "enforceOrientation", "validateButtonLabel", "vehicleType"]);
     (0, common_1.useI18nSync)(lang);
     var complianceOptions = (0, common_1.useObjectMemo)({
         enableCompliance: enableCompliance,
@@ -92,18 +92,17 @@ function PhotoCapture(_a) {
         tasksBySight: tasksBySight,
         complianceOptions: complianceOptions,
         setIsInitialInspectionFetched: setIsInitialInspectionFetched,
-        startTasksOnComplete: startTasksOnComplete,
-        onComplete: onComplete,
     });
     var _s = (0, hooks_2.usePhotoCaptureTutorial)({
         enableTutorial: enableTutorial,
         enableSightGuidelines: enableSightGuidelines,
         enableSightTutorial: enableSightTutorial,
     }), currentTutorialStep = _s.currentTutorialStep, goToNextTutorialStep = _s.goToNextTutorialStep, closeTutorial = _s.closeTutorial;
-    var _t = (0, hooks_2.usePhotoCaptureSightGuidelines)({
+    var _t = (0, hooks_2.usePhotoCaptureSightTutorial)(), showSightTutorial = _t.showSightTutorial, toggleSightTutorial = _t.toggleSightTutorial;
+    var _u = (0, hooks_2.usePhotoCaptureSightGuidelines)({
         enableSightGuidelines: enableSightGuidelines,
-    }), showSightGuidelines = _t.showSightGuidelines, handleDisableSightGuidelines = _t.handleDisableSightGuidelines;
-    var _u = (0, hooks_1.useBadConnectionWarning)({ maxUploadDurationWarning: maxUploadDurationWarning }), isBadConnectionWarningDialogDisplayed = _u.isBadConnectionWarningDialogDisplayed, closeBadConnectionWarningDialog = _u.closeBadConnectionWarningDialog, badConnectionWarningUploadEventHandlers = _u.uploadEventHandlers;
+    }), showSightGuidelines = _u.showSightGuidelines, handleDisableSightGuidelines = _u.handleDisableSightGuidelines;
+    var _v = (0, hooks_1.useBadConnectionWarning)({ maxUploadDurationWarning: maxUploadDurationWarning }), isBadConnectionWarningDialogDisplayed = _v.isBadConnectionWarningDialogDisplayed, closeBadConnectionWarningDialog = _v.closeBadConnectionWarningDialog, badConnectionWarningUploadEventHandlers = _v.uploadEventHandlers;
     var uploadQueue = (0, hooks_1.useUploadQueue)({
         inspectionId: inspectionId,
         apiConfig: apiConfig,
@@ -119,11 +118,17 @@ function PhotoCapture(_a) {
         tasksBySight: tasksBySight,
         onPictureTaken: onPictureTaken,
     });
+    var updateDuration = (0, hooks_1.useCaptureDuration)({
+        inspectionId: inspectionId,
+        apiConfig: apiConfig,
+        isInspectionCompleted: sightState.isInspectionCompleted,
+    }).updateDuration;
     var handleInspectionCompleted = (0, hooks_2.useInspectionComplete)({
         startTasks: startTasks,
         sightState: sightState,
         loading: loading,
         startTasksOnComplete: startTasksOnComplete,
+        onUpdateDuration: updateDuration,
         onComplete: onComplete,
     }).handleInspectionCompleted;
     var handleGalleryBack = function () { return setCurrentScreen(PhotoCaptureScreen.CAMERA); };
@@ -173,6 +178,10 @@ function PhotoCapture(_a) {
         allowSkipTutorial: allowSkipTutorial,
         enforceOrientation: enforceOrientation,
         vehicleType: vehicleType,
+        sightTutorial: sightTutorial,
+        enableSightTutorial: enableSightTutorial,
+        showSightTutorial: showSightTutorial,
+        toggleSightTutorial: toggleSightTutorial,
     };
     return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: PhotoCapture_styles_1.styles['container'] }, { children: [currentScreen === PhotoCaptureScreen.CAMERA && ((0, jsx_runtime_1.jsx)(camera_web_1.Camera, __assign({ HUDComponent: PhotoCaptureHUD_1.PhotoCaptureHUD, onPictureTaken: handlePictureTaken, hudProps: hudProps }, adaptiveCameraConfig))), currentScreen === PhotoCaptureScreen.GALLERY && ((0, jsx_runtime_1.jsx)(common_ui_web_1.InspectionGallery, __assign({ inspectionId: inspectionId, apiConfig: apiConfig, captureMode: true, lang: lang, showBackButton: true, sights: sights, allowSkipRetake: allowSkipRetake, onBack: handleGalleryBack, onNavigateToCapture: handleNavigateToCapture, onValidate: handleInspectionCompleted, addDamage: addDamage, validateButtonLabel: validateButtonLabel, isInspectionCompleted: sightState.isInspectionCompleted }, complianceOptions))), (0, jsx_runtime_1.jsx)(common_ui_web_1.BackdropDialog, { show: isBadConnectionWarningDialogDisplayed, showCancelButton: false, dialogIcon: 'warning-outline', dialogIconPrimaryColor: 'caution-base', message: t('photo.badConnectionWarning.message'), confirmLabel: t('photo.badConnectionWarning.confirm'), onConfirm: closeBadConnectionWarningDialog })] })));
 }

package/lib/PhotoCapture/PhotoCapture.styles.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.styles = void 0;
 exports.styles = {
     container: {
-        height: '100%',
+        height: '100dvh',
         width: '100%',
     },
 };

package/lib/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.d.ts

@@ -7,7 +7,7 @@ import { CaptureMode } from '../../types';
 /**
  * Props of the PhotoCaptureHUD component.
  */
-export interface PhotoCaptureHUDProps extends CameraHUDProps, Pick<PhotoCaptureAppConfig, 'sightGuidelines' | 'addDamage' | 'showCloseButton' | 'allowSkipTutorial' | 'enforceOrientation'> {
+export interface PhotoCaptureHUDProps extends CameraHUDProps, Pick<PhotoCaptureAppConfig, 'sightGuidelines' | 'addDamage' | 'showCloseButton' | 'allowSkipTutorial' | 'enforceOrientation' | 'enableSightTutorial' | 'sightTutorial'> {
     /**
      * The inspection ID.
      */
@@ -105,10 +105,18 @@ export interface PhotoCaptureHUDProps extends CameraHUDProps, Pick<PhotoCaptureA
      * 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;
 }
 /**
  * This component implements the Camera HUD (head-up display) displayed in the PhotoCapture component over the Camera
  * preview. It implements elements such as buttons to interact with the camera, PhotoCapture indicators, error messages,
  * loaders etc.
  */
-export declare function PhotoCaptureHUD({ inspectionId, sights, selectedSight, sightsTaken, lastPictureTakenUri, mode, vehicleParts, onSelectSight, onRetakeSight, onAddDamage, onAddDamagePartsSelected, onValidateVehicleParts, onCancelAddDamage, onOpenGallery, onRetry, onClose, showCloseButton, loading, handle, cameraPreview, images, addDamage, sightGuidelines, showSightGuidelines, currentTutorialStep, allowSkipTutorial, onNextTutorialStep, onCloseTutorial, enforceOrientation, vehicleType, onDisableSightGuidelines, }: PhotoCaptureHUDProps): JSX.Element;
+export declare function PhotoCaptureHUD({ inspectionId, sights, selectedSight, sightsTaken, lastPictureTakenUri, mode, vehicleParts, onSelectSight, onRetakeSight, onAddDamage, onAddDamagePartsSelected, onValidateVehicleParts, onCancelAddDamage, onOpenGallery, onRetry, onClose, showCloseButton, loading, handle, cameraPreview, images, addDamage, sightGuidelines, showSightGuidelines, currentTutorialStep, allowSkipTutorial, onNextTutorialStep, onCloseTutorial, enforceOrientation, vehicleType, onDisableSightGuidelines, sightTutorial, enableSightTutorial, showSightTutorial, toggleSightTutorial, }: PhotoCaptureHUDProps): JSX.Element;

package/lib/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.js

@@ -23,6 +23,7 @@ var PhotoCaptureHUDElements_1 = require("./PhotoCaptureHUDElements");
 var PhotoCaptureHUDTutorial_1 = require("./PhotoCaptureHUDTutorial");
 var types_2 = require("../../types");
 var components_1 = require("../../components");
+var PhotoCaptureHUDSightTutorial_1 = require("./PhotoCaptureHUDSightTutorial");
 /**
  * This component implements the Camera HUD (head-up display) displayed in the PhotoCapture component over the Camera
  * preview. It implements elements such as buttons to interact with the camera, PhotoCapture indicators, error messages,
@@ -30,7 +31,7 @@ var components_1 = require("../../components");
  */
 function PhotoCaptureHUD(_a) {
     var _b;
-    var inspectionId = _a.inspectionId, sights = _a.sights, selectedSight = _a.selectedSight, sightsTaken = _a.sightsTaken, lastPictureTakenUri = _a.lastPictureTakenUri, mode = _a.mode, vehicleParts = _a.vehicleParts, onSelectSight = _a.onSelectSight, onRetakeSight = _a.onRetakeSight, onAddDamage = _a.onAddDamage, onAddDamagePartsSelected = _a.onAddDamagePartsSelected, onValidateVehicleParts = _a.onValidateVehicleParts, onCancelAddDamage = _a.onCancelAddDamage, onOpenGallery = _a.onOpenGallery, onRetry = _a.onRetry, onClose = _a.onClose, showCloseButton = _a.showCloseButton, loading = _a.loading, handle = _a.handle, cameraPreview = _a.cameraPreview, images = _a.images, addDamage = _a.addDamage, sightGuidelines = _a.sightGuidelines, showSightGuidelines = _a.showSightGuidelines, currentTutorialStep = _a.currentTutorialStep, allowSkipTutorial = _a.allowSkipTutorial, onNextTutorialStep = _a.onNextTutorialStep, onCloseTutorial = _a.onCloseTutorial, enforceOrientation = _a.enforceOrientation, vehicleType = _a.vehicleType, onDisableSightGuidelines = _a.onDisableSightGuidelines;
+    var inspectionId = _a.inspectionId, sights = _a.sights, selectedSight = _a.selectedSight, sightsTaken = _a.sightsTaken, lastPictureTakenUri = _a.lastPictureTakenUri, mode = _a.mode, vehicleParts = _a.vehicleParts, onSelectSight = _a.onSelectSight, onRetakeSight = _a.onRetakeSight, onAddDamage = _a.onAddDamage, onAddDamagePartsSelected = _a.onAddDamagePartsSelected, onValidateVehicleParts = _a.onValidateVehicleParts, onCancelAddDamage = _a.onCancelAddDamage, onOpenGallery = _a.onOpenGallery, onRetry = _a.onRetry, onClose = _a.onClose, showCloseButton = _a.showCloseButton, loading = _a.loading, handle = _a.handle, cameraPreview = _a.cameraPreview, images = _a.images, addDamage = _a.addDamage, sightGuidelines = _a.sightGuidelines, showSightGuidelines = _a.showSightGuidelines, currentTutorialStep = _a.currentTutorialStep, allowSkipTutorial = _a.allowSkipTutorial, onNextTutorialStep = _a.onNextTutorialStep, onCloseTutorial = _a.onCloseTutorial, enforceOrientation = _a.enforceOrientation, vehicleType = _a.vehicleType, onDisableSightGuidelines = _a.onDisableSightGuidelines, sightTutorial = _a.sightTutorial, enableSightTutorial = _a.enableSightTutorial, showSightTutorial = _a.showSightTutorial, toggleSightTutorial = _a.toggleSightTutorial;
     var t = (0, react_i18next_1.useTranslation)().t;
     var _c = (0, react_1.useState)(false), showCloseModal = _c[0], setShowCloseModal = _c[1];
     var style = (0, hooks_1.usePhotoCaptureHUDStyle)();
@@ -45,6 +46,6 @@ function PhotoCaptureHUD(_a) {
         trackEvent('Capture Closed');
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: style.container }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: style.previewContainer, "data-testid": 'camera-preview' }, { children: [cameraPreview, (0, jsx_runtime_1.jsx)(PhotoCaptureHUDElements_1.PhotoCaptureHUDElements, { selectedSight: selectedSight, sights: sights, sightsTaken: sightsTaken, mode: mode, vehicleParts: vehicleParts, onAddDamage: onAddDamage, onCancelAddDamage: onCancelAddDamage, onAddDamagePartsSelected: onAddDamagePartsSelected, onSelectSight: onSelectSight, onRetakeSight: onRetakeSight, onValidateVehicleParts: onValidateVehicleParts, error: (_b = loading.error) !== null && _b !== void 0 ? _b : handle.error, previewDimensions: handle.previewDimensions, images: images, addDamage: addDamage, sightGuidelines: sightGuidelines, showSightGuidelines: showSightGuidelines, tutorialStep: currentTutorialStep, vehicleType: vehicleType, onDisableSightGuidelines: onDisableSightGuidelines })] })), mode !== types_2.CaptureMode.ADD_DAMAGE_PART_SELECT && ((0, jsx_runtime_1.jsx)(components_1.HUDButtons, { onOpenGallery: onOpenGallery, onTakePicture: handle === null || handle === void 0 ? void 0 : handle.takePicture, onClose: function () { return setShowCloseModal(true); }, galleryPreview: lastPictureTakenUri !== null && lastPictureTakenUri !== void 0 ? lastPictureTakenUri : undefined, closeDisabled: !!loading.error || !!handle.error, galleryDisabled: !!loading.error || !!handle.error, takePictureDisabled: !!loading.error || !!handle.error || handle.isLoading || loading.isLoading, showCloseButton: showCloseButton, showGalleryBadge: retakeCount > 0, retakeCount: retakeCount })), (0, jsx_runtime_1.jsx)(components_1.HUDOverlay, { inspectionId: inspectionId, handle: handle, isCaptureLoading: loading.isLoading, captureError: loading.error, onRetry: onRetry }), (0, jsx_runtime_1.jsx)(common_ui_web_1.BackdropDialog, { show: showCloseModal, message: t('photo.hud.closeConfirm.message'), cancelLabel: t('photo.hud.closeConfirm.cancel'), confirmLabel: t('photo.hud.closeConfirm.confirm'), onCancel: function () { return setShowCloseModal(false); }, onConfirm: handleCloseConfirm }), (0, jsx_runtime_1.jsx)(PhotoCaptureHUDTutorial_1.PhotoCaptureHUDTutorial, { currentTutorialStep: handle.error || loading.error ? null : currentTutorialStep, onNextTutorialStep: onNextTutorialStep, onCloseTutorial: onCloseTutorial, allowSkipTutorial: allowSkipTutorial, sightId: selectedSight.id, sightGuidelines: sightGuidelines, addDamage: addDamage }), (0, jsx_runtime_1.jsx)(components_1.OrientationEnforcer, { orientation: enforceOrientation })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: style.container }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: style.previewContainer, "data-testid": 'camera-preview' }, { children: [cameraPreview, (0, jsx_runtime_1.jsx)(PhotoCaptureHUDElements_1.PhotoCaptureHUDElements, { selectedSight: selectedSight, sights: sights, sightsTaken: sightsTaken, mode: mode, vehicleParts: vehicleParts, onAddDamage: onAddDamage, onCancelAddDamage: onCancelAddDamage, onAddDamagePartsSelected: onAddDamagePartsSelected, onSelectSight: onSelectSight, onRetakeSight: onRetakeSight, onValidateVehicleParts: onValidateVehicleParts, error: (_b = loading.error) !== null && _b !== void 0 ? _b : handle.error, previewDimensions: handle.previewDimensions, images: images, addDamage: addDamage, sightGuidelines: sightGuidelines, showSightGuidelines: showSightGuidelines, tutorialStep: currentTutorialStep, vehicleType: vehicleType, onDisableSightGuidelines: onDisableSightGuidelines, enableSightTutorial: enableSightTutorial, toggleSightTutorial: toggleSightTutorial })] })), mode !== types_2.CaptureMode.ADD_DAMAGE_PART_SELECT && ((0, jsx_runtime_1.jsx)(components_1.HUDButtons, { onOpenGallery: onOpenGallery, onTakePicture: handle === null || handle === void 0 ? void 0 : handle.takePicture, onClose: function () { return setShowCloseModal(true); }, galleryPreview: lastPictureTakenUri !== null && lastPictureTakenUri !== void 0 ? lastPictureTakenUri : undefined, closeDisabled: !!loading.error || !!handle.error, galleryDisabled: !!loading.error || !!handle.error, takePictureDisabled: !!loading.error || !!handle.error || handle.isLoading || loading.isLoading, showCloseButton: showCloseButton, showGalleryBadge: retakeCount > 0, retakeCount: retakeCount })), (0, jsx_runtime_1.jsx)(components_1.HUDOverlay, { inspectionId: inspectionId, handle: handle, isCaptureLoading: loading.isLoading, captureError: loading.error, onRetry: onRetry }), (0, jsx_runtime_1.jsx)(common_ui_web_1.BackdropDialog, { show: showCloseModal, message: t('photo.hud.closeConfirm.message'), cancelLabel: t('photo.hud.closeConfirm.cancel'), confirmLabel: t('photo.hud.closeConfirm.confirm'), onCancel: function () { return setShowCloseModal(false); }, onConfirm: handleCloseConfirm }), (0, jsx_runtime_1.jsx)(PhotoCaptureHUDTutorial_1.PhotoCaptureHUDTutorial, { currentTutorialStep: handle.error || loading.error ? null : currentTutorialStep, onNextTutorialStep: onNextTutorialStep, onCloseTutorial: onCloseTutorial, allowSkipTutorial: allowSkipTutorial, sightId: selectedSight.id, sightGuidelines: sightGuidelines, addDamage: addDamage, toggleSightTutorial: toggleSightTutorial }), (0, jsx_runtime_1.jsx)(PhotoCaptureHUDSightTutorial_1.PhotoCaptureHUDSightTutorial, { show: showSightTutorial, sightTutorial: sightTutorial, selectedSight: selectedSight, onClose: toggleSightTutorial, enableSightTutorial: enableSightTutorial }), (0, jsx_runtime_1.jsx)(components_1.OrientationEnforcer, { orientation: enforceOrientation })] })));
 }
 exports.PhotoCaptureHUD = PhotoCaptureHUD;

package/lib/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.d.ts

@@ -5,7 +5,7 @@ import { CaptureMode } from '../../../types';
 /**
  * Props of the PhotoCaptureHUDElements component.
  */
-export interface PhotoCaptureHUDElementsProps extends Pick<PhotoCaptureAppConfig, 'sightGuidelines' | 'addDamage'> {
+export interface PhotoCaptureHUDElementsProps extends Pick<PhotoCaptureAppConfig, 'sightGuidelines' | 'addDamage' | 'enableSightTutorial'> {
     /**
      * The currently selected sight in the PhotoCapture component : the sight that the user needs to capture.
      */
@@ -78,6 +78,10 @@ export interface PhotoCaptureHUDElementsProps extends Pick<PhotoCaptureAppConfig
      * 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;
 }
 /**
  * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process.

package/lib/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.js

@@ -13,7 +13,7 @@ function PhotoCaptureHUDElements(params) {
         return null;
     }
     if (params.mode === types_1.CaptureMode.SIGHT) {
-        return ((0, jsx_runtime_1.jsx)(PhotoCaptureHUDElementsSight_1.PhotoCaptureHUDElementsSight, { sights: params.sights, selectedSight: params.selectedSight, onSelectedSight: params.onSelectSight, onRetakeSight: params.onRetakeSight, sightsTaken: params.sightsTaken, onAddDamage: params.onAddDamage, previewDimensions: params.previewDimensions, images: params.images, addDamage: params.addDamage, sightGuidelines: params.sightGuidelines, showSightGuidelines: params.showSightGuidelines, tutorialStep: params.tutorialStep, onDisableSightGuidelines: params.onDisableSightGuidelines }));
+        return ((0, jsx_runtime_1.jsx)(PhotoCaptureHUDElementsSight_1.PhotoCaptureHUDElementsSight, { sights: params.sights, selectedSight: params.selectedSight, onSelectedSight: params.onSelectSight, onRetakeSight: params.onRetakeSight, sightsTaken: params.sightsTaken, onAddDamage: params.onAddDamage, previewDimensions: params.previewDimensions, images: params.images, addDamage: params.addDamage, sightGuidelines: params.sightGuidelines, showSightGuidelines: params.showSightGuidelines, tutorialStep: params.tutorialStep, onDisableSightGuidelines: params.onDisableSightGuidelines, enableSightTutorial: params.enableSightTutorial, toggleSightTutorial: params.toggleSightTutorial }));
     }
     if (params.mode === types_1.CaptureMode.ADD_DAMAGE_1ST_SHOT) {
         return (0, jsx_runtime_1.jsx)(components_1.ZoomOutShot, { onCancel: params.onCancelAddDamage });

package/lib/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/PhotoCaptureHUDElementsSight.d.ts

@@ -4,4 +4,4 @@ import { PhotoCaptureHUDElementsSightProps } from './hooks';
  * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process when the current
  * mode is SIGHT.
  */
-export declare function PhotoCaptureHUDElementsSight({ sights, selectedSight, onSelectedSight, onRetakeSight, onAddDamage, onDisableSightGuidelines, sightsTaken, previewDimensions, images, addDamage, sightGuidelines, showSightGuidelines, tutorialStep, }: PhotoCaptureHUDElementsSightProps): JSX.Element;
+export declare function PhotoCaptureHUDElementsSight({ sights, selectedSight, onSelectedSight, onRetakeSight, onAddDamage, onDisableSightGuidelines, sightsTaken, previewDimensions, images, addDamage, sightGuidelines, showSightGuidelines, tutorialStep, enableSightTutorial, toggleSightTutorial, }: PhotoCaptureHUDElementsSightProps): JSX.Element;

package/lib/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/PhotoCaptureHUDElementsSight.js

@@ -14,6 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PhotoCaptureHUDElementsSight = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var common_ui_web_1 = require("@monkvision/common-ui-web");
+var types_1 = require("@monkvision/types");
 var SightSlider_1 = require("./SightSlider");
 var PhotoCaptureHUDElementsSight_styles_1 = require("./PhotoCaptureHUDElementsSight.styles");
 var AddDamageButton_1 = require("./AddDamageButton");
@@ -21,15 +22,18 @@ var hooks_1 = require("./hooks");
 var hooks_2 = require("../../hooks");
 var SightGuideline_1 = require("./SightGuideline");
 var components_1 = require("../../../components");
-var types_1 = require("../../../types");
+var types_2 = require("../../../types");
 /**
  * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process when the current
  * mode is SIGHT.
  */
 function PhotoCaptureHUDElementsSight(_a) {
-    var sights = _a.sights, selectedSight = _a.selectedSight, _b = _a.onSelectedSight, onSelectedSight = _b === void 0 ? function () { } : _b, _c = _a.onRetakeSight, onRetakeSight = _c === void 0 ? function () { } : _c, _d = _a.onAddDamage, onAddDamage = _d === void 0 ? function () { } : _d, _e = _a.onDisableSightGuidelines, onDisableSightGuidelines = _e === void 0 ? function () { } : _e, sightsTaken = _a.sightsTaken, previewDimensions = _a.previewDimensions, images = _a.images, addDamage = _a.addDamage, sightGuidelines = _a.sightGuidelines, showSightGuidelines = _a.showSightGuidelines, tutorialStep = _a.tutorialStep;
+    var sights = _a.sights, selectedSight = _a.selectedSight, _b = _a.onSelectedSight, onSelectedSight = _b === void 0 ? function () { } : _b, _c = _a.onRetakeSight, onRetakeSight = _c === void 0 ? function () { } : _c, _d = _a.onAddDamage, onAddDamage = _d === void 0 ? function () { } : _d, _e = _a.onDisableSightGuidelines, onDisableSightGuidelines = _e === void 0 ? function () { } : _e, sightsTaken = _a.sightsTaken, previewDimensions = _a.previewDimensions, images = _a.images, addDamage = _a.addDamage, sightGuidelines = _a.sightGuidelines, showSightGuidelines = _a.showSightGuidelines, tutorialStep = _a.tutorialStep, enableSightTutorial = _a.enableSightTutorial, toggleSightTutorial = _a.toggleSightTutorial;
     var style = (0, hooks_1.usePhotoCaptureHUDSightPreviewStyle)({ previewDimensions: previewDimensions });
     var showSight = previewDimensions && (!tutorialStep || tutorialStep === hooks_2.TutorialSteps.SIGHT);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: PhotoCaptureHUDElementsSight_styles_1.styles['container'] }, { children: [showSight && (0, jsx_runtime_1.jsx)(common_ui_web_1.SightOverlay, { style: style.overlay, sight: selectedSight }), !tutorialStep && ((0, jsx_runtime_1.jsxs)("div", __assign({ style: style.elementsContainer }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: style.top }, { children: [(0, jsx_runtime_1.jsx)(SightGuideline_1.SightGuideline, { sightId: selectedSight.id, sightGuidelines: sightGuidelines, disabled: !showSightGuidelines, addDamage: addDamage, onDisableSightGuidelines: onDisableSightGuidelines }), (0, jsx_runtime_1.jsx)(AddDamageButton_1.AddDamageButton, { onAddDamage: onAddDamage, addDamage: addDamage })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: style.bottom }, { children: [(0, jsx_runtime_1.jsx)(components_1.Counter, { mode: types_1.CaptureMode.SIGHT, totalSights: sights.length, sightsTaken: sightsTaken.length }), (0, jsx_runtime_1.jsx)(SightSlider_1.SightSlider, { sights: sights, selectedSight: selectedSight, sightsTaken: sightsTaken, onSelectedSight: onSelectedSight, onRetakeSight: onRetakeSight, images: images })] }))] })))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: PhotoCaptureHUDElementsSight_styles_1.styles['container'] }, { children: [showSight && (0, jsx_runtime_1.jsx)(common_ui_web_1.SightOverlay, { style: style.overlay, sight: selectedSight }), !tutorialStep && ((0, jsx_runtime_1.jsxs)("div", __assign({ style: style.elementsContainer }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: style.top }, { children: [[
+                                types_1.PhotoCaptureSightTutorialOption.CLASSIC,
+                                types_1.PhotoCaptureSightTutorialOption.MODERN,
+                            ].includes(enableSightTutorial) && ((0, jsx_runtime_1.jsx)(components_1.SightTutorialButton, { toggleSightTutorial: toggleSightTutorial })), (0, jsx_runtime_1.jsx)(SightGuideline_1.SightGuideline, { sightId: selectedSight.id, sightGuidelines: sightGuidelines, disabled: !showSightGuidelines, addDamage: addDamage, onDisableSightGuidelines: onDisableSightGuidelines }), (0, jsx_runtime_1.jsx)(AddDamageButton_1.AddDamageButton, { onAddDamage: onAddDamage, addDamage: addDamage })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: style.bottom }, { children: [(0, jsx_runtime_1.jsx)(components_1.Counter, { mode: types_2.CaptureMode.SIGHT, totalSights: sights.length, sightsTaken: sightsTaken.length }), (0, jsx_runtime_1.jsx)(SightSlider_1.SightSlider, { sights: sights, selectedSight: selectedSight, sightsTaken: sightsTaken, onSelectedSight: onSelectedSight, onRetakeSight: onRetakeSight, images: images })] }))] })))] })));
 }
 exports.PhotoCaptureHUDElementsSight = PhotoCaptureHUDElementsSight;

package/lib/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/PhotoCaptureHUDElementsSight.styles.js

@@ -37,4 +37,5 @@ exports.styles = {
         zIndex: 9,
         paddingBottom: '12px',
     },
+    sightTutorialButton: { padding: '8px' },
 };

package/lib/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/hooks.d.ts

@@ -4,7 +4,7 @@ import { TutorialSteps } from '../../hooks';
 /**
  * Props of the PhotoCaptureHUDElementsSight component.
  */
-export interface PhotoCaptureHUDElementsSightProps extends Pick<PhotoCaptureAppConfig, 'sightGuidelines' | 'addDamage'> {
+export interface PhotoCaptureHUDElementsSightProps extends Pick<PhotoCaptureAppConfig, 'sightGuidelines' | 'addDamage' | 'enableSightTutorial'> {
     /**
      * The list of sights provided to the PhotoCapture component.
      */
@@ -49,6 +49,10 @@ export interface PhotoCaptureHUDElementsSightProps extends Pick<PhotoCaptureAppC
      * 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 declare function usePhotoCaptureHUDSightPreviewStyle({ previewDimensions, }: Pick<PhotoCaptureHUDElementsSightProps, 'previewDimensions'>): {
     container: import("@monkvision/types").ResponsiveStyleProperties;

package/lib/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDSightTutorial/PhotoCaptureHUDSightTutorial.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { PhotoCaptureAppConfig, Sight } from '@monkvision/types';
+/**
+ * The props for the PhotoCaptureHUDSightTutorial component.
+ */
+export interface PhotoCaptureHUDSightTutorialProps extends Pick<PhotoCaptureAppConfig, 'sightTutorial' | 'enableSightTutorial'> {
+    /**
+     * The sight to display the tutorial for.
+     */
+    selectedSight: Sight;
+    /**
+     * Callback called when the user clicks on the "close" button in Sight Tutorial.
+     */
+    onClose?: () => void;
+    /**
+     * The current tutorial step in PhotoCapture component.
+     */
+    show?: boolean;
+}
+/**
+ * This component displays the sight tutorial for a specific sight.
+ */
+export declare function PhotoCaptureHUDSightTutorial({ selectedSight, sightTutorial, onClose, show, enableSightTutorial, }: PhotoCaptureHUDSightTutorialProps): JSX.Element | null;

package/lib/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDSightTutorial/PhotoCaptureHUDSightTutorial.js

@@ -0,0 +1,65 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhotoCaptureHUDSightTutorial = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var types_1 = require("@monkvision/types");
+var common_ui_web_1 = require("@monkvision/common-ui-web");
+var react_i18next_1 = require("react-i18next");
+var common_1 = require("@monkvision/common");
+var IconVerticalPosition_types_1 = require("@monkvision/common-ui-web/lib/components/IconVerticalPosition/IconVerticalPosition.types");
+var react_1 = require("react");
+var PhotoCaptureHUDSightTutorial_styles_1 = require("./PhotoCaptureHUDSightTutorial.styles");
+/**
+ * This component displays the sight tutorial for a specific sight.
+ */
+function PhotoCaptureHUDSightTutorial(_a) {
+    var _b, _c, _d, _e;
+    var selectedSight = _a.selectedSight, sightTutorial = _a.sightTutorial, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, show = _a.show, enableSightTutorial = _a.enableSightTutorial;
+    var _g = (0, react_1.useState)(null), tutorialImage = _g[0], setTutorialImage = _g[1];
+    var i18n = (0, react_i18next_1.useTranslation)().i18n;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var style = (0, PhotoCaptureHUDSightTutorial_styles_1.usePhotoCaptureHUDSightTutorialStyles)(show, !!tutorialImage);
+    var sightTutorialFound = sightTutorial === null || sightTutorial === void 0 ? void 0 : sightTutorial.find(function (value) {
+        return Object.keys(value.imageReferenceBySightId).includes(selectedSight.id);
+    });
+    var tutorialGuideline = sightTutorialFound === null || sightTutorialFound === void 0 ? void 0 : sightTutorialFound[(0, common_1.getLanguage)(i18n.language)];
+    (0, react_1.useEffect)(function () {
+        if (sightTutorialFound === null || sightTutorialFound === void 0 ? void 0 : sightTutorialFound.imageReferenceBySightId[selectedSight.id]) {
+            setTutorialImage(sightTutorialFound.imageReferenceBySightId[selectedSight.id]);
+        }
+        else if (selectedSight.referencePicture) {
+            var img_1 = new Image();
+            img_1.src = selectedSight.referencePicture;
+            img_1.onload = function () {
+                if (img_1.width > 0) {
+                    setTutorialImage(selectedSight.referencePicture);
+                }
+                else {
+                    setTutorialImage(null);
+                }
+            };
+            img_1.onerror = function () {
+                setTutorialImage(null);
+            };
+        }
+        else {
+            setTutorialImage(null);
+        }
+    }, [sightTutorialFound, selectedSight]);
+    if (enableSightTutorial === types_1.PhotoCaptureSightTutorialOption.DISABLED) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: style.container }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: PhotoCaptureHUDSightTutorial_styles_1.styles['iconsContainer'] }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: PhotoCaptureHUDSightTutorial_styles_1.styles['icon'] }, { children: (0, jsx_runtime_1.jsx)(common_ui_web_1.IconAroundVehicle, { size: 80, orientationAngle: (_b = selectedSight.positioning) === null || _b === void 0 ? void 0 : _b.orientation, positionAroundVehicle: (_c = selectedSight.positioning) === null || _c === void 0 ? void 0 : _c.position, distance: (_d = selectedSight.positioning) === null || _d === void 0 ? void 0 : _d.distance }) })), (0, jsx_runtime_1.jsx)("div", __assign({ style: PhotoCaptureHUDSightTutorial_styles_1.styles['icon'] }, { children: (0, jsx_runtime_1.jsx)(common_ui_web_1.IconVerticalPosition, { size: 67, position: (_e = selectedSight.positioning) === null || _e === void 0 ? void 0 : _e.height, variant: IconVerticalPosition_types_1.IconVerticalPositionVariant.SECONDARY }) })), (0, jsx_runtime_1.jsx)("div", __assign({ style: PhotoCaptureHUDSightTutorial_styles_1.styles['icon'] }, { children: (0, jsx_runtime_1.jsx)(common_ui_web_1.SightOverlay, { style: PhotoCaptureHUDSightTutorial_styles_1.styles['sightIcon'], sight: selectedSight, getAttributes: style.sightIcon.getAttributes }) }))] })), enableSightTutorial === types_1.PhotoCaptureSightTutorialOption.CLASSIC && ((0, jsx_runtime_1.jsxs)("div", __assign({ style: style.classicTutorialContainer }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: style.classicTitleContainer }, { children: [(0, jsx_runtime_1.jsx)(common_ui_web_1.Button, { style: PhotoCaptureHUDSightTutorial_styles_1.styles['closeButtonFiller'], icon: 'close', variant: 'text' }), (0, jsx_runtime_1.jsx)("span", __assign({ style: PhotoCaptureHUDSightTutorial_styles_1.styles['classicTitle'] }, { children: t('photo.hud.sightTutorial.tip').toUpperCase() })), (0, jsx_runtime_1.jsx)(common_ui_web_1.Button, { style: style.closeButton, primaryColor: 'text-black', icon: 'close', variant: 'text', onClick: onClose })] })), (0, jsx_runtime_1.jsx)("div", __assign({ style: style.classicGuidelineContainer }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ style: style.classicGuideline }, { children: tutorialGuideline !== null && tutorialGuideline !== void 0 ? tutorialGuideline : t('photo.hud.sightTutorial.defaultTutorial') })) })), tutorialImage && ((0, jsx_runtime_1.jsx)("div", __assign({ style: PhotoCaptureHUDSightTutorial_styles_1.styles['classicImageContainer'] }, { children: (0, jsx_runtime_1.jsx)("img", { style: PhotoCaptureHUDSightTutorial_styles_1.styles['image'], src: tutorialImage, alt: selectedSight.id }) })))] }))), enableSightTutorial === types_1.PhotoCaptureSightTutorialOption.MODERN && ((0, jsx_runtime_1.jsxs)("div", __assign({ style: style.tutorialContainer }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: PhotoCaptureHUDSightTutorial_styles_1.styles['titleContainer'] }, { children: [(0, jsx_runtime_1.jsx)(common_ui_web_1.Button, { style: PhotoCaptureHUDSightTutorial_styles_1.styles['closeButtonFiller'], icon: 'close', variant: 'text' }), (0, jsx_runtime_1.jsx)("span", { children: t('photo.hud.sightTutorial.tip').toUpperCase() }), (0, jsx_runtime_1.jsx)(common_ui_web_1.Button, { style: style.closeButton, primaryColor: 'text-white', icon: 'close', variant: 'text', onClick: onClose })] })), (0, jsx_runtime_1.jsx)("div", __assign({ style: style.classicGuidelineContainer }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ style: style.guideline }, { children: tutorialGuideline !== null && tutorialGuideline !== void 0 ? tutorialGuideline : t('photo.hud.sightTutorial.defaultTutorial') })) })), tutorialImage && ((0, jsx_runtime_1.jsx)("div", __assign({ style: PhotoCaptureHUDSightTutorial_styles_1.styles['imageContainer'] }, { children: (0, jsx_runtime_1.jsx)("img", { style: PhotoCaptureHUDSightTutorial_styles_1.styles['image'], src: tutorialImage, alt: selectedSight.id }) })))] })))] })));
+}
+exports.PhotoCaptureHUDSightTutorial = PhotoCaptureHUDSightTutorial;