@monkvision/inspection-capture-web 4.5.6 → 4.6.0

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

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { CaptureAppConfig, Image, PixelDimensions, Sight } from '@monkvision/types';
-import { PhotoCaptureMode, TutorialSteps } from '../../hooks';
+import { PhotoCaptureAppConfig, Image, PixelDimensions, Sight, VehiclePart, VehicleType } from '@monkvision/types';
+import { TutorialSteps } from '../../hooks';
+import { CaptureMode } from '../../../types';
 /**
  * Props of the PhotoCaptureHUDElements component.
  */
-export interface PhotoCaptureHUDElementsProps extends Pick<CaptureAppConfig, 'enableSightGuidelines' | 'sightGuidelines' | 'enableAddDamage'> {
+export interface PhotoCaptureHUDElementsProps extends Pick<PhotoCaptureAppConfig, 'enableSightGuidelines' | 'sightGuidelines' | 'addDamage'> {
     /**
      * The currently selected sight in the PhotoCapture component : the sight that the user needs to capture.
      */
@@ -20,15 +21,23 @@ export interface PhotoCaptureHUDElementsProps extends Pick<CaptureAppConfig, 'en
     /**
      * The current mode of the component.
      */
-    mode: PhotoCaptureMode;
+    mode: CaptureMode;
     /**
      * The current tutorial step in PhotoCapture component.
      */
     tutorialStep: TutorialSteps | null;
+    /**
+     * Current vehicle parts selected to take a picture of.
+     */
+    vehicleParts: VehiclePart[];
     /**
      * Callback called when the user presses the Add Damage button.
      */
     onAddDamage: () => void;
+    /**
+     * Callback called when the user selects the parts to take a picture of.
+     */
+    onAddDamagePartsSelected?: (parts: VehiclePart[]) => void;
     /**
      * Callback called when the user cancels the Add Damage mode.
      */
@@ -41,6 +50,10 @@ export interface PhotoCaptureHUDElementsProps extends Pick<CaptureAppConfig, 'en
      * Callback called when the user manually selects a sight to retake.
      */
     onRetakeSight: (sight: string) => void;
+    /**
+     * Callback called when the user clicks on the "Validate" button of the Add Damage mode.
+     */
+    onValidateVehicleParts: () => void;
     /**
      * The effective pixel dimensions of the Camera video stream on the screen.
      */
@@ -57,6 +70,10 @@ export interface PhotoCaptureHUDElementsProps extends Pick<CaptureAppConfig, 'en
      * The current images taken by the user (ignoring retaken pictures etc.).
      */
     images: Image[];
+    /**
+     * The vehicle type of the inspection.
+     */
+    vehicleType: VehicleType;
 }
 /**
  * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process.

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

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PhotoCaptureHUDElements = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var hooks_1 = require("../../hooks");
 var PhotoCaptureHUDElementsSight_1 = require("../PhotoCaptureHUDElementsSight");
-var PhotoCaptureHUDElementsAddDamage1stShot_1 = require("../PhotoCaptureHUDElementsAddDamage1stShot");
-var PhotoCaptureHUDElementsAddDamage2ndShot_1 = require("../PhotoCaptureHUDElementsAddDamage2ndShot");
+var components_1 = require("../../../components");
+var types_1 = require("../../../types");
 /**
  * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process.
  */
@@ -13,12 +12,15 @@ function PhotoCaptureHUDElements(params) {
     if (params.isLoading || !!params.error) {
         return null;
     }
-    if (params.mode === hooks_1.PhotoCaptureMode.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, enableAddDamage: params.enableAddDamage, sightGuidelines: params.sightGuidelines, enableSightGuidelines: params.enableSightGuidelines, tutorialStep: params.tutorialStep }));
+    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 }));
     }
-    if (params.mode === hooks_1.PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT) {
-        return (0, jsx_runtime_1.jsx)(PhotoCaptureHUDElementsAddDamage1stShot_1.PhotoCaptureHUDElementsAddDamage1stShot, { onCancel: params.onCancelAddDamage });
+    if (params.mode === types_1.CaptureMode.ADD_DAMAGE_1ST_SHOT) {
+        return (0, jsx_runtime_1.jsx)(components_1.ZoomOutShot, { onCancel: params.onCancelAddDamage });
     }
-    return ((0, jsx_runtime_1.jsx)(PhotoCaptureHUDElementsAddDamage2ndShot_1.PhotoCaptureHUDElementsAddDamage2ndShot, { onCancel: params.onCancelAddDamage, streamDimensions: params.previewDimensions }));
+    if ([types_1.CaptureMode.ADD_DAMAGE_2ND_SHOT, types_1.CaptureMode.ADD_DAMAGE_PART_SELECT_SHOT].includes(params.mode)) {
+        return ((0, jsx_runtime_1.jsx)(components_1.CloseUpShot, { onCancel: params.onCancelAddDamage, streamDimensions: params.previewDimensions, showCounter: params.mode === types_1.CaptureMode.ADD_DAMAGE_2ND_SHOT }));
+    }
+    return ((0, jsx_runtime_1.jsx)(components_1.PartSelection, { onCancel: params.onCancelAddDamage, vehicleParts: params.vehicleParts, vehicleType: params.vehicleType, onValidateVehicleParts: params.onValidateVehicleParts, onAddDamagePartsSelected: params.onAddDamagePartsSelected }));
 }
 exports.PhotoCaptureHUDElements = PhotoCaptureHUDElements;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { AddDamage } from '@monkvision/types';
 /**
  * Props of the AddDamageButton component.
  */
@@ -9,12 +10,10 @@ export interface AddDamageButtonProps {
     onAddDamage?: () => void;
     /**
      * Boolean indicating whether the Add Damage feature is enabled. If disabled, the `Add Damage` button will be hidden.
-     *
-     * @default true
      */
-    enableAddDamage?: boolean;
+    addDamage?: AddDamage;
 }
 /**
  * Custom button displayed in the PhotoCapture Camera HUD that allows user to enter add damage mode.
  */
-export declare function AddDamageButton({ onAddDamage, enableAddDamage }: AddDamageButtonProps): JSX.Element;
+export declare function AddDamageButton({ onAddDamage, addDamage }: AddDamageButtonProps): JSX.Element | null;

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

@@ -15,14 +15,15 @@ exports.AddDamageButton = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var common_ui_web_1 = require("@monkvision/common-ui-web");
 var react_i18next_1 = require("react-i18next");
-var hooks_1 = require("../../hooks");
+var types_1 = require("@monkvision/types");
+var hooks_1 = require("../../../../hooks");
 /**
  * Custom button displayed in the PhotoCapture Camera HUD that allows user to enter add damage mode.
  */
 function AddDamageButton(_a) {
-    var onAddDamage = _a.onAddDamage, enableAddDamage = _a.enableAddDamage;
+    var onAddDamage = _a.onAddDamage, addDamage = _a.addDamage;
     var t = (0, react_i18next_1.useTranslation)().t;
-    var primaryColor = (0, hooks_1.usePhotoCaptureHUDButtonBackground)();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: enableAddDamage && ((0, jsx_runtime_1.jsx)(common_ui_web_1.Button, __assign({ icon: 'add', onClick: onAddDamage, "data-testid": 'monk-test-btn', primaryColor: primaryColor }, { children: t('photo.hud.sight.addDamageBtn') }))) }));
+    var primaryColor = (0, hooks_1.useColorBackground)();
+    return [types_1.AddDamage.TWO_SHOT, types_1.AddDamage.PART_SELECT].includes(addDamage) ? ((0, jsx_runtime_1.jsx)(common_ui_web_1.Button, __assign({ icon: 'add', onClick: onAddDamage, "data-testid": 'monk-test-btn', primaryColor: primaryColor }, { children: t('photo.hud.sight.addDamageBtn') }))) : null;
 }
 exports.AddDamageButton = AddDamageButton;

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, enableAddDamage, sightGuidelines, enableSightGuidelines, tutorialStep, }: PhotoCaptureHUDElementsSightProps): JSX.Element;
+export declare function PhotoCaptureHUDElementsSight({ sights, selectedSight, onSelectedSight, onRetakeSight, onAddDamage, sightsTaken, previewDimensions, images, addDamage, sightGuidelines, enableSightGuidelines, tutorialStep, }: PhotoCaptureHUDElementsSightProps): JSX.Element;

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

@@ -18,17 +18,18 @@ var SightSlider_1 = require("./SightSlider");
 var PhotoCaptureHUDElementsSight_styles_1 = require("./PhotoCaptureHUDElementsSight.styles");
 var AddDamageButton_1 = require("./AddDamageButton");
 var hooks_1 = require("./hooks");
-var PhotoCaptureHUDCounter_1 = require("../PhotoCaptureHUDCounter");
 var hooks_2 = require("../../hooks");
 var SightGuideline_1 = require("./SightGuideline");
+var components_1 = require("../../../components");
+var types_1 = 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, sightsTaken = _a.sightsTaken, previewDimensions = _a.previewDimensions, images = _a.images, enableAddDamage = _a.enableAddDamage, 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, sightsTaken = _a.sightsTaken, previewDimensions = _a.previewDimensions, images = _a.images, addDamage = _a.addDamage, sightGuidelines = _a.sightGuidelines, enableSightGuidelines = _a.enableSightGuidelines, 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, enableAddDamage: enableAddDamage }), (0, jsx_runtime_1.jsx)(AddDamageButton_1.AddDamageButton, { onAddDamage: onAddDamage, enableAddDamage: enableAddDamage })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: style.bottom }, { children: [(0, jsx_runtime_1.jsx)(PhotoCaptureHUDCounter_1.PhotoCaptureHUDCounter, { mode: hooks_2.PhotoCaptureMode.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, 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 })] }))] })))] })));
 }
 exports.PhotoCaptureHUDElementsSight = PhotoCaptureHUDElementsSight;

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { CaptureAppConfig } from '@monkvision/types';
+import { PhotoCaptureAppConfig } from '@monkvision/types';
 /**
  * Props of the SightGuideline component.
  */
-export interface SightGuidelineProps extends Pick<CaptureAppConfig, 'enableAddDamage' | 'sightGuidelines' | 'enableSightGuidelines'> {
+export interface SightGuidelineProps extends Pick<PhotoCaptureAppConfig, 'addDamage' | 'sightGuidelines' | 'enableSightGuidelines'> {
     /**
      * The id of the sight.
      */
@@ -18,4 +18,4 @@ export interface SightGuidelineProps extends Pick<CaptureAppConfig, 'enableAddDa
 /**
  * Custom button displaying the sight guideline.
  */
-export declare function SightGuideline({ sightId, sightGuidelines, enableSightGuidelines, enableAddDamage, enableDefaultMessage, }: SightGuidelineProps): JSX.Element;
+export declare function SightGuideline({ sightId, sightGuidelines, enableSightGuidelines, addDamage, enableDefaultMessage, }: SightGuidelineProps): JSX.Element;

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

@@ -15,19 +15,20 @@ 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 hooks_1 = require("../../hooks");
 var SightGuideline_styles_1 = require("./SightGuideline.styles");
+var hooks_1 = require("../../../../hooks");
 /**
  * Custom button displaying the sight guideline.
  */
 function SightGuideline(_a) {
-    var sightId = _a.sightId, sightGuidelines = _a.sightGuidelines, enableSightGuidelines = _a.enableSightGuidelines, enableAddDamage = _a.enableAddDamage, _b = _a.enableDefaultMessage, enableDefaultMessage = _b === void 0 ? false : _b;
+    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.usePhotoCaptureHUDButtonBackground)();
+    var primaryColor = (0, hooks_1.useColorBackground)();
     var _d = (0, react_i18next_1.useTranslation)(), i18n = _d.i18n, t = _d.t;
-    var style = enableAddDamage ? SightGuideline_styles_1.styles['container'] : SightGuideline_styles_1.styles['containerWide'];
+    var style = addDamage === types_1.AddDamage.DISABLED ? SightGuideline_styles_1.styles['containerWide'] : SightGuideline_styles_1.styles['container'];
     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')

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.styles = void 0;
-var PhotoCaptureHUDButtons_styles_1 = require("../../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles");
+var HUDButtons_styles_1 = require("../../../../components/HUDButtons/HUDButtons.styles");
 exports.styles = {
     container: {
         display: 'flex',
@@ -12,7 +12,7 @@ exports.styles = {
         position: 'fixed',
         left: '50%',
         transform: 'translate(-50%, 0)',
-        width: "calc(98% - (".concat(PhotoCaptureHUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 4, "px))"),
+        width: "calc(98% - (".concat(HUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 4, "px))"),
         justifyContent: 'center',
     },
     button: {

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.styles = void 0;
-var PhotoCaptureHUDButtons_styles_1 = require("../../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles");
+var HUDButtons_styles_1 = require("../../../../components/HUDButtons/HUDButtons.styles");
 exports.styles = {
     container: {
         display: 'flex',
@@ -18,7 +18,7 @@ exports.styles = {
     },
     containerPortrait: {
         __media: { portrait: true },
-        bottom: "".concat(PhotoCaptureHUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 1.5, "px"),
+        bottom: "".concat(HUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 1.5, "px"),
         right: 0,
         paddingRight: '45%',
     },

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

@@ -1,10 +1,10 @@
-import { CaptureAppConfig, Image, PixelDimensions, Sight } from '@monkvision/types';
+import { PhotoCaptureAppConfig, Image, PixelDimensions, Sight } from '@monkvision/types';
 import { CSSProperties } from 'react';
 import { TutorialSteps } from '../../hooks';
 /**
  * Props of the PhotoCaptureHUDElementsSight component.
  */
-export interface PhotoCaptureHUDElementsSightProps extends Pick<CaptureAppConfig, 'enableSightGuidelines' | 'sightGuidelines' | 'enableAddDamage'> {
+export interface PhotoCaptureHUDElementsSightProps extends Pick<PhotoCaptureAppConfig, 'enableSightGuidelines' | 'sightGuidelines' | 'addDamage'> {
     /**
      * The list of sights provided to the PhotoCapture component.
      */

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { CaptureAppConfig } from '@monkvision/types';
+import { PhotoCaptureAppConfig } from '@monkvision/types';
 import { TutorialSteps } from '../../hooks';
 /**
  * Props of the PhotoCaptureHUDTutorial component.
  */
-export interface PhotoCaptureHUDTutorialProps extends Pick<CaptureAppConfig, 'allowSkipTutorial' | 'sightGuidelines'> {
+export interface PhotoCaptureHUDTutorialProps extends Pick<PhotoCaptureAppConfig, 'allowSkipTutorial' | 'sightGuidelines' | 'addDamage'> {
     /**
      * The id of the sight.
      */
@@ -25,4 +25,4 @@ export interface PhotoCaptureHUDTutorialProps extends Pick<CaptureAppConfig, 'al
 /**
  * Component that displays an tutorial overlay on top of the PhotoCapture component.
  */
-export declare function PhotoCaptureHUDTutorial({ currentTutorialStep, allowSkipTutorial, sightGuidelines, sightId, onNextTutorialStep, onCloseTutorial, }: PhotoCaptureHUDTutorialProps): JSX.Element | null;
+export declare function PhotoCaptureHUDTutorial({ currentTutorialStep, allowSkipTutorial, sightGuidelines, sightId, onNextTutorialStep, onCloseTutorial, addDamage, }: PhotoCaptureHUDTutorialProps): JSX.Element | null;

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

@@ -17,10 +17,10 @@ var react_i18next_1 = require("react-i18next");
 var common_ui_web_1 = require("@monkvision/common-ui-web");
 var PhotoCaptureHUDTutorial_styles_1 = require("./PhotoCaptureHUDTutorial.styles");
 var hooks_1 = require("../../hooks");
-var hooks_2 = require("../hooks");
 var PhotoCaptureHUDElementsSight_1 = require("../PhotoCaptureHUDElementsSight");
 var ArrowIcon_1 = require("./ArrowIcon");
 var DisplayText_1 = require("./DisplayText");
+var hooks_2 = require("../../../hooks");
 function getButtonStyle(enableAddDamage) {
     return { visibility: enableAddDamage ? 'visible' : 'hidden' };
 }
@@ -28,9 +28,9 @@ 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;
+    var currentTutorialStep = _a.currentTutorialStep, allowSkipTutorial = _a.allowSkipTutorial, sightGuidelines = _a.sightGuidelines, sightId = _a.sightId, onNextTutorialStep = _a.onNextTutorialStep, onCloseTutorial = _a.onCloseTutorial, addDamage = _a.addDamage;
     var t = (0, react_i18next_1.useTranslation)().t;
-    var primaryColor = (0, hooks_2.usePhotoCaptureHUDButtonBackground)();
-    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: PhotoCaptureHUDTutorial_styles_1.styles['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, enableSightGuidelines: currentTutorialStep === hooks_1.TutorialSteps.GUIDELINE, enableAddDamage: true, 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;
+    var primaryColor = (0, hooks_2.useColorBackground)();
+    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: PhotoCaptureHUDTutorial_styles_1.styles['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, enableSightGuidelines: 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;
 }
 exports.PhotoCaptureHUDTutorial = PhotoCaptureHUDTutorial;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.styles = void 0;
-var PhotoCaptureHUDButtons_styles_1 = require("../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles");
+var HUDButtons_styles_1 = require("../../../components/HUDButtons/HUDButtons.styles");
 exports.styles = {
     backdropContainer: {
         position: 'fixed',
@@ -17,7 +17,7 @@ exports.styles = {
         display: 'flex',
         flexDirection: 'column',
         position: 'fixed',
-        width: "calc(98% - (".concat(PhotoCaptureHUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 4, "px))"),
+        width: "calc(98% - (".concat(HUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 4, "px))"),
         top: '10px',
         bottom: '40px',
         justifyContent: 'space-between',
@@ -63,7 +63,7 @@ exports.styles = {
     arrowSightTutorial: {
         position: 'fixed',
         bottom: '60px',
-        left: "calc((".concat(PhotoCaptureHUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2, "px))"),
+        left: "calc((".concat(HUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2, "px))"),
         width: '40px',
     },
 };

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

@@ -1,2 +1 @@
 export * from './usePhotoCaptureHUDStyle';
-export * from './usePhotoCaptureHUDButtonBackground';

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

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./usePhotoCaptureHUDStyle"), exports);
-__exportStar(require("./usePhotoCaptureHUDButtonBackground"), exports);

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

@@ -1,11 +1,5 @@
 export { PhotoCaptureHUD, type PhotoCaptureHUDProps } from './PhotoCaptureHUD';
 export * from './hooks';
-export * from './PhotoCaptureHUDButtons';
-export * from './PhotoCaptureHUDCancelButton';
-export * from './PhotoCaptureHUDCounter';
-export * from './PhotoCaptureHUDOverlay';
 export * from './PhotoCaptureHUDElements';
-export * from './PhotoCaptureHUDElementsAddDamage1stShot';
-export * from './PhotoCaptureHUDElementsAddDamage2ndShot';
 export * from './PhotoCaptureHUDElementsSight';
 export * from './PhotoCaptureHUDTutorial';

package/lib/PhotoCapture/PhotoCaptureHUD/index.js

@@ -18,12 +18,6 @@ exports.PhotoCaptureHUD = void 0;
 var PhotoCaptureHUD_1 = require("./PhotoCaptureHUD");
 Object.defineProperty(exports, "PhotoCaptureHUD", { enumerable: true, get: function () { return PhotoCaptureHUD_1.PhotoCaptureHUD; } });
 __exportStar(require("./hooks"), exports);
-__exportStar(require("./PhotoCaptureHUDButtons"), exports);
-__exportStar(require("./PhotoCaptureHUDCancelButton"), exports);
-__exportStar(require("./PhotoCaptureHUDCounter"), exports);
-__exportStar(require("./PhotoCaptureHUDOverlay"), exports);
 __exportStar(require("./PhotoCaptureHUDElements"), exports);
-__exportStar(require("./PhotoCaptureHUDElementsAddDamage1stShot"), exports);
-__exportStar(require("./PhotoCaptureHUDElementsAddDamage2ndShot"), exports);
 __exportStar(require("./PhotoCaptureHUDElementsSight"), exports);
 __exportStar(require("./PhotoCaptureHUDTutorial"), exports);

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

@@ -1,11 +1,3 @@
 export * from './usePhotoCaptureSightState';
-export * from './useStartTasksOnComplete';
-export * from './useAddDamageMode';
-export * from './useUploadQueue';
-export * from './usePictureTaken';
-export * from './usePhotoCaptureImages';
 export * from './useComplianceAnalytics';
-export * from './useBadConnectionWarning';
-export * from './useAdaptiveCameraConfig';
-export * from './useTracking';
 export * from './usePhotoCaptureTutorial';

package/lib/PhotoCapture/hooks/index.js

@@ -15,13 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./usePhotoCaptureSightState"), exports);
-__exportStar(require("./useStartTasksOnComplete"), exports);
-__exportStar(require("./useAddDamageMode"), exports);
-__exportStar(require("./useUploadQueue"), exports);
-__exportStar(require("./usePictureTaken"), exports);
-__exportStar(require("./usePhotoCaptureImages"), exports);
 __exportStar(require("./useComplianceAnalytics"), exports);
-__exportStar(require("./useBadConnectionWarning"), exports);
-__exportStar(require("./useAdaptiveCameraConfig"), exports);
-__exportStar(require("./useTracking"), exports);
 __exportStar(require("./usePhotoCaptureTutorial"), exports);

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

@@ -75,6 +75,9 @@ export interface PhotoCaptureSightsParams {
      * The options for the compliance conf
      */
     complianceOptions: ComplianceOptions;
+    /**
+     * Callback used to manually update the completion state of the inspection.
+     */
     setIsInitialInspectionFetched: (state: boolean) => void;
     /**
      * Record associating each sight with a list of tasks to execute for it. If not provided, the default tasks of the

package/lib/PhotoCapture/hooks/usePhotoCaptureSightState.js

@@ -99,7 +99,7 @@ function usePhotoCaptureSightState(_a) {
                 var notCompliantSights = captureSights
                     .map(function (s) { return ({
                     sight: s,
-                    image: (0, common_1.getInspectionImages)(inspectionId, state.images, true).find(function (i) { return i.inspectionId === inspectionId && i.sightId === s.id; }),
+                    image: (0, common_1.getInspectionImages)(inspectionId, state.images, undefined, true).find(function (i) { return i.inspectionId === inspectionId && i.sightId === s.id; }),
                 }); })
                     .filter(function (_a) {
                     var image = _a.image;

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

@@ -1,4 +1,4 @@
-import { CaptureAppConfig } from '@monkvision/types';
+import { PhotoCaptureAppConfig } from '@monkvision/types';
 export declare const STORAGE_KEY_PHOTO_CAPTURE_TUTORIAL = "@monk_photoCaptureTutorial";
 /**
  * Enum of the different steps of the PhotoCapture Tutorial component.
@@ -24,7 +24,7 @@ export declare enum TutorialSteps {
 /**
  * Parameters of the usePhotoCaptureTutorial hook.
  */
-export interface PhotoCaptureTutorial extends Pick<CaptureAppConfig, 'enableTutorial' | 'enableSightTutorial' | 'enableSightGuidelines'> {
+export interface PhotoCaptureTutorial extends Pick<PhotoCaptureAppConfig, 'enableTutorial' | 'enableSightTutorial' | 'enableSightGuidelines'> {
 }
 /**
  * Custom hook used to manage the state of photo capture tutorial.

package/lib/VideoCapture/VideoCapture.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { MonkApiConfig } from '@monkvision/network';
+import { CameraConfig, VideoCaptureAppConfig } from '@monkvision/types';
+/**
+ * Props of the VideoCapture component.
+ */
+export interface VideoCaptureProps extends Pick<VideoCaptureAppConfig, keyof CameraConfig | 'additionalTasks' | 'startTasksOnComplete' | 'enforceOrientation' | 'minRecordingDuration' | 'maxRetryCount' | 'enableFastWalkingWarning' | 'enablePhoneShakingWarning' | 'fastWalkingWarningCooldown' | 'phoneShakingWarningCooldown'> {
+    /**
+     * The ID of the inspection to add the video frames to.
+     */
+    inspectionId: string;
+    /**
+     * The api config used to communicate with the API. Make sure that the user described in the auth token is the same
+     * one as the one that created the inspection provided in the `inspectionId` prop.
+     */
+    apiConfig: MonkApiConfig;
+    /**
+     * Callback called when the inspection is complete.
+     */
+    onComplete?: () => void;
+    /**
+     * The language to be used by this component.
+     *
+     * @default en
+     */
+    lang?: string | null;
+}
+export declare function VideoCapture({ inspectionId, apiConfig, additionalTasks, startTasksOnComplete, enforceOrientation, minRecordingDuration, maxRetryCount, enableFastWalkingWarning, enablePhoneShakingWarning, fastWalkingWarningCooldown, phoneShakingWarningCooldown, onComplete, lang, }: VideoCaptureProps): JSX.Element;

package/lib/VideoCapture/VideoCapture.js

@@ -0,0 +1,81 @@
+"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.VideoCapture = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var common_1 = require("@monkvision/common");
+var react_1 = require("react");
+var camera_web_1 = require("@monkvision/camera-web");
+var monitoring_1 = require("@monkvision/monitoring");
+var VideoCapture_styles_1 = require("./VideoCapture.styles");
+var VideoCapturePermissions_1 = require("./VideoCapturePermissions");
+var VideoCaptureHUD_1 = require("./VideoCaptureHUD");
+var hooks_1 = require("../hooks");
+var hooks_2 = require("./hooks");
+var VideoCaptureScreen;
+(function (VideoCaptureScreen) {
+    VideoCaptureScreen["PERMISSIONS"] = "permissions";
+    VideoCaptureScreen["CAPTURE"] = "capture";
+})(VideoCaptureScreen || (VideoCaptureScreen = {}));
+// No ts-doc for this component : the component exported is VideoCaptureHOC
+function VideoCapture(_a) {
+    var inspectionId = _a.inspectionId, apiConfig = _a.apiConfig, additionalTasks = _a.additionalTasks, startTasksOnComplete = _a.startTasksOnComplete, enforceOrientation = _a.enforceOrientation, _b = _a.minRecordingDuration, minRecordingDuration = _b === void 0 ? 15000 : _b, _c = _a.maxRetryCount, maxRetryCount = _c === void 0 ? 3 : _c, _d = _a.enableFastWalkingWarning, enableFastWalkingWarning = _d === void 0 ? true : _d, _e = _a.enablePhoneShakingWarning, enablePhoneShakingWarning = _e === void 0 ? true : _e, _f = _a.fastWalkingWarningCooldown, fastWalkingWarningCooldown = _f === void 0 ? 1000 : _f, _g = _a.phoneShakingWarningCooldown, phoneShakingWarningCooldown = _g === void 0 ? 1000 : _g, onComplete = _a.onComplete, lang = _a.lang;
+    (0, common_1.useI18nSync)(lang);
+    var _h = (0, react_1.useState)(VideoCaptureScreen.PERMISSIONS), screen = _h[0], setScreen = _h[1];
+    var _j = (0, react_1.useState)(false), isRecording = _j[0], setIsRecording = _j[1];
+    var handleError = (0, monitoring_1.useMonitoring)().handleError;
+    var _k = (0, hooks_2.useFastMovementsDetection)({
+        isRecording: isRecording,
+        enableFastWalkingWarning: enableFastWalkingWarning,
+        enablePhoneShakingWarning: enablePhoneShakingWarning,
+        fastWalkingWarningCooldown: fastWalkingWarningCooldown,
+        phoneShakingWarningCooldown: phoneShakingWarningCooldown,
+    }), onDeviceOrientationEvent = _k.onDeviceOrientationEvent, fastMovementsWarning = _k.fastMovementsWarning, onWarningDismiss = _k.onWarningDismiss;
+    var _l = (0, common_1.useDeviceOrientation)({ onDeviceOrientationEvent: onDeviceOrientationEvent }), alpha = _l.alpha, requestCompassPermission = _l.requestCompassPermission;
+    var startTasksLoading = (0, common_1.useLoadingState)();
+    var startTasks = (0, hooks_1.useStartTasksOnComplete)({
+        inspectionId: inspectionId,
+        apiConfig: apiConfig,
+        additionalTasks: additionalTasks,
+        startTasksOnComplete: startTasksOnComplete,
+        loading: startTasksLoading,
+    });
+    var allowRedirect = (0, common_1.usePreventExit)(true).allowRedirect;
+    var handleComplete = function () {
+        startTasks()
+            .then(function () {
+            allowRedirect();
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        })
+            .catch(function (err) {
+            startTasksLoading.onError(err);
+            handleError(err);
+        });
+    };
+    var hudProps = {
+        inspectionId: inspectionId,
+        maxRetryCount: maxRetryCount,
+        apiConfig: apiConfig,
+        minRecordingDuration: minRecordingDuration,
+        enforceOrientation: enforceOrientation,
+        isRecording: isRecording,
+        setIsRecording: setIsRecording,
+        alpha: alpha,
+        fastMovementsWarning: fastMovementsWarning,
+        onWarningDismiss: onWarningDismiss,
+        startTasksLoading: startTasksLoading,
+        onComplete: handleComplete,
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: VideoCapture_styles_1.styles['container'] }, { children: [screen === VideoCaptureScreen.PERMISSIONS && ((0, jsx_runtime_1.jsx)(VideoCapturePermissions_1.VideoCapturePermissions, { requestCompassPermission: requestCompassPermission, onSuccess: function () { return setScreen(VideoCaptureScreen.CAPTURE); } })), screen === VideoCaptureScreen.CAPTURE && ((0, jsx_runtime_1.jsx)(camera_web_1.Camera, { HUDComponent: VideoCaptureHUD_1.VideoCaptureHUD, hudProps: hudProps }))] })));
+}
+exports.VideoCapture = VideoCapture;

package/lib/VideoCapture/VideoCapture.styles.js

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

package/lib/VideoCapture/VideoCaptureHOC.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { VideoCaptureProps } from './VideoCapture';
+/**
+ * The VideoCapture component is a ready-to-use, single page component that implements a Camera app and lets the user
+ * record a video of their vehicle in order to add them to an already created Monk inspection. In order to use this
+ * component, you first need to generate an Auth0 authentication token, and create an inspection using the Monk Api.
+ * When creating the inspection, don't forget to set the tasks statuses to `NOT_STARTED`. This component will handle the
+ * starting of the tasks at the end of the capturing process. You can then pass the inspection ID, the api config (with
+ * the auth token) and everything will be handled automatically for you.
+ *
+ * @example
+ * import { VideoCapture } from '@monkvision/inspection-capture-web';
+ *
+ * export function VideoCaptureScreen({ inspectionId, apiConfig }: VideoCaptureScreenProps) {
+ *   const { i18n } = useTranslation();
+ *
+ *   return (
+ *     <VideoCapture
+ *       inspectionId={inspectionId}
+ *       apiConfig={apiConfig}
+ *       onComplete={() => { / * Navigate to another page * / }}
+ *       lang={i18n.language}
+ *     />
+ *   );
+ * }
+ */
+export declare const VideoCaptureHOC: import("react").ForwardRefExoticComponent<VideoCaptureProps & import("react").RefAttributes<unknown>>;