@monkvision/inspection-capture-web 4.5.6 → 4.6.0

package/README.md

@@ -5,6 +5,9 @@ There are two main workflows for capturing pictures of a vehicle for a Monk insp
   to take pictures of the vehicle by aligning the vehicle with the Sight overlays.
 - The **VideoCapture** workflow : the user is asked to record a quick video of their vehicle by filming it and rotating
   in a full circle around it.
+- The **DamageDisclosure** workflow : The user is guided to capture close-up pictures of specific damaged parts of the vehicle. There are 2 workflows available:
+  - Part-selection: Before taking the picture, the user must first select the damaged part on the vehicle wireframe then a close-up picture of the damage.
+  - Two-shot: The user is asked to take, first a wide picture of the vehicle, then a close-up picture of the damage.
 
 # Installing
 To install the package, you can run the following command :
@@ -17,7 +20,7 @@ If you are using TypeScript, this package comes with its type definitions integr
 anything else!
 
 # PhotoCapture
-The PhotoCapture wofklow is aimed at guiding users in taking pictures of their vehicle in order to add them to a Monk
+The PhotoCapture workflow is aimed at guiding users in taking pictures of their vehicle in order to add them to a Monk
 inspection. The user is shown a set of car wireframes, which we call *Sights* and that are available in the
 `@monkvision/sights` package. These Sights act as guides, and the user is asked to take pictures of their vehicle by
 aligning it with the Sights.
@@ -62,25 +65,27 @@ export function MonkPhotoCapturePage({ authToken }) {
 
 | Prop                               | Type                                         | Description                                                                                                                                                                                      | Required | Default Value                                |
 |------------------------------------|----------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|----------------------------------------------|
-| sights                             | Sight[]                                      | The list of Sights to take pictures of. The values in this array should be retreived from the `@monkvision/sights` package.                                                                      | ✔️       |                                              |
+| format                             | `CompressionFormat`                          | The output format of the compression.                                                                                                                                                            |          | `CompressionFormat.JPEG`                     |
+| quality                            | `number`                                     | Value indicating image quality for the compression output.                                                                                                                                       |          | `0.6`                                        |
+| resolution                         | `CameraResolution`                           | Indicates the resolution of the pictures taken by the Camera.                                                                                                                                    |          | `CameraResolution.UHD_4K`                    |
+| allowImageUpscaling                | `boolean`                                    | Allow images to be scaled up if the device does not support the specified resolution in the `resolution` prop.                                                                                   |          | `false`                                      |
+| additionalTasks                    | `TaskName[]`                                 | An optional list of additional tasks to run on every image of the inspection.                                                                                                                    |          |                                              |
+| startTasksOnComplete               | `<code>boolean &#124; TaskName[]</code>`     | Value indicating if tasks should be started at the end of the inspection. See the `inspection-capture-web` package doc for more info.                                                            |          | `true`                                       |
+| enforceOrientation                 | `DeviceOrientation`                          | Use this prop to enforce a specific device orientation for the Camera screen.                                                                                                                    |          |                                              |
 | inspectionId                       | string                                       | The ID of the inspection to add images to. Make sure that the user that created the inspection if the same one as the one described in the auth token in the `apiConfig` prop.                   | ✔️       |                                              |
 | apiConfig                          | ApiConfig                                    | 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. | ✔️       |                                              |
-| onClose                            | `() => void`                                 | Callback called when the user clicks on the Close button. If this callback is not provided, the button will not be displayed on the screen.                                                      |          |                                              |
 | onComplete                         | `() => void`                                 | Callback called when inspection capture is complete.                                                                                                                                             |          |                                              |
-| onPictureTaken                     | `(picture: MonkPicture) => void`             | Callback called when the user has taken a picture in the Capture process.                                                                                                                        |          |                                              |
 | lang                               | <code>string &#124; null</code>              | The language to be used by this component.                                                                                                                                                       |          | `'en'`                                       |
-| enforceOrientation                 | `DeviceOrientation`                          | Use this prop to enforce a specific device orientation for the Camera screen.                                                                                                                    |          |                                              |
-| maxUploadDurationWarning           | `number`                                     | Max upload duration in milliseconds before showing a bad connection warning to the user. Use `-1` to never display the warning.                                                                  |          | `15000`                                      |
-| useAdaptiveImageQuality            | `boolean`                                    | Boolean indicating if the image quality should be downgraded automatically in case of low connection.                                                                                            |          | `true`                                       |
-| showCloseButton                    | `boolean`                                    | Indicates if the close button should be displayed in the HUD on top of the Camera preview.                                                                                                       |          | `false`                                      |
-| startTasksOnComplete               | `<code>boolean &#124; TaskName[]</code>`     | Value indicating if tasks should be started at the end of the inspection. See the `inspection-capture-web` package doc for more info.                                                            |          | `true`                                       |
-| additionalTasks                    | `TaskName[]`                                 | An optional list of additional tasks to run on every Sight of the inspection.                                                                                                                    |          |                                              |
+| sights                             | Sight[]                                      | The list of Sights to take pictures of. The values in this array should be retreived from the `@monkvision/sights` package.                                                                      | ✔️       |                                              |
 | tasksBySight                       | `Record<string, TaskName[]>`                 | Record associating each sight with a list of tasks to execute for it. If not provided, the default tasks of the sight will be used.                                                              |          |                                              |
-| format                             | `CompressionFormat`                          | The output format of the compression.                                                                                                                                                            |          | `CompressionFormat.JPEG`                     |
-| quality                            | `number`                                     | Value indicating image quality for the compression output.                                                                                                                                       |          | `0.6`                                        |
-| resolution                         | `CameraResolution`                           | Indicates the resolution of the pictures taken by the Camera.                                                                                                                                    |          | `CameraResolution.UHD_4K`                    |
-| allowImageUpscaling                | `boolean`                                    | Allow images to be scaled up if the device does not support the specified resolution in the `resolution` prop.                                                                                   |          | `false`                                      |
+| showCloseButton                    | `boolean`                                    | Indicates if the close button should be displayed in the HUD on top of the Camera preview.                                                                                                       |          | `false`                                      |
 | allowSkipRetake                    | `boolean`                                    | If compliance is enabled, this prop indicate if the user is allowed to skip the retaking process if some pictures are not compliant.                                                             |          | `false`                                      |
+| addDamage                          | `AddDamage`                                  | Options for Add Damage. If disabled, the `Add Damage` button will be hidden.                                                                                                                     |          | `AddDamage.PART_SELECT`                      |
+| sightGuidelines                    | `sightGuideline[]`                           | A collection of sight guidelines in different language with a list of sightIds associate to it.                                                                                                  |          |                                              |
+| enableSightGuideline               | `boolean`                                    | Boolean indicating whether the sight guideline feature is enabled. If disabled, the guideline text will be hidden.                                                                               |          | `true`                                       |
+| enableTutorial                     | `PhotoCaptureTutorialOption`                 | Options for displaying the photo capture tutorial.                                                                                                                                               |          | `PhotoCaptureTutorialOption.FIRST_TIME_ONLY` |
+| allowSkipTutorial                  | `boolean`                                    | Boolean indicating if the user can skip the PhotoCapture tutorial.                                                                                                                               |          | `true`                                       |
+| enableSightTutorial                | `boolean`                                    | Boolean indicating whether the sight tutorial feature is enabled.                                                                                                                                |          | `true`                                       |
 | enableCompliance                   | `boolean`                                    | Indicates if compliance checks should be enabled or not.                                                                                                                                         |          | `true`                                       |
 | enableCompliancePerSight           | `string[]`                                   | Array of Sight IDs that indicates for which sight IDs the compliance should be enabled.                                                                                                          |          |                                              |
 | complianceIssues                   | `ComplianceIssue[]`                          | If compliance checks are enabled, this property can be used to select a list of compliance issues to check.                                                                                      |          | `DEFAULT_COMPLIANCE_ISSUES`                  |
@@ -88,11 +93,121 @@ export function MonkPhotoCapturePage({ authToken }) {
 | useLiveCompliance                  | `boolean`                                    | Indicates if live compliance should be enabled or not.                                                                                                                                           |          | `false`                                      |
 | customComplianceThresholds         | `CustomComplianceThresholds`                 | Custom thresholds that can be used to modify the strictness of the compliance for certain compliance issues.                                                                                     |          |                                              |
 | customComplianceThresholdsPerSight | `Record<string, CustomComplianceThresholds>` | A map associating Sight IDs to custom compliance thresholds.                                                                                                                                     |          |                                              |
+| onClose                            | `() => void`                                 | Callback called when the user clicks on the Close button. If this callback is not provided, the button will not be displayed on the screen.                                                      |          |                                              |
+| onPictureTaken                     | `(picture: MonkPicture) => void`             | Callback called when the user has taken a picture in the Capture process.                                                                                                                        |          |                                              |
 | validateButtonLabel                | `string`                                     | Custom label for validate button in gallery view.                                                                                                                                                |          |                                              |
-| enableSightGuideline               | `boolean`                                    | Boolean indicating whether the sight guideline feature is enabled. If disabled, the guideline text will be hidden.                                                                               |          | `true`                                       |
-| sightGuidelines                    | `sightGuideline[]`                           | A collection of sight guidelines in different language with a list of sightIds associate to it.                                                                                                  |          |                                              |
-| enableTutorial                     | `PhotoCaptureTutorialOption`                 | Options for displaying the photo capture tutorial.                                                                                                                                               |          | `PhotoCaptureTutorialOption.FIRST_TIME_ONLY` |
-| allowSkipTutorial                  | `boolean`                                    | Boolean indicating if the user can skip the PhotoCapture tutorial.                                                                                                                               |          | `true`                                       |
-| thumbnailDomain                    | `string`                                     | The API domain used to communicate with the resize micro service.                                                                                                                                | ✔️       |                                              |
+| maxUploadDurationWarning           | `number`                                     | Max upload duration in milliseconds before showing a bad connection warning to the user. Use `-1` to never display the warning.                                                                  |          | `15000`                                      |
+| useAdaptiveImageQuality            | `boolean`                                    | Boolean indicating if the image quality should be downgraded automatically in case of low connection.                                                                                            |          | `true`                                       |
+| vehicleType                        | `VehicleType`                                | The vehicle type of the inspection.                                                                                                                                                              |          | `VehicleType.SEDAN`                          |
+
+# VideoCapture
+The VideoCapture workflow is aimed at asking users to record a walkaround video of their vehicle (around ~1min per
+video) to send vehicle inspection pictures to the Monk API. In reality, no video is being recorded. Instead, screenshots
+of the camera stream a repeatidly taken while the users walks around their vehicle. An algorithm is run to select the
+best video frames (the less blurry ones), and they are then sent to the Monk API.
+
+Please refer to the [official MonkJs documentation](https://monkvision.github.io/monkjs/docs/photo-capture-workflow) to
+have a detailed overview of the Video Capture workflow.
+
+## VideoCapture component
+This package exports a ready-to-use single-page component called `VideoCapture` that implements the VideoCapture
+workflow. The implementation for it is extremely similar to the `PhotoCapture` component described above. The only
+difference being the configuration options that differ, as well as the fact that you need to pass certain parameters
+when creating your inspection to ake sure it will be able to receive video frames as inputs (if you are creating your
+inspection using the `createInspection` requests of the MonkJs SDK, you can simply set the `isVideoCapture` option to
+`true`).
+
+```tsx
+import { sights } from '@monkvision/sights';
+import { VideoCapture } from '@monkvision/inspection-capture-web';
+
+const apiDomain = 'api.preview.monk.ai/v1';
+
+export function MonkVideoCapturePage({ authToken }) {
+  return (
+    <VideoCapture
+      inspectionId={inspectionId}
+      apiConfig={{ apiDomain, authToken }}
+      onComplete={() => { /* Navigate to another page */ }}
+    />
+  );
+}
+```
+
+Props
+
+| Prop                         | Type                                     | Description                                                                                                                                                                                      | Required | Default Value             |
+|------------------------------|------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|---------------------------|
+| format                       | `CompressionFormat`                      | The output format of the compression.                                                                                                                                                            |          | `CompressionFormat.JPEG`  |
+| quality                      | `number`                                 | Value indicating image quality for the compression output.                                                                                                                                       |          | `0.6`                     |
+| resolution                   | `CameraResolution`                       | Indicates the resolution of the pictures taken by the Camera.                                                                                                                                    |          | `CameraResolution.UHD_4K` |
+| allowImageUpscaling          | `boolean`                                | Allow images to be scaled up if the device does not support the specified resolution in the `resolution` prop.                                                                                   |          | `false`                   |
+| additionalTasks              | `TaskName[]`                             | An optional list of additional tasks to run on every image of the inspection.                                                                                                                    |          |                           |
+| startTasksOnComplete         | `<code>boolean &#124; TaskName[]</code>` | Value indicating if tasks should be started at the end of the inspection. See the `inspection-capture-web` package doc for more info.                                                            |          | `true`                    |
+| enforceOrientation           | `DeviceOrientation`                      | Use this prop to enforce a specific device orientation for the Camera screen.                                                                                                                    |          |                           |
+| inspectionId                 | string                                   | The ID of the inspection to add images to. Make sure that the user that created the inspection if the same one as the one described in the auth token in the `apiConfig` prop.                   | ✔️       |                           |
+| apiConfig                    | ApiConfig                                | 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. | ✔️       |                           |
+| onComplete                   | `() => void`                             | Callback called when inspection capture is complete.                                                                                                                                             |          |                           |
+| lang                         | <code>string &#124; null</code>          | The language to be used by this component.                                                                                                                                                       |          | `'en'`                    |
+| minRecordingDuration         | `number`                                 | The minimum duration of a recording in milliseconds.                                                                                                                                             |          | `15000`                   |
+| maxRetryCount                | `number`                                 | The maximum number of retries for failed image uploads.                                                                                                                                          |          | `3`                       |
+| enableFastWalkingWarning     | `boolean`                                | Boolean indicating if a warning should be shown to the user when they are walking too fast around the vehicle.                                                                                   |          | `true`                    |
+| enablePhoneShakingWarning    | `boolean`                                | Boolean indicating if a warning should be shown to the user when they are shaking their phone too much.                                                                                          |          | `true`                    |
+| fastWalkingWarningCooldown   | `number`                                 | The duration (in milliseconds) to wait between fast walking warnings.                                                                                                                            |          | `4000`                    |
+| phoneShakingWarningCooldown  | `number`                                 | The duration (in milliseconds) to wait between phone shaking warnings.                                                                                                                           |          | `4000`                    |
+
+# DamageDisclosure
+
+The DamageDisclosure workflow is designed to guide users in documenting and disclosing damage to their vehicles during a Monk inspection.
+This workflow is ideal for capturing detailed images of specific damages such as dents, scratches, or other issues that need to be highlighted in the inspection report.
+There are 2 workflows available.
+
+Please refer to the [official MonkJs documentation](https://monkvision.github.io/monkjs/docs/photo-capture-workflow) for a comprehensive overview of the Add damage workflow.
+
+## DamageDisclosure component
+
+This package exports a ready-to-use single-page component called DamageDisclosure that implements the DamageDisclosure workflow. You can integrate it into your application by creating a new page containing only this component. Before using it, you must generate an Auth0 authentication token and create a new inspection using the Monk API. Ensure that all task statuses in the inspection are set to NOT_STARTED.
+
+You can then pass the inspection ID, API configuration (including the auth token). Once the user completes the workflow, the onComplete callback is triggered, allowing you to navigate to another page or perform additional actions.
+
+The following example demonstrates how to use the DamageDisclosure component:
+
+```tsx
+import { DamageDisclosure } from '@monkvision/inspection-capture-web';
+
+const apiDomain = 'api.preview.monk.ai/v1';
+
+export function MonkDamageDisclosurePage({ authToken }) {
+  return (
+    <DamageDisclosure
+      inspectionId={inspectionId}
+      apiConfig={{ apiDomain, authToken }}
+      onComplete={() => { /* Navigate to another page */ }}
+    />
+  );
+}
+```
 
+Props
 
+| Prop                     | Type                                         | Description                                                                                                                                                                                         | Required | Default Value                                |
+|--------------------------|----------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|----------------------------------------------|
+| inspectionId             | string                                       | The ID of the inspection to add images to. Make sure that the user that created the inspection if the same one as the one described in the auth token in the `apiConfig` prop.                      | ✔️       |                                              |
+| apiConfig                | ApiConfig                                    | 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.    | ✔️       |                                              |
+| onClose                  | `() => void`                                 | Callback called when the user clicks on the Close button. If this callback is not provided, the button will not be displayed on the screen.                                                         |          |                                              |
+| onComplete               | `() => void`                                 | Callback called when inspection capture is complete.                                                                                                                                                |          |                                              |
+| onPictureTaken           | `(picture: MonkPicture) => void`             | Callback called when the user has taken a picture in the Capture process.                                                                                                                           |          |                                              |
+| lang                     | <code>string &#124; null</code>              | The language to be used by this component.                                                                                                                                                          |          | `'en'`                                       |
+| enforceOrientation       | `DeviceOrientation`                          | Use this prop to enforce a specific device orientation for the Camera screen.                                                                                                                       |          |                                              |
+| maxUploadDurationWarning | `number`                                     | Max upload duration in milliseconds before showing a bad connection warning to the user. Use `-1` to never display the warning.                                                                     |          | `15000`                                      |
+| useAdaptiveImageQuality  | `boolean`                                    | Boolean indicating if the image quality should be downgraded automatically in case of low connection.                                                                                               |          | `true`                                       |
+| showCloseButton          | `boolean`                                    | Indicates if the close button should be displayed in the HUD on top of the Camera preview.                                                                                                          |          | `false`                                      |
+| format                   | `CompressionFormat`                          | The output format of the compression.                                                                                                                                                               |          | `CompressionFormat.JPEG`                     |
+| quality                  | `number`                                     | Value indicating image quality for the compression output.                                                                                                                                          |          | `0.6`                                        |
+| resolution               | `CameraResolution`                           | Indicates the resolution of the pictures taken by the Camera.                                                                                                                                       |          | `CameraResolution.UHD_4K`                    |
+| allowImageUpscaling      | `boolean`                                    | Allow images to be scaled up if the device does not support the specified resolution in the `resolution` prop.                                                                                      |          | `false`                                      |
+| useLiveCompliance        | `boolean`                                    | Indicates if live compliance should be enabled or not.                                                                                                                                              |          | `false`                                      |
+| validateButtonLabel      | `string`                                     | Custom label for validate button in gallery view.                                                                                                                                                   |          |                                              |
+| thumbnailDomain          | `string`                                     | The API domain used to communicate with the resize micro service.                                                                                                                                   | ✔️       |                                              |
+| vehicleType              | `VehicleType`                                | The vehicle type of the inspection.                                                                                                                                                                 |          | `VehicleType.SEDAN`                          |
+| addDamage                | `AddDamage`                                  | Options for Add Damage. If disabled, the `Add Damage` button will be hidden.                                                                                                                        |          | `AddDamage.PART_SELECT`                      |

package/lib/DamageDisclosure/DamageDisclosure.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { CameraProps } from '@monkvision/camera-web';
+import { MonkApiConfig } from '@monkvision/network';
+import { CameraConfig, PhotoCaptureAppConfig, ComplianceOptions, CompressionOptions, MonkPicture, VehicleType } from '@monkvision/types';
+import { DamageDisclosureHUDProps } from './DamageDisclosureHUD';
+/**
+ * Props of the DamageDisclosure component.
+ */
+export interface DamageDisclosureProps extends Pick<CameraProps<DamageDisclosureHUDProps>, 'resolution' | 'allowImageUpscaling'>, Pick<PhotoCaptureAppConfig, keyof CameraConfig | 'maxUploadDurationWarning' | 'useAdaptiveImageQuality' | 'showCloseButton' | 'enforceOrientation' | 'addDamage'>, Partial<CompressionOptions>, Partial<ComplianceOptions> {
+    /**
+     * The ID of the inspection to add images to. Make sure that the user that created the inspection if the same one as
+     * the one described in the auth token in the `apiConfig` prop.
+     */
+    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;
+    /**
+     * The vehicle type of the inspection.
+     */
+    vehicleType?: VehicleType;
+    /**
+     * Callback called when the user clicks on the Close button. If this callback is not provided, the button will not be
+     * displayed on the screen.
+     */
+    onClose?: () => void;
+    /**
+     * Callback called when damage disclosure is complete.
+     */
+    onComplete?: () => void;
+    /**
+     * Callback called when a picture has been taken by the user.
+     */
+    onPictureTaken?: (picture: MonkPicture) => void;
+    /**
+     * The language to be used by this component.
+     *
+     * @default en
+     */
+    lang?: string | null;
+}
+export declare function DamageDisclosure({ inspectionId, apiConfig, onClose, onComplete, onPictureTaken, enableCompliance, complianceIssues, customComplianceThresholds, useLiveCompliance, maxUploadDurationWarning, showCloseButton, addDamage, useAdaptiveImageQuality, lang, enforceOrientation, vehicleType, ...initialCameraConfig }: DamageDisclosureProps): JSX.Element;

package/lib/DamageDisclosure/DamageDisclosure.js

@@ -0,0 +1,114 @@
+"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.DamageDisclosure = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var analytics_1 = require("@monkvision/analytics");
+var camera_web_1 = require("@monkvision/camera-web");
+var common_1 = require("@monkvision/common");
+var common_ui_web_1 = require("@monkvision/common-ui-web");
+var types_1 = require("@monkvision/types");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var DamageDisclosure_styles_1 = require("./DamageDisclosure.styles");
+var DamageDisclosureHUD_1 = require("./DamageDisclosureHUD");
+var hooks_1 = require("./hooks");
+var hooks_2 = require("../hooks");
+var types_2 = require("../types");
+// No ts-doc for this component : the component exported is DamageDisclosureHOC
+function DamageDisclosure(_a) {
+    var inspectionId = _a.inspectionId, apiConfig = _a.apiConfig, onClose = _a.onClose, onComplete = _a.onComplete, onPictureTaken = _a.onPictureTaken, _b = _a.enableCompliance, enableCompliance = _b === void 0 ? true : _b, complianceIssues = _a.complianceIssues, customComplianceThresholds = _a.customComplianceThresholds, _c = _a.useLiveCompliance, useLiveCompliance = _c === void 0 ? false : _c, _d = _a.maxUploadDurationWarning, maxUploadDurationWarning = _d === void 0 ? 15000 : _d, _e = _a.showCloseButton, showCloseButton = _e === void 0 ? false : _e, _f = _a.addDamage, addDamage = _f === void 0 ? types_1.AddDamage.PART_SELECT : _f, _g = _a.useAdaptiveImageQuality, useAdaptiveImageQuality = _g === void 0 ? true : _g, lang = _a.lang, enforceOrientation = _a.enforceOrientation, _h = _a.vehicleType, vehicleType = _h === void 0 ? types_1.VehicleType.SEDAN : _h, initialCameraConfig = __rest(_a, ["inspectionId", "apiConfig", "onClose", "onComplete", "onPictureTaken", "enableCompliance", "complianceIssues", "customComplianceThresholds", "useLiveCompliance", "maxUploadDurationWarning", "showCloseButton", "addDamage", "useAdaptiveImageQuality", "lang", "enforceOrientation", "vehicleType"]);
+    (0, common_1.useI18nSync)(lang);
+    var complianceOptions = (0, common_1.useObjectMemo)({
+        enableCompliance: enableCompliance,
+        complianceIssues: complianceIssues,
+        useLiveCompliance: useLiveCompliance,
+        customComplianceThresholds: customComplianceThresholds,
+    });
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _j = (0, react_1.useState)(types_2.CaptureScreen.CAMERA), currentScreen = _j[0], setCurrentScreen = _j[1];
+    var dimensions = (0, common_1.useWindowDimensions)();
+    var analytics = (0, analytics_1.useAnalytics)();
+    var loading = (0, common_1.useLoadingState)();
+    var handleOpenGallery = function () {
+        setCurrentScreen(types_2.CaptureScreen.GALLERY);
+        analytics.trackEvent('Gallery Opened');
+    };
+    var addDamageHandle = (0, hooks_2.useAddDamageMode)({
+        addDamage: addDamage,
+        currentScreen: currentScreen,
+        damageDisclosure: true,
+        handleOpenGallery: handleOpenGallery,
+    });
+    var disclosureState = (0, hooks_1.useDamageDisclosureState)({
+        inspectionId: inspectionId,
+        apiConfig: apiConfig,
+        loading: loading,
+        complianceOptions: complianceOptions,
+    });
+    (0, hooks_2.useTracking)({ inspectionId: inspectionId, authToken: apiConfig.authToken });
+    var _k = (0, hooks_2.useAdaptiveCameraConfig)({
+        initialCameraConfig: initialCameraConfig,
+        useAdaptiveImageQuality: useAdaptiveImageQuality,
+    }), adaptiveCameraConfig = _k.adaptiveCameraConfig, adaptiveUploadEventHandlers = _k.uploadEventHandlers;
+    var _l = (0, hooks_2.useBadConnectionWarning)({ maxUploadDurationWarning: maxUploadDurationWarning }), isBadConnectionWarningDialogDisplayed = _l.isBadConnectionWarningDialogDisplayed, closeBadConnectionWarningDialog = _l.closeBadConnectionWarningDialog, badConnectionWarningUploadEventHandlers = _l.uploadEventHandlers;
+    var uploadQueue = (0, hooks_2.useUploadQueue)({
+        inspectionId: inspectionId,
+        apiConfig: apiConfig,
+        complianceOptions: complianceOptions,
+        eventHandlers: [adaptiveUploadEventHandlers, badConnectionWarningUploadEventHandlers],
+    });
+    var images = (0, hooks_2.usePhotoCaptureImages)(inspectionId);
+    var handlePictureTaken = (0, hooks_2.usePictureTaken)({
+        captureState: disclosureState,
+        addDamageHandle: addDamageHandle,
+        uploadQueue: uploadQueue,
+        onPictureTaken: onPictureTaken,
+    });
+    var handleGalleryBack = function () {
+        setCurrentScreen(types_2.CaptureScreen.CAMERA);
+    };
+    var isViolatingEnforcedOrientation = enforceOrientation &&
+        (enforceOrientation === types_1.DeviceOrientation.PORTRAIT) !== dimensions.isPortrait;
+    var hudProps = {
+        inspectionId: inspectionId,
+        mode: addDamageHandle.mode,
+        vehicleParts: addDamageHandle.vehicleParts,
+        lastPictureTakenUri: disclosureState.lastPictureTakenUri,
+        onOpenGallery: handleOpenGallery,
+        onAddDamage: addDamageHandle.handleAddDamage,
+        onAddDamagePartsSelected: addDamageHandle.handleAddDamagePartsSelected,
+        onCancelAddDamage: addDamageHandle.handleCancelAddDamage,
+        onRetry: disclosureState.retryLoadingInspection,
+        loading: loading,
+        onClose: onClose,
+        showCloseButton: showCloseButton,
+        images: images,
+        addDamage: addDamage,
+        onValidateVehicleParts: addDamageHandle.handleValidateVehicleParts,
+        vehicleType: vehicleType,
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: DamageDisclosure_styles_1.styles['container'] }, { children: [currentScreen === types_2.CaptureScreen.CAMERA && isViolatingEnforcedOrientation && ((0, jsx_runtime_1.jsxs)("div", __assign({ style: DamageDisclosure_styles_1.styles['orientationErrorContainer'] }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: DamageDisclosure_styles_1.styles['orientationErrorTitleContainer'] }, { 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: DamageDisclosure_styles_1.styles['orientationErrorTitle'] }, { children: t('photo.orientationError.title') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ style: DamageDisclosure_styles_1.styles['orientationErrorDescription'] }, { children: t('photo.orientationError.description') }))] }))), currentScreen === types_2.CaptureScreen.CAMERA && !isViolatingEnforcedOrientation && ((0, jsx_runtime_1.jsx)(camera_web_1.Camera, __assign({ HUDComponent: DamageDisclosureHUD_1.DamageDisclosureHUD, onPictureTaken: handlePictureTaken, hudProps: hudProps }, adaptiveCameraConfig))), currentScreen === types_2.CaptureScreen.GALLERY && ((0, jsx_runtime_1.jsx)(common_ui_web_1.InspectionGallery, { inspectionId: inspectionId, sights: [], apiConfig: apiConfig, captureMode: true, lang: lang, showBackButton: true, onBack: handleGalleryBack, onNavigateToCapture: handleGalleryBack, onValidate: onComplete, addDamage: addDamage, validateButtonLabel: t('photo.gallery.next'), isInspectionCompleted: false, filterByImageType: types_1.ImageType.CLOSE_UP })), (0, jsx_runtime_1.jsx)(common_ui_web_1.BackdropDialog, { show: isBadConnectionWarningDialogDisplayed, showCancelButton: false, dialogIcon: 'warning-outline', dialogIconPrimaryColor: 'caution-base', message: t('photo.badConnectionWarning.message'), confirmLabel: t('photo.badConnectionWarning.confirm'), onConfirm: closeBadConnectionWarningDialog })] })));
+}
+exports.DamageDisclosure = DamageDisclosure;

package/lib/DamageDisclosure/DamageDisclosure.styles.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+exports.styles = {
+    container: {
+        height: '100%',
+        width: '100%',
+    },
+    orientationErrorContainer: {
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        boxSizing: 'border-box',
+        padding: '50px 10%',
+    },
+    orientationErrorTitleContainer: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    orientationErrorTitle: {
+        fontSize: 18,
+        marginLeft: 16,
+    },
+    orientationErrorDescription: {
+        fontSize: 16,
+        paddingTop: 16,
+        opacity: 0.8,
+        textAlign: 'center',
+    },
+};

package/lib/DamageDisclosure/DamageDisclosureHOC.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { DamageDisclosureProps } from './DamageDisclosure';
+/**
+ * The DamageDisclosure component is a ready-to-use, single page component that implements a Camera app, allowing users
+ * to capture photos of damaged parts of their vehicle for the purpose of disclosing damage. 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`. You can then pass the
+ * inspection ID, the api config (with the auth token) and everything will be handled automatically for you.
+ *
+ * @example
+ * import { DamageDisclosure } from '@monkvision/inspection-capture-web';
+ *
+ * export function PhotoCaptureScreen({ inspectionId, apiConfig }: PhotoCaptureScreenProps) {
+ *   const { i18n } = useTranslation();
+ *
+ *   return (
+ *     <DamageDisclosure
+ *       inspectionId={inspectionId}
+ *       apiConfig={apiConfig}
+ *       compliances={{ iqa: true }}
+ *       onComplete={() => { / * Navigate to another page * / }}
+ *       lang={i18n.language}
+ *     />
+ *   );
+ * }
+ */
+export declare const DamageDisclosureHOC: import("react").ForwardRefExoticComponent<DamageDisclosureProps & import("react").RefAttributes<unknown>>;

package/lib/DamageDisclosure/DamageDisclosureHOC.js

@@ -0,0 +1,45 @@
+"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.DamageDisclosureHOC = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var common_1 = require("@monkvision/common");
+var i18n_1 = require("../i18n");
+var DamageDisclosure_1 = require("./DamageDisclosure");
+/**
+ * The DamageDisclosure component is a ready-to-use, single page component that implements a Camera app, allowing users
+ * to capture photos of damaged parts of their vehicle for the purpose of disclosing damage. 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`. You can then pass the
+ * inspection ID, the api config (with the auth token) and everything will be handled automatically for you.
+ *
+ * @example
+ * import { DamageDisclosure } from '@monkvision/inspection-capture-web';
+ *
+ * export function PhotoCaptureScreen({ inspectionId, apiConfig }: PhotoCaptureScreenProps) {
+ *   const { i18n } = useTranslation();
+ *
+ *   return (
+ *     <DamageDisclosure
+ *       inspectionId={inspectionId}
+ *       apiConfig={apiConfig}
+ *       compliances={{ iqa: true }}
+ *       onComplete={() => { / * Navigate to another page * / }}
+ *       lang={i18n.language}
+ *     />
+ *   );
+ * }
+ */
+exports.DamageDisclosureHOC = (0, common_1.i18nWrap)(function DamageDisclosureHOC(props) {
+    return ((0, jsx_runtime_1.jsx)(common_1.MonkProvider, { children: (0, jsx_runtime_1.jsx)(DamageDisclosure_1.DamageDisclosure, __assign({}, props)) }));
+}, i18n_1.i18nInspectionCaptureWeb);

package/lib/DamageDisclosure/DamageDisclosureHUD/DamageDisclosureHUD.d.ts

@@ -0,0 +1,73 @@
+/// <reference types="react" />
+import { PhotoCaptureAppConfig, Image, VehiclePart, VehicleType } from '@monkvision/types';
+import { CameraHUDProps } from '@monkvision/camera-web';
+import { LoadingState } from '@monkvision/common';
+import { CaptureMode } from '../../types';
+/**
+ * Props of the DamageDisclosureHUD component.
+ */
+export interface DamageDisclosureHUDProps extends CameraHUDProps, Pick<PhotoCaptureAppConfig, 'addDamage' | 'showCloseButton'> {
+    /**
+     * The inspection ID.
+     */
+    inspectionId: string;
+    /**
+     * The current mode of the component.
+     */
+    mode: CaptureMode;
+    /**
+     * Global loading state of the DamageDisclosure component.
+     */
+    loading: LoadingState;
+    /**
+     * Current vehicle parts selected to take a picture of.
+     */
+    vehicleParts: VehiclePart[];
+    /**
+     * Value storing the last picture taken by the user. If no picture has been taken yet, this value is null.
+     */
+    lastPictureTakenUri: string | null;
+    /**
+     * Callback called when the user clicks on 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 clicks on the "Cancel" button of the Add Damage mode.
+     */
+    onCancelAddDamage: () => void;
+    /**
+     * Callback that can be used to retry fetching this state object from the API in case the previous fetch failed.
+     */
+    onRetry: () => void;
+    /**
+     * Callback called when the user clicks on the gallery icon.
+     */
+    onOpenGallery: () => void;
+    /**
+     * Callback called when the user clicks on the "Validate" button of the Add Damage mode.
+     */
+    onValidateVehicleParts: () => void;
+    /**
+     * Callback called when the user clicks on the close button. If this callback is not provided, the close button is not
+     * displayed.
+     */
+    onClose?: () => void;
+    /**
+     * The current images taken by the user (ignoring retaken pictures etc.).
+     */
+    images: Image[];
+    /**
+     * The vehicle type of the inspection.
+     */
+    vehicleType: VehicleType;
+}
+/**
+ * This component implements the Camera HUD (head-up display) displayed in the DamageDisclosure component
+ * over the Camera preview. It implements elements such as buttons to interact with
+ * the camera, DamageDisclosure indicators, error messages, loaders etc.
+ */
+export declare function DamageDisclosureHUD({ inspectionId, lastPictureTakenUri, mode, vehicleParts, addDamage, onAddDamage, onAddDamagePartsSelected, onValidateVehicleParts, onCancelAddDamage, onOpenGallery, onClose, onRetry, showCloseButton, loading, handle, cameraPreview, images, vehicleType, }: DamageDisclosureHUDProps): JSX.Element;

package/lib/DamageDisclosure/DamageDisclosureHUD/DamageDisclosureHUD.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.DamageDisclosureHUD = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var types_1 = require("@monkvision/types");
+var react_i18next_1 = require("react-i18next");
+var common_ui_web_1 = require("@monkvision/common-ui-web");
+var analytics_1 = require("@monkvision/analytics");
+var DamageDisclosureHUD_styles_1 = require("./DamageDisclosureHUD.styles");
+var types_2 = require("../../types");
+var HUDButtons_1 = require("../../components/HUDButtons");
+var DamageDisclosureHUDElements_1 = require("./DamageDisclosureHUDElements");
+var HUDOverlay_1 = require("../../components/HUDOverlay");
+/**
+ * This component implements the Camera HUD (head-up display) displayed in the DamageDisclosure component
+ * over the Camera preview. It implements elements such as buttons to interact with
+ * the camera, DamageDisclosure indicators, error messages, loaders etc.
+ */
+function DamageDisclosureHUD(_a) {
+    var _b;
+    var inspectionId = _a.inspectionId, lastPictureTakenUri = _a.lastPictureTakenUri, mode = _a.mode, vehicleParts = _a.vehicleParts, addDamage = _a.addDamage, onAddDamage = _a.onAddDamage, onAddDamagePartsSelected = _a.onAddDamagePartsSelected, onValidateVehicleParts = _a.onValidateVehicleParts, onCancelAddDamage = _a.onCancelAddDamage, onOpenGallery = _a.onOpenGallery, onClose = _a.onClose, onRetry = _a.onRetry, showCloseButton = _a.showCloseButton, loading = _a.loading, handle = _a.handle, cameraPreview = _a.cameraPreview, images = _a.images, vehicleType = _a.vehicleType;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _c = (0, react_1.useState)(false), showCloseModal = _c[0], setShowCloseModal = _c[1];
+    var trackEvent = (0, analytics_1.useAnalytics)().trackEvent;
+    var retakeCount = (0, react_1.useMemo)(function () {
+        return images.filter(function (image) {
+            return [types_1.ImageStatus.NOT_COMPLIANT, types_1.ImageStatus.UPLOAD_FAILED, types_1.ImageStatus.UPLOAD_ERROR].includes(image.status) && image.type === types_1.ImageType.CLOSE_UP;
+        }).length;
+    }, [images]);
+    var handleCloseConfirm = function () {
+        setShowCloseModal(false);
+        trackEvent('Disclosure Closed');
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: DamageDisclosureHUD_styles_1.styles['container'] }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: DamageDisclosureHUD_styles_1.styles['previewContainer'], "data-testid": 'camera-preview' }, { children: [cameraPreview, (0, jsx_runtime_1.jsx)(DamageDisclosureHUDElements_1.DamageDisclosureHUDElements, { mode: mode, addDamage: addDamage, vehicleParts: vehicleParts, onAddDamage: onAddDamage, onCancelAddDamage: onCancelAddDamage, onAddDamagePartsSelected: onAddDamagePartsSelected, onValidateVehicleParts: onValidateVehicleParts, isLoading: loading.isLoading, error: (_b = loading.error) !== null && _b !== void 0 ? _b : handle.error, previewDimensions: handle.previewDimensions, vehicleType: vehicleType })] })), mode !== types_2.CaptureMode.ADD_DAMAGE_PART_SELECT && ((0, jsx_runtime_1.jsx)(HUDButtons_1.HUDButtons, { onOpenGallery: onOpenGallery, onTakePicture: handle === null || handle === void 0 ? void 0 : handle.takePicture, onClose: function () { return setShowCloseModal(true); }, galleryPreview: lastPictureTakenUri !== null && lastPictureTakenUri !== void 0 ? lastPictureTakenUri : undefined, closeDisabled: !!loading.error || !!handle.error, galleryDisabled: !!loading.error || !!handle.error, takePictureDisabled: !!loading.error || !!handle.error || handle.isLoading || loading.isLoading, showCloseButton: showCloseButton, showGalleryBadge: retakeCount > 0, retakeCount: retakeCount })), (0, jsx_runtime_1.jsx)(HUDOverlay_1.HUDOverlay, { inspectionId: inspectionId, handle: handle, isCaptureLoading: loading.isLoading, captureError: loading.error, onRetry: onRetry }), (0, jsx_runtime_1.jsx)(common_ui_web_1.BackdropDialog, { show: showCloseModal, message: t('photo.hud.closeConfirm.message'), cancelLabel: t('photo.hud.closeConfirm.cancel'), confirmLabel: t('photo.hud.closeConfirm.confirm'), onCancel: function () { return setShowCloseModal(false); }, onConfirm: handleCloseConfirm })] })));
+}
+exports.DamageDisclosureHUD = DamageDisclosureHUD;