@monkvision/inspection-capture-web 4.5.6 → 4.6.0

package/lib/components/OrientationEnforcer/OrientationEnforcer.styles.js

@@ -0,0 +1,49 @@
+"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.useOrientationEnforcerStyles = exports.styles = void 0;
+var common_1 = require("@monkvision/common");
+exports.styles = {
+    container: {
+        position: 'fixed',
+        inset: 0,
+        zIndex: 999999,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        boxSizing: 'border-box',
+        padding: '50px 10%',
+    },
+    titleContainer: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    title: {
+        fontSize: 18,
+        marginLeft: 16,
+    },
+    description: {
+        fontSize: 16,
+        paddingTop: 16,
+        opacity: 0.8,
+        textAlign: 'center',
+    },
+};
+function useOrientationEnforcerStyles() {
+    var palette = (0, common_1.useMonkTheme)().palette;
+    return {
+        containerStyle: __assign(__assign({}, exports.styles['container']), { backgroundColor: palette.background.base }),
+    };
+}
+exports.useOrientationEnforcerStyles = useOrientationEnforcerStyles;

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

@@ -0,0 +1 @@
+export { OrientationEnforcer, type OrientationEnforcerProps } from './OrientationEnforcer';

package/lib/components/OrientationEnforcer/index.js

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

package/lib/components/PartSelection/PartSelection.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { VehiclePart, VehicleType } from '@monkvision/types';
+/**
+ * Props of PartSelection component.
+ */
+export interface PartSelectionProps {
+    /**
+     * Vehicle type of the wireframe to display.
+     */
+    vehicleType: VehicleType;
+    /**
+     * Current vehicle parts selected to take a picture of.
+     */
+    vehicleParts: VehiclePart[];
+    /**
+     * Boolean indicating if the vehicle part selector is currently displayed.
+     */
+    disabled?: boolean;
+    /**
+     * Callback called when the user cancels the Add Damage mode.
+     */
+    onCancel?: () => void;
+    /**
+     * Callback called when the user selects the parts to take a picture of.
+     */
+    onAddDamagePartsSelected?: (parts: VehiclePart[]) => void;
+    /**
+     * Callback called when the user clicks on the "Validate" button of the Add Damage mode.
+     */
+    onValidateVehicleParts?: () => void;
+    /**
+     * The maximum number of parts that can be selected.
+     */
+    maxSelectableParts?: number;
+}
+/**
+ * Component that displays a vehicle wireframe on top of the Camera Preview that is used
+ * to select the parts of the vehicle that the user wants to take a picture of.
+ */
+export declare function PartSelection({ vehicleType, vehicleParts, disabled, onCancel, onAddDamagePartsSelected, onValidateVehicleParts, maxSelectableParts, }: PartSelectionProps): JSX.Element | null;

package/lib/components/PartSelection/PartSelection.js

@@ -0,0 +1,39 @@
+"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.PartSelection = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var common_1 = require("@monkvision/common");
+var common_ui_web_1 = require("@monkvision/common-ui-web");
+var react_i18next_1 = require("react-i18next");
+var PartSelection_styles_1 = require("./PartSelection.styles");
+var hooks_1 = require("../../hooks");
+/**
+ * Component that displays a vehicle wireframe on top of the Camera Preview that is used
+ * to select the parts of the vehicle that the user wants to take a picture of.
+ */
+function PartSelection(_a) {
+    var vehicleType = _a.vehicleType, vehicleParts = _a.vehicleParts, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.onCancel, onCancel = _c === void 0 ? function () { } : _c, _d = _a.onAddDamagePartsSelected, onAddDamagePartsSelected = _d === void 0 ? function () { } : _d, _e = _a.onValidateVehicleParts, onValidateVehicleParts = _e === void 0 ? function () { } : _e, _f = _a.maxSelectableParts, maxSelectableParts = _f === void 0 ? 1 : _f;
+    var palette = (0, common_1.useMonkTheme)().palette;
+    var _g = (0, react_i18next_1.useTranslation)(), i18n = _g.i18n, t = _g.t;
+    var backgroundColor = (0, hooks_1.useColorBackground)(0.9);
+    var buttonColor = (0, hooks_1.useColorBackground)();
+    if (!vehicleType) {
+        throw new Error('Vehicle type state is not found from useMonkAppState');
+    }
+    var instruction = maxSelectableParts === 1 ? 'photo.hud.addDamage.selectPart' : 'photo.hud.addDamage.selectParts';
+    return disabled ? null : ((0, jsx_runtime_1.jsxs)("div", __assign({ style: __assign(__assign({}, PartSelection_styles_1.styles['container']), { background: backgroundColor }) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: PartSelection_styles_1.styles['vehicleSelect'] }, { children: (0, jsx_runtime_1.jsx)(common_ui_web_1.VehiclePartSelection, { vehicleType: vehicleType, maxSelectableParts: maxSelectableParts, onPartsSelected: onAddDamagePartsSelected }) })), (0, jsx_runtime_1.jsx)(common_ui_web_1.Button, { primaryColor: buttonColor, onClick: onCancel, style: PartSelection_styles_1.styles['closeBtn'], icon: 'close' }), (0, jsx_runtime_1.jsx)(common_ui_web_1.Button, { primaryColor: vehicleParts.length ? palette.primary.base : palette.text.disabled, onClick: onValidateVehicleParts, style: PartSelection_styles_1.styles['validateBtn'], disabled: vehicleParts.length === 0, icon: 'check' }), (0, jsx_runtime_1.jsxs)("div", __assign({ style: PartSelection_styles_1.styles['labelsContainer'] }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(common_ui_web_1.Button, __assign({ primaryColor: palette.text.white, secondaryColor: palette.text.black, style: PartSelection_styles_1.styles['tutoLabel'] }, { children: t(instruction) })) }), vehicleParts.length > 0 && ((0, jsx_runtime_1.jsx)("span", __assign({ style: PartSelection_styles_1.styles['partsLabel'] }, { children: (0, jsx_runtime_1.jsx)(common_ui_web_1.Button, __assign({ primaryColor: palette.text.white, secondaryColor: palette.text.black }, { children: vehicleParts
+                                .map(function (part) { return common_1.vehiclePartLabels[part][(0, common_1.getLanguage)(i18n.language)]; })
+                                .join(', ') })) })))] }))] })));
+}
+exports.PartSelection = PartSelection;

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

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

package/lib/components/PartSelection/PartSelection.styles.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+exports.styles = {
+    container: {
+        position: 'fixed',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyItems: 'center',
+        alignItems: 'center',
+        inset: 0,
+    },
+    vehicleSelect: {
+        alignSelf: 'stretch',
+        justifySelf: 'stretch',
+        position: 'fixed',
+        height: '85%',
+        width: '75%',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        zIndex: 9,
+    },
+    labelsContainer: {
+        position: 'fixed',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        top: '10px',
+        bottom: '10px',
+        width: '90%',
+    },
+    partsLabel: {
+        display: 'flex',
+        justifyContent: 'center',
+    },
+    tutoLabel: {
+        display: 'flex',
+        justifyContent: 'center',
+    },
+    closeBtn: {
+        position: 'fixed',
+        top: '5px',
+        left: '5px',
+    },
+    validateBtn: {
+        position: 'fixed',
+        top: '50%',
+        right: '10px',
+        transform: 'translate(-50%, -50%)',
+        zIndex: 10,
+    },
+};

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

@@ -0,0 +1,2 @@
+export { PartSelection } from './PartSelection';
+export { type PartSelectionProps } from './PartSelection';

package/lib/components/PartSelection/index.js

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

package/lib/{PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddDamage1stShot/PhotoCaptureHUDElementsAddDamage1stShot.d.ts → components/ZoomOutShot/ZoomOutShot.d.ts}

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 /**
- * Props of the PhotoCaptureHUDElementsAddDamage1stShot component.
+ * Props of the ZoomOutShot component.
  */
-export interface PhotoCaptureHUDElementsAddDamage1stShotProps {
+export interface ZoomOutShotProps {
     /**
      * Callback called when the user cancels the Add Damage mode.
      */
@@ -12,4 +12,4 @@ export interface PhotoCaptureHUDElementsAddDamage1stShotProps {
  * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process when the current
  * mode is ADD_DAMAGE_1ST_SHOT.
  */
-export declare function PhotoCaptureHUDElementsAddDamage1stShot({ onCancel, }: PhotoCaptureHUDElementsAddDamage1stShotProps): JSX.Element;
+export declare function ZoomOutShot({ onCancel }: ZoomOutShotProps): JSX.Element;

package/lib/components/ZoomOutShot/ZoomOutShot.js

@@ -0,0 +1,38 @@
+"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.ZoomOutShot = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var common_ui_web_1 = require("@monkvision/common-ui-web");
+var ZoomOutShot_styles_1 = require("./ZoomOutShot.styles");
+var hooks_1 = require("../../hooks");
+var types_1 = require("../../types");
+var assets_1 = require("../../assets");
+var hooks_2 = require("./hooks");
+var Counter_1 = require("../Counter");
+var CancelButton_1 = require("../CancelButton");
+/**
+ * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process when the current
+ * mode is ADD_DAMAGE_1ST_SHOT.
+ */
+function ZoomOutShot(_a) {
+    var onCancel = _a.onCancel;
+    var _b = (0, react_1.useState)(true), showInfoPopup = _b[0], setShowInfoPopup = _b[1];
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var primaryColor = (0, hooks_1.useColorBackground)();
+    var style = (0, hooks_2.useZoomOutShotStyles)();
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: ZoomOutShot_styles_1.styles['container'] }, { children: [(0, jsx_runtime_1.jsx)(common_ui_web_1.DynamicSVG, { style: ZoomOutShot_styles_1.styles['svg'], svg: assets_1.crosshairSvg }), (0, jsx_runtime_1.jsxs)("div", __assign({ style: style.top }, { children: [(0, jsx_runtime_1.jsx)(Counter_1.Counter, { mode: types_1.CaptureMode.ADD_DAMAGE_1ST_SHOT }), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { onCancel: onCancel })] })), showInfoPopup && ((0, jsx_runtime_1.jsx)(common_ui_web_1.Button, __assign({ icon: 'close', primaryColor: primaryColor, style: style.infoBtn, onClick: function () { return setShowInfoPopup(false); } }, { children: t('photo.hud.addDamage.infoBtn') })))] })));
+}
+exports.ZoomOutShot = ZoomOutShot;

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

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

package/lib/{PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddDamage1stShot/PhotoCaptureHUDElementsAddDamage1stShot.styles.js → components/ZoomOutShot/ZoomOutShot.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("../HUDButtons/HUDButtons.styles");
 exports.styles = {
     container: {
         position: 'absolute',
@@ -28,7 +28,7 @@ exports.styles = {
     },
     topLandscape: {
         __media: { landscape: true },
-        right: "".concat(PhotoCaptureHUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2, "px"),
+        right: "".concat(HUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2, "px"),
     },
     infoBtn: {
         position: 'absolute',
@@ -37,7 +37,7 @@ exports.styles = {
     },
     infoBtnPortrait: {
         __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"),
     },
     svg: {
         width: '15%',

package/lib/components/ZoomOutShot/hooks.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+export interface ZoomOutShotStyle {
+    top: CSSProperties;
+    infoBtn: CSSProperties;
+}
+export declare function useZoomOutShotStyles(): ZoomOutShotStyle;

package/lib/components/ZoomOutShot/hooks.js

@@ -0,0 +1,24 @@
+"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.useZoomOutShotStyles = void 0;
+var common_1 = require("@monkvision/common");
+var ZoomOutShot_styles_1 = require("./ZoomOutShot.styles");
+function useZoomOutShotStyles() {
+    var responsive = (0, common_1.useResponsiveStyle)().responsive;
+    return {
+        top: __assign(__assign({}, ZoomOutShot_styles_1.styles['top']), responsive(ZoomOutShot_styles_1.styles['topLandscape'])),
+        infoBtn: __assign(__assign({}, ZoomOutShot_styles_1.styles['infoBtn']), responsive(ZoomOutShot_styles_1.styles['infoBtnPortrait'])),
+    };
+}
+exports.useZoomOutShotStyles = useZoomOutShotStyles;

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

@@ -0,0 +1 @@
+export { ZoomOutShot, type ZoomOutShotProps } from './ZoomOutShot';

package/lib/components/ZoomOutShot/index.js

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

package/lib/components/index.d.ts

@@ -0,0 +1,8 @@
+export * from './OrientationEnforcer';
+export * from './CancelButton';
+export * from './CloseUpShot';
+export * from './HUDButtons';
+export * from './PartSelection';
+export * from './Counter';
+export * from './ZoomOutShot';
+export * from './HUDOverlay';

package/lib/components/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./OrientationEnforcer"), exports);
+__exportStar(require("./CancelButton"), exports);
+__exportStar(require("./CloseUpShot"), exports);
+__exportStar(require("./HUDButtons"), exports);
+__exportStar(require("./PartSelection"), exports);
+__exportStar(require("./Counter"), exports);
+__exportStar(require("./ZoomOutShot"), exports);
+__exportStar(require("./HUDOverlay"), exports);

package/lib/errors.d.ts

@@ -0,0 +1,3 @@
+export declare enum PhotoCaptureErrorName {
+    MISSING_TASK_IN_INSPECTION = "PhotoCaptureMissingTaskInInspection"
+}

package/lib/errors.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhotoCaptureErrorName = void 0;
+var PhotoCaptureErrorName;
+(function (PhotoCaptureErrorName) {
+    PhotoCaptureErrorName["MISSING_TASK_IN_INSPECTION"] = "PhotoCaptureMissingTaskInInspection";
+})(PhotoCaptureErrorName = exports.PhotoCaptureErrorName || (exports.PhotoCaptureErrorName = {}));

package/lib/hooks/index.d.ts

@@ -0,0 +1,10 @@
+export * from './useStartTasksOnComplete';
+export * from './useEnforceOrientation';
+export * from './useColorBackground';
+export * from './useAddDamageMode';
+export * from './useUploadQueue';
+export * from './usePictureTaken';
+export * from './usePhotoCaptureImages';
+export * from './useBadConnectionWarning';
+export * from './useAdaptiveCameraConfig';
+export * from './useTracking';

package/lib/hooks/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useStartTasksOnComplete"), exports);
+__exportStar(require("./useEnforceOrientation"), exports);
+__exportStar(require("./useColorBackground"), exports);
+__exportStar(require("./useAddDamageMode"), exports);
+__exportStar(require("./useUploadQueue"), exports);
+__exportStar(require("./usePictureTaken"), exports);
+__exportStar(require("./usePhotoCaptureImages"), exports);
+__exportStar(require("./useBadConnectionWarning"), exports);
+__exportStar(require("./useAdaptiveCameraConfig"), exports);
+__exportStar(require("./useTracking"), exports);

package/lib/{PhotoCapture/hooks → hooks}/useAdaptiveCameraConfig.d.ts

@@ -1,9 +1,9 @@
-import { CameraConfig, CaptureAppConfig } from '@monkvision/types';
+import { CameraConfig, PhotoCaptureAppConfig } from '@monkvision/types';
 import { UploadEventHandlers } from './useUploadQueue';
 /**
  * Props passed to the useAdaptiveCameraConfig hook.
  */
-export type UseAdaptiveCameraConfigOptions = Pick<CaptureAppConfig, 'useAdaptiveImageQuality'> & {
+export type UseAdaptiveCameraConfigOptions = Pick<PhotoCaptureAppConfig, 'useAdaptiveImageQuality'> & {
     /**
      * The camera config passed as a prop to the PhotoCapture component.
      */

package/lib/hooks/useAddDamageMode.d.ts

@@ -0,0 +1,56 @@
+import { PhotoCaptureAppConfig, VehiclePart } from '@monkvision/types';
+import { CaptureMode, CaptureScreen } from '../types';
+/**
+ * Parameters of the useAddDamageMode hook.
+ */
+export interface AddDamageModeParams extends Pick<PhotoCaptureAppConfig, 'addDamage'> {
+    /**
+     * The current screen of the Capture component.
+     */
+    currentScreen?: CaptureScreen;
+    /**
+     * Boolean indicating if the capture is in Damage Disclosure mode.
+     */
+    damageDisclosure?: boolean;
+    /**
+     * Callback called when the user clicks on the 'close` button in Damage Diclosure mode.
+     */
+    handleOpenGallery: () => void;
+}
+/**
+ * Handle used to modify the current CaptureMode of the PhotoCapture or DamageDisclosure component.
+ */
+export interface AddDamageHandle {
+    /**
+     * The current mode of the component.
+     */
+    mode: CaptureMode;
+    /**
+     * Parts selected to take a picture of.
+     */
+    vehicleParts: VehiclePart[];
+    /**
+     * Callback to be called when the user clicks on the "Add Damage" button.
+     */
+    handleAddDamage: () => void;
+    /**
+     * Callback to be called when the user selects the parts to take a picture of.
+     */
+    handleAddDamagePartsSelected: (parts: VehiclePart[]) => void;
+    /**
+     * Callback to be called everytime the user takes a picture to update the mode after it.
+     */
+    updatePhotoCaptureModeAfterPictureTaken: () => void;
+    /**
+     * Callback to be called when the user clicks on the "Cancel" button of the Add Damage mode.
+     */
+    handleCancelAddDamage: () => void;
+    /**
+     * Callback called when the user clicks on the "Validate" button of the Add Damage mode.
+     */
+    handleValidateVehicleParts: () => void;
+}
+/**
+ * Custom hook used to switch between sight picture taking and add damage picture taking.
+ */
+export declare function useAddDamageMode({ addDamage, currentScreen, handleOpenGallery, damageDisclosure, }: AddDamageModeParams): AddDamageHandle;

package/lib/hooks/useAddDamageMode.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAddDamageMode = void 0;
+var react_1 = require("react");
+var common_1 = require("@monkvision/common");
+var analytics_1 = require("@monkvision/analytics");
+var types_1 = require("@monkvision/types");
+var types_2 = require("../types");
+function getInitialMode(addDamage, damageDisclosure) {
+    if (damageDisclosure && addDamage === types_1.AddDamage.PART_SELECT) {
+        return types_2.CaptureMode.ADD_DAMAGE_PART_SELECT;
+    }
+    if (damageDisclosure && addDamage === types_1.AddDamage.TWO_SHOT) {
+        return types_2.CaptureMode.ADD_DAMAGE_1ST_SHOT;
+    }
+    return types_2.CaptureMode.SIGHT;
+}
+/**
+ * Custom hook used to switch between sight picture taking and add damage picture taking.
+ */
+function useAddDamageMode(_a) {
+    var addDamage = _a.addDamage, currentScreen = _a.currentScreen, _b = _a.handleOpenGallery, handleOpenGallery = _b === void 0 ? function () { } : _b, _c = _a.damageDisclosure, damageDisclosure = _c === void 0 ? false : _c;
+    var _d = (0, react_1.useState)(getInitialMode(addDamage, damageDisclosure)), mode = _d[0], setMode = _d[1];
+    var _e = (0, react_1.useState)([]), vehicleParts = _e[0], setVehicleParts = _e[1];
+    var trackEvent = (0, analytics_1.useAnalytics)().trackEvent;
+    var handleAddDamage = (0, react_1.useCallback)(function () {
+        if (addDamage === types_1.AddDamage.TWO_SHOT) {
+            setMode(types_2.CaptureMode.ADD_DAMAGE_1ST_SHOT);
+            trackEvent('AddDamage Selected', {
+                mode: types_2.CaptureMode.ADD_DAMAGE_1ST_SHOT,
+            });
+        }
+        if (addDamage === types_1.AddDamage.PART_SELECT) {
+            setMode(types_2.CaptureMode.ADD_DAMAGE_PART_SELECT);
+            trackEvent('AddDamage Selected', {
+                mode: types_2.CaptureMode.ADD_DAMAGE_PART_SELECT,
+            });
+        }
+    }, []);
+    var updatePhotoCaptureModeAfterPictureTaken = (0, react_1.useCallback)(function () {
+        setVehicleParts([]);
+        setMode(mode === types_2.CaptureMode.ADD_DAMAGE_1ST_SHOT
+            ? types_2.CaptureMode.ADD_DAMAGE_2ND_SHOT
+            : getInitialMode(addDamage, damageDisclosure));
+        if (damageDisclosure) {
+            handleOpenGallery();
+        }
+    }, [mode]);
+    var handleCancelAddDamage = (0, react_1.useCallback)(function () {
+        trackEvent('AddDamage Canceled', {
+            mode: mode,
+        });
+        if ([types_2.CaptureMode.ADD_DAMAGE_PART_SELECT, types_2.CaptureMode.ADD_DAMAGE_1ST_SHOT].includes(mode) &&
+            damageDisclosure) {
+            handleOpenGallery();
+        }
+        setVehicleParts([]);
+        setMode(getInitialMode(addDamage, damageDisclosure));
+    }, [mode, currentScreen]);
+    var handleAddDamagePartsSelected = (0, react_1.useCallback)(function (parts) {
+        setVehicleParts(parts);
+    }, []);
+    var handleValidateVehicleParts = (0, react_1.useCallback)(function () {
+        setMode(types_2.CaptureMode.ADD_DAMAGE_PART_SELECT_SHOT);
+    }, []);
+    return (0, common_1.useObjectMemo)({
+        mode: mode,
+        vehicleParts: vehicleParts,
+        handleAddDamage: handleAddDamage,
+        updatePhotoCaptureModeAfterPictureTaken: updatePhotoCaptureModeAfterPictureTaken,
+        handleCancelAddDamage: handleCancelAddDamage,
+        handleAddDamagePartsSelected: handleAddDamagePartsSelected,
+        handleValidateVehicleParts: handleValidateVehicleParts,
+    });
+}
+exports.useAddDamageMode = useAddDamageMode;

package/lib/{PhotoCapture/hooks → hooks}/useBadConnectionWarning.d.ts

@@ -1,9 +1,9 @@
-import { CaptureAppConfig } from '@monkvision/types';
+import { PhotoCaptureAppConfig } from '@monkvision/types';
 import { UploadEventHandlers } from './useUploadQueue';
 /**
  * Parameters accepted by the useBadConnectionWarning hook.
  */
-export type BadConnectionWarningParams = Required<Pick<CaptureAppConfig, 'maxUploadDurationWarning'>>;
+export type BadConnectionWarningParams = Required<Pick<PhotoCaptureAppConfig, 'maxUploadDurationWarning'>>;
 /**
  * Handle used to manage the bad connection warning displayed to the user when uploads are failing.
  */

package/lib/hooks/useColorBackground.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Custom hook used to generate the background color in the inspection capture web components.
+ */
+export declare function useColorBackground(opacity?: number): string;

package/lib/hooks/useColorBackground.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColorBackground = void 0;
+var common_1 = require("@monkvision/common");
+var react_1 = require("react");
+/**
+ * Custom hook used to generate the background color in the inspection capture web components.
+ */
+function useColorBackground(opacity) {
+    if (opacity === void 0) { opacity = 0.64; }
+    var palette = (0, common_1.useMonkTheme)().palette;
+    var clampedOpacity = Math.max(0, Math.min(opacity, 1));
+    return (0, react_1.useMemo)(function () { return (0, common_1.changeAlpha)(palette.background.base, opacity); }, [palette, clampedOpacity]);
+}
+exports.useColorBackground = useColorBackground;

package/lib/hooks/useEnforceOrientation.d.ts

@@ -0,0 +1,6 @@
+import { DeviceOrientation } from '@monkvision/types';
+/**
+ * Custom hook used to check if the current device's orientation is violating the enforced orientation. Returns true if
+ * an orientation is being enforced and is not matching the current device orientation.
+ */
+export declare function useEnforceOrientation(orientation?: DeviceOrientation | null): boolean;

package/lib/hooks/useEnforceOrientation.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEnforceOrientation = void 0;
+var common_1 = require("@monkvision/common");
+var types_1 = require("@monkvision/types");
+/**
+ * Custom hook used to check if the current device's orientation is violating the enforced orientation. Returns true if
+ * an orientation is being enforced and is not matching the current device orientation.
+ */
+function useEnforceOrientation(orientation) {
+    var dimensions = (0, common_1.useWindowDimensions)();
+    return !!orientation && (orientation === types_1.DeviceOrientation.PORTRAIT) !== dimensions.isPortrait;
+}
+exports.useEnforceOrientation = useEnforceOrientation;

package/lib/{PhotoCapture/hooks → hooks}/usePhotoCaptureImages.js

@@ -8,6 +8,6 @@ var react_1 = require("react");
  */
 function usePhotoCaptureImages(inspectionId) {
     var state = (0, common_1.useMonkState)().state;
-    return (0, react_1.useMemo)(function () { return (0, common_1.getInspectionImages)(inspectionId, state.images, true); }, [state.images, inspectionId]);
+    return (0, react_1.useMemo)(function () { return (0, common_1.getInspectionImages)(inspectionId, state.images, undefined, true); }, [state.images, inspectionId]);
 }
 exports.usePhotoCaptureImages = usePhotoCaptureImages;