Added DamageDisclosure feature (#898)

* Added new images post options: PART_SELECT && TWO_SHOT

* Added 'VehicleDynamicWireframe' component

* Added 'VehiclePartSelection' component

* Added 'CaptureSelection' component

* Enabled gallery to hide Sight pictures

* Shared components between `PhotoCapture' and 'DamageDisclosure'

* Shared hooks logic between 'PhotoCapture' and 'DamageDisclosure'

* Added 'part_select' addDamage feature + fixed import from common hooks and components

* Added 'DamageDisclosure' component

* Added CaptureSelectionPage & DamageDisclosure in `demo-app`

* Docs + improve function/const naming

* Fixed conflits with VideoCapture feature

Author: dlymonkai

apps/demo-app/src/components/AppRouter.tsx

@@ -8,6 +8,8 @@ import {
   VehicleTypeSelectionPage,
 } from '../pages';
 import { App } from './App';
+import { CaptureSelectionPage } from '../pages/CaptureSelectionPage';
+import { DamageDisclosurePage } from '../pages/DamageDisclosurePage';
 
 export function AppRouter() {
   return (
@@ -34,6 +36,15 @@ export function AppRouter() {
             }
             index
           />
+          <Route
+            path={Page.CAPTURE_SELECTION}
+            element={
+              <AuthGuard redirectTo={Page.LOG_IN}>
+                <CaptureSelectionPage />
+              </AuthGuard>
+            }
+            index
+          />
           <Route
             path={Page.PHOTO_CAPTURE}
             element={
@@ -43,6 +54,15 @@ export function AppRouter() {
             }
             index
           />
+          <Route
+            path={Page.DAMAGE_DISCLOSURE}
+            element={
+              <AuthGuard redirectTo={Page.LOG_IN}>
+                <DamageDisclosurePage />
+              </AuthGuard>
+            }
+            index
+          />
           <Route path='*' element={<Navigate to={Page.CREATE_INSPECTION} />} />
         </Route>
       </Routes>

apps/demo-app/src/local-config.json

@@ -3,7 +3,7 @@
   "description": "Config for the local Demo App.",
   "workflow": "photo",
   "allowSkipRetake": true,
-  "enableAddDamage": true,
+  "addDamage": "part_select",
   "enableSightGuidelines": true,
   "allowVehicleTypeSelection": true,
   "allowManualLogin": true,
@@ -15,6 +15,7 @@
   "apiDomain": "api.preview.monk.ai/v1",
   "thumbnailDomain": "europe-west1-monk-preview-321715.cloudfunctions.net/image_resize",
   "enableSightTutorial": false,
+  "enableTutorial": "first_time_only",
   "startTasksOnComplete": true,
   "showCloseButton": false,
   "enforceOrientation": "landscape",

apps/demo-app/src/pages/CaptureSelectionPage/CaptureSelectionPage.module.css

@@ -0,0 +1,17 @@
+import { CaptureSelection } from '@monkvision/common-ui-web';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Page } from '../pages';
+
+export function CaptureSelectionPage() {
+  const navigate = useNavigate();
+  const { i18n } = useTranslation();
+
+  return (
+    <CaptureSelection
+      lang={i18n.language}
+      onCapture={() => navigate(Page.PHOTO_CAPTURE)}
+      onAddDamage={() => navigate(Page.DAMAGE_DISCLOSURE)}
+    />
+  );
+}

apps/demo-app/src/pages/CaptureSelectionPage/CaptureSelectionPage.tsx

@@ -0,0 +1 @@
+export * from './CaptureSelectionPage';

apps/demo-app/src/pages/CaptureSelectionPage/index.ts

@@ -0,0 +1,7 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

apps/demo-app/src/pages/DamageDisclosurePage/DamageDisclosurePage.module.css

@@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next';
+import { useMonkAppState } from '@monkvision/common';
+import { DamageDisclosure } from '@monkvision/inspection-capture-web';
+import { useNavigate } from 'react-router-dom';
+import { CaptureWorkflow, VehicleType } from '@monkvision/types';
+import styles from './DamageDisclosurePage.module.css';
+import { Page } from '../pages';
+
+export function DamageDisclosurePage() {
+  const navigate = useNavigate();
+  const { i18n } = useTranslation();
+  const { config, authToken, inspectionId, vehicleType } = useMonkAppState({
+    requireInspection: true,
+    requireWorkflow: CaptureWorkflow.PHOTO,
+  });
+
+  return (
+    <div className={styles['container']}>
+      <DamageDisclosure
+        {...config}
+        apiConfig={{
+          authToken,
+          apiDomain: config.apiDomain,
+          thumbnailDomain: config.thumbnailDomain,
+        }}
+        inspectionId={inspectionId}
+        onComplete={() => navigate(Page.PHOTO_CAPTURE)}
+        lang={i18n.language}
+        vehicleType={vehicleType ?? VehicleType.SEDAN}
+      />
+    </div>
+  );
+}

apps/demo-app/src/pages/DamageDisclosurePage/DamageDisclosurePage.tsx

@@ -0,0 +1 @@
+export * from './DamageDisclosurePage';

apps/demo-app/src/pages/DamageDisclosurePage/index.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMonkAppState } from '@monkvision/common';
 import { PhotoCapture } from '@monkvision/inspection-capture-web';
-import { CaptureWorkflow } from '@monkvision/types';
+import { CaptureWorkflow, VehicleType } from '@monkvision/types';
 import styles from './PhotoCapturePage.module.css';
 import { createInspectionReportLink } from './inspectionReport';
 
@@ -36,6 +36,7 @@ export function PhotoCapturePage() {
         sights={currentSights}
         onComplete={handleComplete}
         lang={i18n.language}
+        vehicleType={vehicleType ?? VehicleType.SEDAN}
       />
     </div>
   );

apps/demo-app/src/pages/PhotoCapturePage/PhotoCapturePage.tsx

@@ -12,7 +12,7 @@ export function VehicleTypeSelectionPage() {
   const { i18n } = useTranslation();
 
   if (vehicleType || !config.allowVehicleTypeSelection) {
-    return <Navigate to={Page.PHOTO_CAPTURE} replace />;
+    return <Navigate to={Page.CAPTURE_SELECTION} replace />;
   }
 
   return (