✨ add check action button to work with Add damage part select

monkvision · Aug 30, 2024 · 3119a7a · 3119a7a
1 parent d79b825
commit 3119a7a
Show file tree

Hide file tree

Showing 19 changed files with 500 additions and 214 deletions.
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
@@ -261,6 +261,8 @@ export function PhotoCapture({
     onSelectSight: sightState.selectSight,
     onRetakeSight: sightState.retakeSight,
     onAddDamage: addDamageHandle.handleAddDamage,
+    damageVehicleParts: addDamageHandle.vehicleParts,
+    onAddDamageParts: addDamageHandle.handleAddParts,
     onCancelAddDamage: addDamageHandle.handleCancelAddDamage,
     onRetry: sightState.retryLoadingInspection,
     loading,

diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUD.tsx
@@ -1,15 +1,15 @@
 import { useMemo, useState } from 'react';
-import { CaptureAppConfig, Image, ImageStatus, Sight } from '@monkvision/types';
+import { CaptureAppConfig, Image, ImageStatus, Sight, VehiclePart } from '@monkvision/types';
 import { useTranslation } from 'react-i18next';
 import { BackdropDialog } from '@monkvision/common-ui-web';
 import { CameraHUDProps } from '@monkvision/camera-web';
 import { LoadingState } from '@monkvision/common';
 import { useAnalytics } from '@monkvision/analytics';
 import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons';
 import { usePhotoCaptureHUDStyle } from './hooks';
-import { PhotoCaptureMode, TutorialSteps } from '../hooks';
+import { AddDamageHandle, PhotoCaptureMode, TutorialSteps } from '../hooks';
 import { PhotoCaptureHUDOverlay } from './PhotoCaptureHUDOverlay';
-import { PhotoCaptureHUDElements } from './PhotoCaptureHUDElements';
+import { PhotoCaptureHUDElements, PhotoCaptureHUDElementsProps } from './PhotoCaptureHUDElements';
 import { PhotoCaptureHUDTutorial } from './PhotoCaptureHUDTutorial';
 
 /**
@@ -76,11 +76,20 @@ export interface PhotoCaptureHUDProps
   /**
    * Callback to be called when the user clicks on the "Add Damage" button.
    */
-  onAddDamage: () => void;
+  onAddDamage: AddDamageHandle['handleAddDamage'];
+  /**
+   * Used to add damage on part select mode. This is used to store the parts that the user has selected to take a
+   * picture
+   */
+  damageVehicleParts: AddDamageHandle['vehicleParts'];
+  /**
+   * Callback to be called when the user selects the parts to take a picture of.
+   */
+  onAddDamageParts: AddDamageHandle['handleAddParts'];
   /**
    * Callback to be called when the user clicks on the "Cancel" button of the Add Damage mode.
    */
-  onCancelAddDamage: () => void;
+  onCancelAddDamage: AddDamageHandle['handleCancelAddDamage'];
   /**
    * Callback that can be used to retry fetching this state object from the API in case the previous fetch failed.
    */
@@ -115,6 +124,8 @@ export function PhotoCaptureHUD({
   onSelectSight,
   onRetakeSight,
   onAddDamage,
+  damageVehicleParts,
+  onAddDamageParts,
   onCancelAddDamage,
   onOpenGallery,
   onRetry,
@@ -136,6 +147,8 @@ export function PhotoCaptureHUD({
   const [showCloseModal, setShowCloseModal] = useState(false);
   const style = usePhotoCaptureHUDStyle();
   const { trackEvent } = useAnalytics();
+  const [addDamagePartSelectState, setAddDamagePartSelectState] =
+    useState<PhotoCaptureHUDElementsProps['addDamagePartSelectState']>('part-select');
   const retakeCount = useMemo(
     () =>
       images.filter((image) =>
@@ -151,7 +164,8 @@ export function PhotoCaptureHUD({
     trackEvent('Capture Closed');
     onClose?.();
   };
-
+  const showValidateAction =
+    mode === PhotoCaptureMode.ADD_DAMAGE_PART_SELECT && addDamagePartSelectState === 'part-select';
   return (
     <div style={style.container}>
       <div style={style.previewContainer} data-testid='camera-preview'>
@@ -162,6 +176,8 @@ export function PhotoCaptureHUD({
           sightsTaken={sightsTaken}
           mode={mode}
           onAddDamage={onAddDamage}
+          addDamagePartSelectState={addDamagePartSelectState}
+          onAddDamageParts={onAddDamageParts}
           onCancelAddDamage={onCancelAddDamage}
           onSelectSight={onSelectSight}
           onRetakeSight={onRetakeSight}
@@ -181,12 +197,22 @@ export function PhotoCaptureHUD({
         galleryPreview={lastPictureTakenUri ?? undefined}
         galleryDisabled={!!loading.error || !!handle.error}
         takePictureDisabled={
-          !!loading.error || !!handle.error || handle.isLoading || loading.isLoading
+          !!loading.error ||
+          !!handle.error ||
+          handle.isLoading ||
+          loading.isLoading ||
+          showValidateAction
+        }
+        action={showValidateAction ? 'check' : 'close'}
+        onAction={() =>
+          showValidateAction
+            ? setAddDamagePartSelectState('image-capture')
+            : setShowCloseModal(true)
+        }
+        actionDisabled={
+          !!loading.error || !!handle.error || (showValidateAction && !damageVehicleParts.length)
         }
-        action={'close'}
-        onAction={() => setShowCloseModal(true)}
-        actionDisabled={!!loading.error || !!handle.error}
-        showActionButton={showCloseButton}
+        showActionButton={showCloseButton || showValidateAction}
         showGalleryBadge={retakeCount > 0}
         retakeCount={retakeCount}
       />

diff --git a/...b/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.model.ts b/...b/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.model.ts
@@ -0,0 +1,73 @@
+import { IconName } from '@monkvision/common-ui-web';
+
+/**
+ * Photo capture action button props.
+ */
+export interface ActionButtonProps {
+  /**
+   * Type of the action button to display. If the value is 'close', the button will display a close icon.
+   *
+   * @default 'close'
+   */
+  action?: ('close' | 'check') & IconName;
+  /**
+   * Boolean indicating if the action button is disabled.
+   *
+   * @default false
+   */
+  actionDisabled?: boolean;
+  /**
+   * Boolean indicating if the action button should be displayed in the HUD on top of the Camera preview.
+   *
+   * @default false
+   */
+  showActionButton?: boolean;
+  /**
+   * Callback called when the user clicks on the action button. If this callback is not provided, the action button will
+   * not be displayed on the screen.
+   */
+  onAction?: () => void;
+}
+
+/**
+ * Props of the PhotoCaptureHUDButtons component.
+ */
+export type PhotoCaptureHUDButtonsProps = ActionButtonProps & {
+  /**
+   * URI of the picture displayed in the gallery button icon. Usually, this is the last picture taken by the user. If no
+   * picture is provided, a gallery icon will be displayed instead.
+   */
+  galleryPreview?: string;
+  /**
+   * Callback called when the user clicks on the take picture button.
+   */
+  onTakePicture?: () => void;
+  /**
+   * Callback called when the user clicks on the gallery button.
+   */
+  onOpenGallery?: () => void;
+  /**
+   * Boolean indicating if the gallery button is disabled.
+   *
+   * @default false
+   */
+  galleryDisabled?: boolean;
+  /**
+   * Boolean indicating if the take picture button is disabled.
+   *
+   * @default false
+   */
+  takePictureDisabled?: boolean;
+  /**
+   * Boolean indicating if the little notification badge on top of the gallery button should be displayed.
+   *
+   * @default false
+   */
+  showGalleryBadge?: boolean;
+  /**
+   * Total number of sights to retake
+   *
+   * @default 0
+   */
+  retakeCount?: number;
+};
diff --git a/.../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts b/.../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts
@@ -7,14 +7,18 @@ const BUTTON_BORDER_WIDTH = 2;
 export const PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH =
   BUTTON_SIZE + BUTTON_PADDING + BUTTON_BORDER_WIDTH;
 
-export const captureButtonForegroundColors = getInteractiveVariants(
+export const actionButtonForegroundColors = getInteractiveVariants(
   '#f3f3f3',
   InteractiveVariation.DARKEN,
 );
 export const captureButtonBackgroundColors = getInteractiveVariants(
   '#1b1c1e',
   InteractiveVariation.LIGHTEN,
 );
+export const checkButtonBackgroundColors = getInteractiveVariants(
+  '#0A84FF',
+  InteractiveVariation.DARKEN,
+);
 
 export const styles: Styles = {
   container: {
@@ -68,6 +72,7 @@ export const styles: Styles = {
   },
   buttonDisabled: {
     cursor: 'default',
+    opacity: 0.3,
   },
   backgroundCover: {
     width: '100%',

diff --git a/...re-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx b/...re-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.tsx
@@ -1,72 +1,7 @@
-import { Icon, IconName, TakePictureButton } from '@monkvision/common-ui-web';
+import { Icon, TakePictureButton } from '@monkvision/common-ui-web';
 import { useInteractiveStatus } from '@monkvision/common';
 import { useCaptureHUDButtonsStyles } from './hooks';
-
-/**
- * Props of the PhotoCaptureHUDButtons component.
- */
-export interface PhotoCaptureHUDButtonsProps {
-  /**
-   * URI of the picture displayed in the gallery button icon. Usually, this is the last picture taken by the user. If no
-   * picture is provided, a gallery icon will be displayed instead.
-   */
-  galleryPreview?: string;
-  /**
-   * Callback called when the user clicks on the take picture button.
-   */
-  onTakePicture?: () => void;
-  /**
-   * Callback called when the user clicks on the gallery button.
-   */
-  onOpenGallery?: () => void;
-  /**
-   * Boolean indicating if the gallery button is disabled.
-   *
-   * @default false
-   */
-  galleryDisabled?: boolean;
-  /**
-   * Boolean indicating if the take picture button is disabled.
-   *
-   * @default false
-   */
-  takePictureDisabled?: boolean;
-  /**
-   * Boolean indicating if the little notification badge on top of the gallery button should be displayed.
-   *
-   * @default false
-   */
-  showGalleryBadge?: boolean;
-  /**
-   * Total number of sights to retake
-   *
-   * @default 0
-   */
-  retakeCount?: number;
-  /**
-   * Type of the action button to display. If the value is 'close', the button will display a close icon.
-   *
-   * @default 'close'
-   */
-  action?: ('close' | 'check') & IconName;
-  /**
-   * Boolean indicating if the action button is disabled.
-   *
-   * @default false
-   */
-  actionDisabled?: boolean;
-  /**
-   * Boolean indicating if the action button should be displayed in the HUD on top of the Camera preview.
-   *
-   * @default false
-   */
-  showActionButton?: boolean;
-  /**
-   * Callback called when the user clicks on the action button. If this callback is not provided, the action button will
-   * not be displayed on the screen.
-   */
-  onAction?: () => void;
-}
+import { PhotoCaptureHUDButtonsProps } from './PhotoCaptureHUDButtons.model';
 
 /**
  * Components implementing the main buttons of the PhotoCapture Camera HUD. This component implements 3 buttons :
@@ -102,9 +37,11 @@ export function PhotoCaptureHUDButtons({
   } = useCaptureHUDButtonsStyles({
     galleryStatus,
     actionButtonStatus,
+    actionDisabled,
     actionBtnAvailable: !!onAction,
     galleryPreview,
     showActionButton,
+    action,
     showGalleryBadge,
   });
 

diff --git a/...s/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts b/...s/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts
@@ -7,19 +7,20 @@ import {
   useResponsiveStyle,
 } from '@monkvision/common';
 import {
-  captureButtonBackgroundColors,
-  captureButtonForegroundColors,
+  actionButtonForegroundColors,
   styles,
+  captureButtonBackgroundColors,
+  checkButtonBackgroundColors,
 } from './PhotoCaptureHUDButtons.styles';
+import { ActionButtonProps } from './PhotoCaptureHUDButtons.model';
 
-interface PhotoCaptureHUDButtonsStylesParams {
+type PhotoCaptureHUDButtonsStylesParams = Exclude<ActionButtonProps, 'onAction'> & {
   galleryStatus: InteractiveStatus;
   actionButtonStatus: InteractiveStatus;
   actionBtnAvailable: boolean;
   galleryPreview?: string;
-  showActionButton: boolean;
   showGalleryBadge?: boolean;
-}
+};
 
 interface PhotoCaptureHUDButtonsStyles {
   containerStyle: CSSProperties;
@@ -65,10 +66,10 @@ export function useCaptureHUDButtonsStyles(
       style: {
         ...styles['button'],
         backgroundColor: captureButtonBackgroundColors[params.galleryStatus],
-        borderColor: captureButtonForegroundColors[params.galleryStatus],
+        borderColor: actionButtonForegroundColors[params.galleryStatus],
         ...(params.galleryStatus === InteractiveStatus.DISABLED ? styles['buttonDisabled'] : {}),
       },
-      iconColor: captureButtonForegroundColors[params.galleryStatus],
+      iconColor: actionButtonForegroundColors[params.galleryStatus],
     },
     galleryBadgeStyle: {
       ...styles['buttonBadge'],
@@ -79,14 +80,17 @@ export function useCaptureHUDButtonsStyles(
     actionButton: {
       style: {
         ...styles['button'],
-        backgroundColor: captureButtonBackgroundColors[params.actionButtonStatus],
-        borderColor: captureButtonForegroundColors[params.actionButtonStatus],
+        backgroundColor:
+          params.action === 'close'
+            ? captureButtonBackgroundColors[params.galleryStatus]
+            : checkButtonBackgroundColors[params.galleryStatus],
+        borderColor: actionButtonForegroundColors[params.actionButtonStatus],
         ...(params.actionButtonStatus === InteractiveStatus.DISABLED
           ? styles['buttonDisabled']
           : {}),
         visibility: params.showActionButton ? 'visible' : 'hidden',
       },
-      iconColor: captureButtonForegroundColors[params.actionButtonStatus],
+      iconColor: actionButtonForegroundColors[params.actionButtonStatus],
     },
     backgroundCoverStyle: {
       ...styles['backgroundCover'],

diff --git a/...s/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/index.ts b/...s/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/index.ts
@@ -1 +1,2 @@
-export { PhotoCaptureHUDButtons, type PhotoCaptureHUDButtonsProps } from './PhotoCaptureHUDButtons';
+export { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons';
+export { type PhotoCaptureHUDButtonsProps } from './PhotoCaptureHUDButtons.model';