@monkvision/inspection-capture-web 4.5.6 → 4.6.0

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

@@ -0,0 +1,2 @@
+export { Counter } from './Counter';
+export { type CounterProps } from './hooks';

package/lib/components/Counter/index.js

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

package/lib/{PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.d.ts → components/HUDButtons/HUDButtons.d.ts}

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 /**
- * Props of the PhotoCaptureHUDButtons component.
+ * Props of the HUDButtons component.
  */
-export interface PhotoCaptureHUDButtonsProps {
+export interface HUDButtonsProps {
     /**
      * URI of the picture displayed in the gallery button icon. Usually, this is the last picture taken by the user. If no
      * picture is provided, a gallery icon will be displayed instead.
@@ -59,9 +59,9 @@ export interface PhotoCaptureHUDButtonsProps {
     retakeCount?: number;
 }
 /**
- * Components implementing the main buttons of the PhotoCapture Camera HUD. This component implements 3 buttons :
+ * Components implementing the main buttons of the capture Camera HUD. This component implements 3 buttons :
  * - A take picture button
  * - A gallery button
  * - A close button (only displayed if the `onClose` callback is defined)
  */
-export declare function PhotoCaptureHUDButtons({ galleryPreview, onTakePicture, onOpenGallery, onClose, galleryDisabled, takePictureDisabled, closeDisabled, showCloseButton, showGalleryBadge, retakeCount, }: PhotoCaptureHUDButtonsProps): JSX.Element;
+export declare function HUDButtons({ galleryPreview, onTakePicture, onOpenGallery, onClose, galleryDisabled, takePictureDisabled, closeDisabled, showCloseButton, showGalleryBadge, retakeCount, }: HUDButtonsProps): JSX.Element;

package/lib/{PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.js → components/HUDButtons/HUDButtons.js}

@@ -11,18 +11,18 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PhotoCaptureHUDButtons = void 0;
+exports.HUDButtons = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var common_ui_web_1 = require("@monkvision/common-ui-web");
 var common_1 = require("@monkvision/common");
 var hooks_1 = require("./hooks");
 /**
- * Components implementing the main buttons of the PhotoCapture Camera HUD. This component implements 3 buttons :
+ * Components implementing the main buttons of the capture Camera HUD. This component implements 3 buttons :
  * - A take picture button
  * - A gallery button
  * - A close button (only displayed if the `onClose` callback is defined)
  */
-function PhotoCaptureHUDButtons(_a) {
+function HUDButtons(_a) {
     var galleryPreview = _a.galleryPreview, onTakePicture = _a.onTakePicture, onOpenGallery = _a.onOpenGallery, onClose = _a.onClose, _b = _a.galleryDisabled, galleryDisabled = _b === void 0 ? false : _b, _c = _a.takePictureDisabled, takePictureDisabled = _c === void 0 ? false : _c, _d = _a.closeDisabled, closeDisabled = _d === void 0 ? false : _d, _e = _a.showCloseButton, showCloseButton = _e === void 0 ? false : _e, _f = _a.showGalleryBadge, showGalleryBadge = _f === void 0 ? false : _f, _g = _a.retakeCount, retakeCount = _g === void 0 ? 0 : _g;
     var _h = (0, common_1.useInteractiveStatus)({
         disabled: galleryDisabled,
@@ -30,7 +30,7 @@ function PhotoCaptureHUDButtons(_a) {
     var _j = (0, common_1.useInteractiveStatus)({
         disabled: closeDisabled,
     }), closeStatus = _j.status, closeEventHandlers = _j.eventHandlers;
-    var _k = (0, hooks_1.useCaptureHUDButtonsStyles)({
+    var _k = (0, hooks_1.useHUDButtonsStyles)({
         galleryStatus: galleryStatus,
         closeStatus: closeStatus,
         closeBtnAvailable: !!onClose,
@@ -40,4 +40,4 @@ function PhotoCaptureHUDButtons(_a) {
     }), containerStyle = _k.containerStyle, gallery = _k.gallery, galleryBadgeStyle = _k.galleryBadgeStyle, close = _k.close, backgroundCoverStyle = _k.backgroundCoverStyle;
     return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: containerStyle }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ style: close.style, disabled: closeDisabled, onClick: onClose }, closeEventHandlers, { "data-testid": 'monk-close-btn' }, { children: (0, jsx_runtime_1.jsx)(common_ui_web_1.Icon, { icon: 'close', size: 30, primaryColor: close.iconColor }) })), (0, jsx_runtime_1.jsx)(common_ui_web_1.TakePictureButton, { onClick: onTakePicture, size: 85, disabled: takePictureDisabled }), (0, jsx_runtime_1.jsx)("button", __assign({ style: gallery.style, disabled: galleryDisabled, onClick: onOpenGallery }, galleryEventHandlers, { "data-testid": 'monk-gallery-btn' }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [galleryPreview ? ((0, jsx_runtime_1.jsx)("div", { style: backgroundCoverStyle })) : ((0, jsx_runtime_1.jsx)(common_ui_web_1.Icon, { icon: 'gallery', size: 30, primaryColor: gallery.iconColor })), (0, jsx_runtime_1.jsx)("div", __assign({ "data-testid": 'monk-gallery-badge', style: galleryBadgeStyle }, { children: retakeCount > 0 && retakeCount }))] }) }))] })));
 }
-exports.PhotoCaptureHUDButtons = PhotoCaptureHUDButtons;
+exports.HUDButtons = HUDButtons;

package/lib/{PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons → components/HUDButtons}/hooks.d.ts

@@ -1,6 +1,6 @@
 import { InteractiveStatus } from '@monkvision/types';
 import { CSSProperties } from 'react';
-interface PhotoCaptureHUDButtonsStylesParams {
+interface HUDButtonsStylesParams {
     galleryStatus: InteractiveStatus;
     closeStatus: InteractiveStatus;
     closeBtnAvailable: boolean;
@@ -8,7 +8,7 @@ interface PhotoCaptureHUDButtonsStylesParams {
     showCloseButton?: boolean;
     showGalleryBadge?: boolean;
 }
-interface PhotoCaptureHUDButtonsStyles {
+interface HUDButtonsStyles {
     containerStyle: CSSProperties;
     gallery: {
         style: CSSProperties;
@@ -21,5 +21,5 @@ interface PhotoCaptureHUDButtonsStyles {
     };
     backgroundCoverStyle: CSSProperties;
 }
-export declare function useCaptureHUDButtonsStyles(params: PhotoCaptureHUDButtonsStylesParams): PhotoCaptureHUDButtonsStyles;
+export declare function useHUDButtonsStyles(params: HUDButtonsStylesParams): HUDButtonsStyles;
 export {};

package/lib/components/HUDButtons/hooks.js

@@ -0,0 +1,44 @@
+"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.useHUDButtonsStyles = void 0;
+var types_1 = require("@monkvision/types");
+var react_1 = require("react");
+var common_1 = require("@monkvision/common");
+var HUDButtons_styles_1 = require("./HUDButtons.styles");
+var ANIMATION_DELAY_MS = 50;
+function useHUDButtonsStyles(params) {
+    var _a = (0, react_1.useState)(false), backgroundAnimationStart = _a[0], setBackgroundAnimationStart = _a[1];
+    var responsive = (0, common_1.useResponsiveStyle)().responsive;
+    var palette = (0, common_1.useMonkTheme)().palette;
+    (0, common_1.useAsyncEffect)(function () {
+        setBackgroundAnimationStart(true);
+        return (0, common_1.timeoutPromise)(ANIMATION_DELAY_MS);
+    }, [params.galleryPreview], {
+        onResolve: function () { return setBackgroundAnimationStart(false); },
+    });
+    return {
+        containerStyle: __assign(__assign(__assign({}, HUDButtons_styles_1.styles['container']), responsive(HUDButtons_styles_1.styles['containersPortrait'])), responsive(HUDButtons_styles_1.styles['containersLandscape'])),
+        gallery: {
+            style: __assign(__assign(__assign({}, HUDButtons_styles_1.styles['button']), { backgroundColor: HUDButtons_styles_1.captureButtonBackgroundColors[params.galleryStatus], borderColor: HUDButtons_styles_1.captureButtonForegroundColors[params.galleryStatus] }), (params.galleryStatus === types_1.InteractiveStatus.DISABLED ? HUDButtons_styles_1.styles['buttonDisabled'] : {})),
+            iconColor: HUDButtons_styles_1.captureButtonForegroundColors[params.galleryStatus],
+        },
+        galleryBadgeStyle: __assign(__assign({}, HUDButtons_styles_1.styles['buttonBadge']), { backgroundColor: palette.alert.base, color: palette.text.primary, visibility: params.showGalleryBadge ? 'visible' : 'hidden' }),
+        close: {
+            style: __assign(__assign(__assign(__assign({}, HUDButtons_styles_1.styles['button']), { backgroundColor: HUDButtons_styles_1.captureButtonBackgroundColors[params.closeStatus], borderColor: HUDButtons_styles_1.captureButtonForegroundColors[params.closeStatus] }), (params.closeStatus === types_1.InteractiveStatus.DISABLED ? HUDButtons_styles_1.styles['buttonDisabled'] : {})), { visibility: params.showCloseButton ? 'visible' : 'hidden' }),
+            iconColor: HUDButtons_styles_1.captureButtonForegroundColors[params.closeStatus],
+        },
+        backgroundCoverStyle: __assign(__assign({}, HUDButtons_styles_1.styles['backgroundCover']), { backgroundImage: params.galleryPreview ? "url(".concat(params.galleryPreview, ")") : 'none', transition: backgroundAnimationStart ? 'none' : 'transform 0.2s ease-out', transform: "scale(".concat(backgroundAnimationStart ? 0.3 : 1, ")") }),
+    };
+}
+exports.useHUDButtonsStyles = useHUDButtonsStyles;

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

@@ -0,0 +1 @@
+export { HUDButtons, type HUDButtonsProps } from './HUDButtons';

package/lib/components/HUDButtons/index.js

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

package/lib/components/HUDOverlay/HUDOverlay.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { HUDOverlayProps } from './hooks';
+/**
+ * Component that displays an overlay on top of the PhotoCapture/DamageDisclosure component that is used
+ * to display elements such as error messages, spinning loaders etc.
+ */
+export declare function HUDOverlay({ isCaptureLoading, captureError, handle, onRetry, inspectionId, }: HUDOverlayProps): JSX.Element | null;

package/lib/components/HUDOverlay/HUDOverlay.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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HUDOverlay = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_i18next_1 = require("react-i18next");
+var common_ui_web_1 = require("@monkvision/common-ui-web");
+var common_1 = require("@monkvision/common");
+var HUDOverlay_styles_1 = require("./HUDOverlay.styles");
+var hooks_1 = require("./hooks");
+/**
+ * Component that displays an overlay on top of the PhotoCapture/DamageDisclosure component that is used
+ * to display elements such as error messages, spinning loaders etc.
+ */
+function HUDOverlay(_a) {
+    var isCaptureLoading = _a.isCaptureLoading, captureError = _a.captureError, handle = _a.handle, onRetry = _a.onRetry, inspectionId = _a.inspectionId;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var responsive = (0, common_1.useResponsiveStyle)().responsive;
+    var error = (0, hooks_1.useErrorLabel)(captureError, handle, inspectionId);
+    var handleRetry = (0, hooks_1.useRetry)({ captureError: captureError, handle: handle, onRetry: onRetry });
+    if (!isCaptureLoading && !error) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: HUDOverlay_styles_1.styles['overlay'], "data-testid": 'overlay' }, { children: [!error && isCaptureLoading && (0, jsx_runtime_1.jsx)(common_ui_web_1.Spinner, { size: 80, primaryColor: 'primary' }), error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: __assign(__assign(__assign({}, HUDOverlay_styles_1.styles['errorMessage']), responsive(HUDOverlay_styles_1.styles['errorMessageMobile'])), responsive(HUDOverlay_styles_1.styles['errorMessageTablet'])) }, { children: error })), handleRetry && ((0, jsx_runtime_1.jsx)(common_ui_web_1.Button, __assign({ style: HUDOverlay_styles_1.styles['retryButton'], variant: 'outline', icon: 'refresh', onClick: handleRetry }, { children: t('photo.hud.error.retry') })))] }))] })));
+}
+exports.HUDOverlay = HUDOverlay;

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

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

package/lib/{PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDOverlay → components/HUDOverlay}/hooks.d.ts

@@ -1,8 +1,8 @@
 import { CameraHandle } from '@monkvision/camera-web';
 /**
- * Props of the PhotoCaptureHUDOverlay component.
+ * Props of the HUDOverlay component.
  */
-export interface PhotoCaptureHUDOverlayProps {
+export interface HUDOverlayProps {
     /**
      * Boolean indicating if the global loading state of the PhotoCapture component is loading or not.
      */
@@ -24,5 +24,5 @@ export interface PhotoCaptureHUDOverlayProps {
      */
     inspectionId: string;
 }
-export declare function usePhotoCaptureErrorLabel(captureError: unknown | null, handle: CameraHandle, inspectionId: string): string | null;
-export declare function useRetry({ captureError, handle, onRetry, }: Pick<PhotoCaptureHUDOverlayProps, 'captureError' | 'handle' | 'onRetry'>): (() => void) | null;
+export declare function useErrorLabel(captureError: unknown | null, handle: CameraHandle, inspectionId: string): string | null;
+export declare function useRetry({ captureError, handle, onRetry, }: Pick<HUDOverlayProps, 'captureError' | 'handle' | 'onRetry'>): (() => void) | null;

package/lib/{PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDOverlay → components/HUDOverlay}/hooks.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRetry = exports.usePhotoCaptureErrorLabel = void 0;
+exports.useRetry = exports.useErrorLabel = void 0;
 var camera_web_1 = require("@monkvision/camera-web");
 var react_i18next_1 = require("react-i18next");
 var common_1 = require("@monkvision/common");
 var network_1 = require("@monkvision/network");
 var errors_1 = require("../../errors");
-function usePhotoCaptureErrorLabel(captureError, handle, inspectionId) {
+function useErrorLabel(captureError, handle, inspectionId) {
     var _a;
     var t = (0, react_i18next_1.useTranslation)().t;
     var tObj = (0, common_1.useObjectTranslation)().tObj;
@@ -33,7 +33,7 @@ function usePhotoCaptureErrorLabel(captureError, handle, inspectionId) {
     }
     return null;
 }
-exports.usePhotoCaptureErrorLabel = usePhotoCaptureErrorLabel;
+exports.useErrorLabel = useErrorLabel;
 function useRetry(_a) {
     var captureError = _a.captureError, handle = _a.handle, onRetry = _a.onRetry;
     if (handle.error) {

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

@@ -0,0 +1,2 @@
+export { HUDOverlay } from './HUDOverlay';
+export { type HUDOverlayProps } from './hooks';

package/lib/components/HUDOverlay/index.js

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

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { DeviceOrientation } from '@monkvision/types';
+/**
+ * Props accepted by the OrientationEnforcer component.
+ */
+export interface OrientationEnforcerProps {
+    /**
+     * The device orientation to enforce.
+     */
+    orientation?: DeviceOrientation;
+}
+/**
+ * Component that enforces a certain device orientation. If the current device orientation is not equal to the one
+ * passed as a prop, it will display an error on the screen asking the user to rotate their device.
+ */
+export declare function OrientationEnforcer({ orientation }: OrientationEnforcerProps): JSX.Element | null;

package/lib/components/OrientationEnforcer/OrientationEnforcer.js

@@ -0,0 +1,34 @@
+"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.OrientationEnforcer = 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 OrientationEnforcer_styles_1 = require("./OrientationEnforcer.styles");
+var hooks_1 = require("../../hooks");
+/**
+ * Component that enforces a certain device orientation. If the current device orientation is not equal to the one
+ * passed as a prop, it will display an error on the screen asking the user to rotate their device.
+ */
+function OrientationEnforcer(_a) {
+    var orientation = _a.orientation;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var containerStyle = (0, OrientationEnforcer_styles_1.useOrientationEnforcerStyles)().containerStyle;
+    var isViolatingEnforcedOrientation = (0, hooks_1.useEnforceOrientation)(orientation);
+    if (!isViolatingEnforcedOrientation) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: containerStyle }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: OrientationEnforcer_styles_1.styles['titleContainer'] }, { children: [(0, jsx_runtime_1.jsx)(common_ui_web_1.Icon, { icon: 'rotate', primaryColor: 'text-primary', size: 30 }), (0, jsx_runtime_1.jsx)("div", __assign({ style: OrientationEnforcer_styles_1.styles['title'] }, { children: t('orientationEnforcer.title') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ style: OrientationEnforcer_styles_1.styles['description'] }, { children: t('orientationEnforcer.description') }))] })));
+}
+exports.OrientationEnforcer = OrientationEnforcer;