Added CaptureSelectionPage & DamageDisclosure in demo-app

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

@@ -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.tsx

@@ -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/index.ts

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

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

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

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

@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next';
+import { useMonkAppState } from '@monkvision/common';
+import { DamageDisclosure } from '@monkvision/inspection-capture-web';
+import { useNavigate } from 'react-router-dom';
+import styles from './DamageDisclosurePage.module.css';
+import { Page } from '../pages';
+
+export function DamageDisclosurePage() {
+  const navigate = useNavigate();
+  const { i18n } = useTranslation();
+  const { config, authToken, inspectionId } = useMonkAppState({
+    requireInspection: true,
+  });
+
+  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}
+      />
+    </div>
+  );
+}

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

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

apps/demo-app/src/pages/VehicleTypeSelectionPage/VehicleTypeSelectionPage.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 (

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

@@ -2,5 +2,7 @@ export enum Page {
   LOG_IN = '/log-in',
   CREATE_INSPECTION = '/create-inspection',
   PHOTO_CAPTURE = '/photo-capture',
+  DAMAGE_DISCLOSURE = '/damage-disclosure',
   VEHICLE_TYPE_SELECTION = '/vehicle-type-selection',
+  CAPTURE_SELECTION = '/capture-selection',
 }