@monkvision/inspection-capture-web 5.0.0 → 5.0.2

package/lib/PhotoCapture/PhotoCapture.js

@@ -28,7 +28,6 @@ var analytics_1 = require("@monkvision/analytics");
 var camera_web_1 = require("@monkvision/camera-web");
 var common_1 = require("@monkvision/common");
 var common_ui_web_1 = require("@monkvision/common-ui-web");
-var monitoring_1 = require("@monkvision/monitoring");
 var types_1 = require("@monkvision/types");
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
@@ -43,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 ? true : _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 ? 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"]);
     (0, common_1.useI18nSync)(lang);
     var complianceOptions = (0, common_1.useObjectMemo)({
         enableCompliance: enableCompliance,
@@ -55,7 +54,6 @@ function PhotoCapture(_a) {
         customComplianceThresholdsPerSight: customComplianceThresholdsPerSight,
     });
     var t = (0, react_i18next_1.useTranslation)().t;
-    var monitoring = (0, monitoring_1.useMonitoring)();
     var _q = (0, react_1.useState)(PhotoCaptureScreen.CAMERA), currentScreen = _q[0], setCurrentScreen = _q[1];
     var analytics = (0, analytics_1.useAnalytics)();
     var loading = (0, common_1.useLoadingState)();
@@ -94,13 +92,18 @@ 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_1.useBadConnectionWarning)({ maxUploadDurationWarning: maxUploadDurationWarning }), isBadConnectionWarningDialogDisplayed = _t.isBadConnectionWarningDialogDisplayed, closeBadConnectionWarningDialog = _t.closeBadConnectionWarningDialog, badConnectionWarningUploadEventHandlers = _t.uploadEventHandlers;
+    var _t = (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;
     var uploadQueue = (0, hooks_1.useUploadQueue)({
         inspectionId: inspectionId,
         apiConfig: apiConfig,
@@ -116,6 +119,13 @@ function PhotoCapture(_a) {
         tasksBySight: tasksBySight,
         onPictureTaken: onPictureTaken,
     });
+    var handleInspectionCompleted = (0, hooks_2.useInspectionComplete)({
+        startTasks: startTasks,
+        sightState: sightState,
+        loading: loading,
+        startTasksOnComplete: startTasksOnComplete,
+        onComplete: onComplete,
+    }).handleInspectionCompleted;
     var handleGalleryBack = function () { return setCurrentScreen(PhotoCaptureScreen.CAMERA); };
     var handleNavigateToCapture = function (options) {
         if (options.reason === common_ui_web_1.NavigateToCaptureReason.ADD_DAMAGE) {
@@ -133,24 +143,6 @@ function PhotoCapture(_a) {
         }
         setCurrentScreen(PhotoCaptureScreen.CAMERA);
     };
-    var allowRedirect = (0, common_1.usePreventExit)(sightState.sightsTaken.length !== 0).allowRedirect;
-    var handleGalleryValidate = function () {
-        startTasks()
-            .then(function () {
-            analytics.trackEvent('Capture Completed');
-            analytics.setUserProperties({
-                captureCompleted: true,
-                sightSelected: 'inspection-completed',
-            });
-            allowRedirect();
-            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
-            sightState.setIsInspectionCompleted(true);
-        })
-            .catch(function (err) {
-            loading.onError(err);
-            monitoring.handleError(err);
-        });
-    };
     var hudProps = {
         sights: sights,
         selectedSight: sightState.selectedSight,
@@ -173,14 +165,15 @@ function PhotoCapture(_a) {
         addDamage: addDamage,
         onValidateVehicleParts: addDamageHandle.handleValidateVehicleParts,
         sightGuidelines: sightGuidelines,
-        enableSightGuidelines: enableSightGuidelines,
+        showSightGuidelines: showSightGuidelines,
         currentTutorialStep: currentTutorialStep,
         onNextTutorialStep: goToNextTutorialStep,
         onCloseTutorial: closeTutorial,
+        onDisableSightGuidelines: handleDisableSightGuidelines,
         allowSkipTutorial: allowSkipTutorial,
         enforceOrientation: enforceOrientation,
         vehicleType: vehicleType,
     };
-    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: handleGalleryValidate, 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 })] })));
+    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 })] })));
 }
 exports.PhotoCapture = PhotoCapture;

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, 'enableSightGuidelines' | 'sightGuidelines' | 'addDamage' | 'showCloseButton' | 'allowSkipTutorial' | 'enforceOrientation'> {
+export interface PhotoCaptureHUDProps extends CameraHUDProps, Pick<PhotoCaptureAppConfig, 'sightGuidelines' | 'addDamage' | 'showCloseButton' | 'allowSkipTutorial' | 'enforceOrientation'> {
     /**
      * The inspection ID.
      */
@@ -84,6 +84,10 @@ export interface PhotoCaptureHUDProps extends CameraHUDProps, Pick<PhotoCaptureA
      * Callback called when the user clicks on the "Validate" button of the Add Damage mode.
      */
     onValidateVehicleParts: () => void;
+    /**
+     * Callback called when the user clicks on both: 'disable' checkbox and 'okay' button.
+     */
+    onDisableSightGuidelines: () => void;
     /**
      * Callback called when the user clicks on the close button. If this callback is not provided, the close button is not
      * displayed.
@@ -97,10 +101,14 @@ export interface PhotoCaptureHUDProps extends CameraHUDProps, Pick<PhotoCaptureA
      * The vehicle type of the inspection.
      */
     vehicleType: VehicleType;
+    /**
+     * Boolean indicating whether the sight guidelines should be displayed.
+     */
+    showSightGuidelines: boolean;
 }
 /**
  * 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, enableSightGuidelines, currentTutorialStep, allowSkipTutorial, onNextTutorialStep, onCloseTutorial, enforceOrientation, vehicleType, }: 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, }: PhotoCaptureHUDProps): JSX.Element;

package/lib/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.js

@@ -30,7 +30,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, enableSightGuidelines = _a.enableSightGuidelines, currentTutorialStep = _a.currentTutorialStep, allowSkipTutorial = _a.allowSkipTutorial, onNextTutorialStep = _a.onNextTutorialStep, onCloseTutorial = _a.onCloseTutorial, enforceOrientation = _a.enforceOrientation, vehicleType = _a.vehicleType;
+    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 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 +45,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, isLoading: loading.isLoading, error: (_b = loading.error) !== null && _b !== void 0 ? _b : handle.error, previewDimensions: handle.previewDimensions, images: images, addDamage: addDamage, sightGuidelines: sightGuidelines, enableSightGuidelines: enableSightGuidelines, tutorialStep: currentTutorialStep, vehicleType: vehicleType })] })), 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 })] })), 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 })] })));
 }
 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, 'enableSightGuidelines' | 'sightGuidelines' | 'addDamage'> {
+export interface PhotoCaptureHUDElementsProps extends Pick<PhotoCaptureAppConfig, 'sightGuidelines' | 'addDamage'> {
     /**
      * The currently selected sight in the PhotoCapture component : the sight that the user needs to capture.
      */
@@ -55,13 +55,13 @@ export interface PhotoCaptureHUDElementsProps extends Pick<PhotoCaptureAppConfig
      */
     onValidateVehicleParts: () => void;
     /**
-     * The effective pixel dimensions of the Camera video stream on the screen.
+     * Callback called when the user clicks on both: 'disable' checkbox and 'okay' button.
      */
-    previewDimensions: PixelDimensions | null;
+    onDisableSightGuidelines?: () => void;
     /**
-     * Boolean indicating if the global loading state of the PhotoCapture component is loading or not.
+     * The effective pixel dimensions of the Camera video stream on the screen.
      */
-    isLoading?: boolean;
+    previewDimensions: PixelDimensions | null;
     /**
      * The error that occurred in the PhotoCapture component. Set this value to `null` if there is no error.
      */
@@ -74,6 +74,10 @@ export interface PhotoCaptureHUDElementsProps extends Pick<PhotoCaptureAppConfig
      * The vehicle type of the inspection.
      */
     vehicleType: VehicleType;
+    /**
+     * Boolean indicating whether the sight guidelines should be displayed.
+     */
+    showSightGuidelines?: boolean;
 }
 /**
  * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process.

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

@@ -9,11 +9,11 @@ var types_1 = require("../../../types");
  * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process.
  */
 function PhotoCaptureHUDElements(params) {
-    if (params.isLoading || !!params.error) {
+    if (params.error) {
         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, enableSightGuidelines: params.enableSightGuidelines, tutorialStep: params.tutorialStep }));
+        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 }));
     }
     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, sightsTaken, previewDimensions, images, addDamage, sightGuidelines, enableSightGuidelines, tutorialStep, }: PhotoCaptureHUDElementsSightProps): JSX.Element;
+export declare function PhotoCaptureHUDElementsSight({ sights, selectedSight, onSelectedSight, onRetakeSight, onAddDamage, onDisableSightGuidelines, sightsTaken, previewDimensions, images, addDamage, sightGuidelines, showSightGuidelines, tutorialStep, }: PhotoCaptureHUDElementsSightProps): JSX.Element;

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

@@ -27,9 +27,9 @@ var types_1 = require("../../../types");
  * 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, sightsTaken = _a.sightsTaken, previewDimensions = _a.previewDimensions, images = _a.images, addDamage = _a.addDamage, sightGuidelines = _a.sightGuidelines, enableSightGuidelines = _a.enableSightGuidelines, 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;
     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, enableSightGuidelines: enableSightGuidelines, addDamage: addDamage }), (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: [(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 })] }))] })))] })));
 }
 exports.PhotoCaptureHUDElementsSight = PhotoCaptureHUDElementsSight;

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

@@ -3,7 +3,7 @@ import { PhotoCaptureAppConfig } from '@monkvision/types';
 /**
  * Props of the SightGuideline component.
  */
-export interface SightGuidelineProps extends Pick<PhotoCaptureAppConfig, 'addDamage' | 'sightGuidelines' | 'enableSightGuidelines'> {
+export interface SightGuidelineProps extends Pick<PhotoCaptureAppConfig, 'addDamage' | 'sightGuidelines'> {
     /**
      * The id of the sight.
      */
@@ -14,8 +14,18 @@ export interface SightGuidelineProps extends Pick<PhotoCaptureAppConfig, 'addDam
      * @default false
      */
     enableDefaultMessage?: boolean;
+    /**
+     * Boolean indicating if the sight guidelines are enabled.
+     *
+     * @default true
+     */
+    disabled?: boolean;
+    /**
+     * Callback called when the user clicks on both: 'disable' checkbox and 'okay' button.
+     */
+    onDisableSightGuidelines?: () => void;
 }
 /**
  * Custom button displaying the sight guideline.
  */
-export declare function SightGuideline({ sightId, sightGuidelines, enableSightGuidelines, addDamage, enableDefaultMessage, }: SightGuidelineProps): JSX.Element;
+export declare function SightGuideline({ sightId, sightGuidelines, addDamage, enableDefaultMessage, disabled, onDisableSightGuidelines, }: SightGuidelineProps): JSX.Element;

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

@@ -14,27 +14,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SightGuideline = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var common_ui_web_1 = require("@monkvision/common-ui-web");
-var types_1 = require("@monkvision/types");
 var react_i18next_1 = require("react-i18next");
 var common_1 = require("@monkvision/common");
 var SightGuideline_styles_1 = require("./SightGuideline.styles");
-var hooks_1 = require("../../../../hooks");
+var hooks_1 = require("./hooks");
 /**
  * Custom button displaying the sight guideline.
  */
 function SightGuideline(_a) {
-    var sightId = _a.sightId, sightGuidelines = _a.sightGuidelines, enableSightGuidelines = _a.enableSightGuidelines, addDamage = _a.addDamage, _b = _a.enableDefaultMessage, enableDefaultMessage = _b === void 0 ? false : _b;
-    var _c = (0, react_1.useState)(true), showGuideline = _c[0], setShowGuideline = _c[1];
-    var primaryColor = (0, hooks_1.useColorBackground)();
-    var _d = (0, react_i18next_1.useTranslation)(), i18n = _d.i18n, t = _d.t;
-    var style = addDamage === types_1.AddDamage.DISABLED ? SightGuideline_styles_1.styles['containerWide'] : SightGuideline_styles_1.styles['container'];
+    var sightId = _a.sightId, sightGuidelines = _a.sightGuidelines, addDamage = _a.addDamage, _b = _a.enableDefaultMessage, enableDefaultMessage = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.onDisableSightGuidelines, onDisableSightGuidelines = _d === void 0 ? function () { } : _d;
+    var _e = (0, react_1.useState)(true), showGuideline = _e[0], setShowGuideline = _e[1];
+    var _f = (0, react_1.useState)(false), checked = _f[0], setChecked = _f[1];
+    var _g = (0, react_i18next_1.useTranslation)(), i18n = _g.i18n, t = _g.t;
+    var style = (0, hooks_1.useSightGuidelineStyle)({ addDamage: addDamage });
     var guidelineFound = sightGuidelines === null || sightGuidelines === void 0 ? void 0 : sightGuidelines.find(function (value) { return value.sightIds.includes(sightId); });
     var defaultMessage = enableDefaultMessage
         ? t('photo.hud.guidelines.defaultGuideline')
         : undefined;
     var guideline = guidelineFound ? guidelineFound[(0, common_1.getLanguage)(i18n.language)] : defaultMessage;
+    var handleShowSightGuidelines = function () {
+        if (checked) {
+            onDisableSightGuidelines();
+        }
+        setShowGuideline(false);
+    };
     (0, react_1.useEffect)(function () { return setShowGuideline(true); }, [sightId]);
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: style }, { children: enableSightGuidelines && showGuideline && guideline && ((0, jsx_runtime_1.jsx)(common_ui_web_1.Button, __assign({ icon: 'close', primaryColor: primaryColor, style: SightGuideline_styles_1.styles['button'], onClick: function () { return setShowGuideline(false); } }, { children: guideline }))) })));
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: style.container, "data-testid": 'container' }, { children: !disabled && showGuideline && guideline && ((0, jsx_runtime_1.jsxs)("div", __assign({ style: style.guideline, "data-testid": 'guideline' }, { children: [guideline, (0, jsx_runtime_1.jsxs)("div", __assign({ style: SightGuideline_styles_1.styles['buttonContainer'] }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: SightGuideline_styles_1.styles['checkbox'], role: 'checkbox', "aria-checked": checked, tabIndex: 0, onClick: function () { return setChecked(!checked); }, onKeyDown: function (e) {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    setChecked(!checked);
+                                }
+                            }, "data-testid": 'checkbox-container' }, { children: [(0, jsx_runtime_1.jsx)("input", { type: 'checkbox', checked: checked, onChange: function (e) { return e.stopPropagation(); } }), (0, jsx_runtime_1.jsx)("span", { children: t('photo.hud.guidelines.disable') })] })), (0, jsx_runtime_1.jsx)("button", __assign({ style: SightGuideline_styles_1.styles['button'], onClick: handleShowSightGuidelines, "data-testid": 'button' }, { children: t('photo.hud.guidelines.validate') }))] }))] }))) })));
 }
 exports.SightGuideline = SightGuideline;

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

@@ -15,13 +15,29 @@ exports.styles = {
         width: "calc(98% - (".concat(HUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 4, "px))"),
         justifyContent: 'center',
     },
-    button: {
-        textAlign: 'start',
+    guideline: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
         borderRadius: '12px',
-        fontSize: 14,
-        flexDirection: 'row-reverse',
-        paddingRight: 0,
-        alignItems: 'start',
-        gap: 10,
+        justifyContent: 'start',
+        padding: '10px',
+        gap: '8px',
+        letterSpacing: '0.15px',
+        fontSize: '14',
+    },
+    buttonContainer: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: '0px 10px 0px',
+    },
+    checkbox: {
+        display: 'flex',
+        cursor: 'pointer',
+        gap: '5px',
+    },
+    button: {
+        all: 'unset',
+        cursor: 'pointer',
     },
 };