@monkvision/inspection-capture-web 5.0.21 → 5.1.0

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

@@ -0,0 +1,170 @@
+"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.usePhotoCaptureHUDSightTutorialStyles = exports.styles = void 0;
+var common_1 = require("@monkvision/common");
+var react_1 = require("react");
+var BORDER_WIDTH = 2;
+exports.styles = {
+    container: {
+        width: '100%',
+        height: '100%',
+        position: 'fixed',
+        inset: 0,
+        display: 'flex',
+        alignItems: 'center',
+        zIndex: 10,
+        transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out',
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        backdropFilter: 'blur(10px)',
+        opacity: 0,
+        visibility: 'hidden',
+        pointerEvents: 'none',
+    },
+    containerVisible: {
+        opacity: 1,
+        visibility: 'visible',
+        pointerEvents: 'auto',
+    },
+    iconsContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        height: '100%',
+        width: '20%',
+    },
+    sightIcon: { width: '85px' },
+    tutorialContainer: {
+        position: 'absolute',
+        width: '60%',
+        height: '80%',
+        borderRadius: '9px',
+        transform: 'translate(-50%, -50%)',
+        top: '50%',
+        left: '50%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    classicTutorialContainer: {
+        position: 'absolute',
+        width: '60%',
+        height: '80%',
+        transform: 'translate(-50%, -50%)',
+        top: '50%',
+        left: '50%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        overflow: 'scroll',
+    },
+    modalContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    titleContainer: {
+        display: 'flex',
+        width: '100%',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        height: '50px',
+    },
+    classicTitleContainer: {
+        display: 'flex',
+        width: '100%',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        height: '10%',
+    },
+    classicTitle: {
+        fontSize: '18px',
+        fontWeight: 700,
+    },
+    guidelineContainer: {
+        height: '40%',
+        overflow: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '0 30px',
+    },
+    guideline: {
+        margin: 'auto',
+        textAlign: 'center',
+        whiteSpace: 'pre-line',
+        lineHeight: '24px',
+    },
+    classicGuidelineContainer: {
+        height: '40%',
+        overflow: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '0 30px',
+    },
+    classicGuideline: {
+        margin: 'auto',
+        textAlign: 'center',
+        whiteSpace: 'pre-line',
+        lineHeight: '24px',
+    },
+    icon: { height: '33%', display: 'flex', justifyContent: 'center', alignItems: 'center' },
+    closeButton: {
+        padding: '0px 20px',
+        height: '100%',
+        borderRadius: 0,
+    },
+    closeButtonFiller: { visibility: 'hidden', padding: '0px 20px', height: '100%', borderRadius: 0 },
+    imageContainer: {
+        height: '60%',
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    classicImageContainer: {
+        height: '50%',
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    image: {
+        height: '90%',
+        objectFit: 'contain',
+        borderRadius: '9px',
+    },
+    sightIconWidth: {
+        strokeWidth: '6px',
+    },
+};
+function usePhotoCaptureHUDSightTutorialStyles(show, tutorialImage) {
+    var palette = (0, common_1.useMonkTheme)().palette;
+    var getIconAttributes = (0, react_1.useCallback)(function () { return ({ style: exports.styles['sightIconWidth'] }); }, []);
+    return {
+        container: __assign(__assign({}, exports.styles['container']), (show ? exports.styles['containerVisible'] : {})),
+        tutorialContainer: __assign(__assign({}, exports.styles['tutorialContainer']), { backgroundColor: (0, common_1.changeAlpha)(palette.background.base, 0.7), border: "solid ".concat(BORDER_WIDTH, "px ").concat((0, common_1.changeAlpha)(palette.surface.light, 0.5)) }),
+        classicTutorialContainer: __assign(__assign({}, exports.styles['classicTutorialContainer']), { backgroundColor: palette.text.white, color: palette.text.black }),
+        classicTitleContainer: __assign(__assign({}, exports.styles['classicTitleContainer']), { borderBottom: "solid ".concat(BORDER_WIDTH, "px ").concat(palette.secondary.xlight) }),
+        closeButton: __assign({}, exports.styles['closeButton']),
+        guidelineContainer: __assign(__assign({}, exports.styles['guidelineContainer']), (!tutorialImage ? { height: '90%' } : {})),
+        guideline: __assign(__assign({}, exports.styles['guideline']), (!tutorialImage ? { alignItems: 'center' } : {})),
+        classicGuidelineContainer: __assign(__assign({}, exports.styles['classicGuidelineContainer']), (!tutorialImage ? { height: '90%' } : {})),
+        classicGuideline: __assign(__assign({}, exports.styles['classicGuideline']), (!tutorialImage ? { alignItems: 'center' } : {})),
+        sightIcon: {
+            getAttributes: getIconAttributes,
+        },
+    };
+}
+exports.usePhotoCaptureHUDSightTutorialStyles = usePhotoCaptureHUDSightTutorialStyles;

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

@@ -0,0 +1 @@
+export { PhotoCaptureHUDSightTutorial, type PhotoCaptureHUDSightTutorialProps, } from './PhotoCaptureHUDSightTutorial';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhotoCaptureHUDSightTutorial = void 0;
+var PhotoCaptureHUDSightTutorial_1 = require("./PhotoCaptureHUDSightTutorial");
+Object.defineProperty(exports, "PhotoCaptureHUDSightTutorial", { enumerable: true, get: function () { return PhotoCaptureHUDSightTutorial_1.PhotoCaptureHUDSightTutorial; } });

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

@@ -21,8 +21,12 @@ export interface PhotoCaptureHUDTutorialProps extends Pick<PhotoCaptureAppConfig
      * Callback called when the user clicks on "Close" button in PhotoCapture tutorial.
      */
     onCloseTutorial: () => void;
+    /**
+     * Callback called when the user clicks on the "help" button in PhotoCapture.
+     */
+    toggleSightTutorial?: () => void;
 }
 /**
  * Component that displays an tutorial overlay on top of the PhotoCapture component.
  */
-export declare function PhotoCaptureHUDTutorial({ currentTutorialStep, allowSkipTutorial, sightGuidelines, sightId, onNextTutorialStep, onCloseTutorial, addDamage, }: PhotoCaptureHUDTutorialProps): JSX.Element | null;
+export declare function PhotoCaptureHUDTutorial({ currentTutorialStep, allowSkipTutorial, sightGuidelines, sightId, onNextTutorialStep, onCloseTutorial, addDamage, toggleSightTutorial, }: PhotoCaptureHUDTutorialProps): JSX.Element | null;

package/lib/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.js

@@ -22,6 +22,7 @@ var ArrowIcon_1 = require("./ArrowIcon");
 var DisplayText_1 = require("./DisplayText");
 var hooks_2 = require("../../../hooks");
 var hooks_3 = require("./hooks");
+var components_1 = require("../../../components");
 function getButtonStyle(enableAddDamage) {
     return { visibility: enableAddDamage ? 'visible' : 'hidden' };
 }
@@ -29,10 +30,10 @@ function getButtonStyle(enableAddDamage) {
  * Component that displays an tutorial overlay on top of the PhotoCapture component.
  */
 function PhotoCaptureHUDTutorial(_a) {
-    var currentTutorialStep = _a.currentTutorialStep, allowSkipTutorial = _a.allowSkipTutorial, sightGuidelines = _a.sightGuidelines, sightId = _a.sightId, onNextTutorialStep = _a.onNextTutorialStep, onCloseTutorial = _a.onCloseTutorial, addDamage = _a.addDamage;
+    var currentTutorialStep = _a.currentTutorialStep, allowSkipTutorial = _a.allowSkipTutorial, sightGuidelines = _a.sightGuidelines, sightId = _a.sightId, onNextTutorialStep = _a.onNextTutorialStep, onCloseTutorial = _a.onCloseTutorial, addDamage = _a.addDamage, toggleSightTutorial = _a.toggleSightTutorial;
     var t = (0, react_i18next_1.useTranslation)().t;
     var primaryColor = (0, hooks_2.useColorBackground)();
     var style = (0, hooks_3.usePhotoCaptureHUDTutorialStyle)();
-    return currentTutorialStep ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: PhotoCaptureHUDTutorial_styles_1.styles['backdropContainer'], "data-testid": 'backdrop' }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: style.elementsContainer }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: PhotoCaptureHUDTutorial_styles_1.styles['topContainer'] }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: PhotoCaptureHUDTutorial_styles_1.styles['buttonsContainer'] }, { children: [(0, jsx_runtime_1.jsx)("div", { style: PhotoCaptureHUDTutorial_styles_1.styles['closeButtonTwin'] }), (0, jsx_runtime_1.jsx)(PhotoCaptureHUDElementsSight_1.SightGuideline, { sightId: sightId, sightGuidelines: sightGuidelines, disabled: currentTutorialStep !== hooks_1.TutorialSteps.GUIDELINE, addDamage: addDamage, enableDefaultMessage: true }), (0, jsx_runtime_1.jsx)(common_ui_web_1.Button, { style: __assign(__assign({}, PhotoCaptureHUDTutorial_styles_1.styles['closeButton']), getButtonStyle(allowSkipTutorial)), disabled: !allowSkipTutorial, icon: 'close', primaryColor: primaryColor, onClick: onCloseTutorial })] })), (0, jsx_runtime_1.jsx)("div", __assign({ style: PhotoCaptureHUDTutorial_styles_1.styles['arrows'] }, { children: (0, jsx_runtime_1.jsx)(ArrowIcon_1.ArrowIcon, { tutorialStep: currentTutorialStep }) }))] })), (0, jsx_runtime_1.jsx)(DisplayText_1.DisplayText, { tutorialStep: currentTutorialStep }), (0, jsx_runtime_1.jsx)(common_ui_web_1.Button, __assign({ style: PhotoCaptureHUDTutorial_styles_1.styles['nextButton'], primaryColor: 'primary', onClick: onNextTutorialStep }, { children: t('photo.hud.tutorial.next') }))] })) }))) : null;
+    return currentTutorialStep ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: PhotoCaptureHUDTutorial_styles_1.styles['backdropContainer'], "data-testid": 'backdrop' }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: style.elementsContainer }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: PhotoCaptureHUDTutorial_styles_1.styles['topContainer'] }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: PhotoCaptureHUDTutorial_styles_1.styles['buttonsContainer'] }, { children: [(0, jsx_runtime_1.jsx)("div", { style: PhotoCaptureHUDTutorial_styles_1.styles['closeButtonTwin'] }), (0, jsx_runtime_1.jsx)(PhotoCaptureHUDElementsSight_1.SightGuideline, { sightId: sightId, sightGuidelines: sightGuidelines, disabled: currentTutorialStep !== hooks_1.TutorialSteps.GUIDELINE, addDamage: addDamage, enableDefaultMessage: true }), currentTutorialStep === hooks_1.TutorialSteps.SIGHT_TUTORIAL && ((0, jsx_runtime_1.jsx)(components_1.SightTutorialButton, { toggleSightTutorial: toggleSightTutorial, style: PhotoCaptureHUDTutorial_styles_1.styles['sightTutorialBtn'] })), (0, jsx_runtime_1.jsx)(common_ui_web_1.Button, { style: __assign(__assign({}, PhotoCaptureHUDTutorial_styles_1.styles['closeButton']), getButtonStyle(allowSkipTutorial)), disabled: !allowSkipTutorial, icon: 'close', primaryColor: primaryColor, onClick: onCloseTutorial })] })), (0, jsx_runtime_1.jsx)("div", __assign({ style: PhotoCaptureHUDTutorial_styles_1.styles['arrows'] }, { children: (0, jsx_runtime_1.jsx)(ArrowIcon_1.ArrowIcon, { tutorialStep: currentTutorialStep }) }))] })), (0, jsx_runtime_1.jsx)(DisplayText_1.DisplayText, { tutorialStep: currentTutorialStep }), (0, jsx_runtime_1.jsx)(common_ui_web_1.Button, __assign({ style: PhotoCaptureHUDTutorial_styles_1.styles['nextButton'], primaryColor: 'primary', onClick: onNextTutorialStep }, { children: t('photo.hud.tutorial.next') }))] })) }))) : null;
 }
 exports.PhotoCaptureHUDTutorial = PhotoCaptureHUDTutorial;

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

@@ -18,10 +18,11 @@ exports.styles = {
         flexDirection: 'column',
         position: 'fixed',
         width: "calc(98% - (".concat(HUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 4, "px))"),
-        top: '10px',
+        top: 0,
         bottom: '40px',
         justifyContent: 'space-between',
         alignItems: 'center',
+        margin: '10px',
     },
     elementsContainerPortrait: {
         __media: { portrait: true },
@@ -69,8 +70,13 @@ exports.styles = {
     },
     arrowSightTutorial: {
         position: 'fixed',
-        bottom: '60px',
-        left: "calc((".concat(HUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2, "px))"),
+        top: '30px',
+        left: '80px',
         width: '40px',
     },
+    sightTutorialBtn: {
+        position: 'fixed',
+        left: '10px',
+        padding: '8px',
+    },
 };

package/lib/PhotoCapture/hooks/index.d.ts

@@ -3,3 +3,4 @@ export * from './useComplianceAnalytics';
 export * from './usePhotoCaptureTutorial';
 export * from './usePhotoCaptureSightGuidelines';
 export * from './useInspectionComplete';
+export * from './usePhotoCaptureSightTutorial';

package/lib/PhotoCapture/hooks/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./useComplianceAnalytics"), exports);
 __exportStar(require("./usePhotoCaptureTutorial"), exports);
 __exportStar(require("./usePhotoCaptureSightGuidelines"), exports);
 __exportStar(require("./useInspectionComplete"), exports);
+__exportStar(require("./usePhotoCaptureSightTutorial"), exports);

package/lib/PhotoCapture/hooks/useInspectionComplete.d.ts

@@ -18,6 +18,10 @@ export interface InspectionCompleteParams extends Pick<PhotoCaptureAppConfig, 's
      * Global loading state of the PhotoCapture component.
      */
     loading: LoadingState;
+    /**
+     * Callback called when the user updates the duration of the inspection capture.
+     */
+    onUpdateDuration: (forceUpdate?: boolean) => Promise<number>;
     /**
      * Callback called when the user clicks on the "Complete" button in the HUD.
      */
@@ -35,4 +39,4 @@ export interface InspectionCompleteHandle {
 /**
  * Custom hook used to generate the callback called when the user has completed the inspection.
  */
-export declare function useInspectionComplete({ startTasks, sightState, loading, startTasksOnComplete, onComplete, }: InspectionCompleteParams): InspectionCompleteHandle;
+export declare function useInspectionComplete({ startTasks, sightState, loading, startTasksOnComplete, onUpdateDuration, onComplete, }: InspectionCompleteParams): InspectionCompleteHandle;

package/lib/PhotoCapture/hooks/useInspectionComplete.js

@@ -1,4 +1,40 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInspectionComplete = void 0;
 var common_1 = require("@monkvision/common");
@@ -9,25 +45,37 @@ var monitoring_1 = require("@monkvision/monitoring");
  * Custom hook used to generate the callback called when the user has completed the inspection.
  */
 function useInspectionComplete(_a) {
-    var startTasks = _a.startTasks, sightState = _a.sightState, loading = _a.loading, startTasksOnComplete = _a.startTasksOnComplete, onComplete = _a.onComplete;
+    var _this = this;
+    var startTasks = _a.startTasks, sightState = _a.sightState, loading = _a.loading, startTasksOnComplete = _a.startTasksOnComplete, onUpdateDuration = _a.onUpdateDuration, onComplete = _a.onComplete;
     var analytics = (0, analytics_1.useAnalytics)();
     var monitoring = (0, monitoring_1.useMonitoring)();
-    var handleInspectionCompleted = (0, react_1.useCallback)(function () {
-        startTasks()
-            .then(function () {
-            analytics.trackEvent('Capture Completed');
-            analytics.setUserProperties({
-                captureCompleted: true,
-                sightSelected: 'inspection-completed',
-            });
-            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
-            sightState.setIsInspectionCompleted(true);
-        })
-            .catch(function (err) {
-            loading.onError(err);
-            monitoring.handleError(err);
+    var handleInspectionCompleted = (0, react_1.useCallback)(function () { return __awaiter(_this, void 0, void 0, function () {
+        var updatedDuration;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, onUpdateDuration(true)];
+                case 1:
+                    updatedDuration = _a.sent();
+                    startTasks()
+                        .then(function () {
+                        analytics.trackEvent('Capture Completed', {
+                            capture_duration: updatedDuration,
+                        });
+                        analytics.setUserProperties({
+                            captureCompleted: true,
+                            sightSelected: 'inspection-completed',
+                        });
+                        onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+                        sightState.setIsInspectionCompleted(true);
+                    })
+                        .catch(function (err) {
+                        loading.onError(err);
+                        monitoring.handleError(err);
+                    });
+                    return [2 /*return*/];
+            }
         });
-    }, []);
+    }); }, []);
     (0, react_1.useEffect)(function () {
         var isInspectionCompliant = sightState.isInspectionCompliant, isInspectionCompleted = sightState.isInspectionCompleted;
         if (startTasksOnComplete && isInspectionCompliant && !isInspectionCompleted) {

package/lib/PhotoCapture/hooks/usePhotoCaptureSightState.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { MonkApiConfig } from '@monkvision/network';
 import { LoadingState } from '@monkvision/common';
-import { ComplianceOptions, Sight, TaskName, PhotoCaptureAppConfig } from '@monkvision/types';
+import { ComplianceOptions, Sight, TaskName } from '@monkvision/types';
 /**
  * Object containing state management utilities for the PhotoCapture sights.
  */
@@ -54,7 +54,7 @@ export interface PhotoCaptureSightState {
 /**
  * Parameters of the usePhotoCaptureSightState hook.
  */
-export interface PhotoCaptureSightsParams extends Pick<PhotoCaptureAppConfig, 'startTasksOnComplete'> {
+export interface PhotoCaptureSightsParams {
     /**
      * The inspection ID.
      */
@@ -88,13 +88,9 @@ export interface PhotoCaptureSightsParams extends Pick<PhotoCaptureAppConfig, 's
      * sight will be used.
      */
     tasksBySight?: Record<string, TaskName[]>;
-    /**
-     * Callback called when inspection capture is complete.
-     */
-    onComplete?: () => void;
 }
 /**
  * Custom hook used to manage the state of the PhotoCapture sights. This state is automatically fetched from the API at
  * the start of the PhotoCapture process in order to allow users to start the inspection where they left it before.
  */
-export declare function usePhotoCaptureSightState({ inspectionId, captureSights, apiConfig, loading, onLastSightTaken, tasksBySight, setIsInitialInspectionFetched, complianceOptions, startTasksOnComplete, onComplete, }: PhotoCaptureSightsParams): PhotoCaptureSightState;
+export declare function usePhotoCaptureSightState({ inspectionId, captureSights, apiConfig, loading, onLastSightTaken, tasksBySight, setIsInitialInspectionFetched, complianceOptions, }: PhotoCaptureSightsParams): PhotoCaptureSightState;

package/lib/PhotoCapture/hooks/usePhotoCaptureSightState.js

@@ -77,7 +77,7 @@ function getNotCompliantSights(inspectionId, captureSights, entities, notComplia
  * the start of the PhotoCapture process in order to allow users to start the inspection where they left it before.
  */
 function usePhotoCaptureSightState(_a) {
-    var inspectionId = _a.inspectionId, captureSights = _a.captureSights, apiConfig = _a.apiConfig, loading = _a.loading, onLastSightTaken = _a.onLastSightTaken, tasksBySight = _a.tasksBySight, setIsInitialInspectionFetched = _a.setIsInitialInspectionFetched, complianceOptions = _a.complianceOptions, startTasksOnComplete = _a.startTasksOnComplete, onComplete = _a.onComplete;
+    var inspectionId = _a.inspectionId, captureSights = _a.captureSights, apiConfig = _a.apiConfig, loading = _a.loading, onLastSightTaken = _a.onLastSightTaken, tasksBySight = _a.tasksBySight, setIsInitialInspectionFetched = _a.setIsInitialInspectionFetched, complianceOptions = _a.complianceOptions;
     if (captureSights.length === 0) {
         throw new Error('Empty sight list given to the Monk PhotoCapture component.');
     }
@@ -177,7 +177,7 @@ function usePhotoCaptureSightState(_a) {
         if (nextSight) {
             setSelectedSight(nextSight);
         }
-        else if (!startTasksOnComplete || !onComplete) {
+        else {
             onLastSightTaken();
         }
     }, [sightsTaken, selectedSight, captureSights, onLastSightTaken]);

package/lib/PhotoCapture/hooks/usePhotoCaptureSightTutorial.d.ts

@@ -0,0 +1,14 @@
+export interface HandlePhotoCaptureSightTutorial {
+    /**
+     * 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;
+}
+/**
+ * Custom hook used to manage the state of photo capture sight tutorial.
+ */
+export declare function usePhotoCaptureSightTutorial(): HandlePhotoCaptureSightTutorial;

package/lib/PhotoCapture/hooks/usePhotoCaptureSightTutorial.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePhotoCaptureSightTutorial = void 0;
+var common_1 = require("@monkvision/common");
+var react_1 = require("react");
+/**
+ * Custom hook used to manage the state of photo capture sight tutorial.
+ */
+function usePhotoCaptureSightTutorial() {
+    var _a = (0, react_1.useState)(false), showSightTutorial = _a[0], setShowSightTutorial = _a[1];
+    var toggleSightTutorial = function () {
+        setShowSightTutorial(!showSightTutorial);
+    };
+    return (0, common_1.useObjectMemo)({ showSightTutorial: showSightTutorial, toggleSightTutorial: toggleSightTutorial });
+}
+exports.usePhotoCaptureSightTutorial = usePhotoCaptureSightTutorial;

package/lib/PhotoCapture/hooks/usePhotoCaptureTutorial.js

@@ -45,7 +45,7 @@ function usePhotoCaptureTutorial(_a) {
         if (!enableSightGuidelines) {
             steps = steps.filter(function (v) { return v !== TutorialSteps.GUIDELINE; });
         }
-        if (!enableSightTutorial) {
+        if (enableSightTutorial === types_1.PhotoCaptureSightTutorialOption.DISABLED) {
             steps = steps.filter(function (v) { return v !== TutorialSteps.SIGHT_TUTORIAL; });
         }
         if (currentTutorialStep === steps.at(-1)) {

package/lib/components/SightTutorialButton/SightTutorialButton.d.ts

@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes } from 'react';
+/**
+ * Props of the SightTutorialButton component.
+ */
+export interface SightTutorialButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Callback called when the user clicks on the "help" button in PhotoCapture.
+     */
+    toggleSightTutorial?: () => void;
+}
+/**
+ * Component implementing a cancel button displayed in the Camera HUD.
+ */
+export declare function SightTutorialButton({ toggleSightTutorial, ...passThroughProps }: SightTutorialButtonProps): JSX.Element;

package/lib/components/SightTutorialButton/SightTutorialButton.js

@@ -0,0 +1,36 @@
+"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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SightTutorialButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var common_ui_web_1 = require("@monkvision/common-ui-web");
+var SightTutorialButton_styles_1 = require("./SightTutorialButton.styles");
+/**
+ * Component implementing a cancel button displayed in the Camera HUD.
+ */
+function SightTutorialButton(_a) {
+    var toggleSightTutorial = _a.toggleSightTutorial, passThroughProps = __rest(_a, ["toggleSightTutorial"]);
+    return ((0, jsx_runtime_1.jsx)(common_ui_web_1.Button, __assign({ variant: 'text', onClick: toggleSightTutorial, style: SightTutorialButton_styles_1.styles['sightTutorialButton'] }, passThroughProps, { children: (0, jsx_runtime_1.jsx)(common_ui_web_1.Icon, { size: 50, icon: 'help-outline', primaryColor: 'text-primary' }) })));
+}
+exports.SightTutorialButton = SightTutorialButton;

package/lib/components/SightTutorialButton/SightTutorialButton.styles.d.ts

@@ -0,0 +1,2 @@
+import { Styles } from '@monkvision/types';
+export declare const styles: Styles;

package/lib/components/SightTutorialButton/SightTutorialButton.styles.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+exports.styles = {
+    sightTutorialButton: { padding: '8px' },
+};

package/lib/components/SightTutorialButton/index.d.ts

@@ -0,0 +1 @@
+export { SightTutorialButton, type SightTutorialButtonProps } from './SightTutorialButton';

package/lib/components/SightTutorialButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SightTutorialButton = void 0;
+var SightTutorialButton_1 = require("./SightTutorialButton");
+Object.defineProperty(exports, "SightTutorialButton", { enumerable: true, get: function () { return SightTutorialButton_1.SightTutorialButton; } });

package/lib/components/index.d.ts

@@ -6,3 +6,4 @@ export * from './PartSelection';
 export * from './Counter';
 export * from './ZoomOutShot';
 export * from './HUDOverlay';
+export * from './SightTutorialButton';

package/lib/components/index.js

@@ -22,3 +22,4 @@ __exportStar(require("./PartSelection"), exports);
 __exportStar(require("./Counter"), exports);
 __exportStar(require("./ZoomOutShot"), exports);
 __exportStar(require("./HUDOverlay"), exports);
+__exportStar(require("./SightTutorialButton"), exports);

package/lib/hooks/index.d.ts

@@ -8,3 +8,4 @@ export * from './usePhotoCaptureImages';
 export * from './useBadConnectionWarning';
 export * from './useAdaptiveCameraConfig';
 export * from './useTracking';
+export * from './useCaptureDuration';

package/lib/hooks/index.js

@@ -24,3 +24,4 @@ __exportStar(require("./usePhotoCaptureImages"), exports);
 __exportStar(require("./useBadConnectionWarning"), exports);
 __exportStar(require("./useAdaptiveCameraConfig"), exports);
 __exportStar(require("./useTracking"), exports);
+__exportStar(require("./useCaptureDuration"), exports);

package/lib/hooks/useCaptureDuration.d.ts

@@ -0,0 +1,39 @@
+import { MonkApiConfig } from '@monkvision/network';
+/**
+ * Parameters of the useCaptureDuration hook.
+ */
+export interface CaptureDurationParams {
+    /**
+     * The inspection ID.
+     */
+    inspectionId: string;
+    /**
+     * The api config used to communicate with the API.
+     */
+    apiConfig: MonkApiConfig;
+    /**
+     * Boolean indicating if the inspection is completed or not.
+     */
+    isInspectionCompleted: boolean;
+    /**
+     * Interval in milliseconds for the heartbeat to update the duration.
+     */
+    heartbeatInterval?: number;
+    /**
+     * Idle timeout in milliseconds to pause the capture duration tracking.
+     */
+    idleTimeout?: number;
+}
+/**
+ *  Handle used to manage the capture duration.
+ */
+export interface HandleCaptureDuration {
+    /**
+     * Callback to update the capture duration in the API.
+     */
+    updateDuration: () => Promise<number>;
+}
+/**
+ * Custom hook used to track the duration of an inspection session.
+ */
+export declare function useCaptureDuration({ apiConfig, inspectionId, isInspectionCompleted, heartbeatInterval, idleTimeout, }: CaptureDurationParams): HandleCaptureDuration;