From cc09ab8e81571e1c88385f511bf7fa220f8b5aa7 Mon Sep 17 00:00:00 2001 From: David Ly Date: Thu, 9 Jan 2025 18:01:39 +0100 Subject: [PATCH] Docs + improve function/const naming --- documentation/docs/configuration.md | 38 +++++++++++++++++++ packages/common-ui-web/README.md | 31 +++++++++++++++ .../VehicleDynamicWireframe.tsx | 32 +--------------- .../VehicleDynamicWireframe/hooks.ts | 15 +++++--- .../VehicleDynamicWireframe/index.ts | 6 +-- packages/common/README.md | 4 +- packages/common/README/UTILITIES.md | 36 ++++++++++++++++++ packages/common/src/utils/browser.utils.ts | 4 +- packages/inspection-capture-web/README.md | 11 ++++-- .../src/DamageDisclosure/DamageDisclosure.tsx | 4 +- .../DamageDisclosure/DamageDisclosureHOC.tsx | 6 +-- .../DamageDisclosureHUD.tsx | 2 +- .../hooks/useDamageDisclosureState.ts | 2 +- .../src/PhotoCapture/PhotoCapture.tsx | 2 +- .../PhotoCaptureHUDElements.tsx | 1 - .../AddDamageButton/AddDamageButton.tsx | 26 +++++-------- .../SightGuideline/SightGuideline.tsx | 3 +- .../PartSelection/PartSelection.tsx | 7 ++++ .../src/hooks/useAddDamageMode.ts | 13 ++++--- .../src/hooks/usePictureTaken.ts | 25 ++++++------ packages/inspection-capture-web/src/types.ts | 2 +- .../DamageDisclosure.test.tsx | 4 +- .../hooks/useDamageDisclosureState.test.ts | 1 - .../test/PhotoCapture/PhotoCapture.test.tsx | 4 +- .../test/hooks/usePictureTaken.test.ts | 18 ++++----- 25 files changed, 189 insertions(+), 108 deletions(-) diff --git a/documentation/docs/configuration.md b/documentation/docs/configuration.md index ac043d3da..de0d5deea 100644 --- a/documentation/docs/configuration.md +++ b/documentation/docs/configuration.md @@ -20,6 +20,44 @@ export const MonkJsConfig: PhotoCaptureAppConfig = { This configuration object can then be passed to components like `` or ``. +## Available Configuration Options +The following table lists the available configuration options in the `CaptureAppConfig` interface : + +| Name | Type | Description | Required | Default Value | +|------------------------------------|----------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------|-----------------------------| +| allowManualLogin | `boolean` | Indicates if manual login and logout should be enabled or not. | ✔️ | | +| fetchFromSearchParams | `boolean` | Indicates if the app state (auth token, inspection ID etc.) should be fetched from the URL search params. | ✔️ | | +| allowVehicleTypeSelection | `boolean` | Indicates if manual vehicle type selection should be enabled if the vehicle type is not defined. | ✔️ | | +| enableSteeringWheelPosition | `boolean` | Indicates if the capture Sights should vary based on the steering wheel position (right or left). | ✔️ | | +| defaultVehicleType | `VehicleType` | Default vehicle type to use if no vehicle type has been specified. | ✔️ | | +| defaultSteeringWheelPosition | `SteeringWheelPosition` | Default steering wheel position to use if no steering wheel position has been specified. | if `enableSteeringWheelPosition` is set to `true` | | +| sights | `Record<..., string[]>` | A map associating each vehicle type supported by the app to a list of sight IDs. If `enableSteeringWheelPosition` is set to `true`, it's a map associating each steering wheel position to this map. | ✔️ | | +| allowCreateInspection | `boolean` | Indicates if automatic inspection creation should be enabled in the app. | ✔️ | | +| createInspectionOptions | `CreateInspectionOptions` | Options used when automatically creating an inspection. | if `allowCreateInspection` is set to `true` | | +| apiDomain | `string` | The API domain used to communicate with the API. | ✔️ | | +| requiredApiPermissions | `MonkApiPermission[]` | Required API permission that the user must have to use the current app. | | | +| palette | `Partial` | Custom color palette to use in the app. | | | +| 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 | `boolean | TaskName[]` | 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. | | | +| tasksBySight | `Record` | 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. | | | +| 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` | +| format | `CompressionFormat` | The output format of the compression. | | `CompressionFormat.JPEG` | +| quality | `number` | Value indicating image quality for the compression output. | | `0.6` | +| addDamage | `AddDamage` | Options for Add Damage, If disabled, the `Add Damage` button will be hidden. | | `AddDamage.PART_SELECT` | +| 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` | +| 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` | +| complianceIssuesPerSight | `Record` | A map associating Sight IDs to a list of compliance issues to check. | | | +| 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` | A map associating Sight IDs to custom compliance thresholds. | | | + ## Live Configs MonkJs now also offers a way to configure Live Configurations for your web applications. This allows MonkJs apps to fetch their configurations (`PhotoCaptureAppConfig` or `VideoCaptureAppConfig`) from a GCP Bucket on startup. By doing diff --git a/packages/common-ui-web/README.md b/packages/common-ui-web/README.md index 8fae5a264..25fd92885 100644 --- a/packages/common-ui-web/README.md +++ b/packages/common-ui-web/README.md @@ -134,6 +134,37 @@ function App() { --- +## CaptureSelection +### Description +A single page component that allows the user to select between "Add Damage" or "Photo Capture" workflow. + +### Example + +```tsx +import { CaptureSelection } from "@monkvision/common-ui-web"; +import { useNavigate } from "react-router-dom"; + +function App() { + const { navigate } = useNavigate(); + + return ( + navigate('/add-damage-page')} + onCapture={() => navigate('/photo-capture-page')} + /> + ); +} +``` + +### Props +| Prop | Type | Description | Required | Default Value | +|-------------|------------|----------------------------------------------------------------|----------|---------------| +| lang | string | The language used by the component. | | `'en'` | +| onAddDamage | () => void | Callback called when the user clicks on "Add Damage" button. | | | +| onCapture | () => void | Callback called when the user clicks on "Take Picture" button. | | | + +--- + ## Checkbox ### Description Custom component implementing a simple checkbox. diff --git a/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx b/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx index eabec901b..b040d210f 100644 --- a/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx +++ b/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx @@ -1,36 +1,8 @@ -import { PartSelectionOrientation, VehiclePart, VehicleType } from '@monkvision/types'; -import { SVGProps } from 'react'; +import { PartSelectionOrientation } from '@monkvision/types'; import { DynamicSVG } from '../DynamicSVG'; -import { useVehicleDynamicWireframe } from './hooks'; +import { useVehicleDynamicWireframe, VehicleDynamicWireframeProps } from './hooks'; import { styles } from './VehicleDynamicWireframe.style'; -/** - * Props accepted by the VehicleDynamicWireframe component. - */ -export interface VehicleDynamicWireframeProps { - /** - * Vehicle type to display the wireframe for. - */ - vehicleType: VehicleType; - /** - * The orientation of the wireframe. - * - * @default PartSelectionOrientation.FRONT_LEFT - */ - orientation?: PartSelectionOrientation; - /** - * Callback when the user clicks a part. - */ - onClickPart?: (parts: VehiclePart) => void; - /** - * Callback used to customize the display style of each vehicle part on the wireframe. - * See `DynamicSVGCustomizationFunctions` for more details. - * - * @see DynamicSVGCustomizationFunctions - */ - getPartAttributes?: (part: VehiclePart) => SVGProps; -} - /** * Component that displays a dynamic wireframe of a vehicle, allowing the user to select parts of the vehicle. */ diff --git a/packages/common-ui-web/src/components/VehicleDynamicWireframe/hooks.ts b/packages/common-ui-web/src/components/VehicleDynamicWireframe/hooks.ts index 699c27c7e..52c94e7a9 100644 --- a/packages/common-ui-web/src/components/VehicleDynamicWireframe/hooks.ts +++ b/packages/common-ui-web/src/components/VehicleDynamicWireframe/hooks.ts @@ -8,7 +8,7 @@ function isCarPartElement(element: SVGElement): boolean { return element.id !== '' && element.classList.contains('car-part'); } -function getWireframes(vehicleType: VehicleType, orientation: PartSelectionOrientation) { +function getWireframes(vehicleType: VehicleType, orientation: PartSelectionOrientation): string { const wireframes = partSelectionWireframes[getVehicleModel(vehicleType)]; if (wireframes === undefined) { throw new Error(`No wireframe found for vehicle type ${vehicleType}`); @@ -16,9 +16,12 @@ function getWireframes(vehicleType: VehicleType, orientation: PartSelectionOrien return wireframes[orientation]; } -export interface VehicleDynamicWireframeParams { +/** + * Props accepted by the VehicleDynamicWireframe component. + */ +export interface VehicleDynamicWireframeProps { /** - * Vehicle type to display the wireframe for. + * The type of vehicle for which the wireframe will be displayed. */ vehicleType: VehicleType; /** @@ -28,11 +31,11 @@ export interface VehicleDynamicWireframeParams { */ orientation?: PartSelectionOrientation; /** - * Callback when the user clicks a part. + * Callback when the user clicks on a vehicle part. */ onClickPart?: (parts: VehiclePart) => void; /** - * Callback used to customize the display style of each vehicle part on the wireframe. + * Customizes the display attributes (e.g., styles, colors) of vehicle parts. * See `DynamicSVGCustomizationFunctions` for more details. * * @see DynamicSVGCustomizationFunctions @@ -45,7 +48,7 @@ export function useVehicleDynamicWireframe({ orientation = PartSelectionOrientation.FRONT_LEFT, onClickPart = () => {}, getPartAttributes = () => ({}), -}: VehicleDynamicWireframeParams) { +}: VehicleDynamicWireframeProps) { const overlay = useMemo( () => getWireframes(vehicleType, orientation), [vehicleType, orientation], diff --git a/packages/common-ui-web/src/components/VehicleDynamicWireframe/index.ts b/packages/common-ui-web/src/components/VehicleDynamicWireframe/index.ts index d3120c924..4e01db079 100644 --- a/packages/common-ui-web/src/components/VehicleDynamicWireframe/index.ts +++ b/packages/common-ui-web/src/components/VehicleDynamicWireframe/index.ts @@ -1,4 +1,2 @@ -export { - VehicleDynamicWireframe, - type VehicleDynamicWireframeProps, -} from './VehicleDynamicWireframe'; +export { VehicleDynamicWireframe } from './VehicleDynamicWireframe'; +export { type VehicleDynamicWireframeProps } from './hooks'; diff --git a/packages/common/README.md b/packages/common/README.md index 69ac04519..6eb290935 100644 --- a/packages/common/README.md +++ b/packages/common/README.md @@ -18,6 +18,6 @@ you can refer to their own README directly : - [State Management](README/STATE_MANAGEMENT.md). - [Theming](README/THEMING.md). - [Internationalization](README/INTERNATIONALIZATION.md). -- [Hooks](README/APP_UTILS). +- [Hooks](README/APP_UTILS.md). - [Utilities](README/UTILITIES.md). -- [Application Utilities](README/HOOKS). +- [Application Utilities](README/HOOKS.md). diff --git a/packages/common/README/UTILITIES.md b/packages/common/README/UTILITIES.md index bb0488c2a..6f457cebf 100644 --- a/packages/common/README/UTILITIES.md +++ b/packages/common/README/UTILITIES.md @@ -45,6 +45,29 @@ method, available on all versions of JavaScript. --- +# Browser Utils +### isMobileDevice + +```typescript +import { isMobileDevice } from "@monkvision/common"; + +console.log(isMobileDevice()); +// Output : true or false +``` +Checks if the current device is a mobile device. + +### getAspectRatio +```typescript +import { getAspectRatio } from "@monkvision/common"; + +const streamDimensions = {width: 1920, height: 1080} +console.log(getAspectRatio(streamDimensions)); +// Output : '1920/1080' +``` +Returns the aspect ratio of the stream. If not a mobile device, it will return 16/9 by default. + +--- + # Color Utils ### getRGBAFromString ```typescript @@ -302,6 +325,19 @@ Converts a string to camel case. --- +# Vehicle +### getVehicleModel +```typescript +import { getVehicleModel } from '@monkvision/common' +import { VehicleType } from '@monkvision/types' + +console.log(getVehicleModel(VehicleType.SUV)) +output : 'fesc20' +``` +Returns the vehicle model corresponding to the given vehicle type. + +--- + # Zlib Utils ### zlibCompress ```typescript diff --git a/packages/common/src/utils/browser.utils.ts b/packages/common/src/utils/browser.utils.ts index 3a6f8b945..09191512f 100644 --- a/packages/common/src/utils/browser.utils.ts +++ b/packages/common/src/utils/browser.utils.ts @@ -15,9 +15,9 @@ export function isMobileDevice(): boolean { } /** - * Returns the aspect ratio of the stream. + * Returns the aspect ratio of the stream. If not a mobile device, it will return 16/9 by default. */ -export function getAspectRatio(streamDimensions?: PixelDimensions | null) { +export function getAspectRatio(streamDimensions?: PixelDimensions | null): string { if (isMobileDevice() && streamDimensions) { return `${streamDimensions?.width}/${streamDimensions?.height}`; } diff --git a/packages/inspection-capture-web/README.md b/packages/inspection-capture-web/README.md index 886ef85be..b3460b8a9 100644 --- a/packages/inspection-capture-web/README.md +++ b/packages/inspection-capture-web/README.md @@ -5,7 +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. Before taking the picture, the user must first select the damaged part on the vehicle wireframe. +- 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 : @@ -155,16 +157,17 @@ Props # DamageDisclosure -The DamageDisclosure workflow is designed to guide users in documenting and disclosing damage to their vehicles during a Monk inspection. Once the damaged areas are identified, the user is prompted to take close-up photos of each selected area, ensuring accurate documentation for the inspection. +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. This component will automatically handle starting tasks after the capture process is complete. +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), and a list of sights to be displayed to the user. Once the user completes the workflow, the onComplete callback is triggered, allowing you to navigate to another page or perform additional actions. +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: diff --git a/packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosure.tsx b/packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosure.tsx index fb942512e..e6ffcf16d 100644 --- a/packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosure.tsx +++ b/packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosure.tsx @@ -66,7 +66,7 @@ export interface DamageDisclosureProps */ onClose?: () => void; /** - * Callback called when inspection capture is complete. + * Callback called when damage disclosure is complete. */ onComplete?: () => void; /** @@ -147,7 +147,7 @@ export function DamageDisclosure({ }); const images = usePhotoCaptureImages(inspectionId); const handlePictureTaken = usePictureTaken({ - sightState: disclosureState, + captureState: disclosureState, addDamageHandle, uploadQueue, onPictureTaken, diff --git a/packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosureHOC.tsx b/packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosureHOC.tsx index f3aafd699..513ac10a5 100644 --- a/packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosureHOC.tsx +++ b/packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosureHOC.tsx @@ -6,10 +6,8 @@ import { DamageDisclosure, 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`. This component will handle the - * starting of the tasks at the end of the capturing process. You can then pass the inspection ID, the api config (with - * the auth token), as well as the list of sights to be taken by the user to this component, and everything will be - * handled automatically for you. + * 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'; diff --git a/packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosureHUD/DamageDisclosureHUD.tsx b/packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosureHUD/DamageDisclosureHUD.tsx index f28c65b3b..211e20fc6 100644 --- a/packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosureHUD/DamageDisclosureHUD.tsx +++ b/packages/inspection-capture-web/src/DamageDisclosure/DamageDisclosureHUD/DamageDisclosureHUD.tsx @@ -111,7 +111,7 @@ export function DamageDisclosureHUD({ const handleCloseConfirm = () => { setShowCloseModal(false); - trackEvent('Capture Closed'); + trackEvent('Disclosure Closed'); onClose?.(); }; diff --git a/packages/inspection-capture-web/src/DamageDisclosure/hooks/useDamageDisclosureState.ts b/packages/inspection-capture-web/src/DamageDisclosure/hooks/useDamageDisclosureState.ts index 33bb3b3cd..7ac5046ad 100644 --- a/packages/inspection-capture-web/src/DamageDisclosure/hooks/useDamageDisclosureState.ts +++ b/packages/inspection-capture-web/src/DamageDisclosure/hooks/useDamageDisclosureState.ts @@ -11,7 +11,7 @@ import { ComplianceOptions, Image, ImageType } from '@monkvision/types'; import { DamageDisclosureState } from '../../types'; /** - * Parameters of the useDamageDisclosureSightState hook. + * Parameters of the useDamageDisclosureState hook. */ export interface DamageDisclosureParams { /** diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx index af0adba4d..d35ee08f0 100644 --- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx +++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx @@ -211,7 +211,7 @@ export function PhotoCapture({ }); const images = usePhotoCaptureImages(inspectionId); const handlePictureTaken = usePictureTaken({ - sightState, + captureState: sightState, addDamageHandle, uploadQueue, tasksBySight, diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx index cedd5ff8c..9cadc2689 100644 --- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx +++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElements/PhotoCaptureHUDElements.tsx @@ -71,7 +71,6 @@ export interface PhotoCaptureHUDElementsProps error?: unknown | null; /** * The current images taken by the user (ignoring retaken pictures etc.). - props.disableSightPicture, */ images: Image[]; } diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton/AddDamageButton.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton/AddDamageButton.tsx index 42cf1f7d5..ad226fce8 100644 --- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton/AddDamageButton.tsx +++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/AddDamageButton/AddDamageButton.tsx @@ -13,8 +13,6 @@ export interface AddDamageButtonProps { onAddDamage?: () => void; /** * Boolean indicating whether the Add Damage feature is enabled. If disabled, the `Add Damage` button will be hidden. - * - * @default true */ addDamage?: AddDamage; } @@ -26,18 +24,14 @@ export function AddDamageButton({ onAddDamage, addDamage }: AddDamageButtonProps const { t } = useTranslation(); const primaryColor = useColorBackground(); - return ( - <> - {addDamage && addDamage !== AddDamage.DISABLED && ( - - )} - - ); + return [AddDamage.TWO_SHOT, AddDamage.PART_SELECT].includes(addDamage as AddDamage) ? ( + + ) : null; } diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx index 3b72430cc..4cac72042 100644 --- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx +++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx @@ -37,8 +37,7 @@ export function SightGuideline({ const primaryColor = useColorBackground(); const { i18n, t } = useTranslation(); - const style = - addDamage && addDamage === AddDamage.DISABLED ? styles['containerWide'] : styles['container']; + const style = addDamage === AddDamage.DISABLED ? styles['containerWide'] : styles['container']; const guidelineFound = sightGuidelines?.find((value) => value.sightIds.includes(sightId)); diff --git a/packages/inspection-capture-web/src/components/PartSelection/PartSelection.tsx b/packages/inspection-capture-web/src/components/PartSelection/PartSelection.tsx index dcc247c36..ca10391ee 100644 --- a/packages/inspection-capture-web/src/components/PartSelection/PartSelection.tsx +++ b/packages/inspection-capture-web/src/components/PartSelection/PartSelection.tsx @@ -5,6 +5,9 @@ import { useTranslation } from 'react-i18next'; import { styles } from './PartSelection.styles'; import { useColorBackground } from '../../hooks'; +/** + * Props of PartSelection component. + */ export interface PartSelectionProps { /** * Current vehicle parts selected to take a picture of. @@ -32,6 +35,10 @@ export interface PartSelectionProps { 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 function PartSelection({ vehicleParts, disabled = false, diff --git a/packages/inspection-capture-web/src/hooks/useAddDamageMode.ts b/packages/inspection-capture-web/src/hooks/useAddDamageMode.ts index cd346b4ef..d0d38b8a2 100644 --- a/packages/inspection-capture-web/src/hooks/useAddDamageMode.ts +++ b/packages/inspection-capture-web/src/hooks/useAddDamageMode.ts @@ -4,23 +4,26 @@ import { useAnalytics } from '@monkvision/analytics'; import { AddDamage, CaptureAppConfig, VehiclePart } from '@monkvision/types'; import { CaptureMode, CaptureScreen } from '../types'; -interface AddDamageModeParams extends Pick { +/** + * Parameters of the useAddDamageMode hook. + */ +export interface AddDamageModeParams extends Pick { /** * The current screen of the Capture component. */ currentScreen?: CaptureScreen; /** - * Boolean indicating if the only close damage will be taken first then sights picutures. + * Boolean indicating if the capture is in Damage Disclosure mode. */ damageDisclosure?: boolean; /** - * Callback called when the user clicks on the 'close` button in vehicleDiclosure mode. + * Callback called when the user clicks on the 'close` button in Damage Diclosure mode. */ handleOpenGallery: () => void; } /** - * Handle used to modify the current PhotoCaptureMode of the PhotoCaptureComponent. + * Handle used to modify the current CaptureMode of the PhotoCapture or DamageDisclosure component. */ export interface AddDamageHandle { /** @@ -53,7 +56,7 @@ export interface AddDamageHandle { handleValidateVehicleParts: () => void; } -function getInitialMode(addDamage?: AddDamage, damageDisclosure?: boolean) { +function getInitialMode(addDamage?: AddDamage, damageDisclosure?: boolean): CaptureMode { if (damageDisclosure && addDamage === AddDamage.PART_SELECT) { return CaptureMode.ADD_DAMAGE_PART_SELECT; } diff --git a/packages/inspection-capture-web/src/hooks/usePictureTaken.ts b/packages/inspection-capture-web/src/hooks/usePictureTaken.ts index ba4a3b2b5..3b264e04d 100644 --- a/packages/inspection-capture-web/src/hooks/usePictureTaken.ts +++ b/packages/inspection-capture-web/src/hooks/usePictureTaken.ts @@ -11,9 +11,9 @@ import { PhotoCaptureSightState, DamageDisclosureState, CaptureMode } from '../t */ export interface UseTakePictureParams { /** - * The PhotoCapture sight state, created using the usePhotoCaptureSightState hook. + * The capture state, created using the usePhotoCaptureSightState or useDamageDisclosureState hook. */ - sightState: PhotoCaptureSightState | DamageDisclosureState; + captureState: PhotoCaptureSightState | DamageDisclosureState; /** * The PhotoCapture add damage handle, created using the useAddDamageMode hook. */ @@ -42,7 +42,7 @@ export type HandleTakePictureFunction = (picture: MonkPicture) => void; * Custom hook used to generate the callback called when the user has taken a picture to handle picture upload etc. */ export function usePictureTaken({ - sightState, + captureState, addDamageHandle, uploadQueue, tasksBySight, @@ -50,15 +50,16 @@ export function usePictureTaken({ }: UseTakePictureParams): HandleTakePictureFunction { const { trackEvent } = useAnalytics(); - const selectedSightId = 'selectedSight' in sightState ? sightState.selectedSight.id : undefined; + const selectedSightId = + 'selectedSight' in captureState ? captureState.selectedSight.id : undefined; const takeSelectedSight = - 'takeSelectedSight' in sightState ? sightState.takeSelectedSight : undefined; + 'takeSelectedSight' in captureState ? captureState.takeSelectedSight : undefined; return useCallback( (picture: MonkPicture) => { onPictureTaken?.(picture); - sightState.setLastPictureTakenUri(picture.uri); + captureState.setLastPictureTakenUri(picture.uri); if (addDamageHandle.mode === CaptureMode.ADD_DAMAGE_PART_SELECT_SHOT) { uploadQueue.push({ mode: addDamageHandle.mode, @@ -66,12 +67,12 @@ export function usePictureTaken({ vehicleParts: addDamageHandle.vehicleParts, }); } - if (addDamageHandle.mode === CaptureMode.SIGHT && 'selectedSight' in sightState) { + if (addDamageHandle.mode === CaptureMode.SIGHT && 'selectedSight' in captureState) { uploadQueue.push({ mode: addDamageHandle.mode, picture, - sightId: sightState.selectedSight.id, - tasks: tasksBySight?.[sightState.selectedSight.id] ?? sightState.selectedSight.tasks, + sightId: captureState.selectedSight.id, + tasks: tasksBySight?.[captureState.selectedSight.id] ?? captureState.selectedSight.tasks, }); } if ( @@ -80,8 +81,8 @@ export function usePictureTaken({ ) { uploadQueue.push({ mode: addDamageHandle.mode, picture }); } - if (addDamageHandle.mode === CaptureMode.SIGHT && 'takeSelectedSight' in sightState) { - sightState.takeSelectedSight(); + if (addDamageHandle.mode === CaptureMode.SIGHT && 'takeSelectedSight' in captureState) { + captureState.takeSelectedSight(); } else { trackEvent('AddDamage Captured', { mode: addDamageHandle.mode, @@ -90,7 +91,7 @@ export function usePictureTaken({ addDamageHandle.updatePhotoCaptureModeAfterPictureTaken(); }, [ - sightState.setLastPictureTakenUri, + captureState.setLastPictureTakenUri, addDamageHandle.mode, selectedSightId, tasksBySight, diff --git a/packages/inspection-capture-web/src/types.ts b/packages/inspection-capture-web/src/types.ts index da3ec5051..66b57d369 100644 --- a/packages/inspection-capture-web/src/types.ts +++ b/packages/inspection-capture-web/src/types.ts @@ -88,7 +88,7 @@ export interface PhotoCaptureSightState { } /** - * Object containing state management utilities for the PhotoCapture sights. + * Object containing state management utilities for the DamageDisclosure. */ export interface DamageDisclosureState { /** diff --git a/packages/inspection-capture-web/test/DamageDisclosure/DamageDisclosure.test.tsx b/packages/inspection-capture-web/test/DamageDisclosure/DamageDisclosure.test.tsx index f824a122d..46ec966cd 100644 --- a/packages/inspection-capture-web/test/DamageDisclosure/DamageDisclosure.test.tsx +++ b/packages/inspection-capture-web/test/DamageDisclosure/DamageDisclosure.test.tsx @@ -200,12 +200,12 @@ describe('DamageDisclosure component', () => { expect(useAddDamageMode).toHaveBeenCalled(); const addDamageHandle = (useAddDamageMode as jest.Mock).mock.results[0].value; expect(useDamageDisclosureState).toHaveBeenCalled(); - const sightState = (useDamageDisclosureState as jest.Mock).mock.results[0].value; + const captureState = (useDamageDisclosureState as jest.Mock).mock.results[0].value; expect(useUploadQueue).toHaveBeenCalled(); const uploadQueue = (useUploadQueue as jest.Mock).mock.results[0].value; expect(usePictureTaken).toHaveBeenCalledWith({ addDamageHandle, - sightState, + captureState, uploadQueue, onPictureTaken: props.onPictureTaken, }); diff --git a/packages/inspection-capture-web/test/DamageDisclosure/hooks/useDamageDisclosureState.test.ts b/packages/inspection-capture-web/test/DamageDisclosure/hooks/useDamageDisclosureState.test.ts index db50dce75..60cafd64a 100644 --- a/packages/inspection-capture-web/test/DamageDisclosure/hooks/useDamageDisclosureState.test.ts +++ b/packages/inspection-capture-web/test/DamageDisclosure/hooks/useDamageDisclosureState.test.ts @@ -8,7 +8,6 @@ import { DamageDisclosureParams, useDamageDisclosureState, } from '../../../src/DamageDisclosure/hooks'; -// import { DamageDisclosureErrorName } from '../../../src/PhotoCapture/errors'; function createParams(): DamageDisclosureParams { return { diff --git a/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx b/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx index 8a977f068..8ff3dda0b 100644 --- a/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx +++ b/packages/inspection-capture-web/test/PhotoCapture/PhotoCapture.test.tsx @@ -270,12 +270,12 @@ describe('PhotoCapture component', () => { expect(useAddDamageMode).toHaveBeenCalled(); const addDamageHandle = (useAddDamageMode as jest.Mock).mock.results[0].value; expect(usePhotoCaptureSightState).toHaveBeenCalled(); - const sightState = (usePhotoCaptureSightState as jest.Mock).mock.results[0].value; + const captureState = (usePhotoCaptureSightState as jest.Mock).mock.results[0].value; expect(useUploadQueue).toHaveBeenCalled(); const uploadQueue = (useUploadQueue as jest.Mock).mock.results[0].value; expect(usePictureTaken).toHaveBeenCalledWith({ addDamageHandle, - sightState, + captureState, uploadQueue, tasksBySight: props.tasksBySight, onPictureTaken: props.onPictureTaken, diff --git a/packages/inspection-capture-web/test/hooks/usePictureTaken.test.ts b/packages/inspection-capture-web/test/hooks/usePictureTaken.test.ts index b6b2f7b30..df36e59a7 100644 --- a/packages/inspection-capture-web/test/hooks/usePictureTaken.test.ts +++ b/packages/inspection-capture-web/test/hooks/usePictureTaken.test.ts @@ -6,7 +6,7 @@ import { PhotoCaptureSightState } from '../../src/PhotoCapture/hooks'; function createParams(): UseTakePictureParams { return { - sightState: { + captureState: { setLastPictureTakenUri: jest.fn(), takeSelectedSight: jest.fn(), selectedSight: { id: 'test-selected-sight', tasks: [TaskName.WHEEL_ANALYSIS] }, @@ -41,10 +41,10 @@ describe('usePictureTaken hook', () => { const initialProps = createParams(); const { result, unmount } = renderHook(usePictureTaken, { initialProps }); - expect(initialProps.sightState.setLastPictureTakenUri).not.toHaveBeenCalled(); + expect(initialProps.captureState.setLastPictureTakenUri).not.toHaveBeenCalled(); const picture = createMonkPicture(); result.current(picture); - expect(initialProps.sightState.setLastPictureTakenUri).toHaveBeenCalledWith(picture.uri); + expect(initialProps.captureState.setLastPictureTakenUri).toHaveBeenCalledWith(picture.uri); unmount(); }); @@ -59,8 +59,8 @@ describe('usePictureTaken hook', () => { expect(initialProps.uploadQueue.push).toHaveBeenCalledWith({ mode: initialProps.addDamageHandle.mode, picture, - sightId: (initialProps.sightState as PhotoCaptureSightState).selectedSight.id, - tasks: (initialProps.sightState as PhotoCaptureSightState).selectedSight.tasks, + sightId: (initialProps.captureState as PhotoCaptureSightState).selectedSight.id, + tasks: (initialProps.captureState as PhotoCaptureSightState).selectedSight.tasks, }); unmount(); @@ -71,7 +71,7 @@ describe('usePictureTaken hook', () => { const initialProps = { ...createParams(), tasksBySight: { - [(createParams().sightState as PhotoCaptureSightState).selectedSight.id]: tasks, + [(createParams().captureState as PhotoCaptureSightState).selectedSight.id]: tasks, }, }; const { result, unmount } = renderHook(usePictureTaken, { initialProps }); @@ -111,11 +111,11 @@ describe('usePictureTaken hook', () => { const { result, unmount } = renderHook(usePictureTaken, { initialProps }); expect( - (initialProps.sightState as PhotoCaptureSightState).takeSelectedSight, + (initialProps.captureState as PhotoCaptureSightState).takeSelectedSight, ).not.toHaveBeenCalled(); result.current(createMonkPicture()); expect( - (initialProps.sightState as PhotoCaptureSightState).takeSelectedSight, + (initialProps.captureState as PhotoCaptureSightState).takeSelectedSight, ).toHaveBeenCalled(); unmount(); @@ -134,7 +134,7 @@ describe('usePictureTaken hook', () => { result.current(createMonkPicture()); expect( - (initialProps.sightState as PhotoCaptureSightState).takeSelectedSight, + (initialProps.captureState as PhotoCaptureSightState).takeSelectedSight, ).not.toHaveBeenCalled(); unmount();