PhotoCapture component

apps/monk-test-app/src/i18n.ts

@@ -22,7 +22,7 @@ i18n
       de: { translation: de },
     },
   })
-  .catch((err) => console.error(err));
+  .catch(console.error);
 
 i18nLinkSDKInstances(i18n, [i18nCamera]);
 

apps/monk-test-app/src/views/CameraView/components/TestPanelLastPic.tsx

@@ -53,7 +53,7 @@ export function TestPanelLastPic({ lastPicture }: TestPanelLastPicProps) {
             anchorRef.current.download = createFileName(lastPicture);
           }
         })
-        .catch((err) => console.error(err));
+        .catch(console.error);
     }
   }, [lastPicture]);
 

apps/monk-test-app/src/views/TestView/TestView.css

@@ -1,8 +1,9 @@
 .test-view-container {
   height: 100%;
   width: 100%;
-  background-color: red;
+  background-color: black;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
+  color: white;
 }

apps/monk-test-app/src/views/TestView/TestView.tsx

@@ -1,15 +1,52 @@
-import React from 'react';
-import './TestView.css';
+import React, { useState } from 'react';
 import { PhotoCapture } from '@monkvision/inspection-capture-web';
 import { sights } from '@monkvision/sights';
+import './TestView.css';
+
+const captureSights = [
+  sights['haccord-8YjMcu0D'],
+  sights['haccord-DUPnw5jj'],
+  sights['haccord-hsCc_Nct'],
+  sights['haccord-GQcZz48C'],
+  sights['haccord-QKfhXU7o'],
+  sights['haccord-mdZ7optI'],
+  sights['haccord-bSAv3Hrj'],
+  sights['haccord-W-Bn3bU1'],
+  sights['haccord-GdWvsqrm'],
+  sights['haccord-ps7cWy6K'],
+  sights['haccord-Jq65fyD4'],
+  sights['haccord-OXYy5gET'],
+  sights['haccord-5LlCuIfL'],
+  sights['haccord-Gtt0JNQl'],
+  sights['haccord-cXSAj2ez'],
+  sights['haccord-KN23XXkX'],
+  sights['haccord-Z84erkMb'],
+];
+
+const inspectionId = 'b072ff42-6244-ef3b-b018-5d3d6562c1bd';
+
+const apiConfig = {
+  apiDomain: 'api.preview.monk.ai/v1',
+  authToken:
+    'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IjNLUnpaNm01WDFzOWFBZWRudnBrWSJ9.eyJpc3MiOiJodHRwczovL2lkcC5wcmV2aWV3Lm1vbmsuYWkvIiwic3ViIjoiZ29vZ2xlLW9hdXRoMnwxMDY5MzYxMTEwMDU4MDYxODA1NTYiLCJhdWQiOlsiaHR0cHM6Ly9hcGkubW9uay5haS92MS8iLCJodHRwczovL21vbmstcHJldmlldy5ldS5hdXRoMC5jb20vdXNlcmluZm8iXSwiaWF0IjoxNzA3NDcxNzU5LCJleHAiOjE3MDc0Nzg5NTksImF6cCI6InNvWjdQMmM2YjlJNWphclFvUnJoaDg3eDlUcE9TYUduIiwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCIsInBlcm1pc3Npb25zIjpbIm1vbmtfY29yZV9hcGk6Y29tcGxpYW5jZXMiLCJtb25rX2NvcmVfYXBpOmRhbWFnZV9kZXRlY3Rpb24iLCJtb25rX2NvcmVfYXBpOmRhc2hib2FyZF9vY3IiLCJtb25rX2NvcmVfYXBpOmltYWdlc19vY3IiLCJtb25rX2NvcmVfYXBpOmluc3BlY3Rpb25zOmNyZWF0ZSIsIm1vbmtfY29yZV9hcGk6aW5zcGVjdGlvbnM6ZGVsZXRlIiwibW9ua19jb3JlX2FwaTppbnNwZWN0aW9uczpkZWxldGVfYWxsIiwibW9ua19jb3JlX2FwaTppbnNwZWN0aW9uczpkZWxldGVfb3JnYW5pemF0aW9uIiwibW9ua19jb3JlX2FwaTppbnNwZWN0aW9uczpyZWFkIiwibW9ua19jb3JlX2FwaTppbnNwZWN0aW9uczpyZWFkX2FsbCIsIm1vbmtfY29yZV9hcGk6aW5zcGVjdGlvbnM6cmVhZF9vcmdhbml6YXRpb24iLCJtb25rX2NvcmVfYXBpOmluc3BlY3Rpb25zOnVwZGF0ZSIsIm1vbmtfY29yZV9hcGk6aW5zcGVjdGlvbnM6dXBkYXRlX2FsbCIsIm1vbmtfY29yZV9hcGk6aW5zcGVjdGlvbnM6dXBkYXRlX29yZ2FuaXphdGlvbiIsIm1vbmtfY29yZV9hcGk6aW5zcGVjdGlvbnM6d3JpdGUiLCJtb25rX2NvcmVfYXBpOmluc3BlY3Rpb25zOndyaXRlX2FsbCIsIm1vbmtfY29yZV9hcGk6aW5zcGVjdGlvbnM6d3JpdGVfb3JnYW5pemF0aW9uIiwibW9ua19jb3JlX2FwaTpyZXBhaXJfZXN0aW1hdGUiLCJtb25rX2NvcmVfYXBpOnVzZXJzOnJlYWQiLCJtb25rX2NvcmVfYXBpOnVzZXJzOnJlYWRfYWxsIiwibW9ua19jb3JlX2FwaTp1c2VyczpyZWFkX29yZ2FuaXphdGlvbiIsIm1vbmtfY29yZV9hcGk6dXNlcnM6dXBkYXRlIiwibW9ua19jb3JlX2FwaTp1c2Vyczp1cGRhdGVfYWxsIiwibW9ua19jb3JlX2FwaTp1c2Vyczp1cGRhdGVfb3JnYW5pemF0aW9uIiwibW9ua19jb3JlX2FwaTp1c2Vyczp3cml0ZSIsIm1vbmtfY29yZV9hcGk6dXNlcnM6d3JpdGVfYWxsIiwibW9ua19jb3JlX2FwaTp1c2Vyczp3cml0ZV9vcmdhbml6YXRpb24iLCJtb25rX2NvcmVfYXBpOndoZWVsX2FuYWx5c2lzIl19.m38G5NaCD_pcGptJdLPa_TVtD08yRY9qdp-5pCELd8Ekzma0kCWMctwHvlrv2OsjynlXyAutIK2uhDMrdLdnPk_6bU4rZheej2s0obXaXqZCUTbUOh8scL-81tbH_ZlKN3oSXfqUVMnwvpa1bnXZHmjeHi2e3bhvjxW-Jg5DrBB9gNfstxK0hugrlxtNL96y6ImEITOxOMEbURYGwOLQQtLkRqFo7AeZCu-_w6UbtFZfLJc5FlsWpTKy7I3_xMynzDGGaADRQeyazL_7DfemCb_VPXkR9aV67tF4pt6jevCetYI5CfN5X2JJrp7XNES_M2d7wGdJl5C6lbBPs3n3SA',
+};
 
-const sightsArray = Object.values(sights)
-  .filter((value) => value.category === 'exterior')
-  .slice(0, 5);
 export function TestView() {
+  const [complete, setComplete] = useState(false);
+
   return (
     <div className='test-view-container'>
-      <PhotoCapture sights={sightsArray} />
+      {complete ? (
+        'Inspection Complete!'
+      ) : (
+        <PhotoCapture
+          sights={captureSights}
+          inspectionId={inspectionId}
+          apiConfig={apiConfig}
+          onComplete={() => setComplete(true)}
+          onClose={() => console.log('coucou')}
+        />
+      )}
     </div>
   );
 }

documentation/docs/getting-started.md

@@ -3,3 +3,54 @@ sidebar_position: 2
 ---
 
 # Getting Started
+## PhotoCapture
+If you plan on integrating the PhotoCapture workflow into your app, you can first start by installing the required
+dependencies :
+
+```shell
+yarn add @monkvision/inspection-capture-web @monkvision/sights
+```
+
+You can then create a new page in your application that will implement the PhotoCapture component in the following way :
+
+```tsx
+import { sights } from '@monkvision/sights';
+import { PhotoCapture } from '@monkvision/inspection-capture-web';
+
+const apiConfig = {
+  apiDomain: 'MONK_API_DOMAIN',
+  authToken: 'YOUR_AUTH0_ACCESS_TOKEN',
+};
+
+const sights = [
+  sights['fesc20-H1dfdfvH'],
+  sights['fesc20-WMUaKDp1'],
+  sights['fesc20-LTe3X2bg'],
+  sights['fesc20-hp3Tk53x'],
+];
+
+export function MonkCapturePage() {
+  const handleSuccess = () => {
+    // Redirect to another page once the inspection is complete.
+  };
+
+  return (
+    <PhotoCapture
+      inspectionId={inspectionId}
+      apiConfig={apiConfig}
+      sights={sights}
+      onComplete={handleSuccess}
+    />
+  );
+}
+```
+
+In the code snippet above, you can replace :
+- `MONK_API_DOMAIN` by the Monk APi Domain that you plan on using :
+  - `api.monk.ai/v1` for production
+  - `api.preview.monk.ai/v1` for preview
+- `YOUR_AUTH0_ACCESS_TOKEN` by the Auth0 authentication token that you previously generated by logging in
+- `sights` with an array of sights of your choice obtained from the `@monkvision/sights` package.
+
+For additional configuration options for this component, please refer to the
+[InspectionCaptureWeb documentation page](docs/packages/inspection-capture-web.md).

documentation/docs/introduction.md

@@ -15,7 +15,7 @@ that exposes endpoints to communicate with the AI models. The usual Monk workflo
   should be included with every request made to the Monk API.
 2. Create an *Inspection* using the `POST /inspection` endpoint, and specify which AI models (which *Tasks*) you want to
   run during this inspection.
-3. Take pictures of your vehicle and add them to your inspection using the `POST /inspection/{id}/images` endpiont. For
+3. Take pictures of your vehicle and add them to your inspection using the `POST /inspection/{id}/images` endpoint. For
   each picture, specify which *Task* you want to run on it.
 4. *(optional)* Ask the API to analyze the quality of the images before running the AI models on them
 5. Once all the pictures are uploaded, tell the API to start inspection *Tasks* by using the
@@ -36,8 +36,8 @@ implement this workflow yourself, you can refer to our [API Documentation](https
 Among other things, the MonkJs SDK offers the following tools to implement the workflow mentionned above :
 
 - A package called [network](docs/packages/network.md) that offers utility functions to easily communicate with our API.
-- A single-page component called [InspectionCapture](docs/packages/inspection-capture-web.md) that you can place in your
-  app to display a camera preview and allow users to take pictures of their vehicle, analyze the quality of the pictures
+- Single-page components like [PhotoCapture](docs/packages/inspection-capture-web.md) that you can place in your app
+  to display a camera preview and allow users to take pictures of their vehicle, analyze the quality of the pictures
   taken and upload them to the API.
 - A single-page component called [InspectionReport](docs/packages/inspection-report-web.md) that you can place in your app
   to display the results of an insepction, update the results if needed, and ask the API to generate the PDF report.

documentation/docs/packages/camera-web.md

@@ -11,7 +11,8 @@ called Camera, that lets you display a camera preview on your app as well as an
 to take pictures, compress images, etc.
 
 Generally speaking, as a developer using our SDK, you won't have to directly use this component, since you probably
-want to use higher level components such as the [inspection-capture-web](docs/packages/inspection-capture-web.md) package.
+want to use higher level components such as the ones available in the
+[inspection-capture-web](docs/packages/inspection-capture-web.md) package.
 
 ## Complete Documentation
 As every other package in the SDK, please refer to

documentation/docs/packages/inspection-capture-web.md

@@ -6,9 +6,9 @@ sidebar_position: 5
 ![npm latest package](https://img.shields.io/npm/v/@monkvision/inspection-capture-web/latest.svg)
 
 ## Overview
-This package exports a single page component for React (Web) called InspectionCapture that implements the capture
-process in the Monk SDK. The capture process allows the user to take pictures of its vehicle and will automatically send
-the pictures to our API, start the tasks and check the quality of the images using our compliance features.
+This package exports single page components for React (Web) that implements different capture workflows in the Monk SDK.
+The capture process allows the user to take pictures of its vehicle, automatically send them to our API, start the tasks
+and check the quality of the images using our compliance features.
 
 ## Complete Documentation
 As every other package in the SDK, please refer to

documentation/docs/upgrading-from-v3.md

@@ -3,3 +3,186 @@ sidebar_position: 3
 ---
 
 # Upgrading From V3
+This documentation page provides guidlines to upgrade from the MonkJs 3.X version to the 4.X.
+
+## Why upgrade?
+MonkJs 4 is a complete revamp of the Monk SDK, rewritten from scratch, aimed at providing :
+- Better performances
+- Better monitoring for bug catching
+- New and improved UX/UI
+- New features (Video capture, live compliance, offline management...)
+- TypeScript typings with TSDoc integrated
+- Better documentation
+- And many more 🚀
+
+Another key thing is that MonkJs used to be developed as a cross-platform React-Native SDK for Web (iOS / Android /
+Web). This basically forced us to use Expo and other dependencies that were hard to maintain with such low-level
+features. MonkJs 4 solves this issue by offering basically two SDKs : one for Web using ReactJs, and one for Native
+using React-Native. Some packages of the SDK work for both web and native, while others are split into two separate
+pacakges every time : one ending with `-web` for Web and one ending with `-native` for Native.
+
+For now, only the Web part of the SDK has been implemented, but the Native one should come soon enough!
+
+## Sights
+The sights data previous exported as the default export of the Sights package is now split into 3 objects :
+- `vehicles` containing the details for each vehicle used as a model for the sights
+- `labels` containing translation details about each Sight label
+- `sights` containing the Sight data, with more or less the same structure as before, except for the vehicle details and
+  sight label that now are simply a key reference to the other data export by the package.
+
+Another major difference is that sights now include additional details such as the list of tasks recommended to be run
+for this sight. This means that you now don't have to specify manually which task to run for each sight when
+implementing a capture workflow.
+
+#### How you did it in MonkJs 3
+```javascript
+import sights from '@monkvision/sights';
+
+const sight = sights['fesc20-H1dfdfvH'];
+console.log(JSON.stringify(sight, null, 2));
+/*
+ * Output :
+ * {
+ *   "id": "fesc20-H1dfdfvH",
+ *   "category": "exterior"
+ *   "overlay": "<svg>...</svg>"
+ *   "label": {
+ *     "en":"Front Low",
+ *     "fr":"Avant (position basse)"
+ *   },
+ * }
+ */
+```
+
+#### How you do it in MonkJs 4
+```typescript
+import { sights, labels } from '@monkvision/sights';
+
+const sight = sights['fesc20-H1dfdfvH'];
+console.log(JSON.stringify(sight, null, 2));
+/*
+ * Output :
+ * {
+ *   "id": "fesc20-H1dfdfvH",
+ *   "category": "exterior",
+ *   "label": "front-low",
+ *   "overlay": "<svg>...</svg>",
+ *   "tasks": [
+ *     "damage_detection"
+ *   ],
+ *   "vehicle": "fesc20"
+ * }
+ */
+
+console.log(JSON.stringify(labels[sight.label], null, 2));
+/*
+ * Output :
+ * {
+ *   "key": "front-low",
+ *   "en": "Front Low",
+ *   "fr": "Avant - vue basse",
+ *   "de": "Vorderseite Niedrig"
+ * }
+ */
+```
+
+## Camera and Inspection Capture
+The `@monkvision/camera` package used to provide components such as `Capture` that were used to implement the picture
+taking workflows (capture workflows) for inspections, as well as declaring the Camera app used by these Capture
+components. This package has now been split into two :
+
+- `@monkvision/camera-web` : A package that export a component called `Camera` that implements a camera preview used to
+  take pictures, as well as logic utilities used to handle this camera. Usually, as a developer using the SDK, you won't
+  have to use this package directly.
+- `@monkvision/inspection-capture-web` : A package that export capture components (such as `PhotoCapture`) used to
+  integrate the different Monk inspection capture workflows into your app.
+
+#### How you did it in MonkJs 3
+```jsx
+import monk from '@monkvision/corejs';
+import { Capture, Controls } from '@monkvision/camera';
+
+const { TaskName } = monk.types;
+monk.config.authConfig = { domain: 'api.monk.ai/v1' };
+monk.config.accessToken = 'YOUR_AUTH0_ACCESS_TOKEN';
+
+const inspectionId = '1e11fb94-26fe-4956-90b6-d11ef3c87da4';
+
+const sightIds = [
+  'fesc20-H1dfdfvH',
+  'fesc20-WMUaKDp1',
+  'fesc20-LTe3X2bg',
+  'fesc20-hp3Tk53x',
+];
+
+const mapTasksToSight = [
+  { id: 'fesc20-H1dfdfvH', tasks: [TaskName.DAMAGE_DETECTION] },
+  { id: 'fesc20-WMUaKDp1', tasks: [TaskName.DAMAGE_DETECTION] },
+  { id: 'fesc20-LTe3X2bg', tasks: [TaskName.DAMAGE_DETECTION] },
+  { id: 'fesc20-hp3Tk53x', tasks: [TaskName.DAMAGE_DETECTION] },
+];
+
+function App() {
+  const [cameraLoading, setCameraLoading] = useState(false);
+
+  const controls = [
+    { disabled: cameraLoading, ...Controls.AddDamageButtonProps },
+    { disabled: cameraLoading, ...Controls.CaptureButtonProps },
+  ];
+
+  const handleSuccess = () => {
+    // Update all the tasks statuses to TODO manually and then redirect to another page.
+  };
+
+  return (
+    <Capture
+      inspectionId={inspectionId}
+      sightIds={sightIds}
+      mapTasksToSight={mapTasksToSight}
+      controls={controls}
+      loading={cameraLoading}
+      onReady={() => setCameraLoading(false)}
+      onStartUploadPicture={() => setCameraLoading(true)}
+      onFinishUploadPicture={() => setCameraLoading(false)}
+      enableComplianceCheck
+      onComplianceCheckFinish={handleSuccess}
+    />
+  );
+}
+```
+
+#### How you do it in MonkJs 4
+```tsx
+import { sights } from '@monkvision/sights';
+import { PhotoCapture } from '@monkvision/inspection-capture-web';
+
+const apiConfig = {
+  apiDomain: 'api.monk.ai/v1',
+  authToken: 'YOUR_AUTH0_ACCESS_TOKEN',
+};
+
+const inspectionId = '1e11fb94-26fe-4956-90b6-d11ef3c87da4';
+
+const sights = [
+  sights['fesc20-H1dfdfvH'],
+  sights['fesc20-WMUaKDp1'],
+  sights['fesc20-LTe3X2bg'],
+  sights['fesc20-hp3Tk53x'],
+];
+
+function App() {
+  const handleSuccess = () => {
+    // Immediately redirect to another page.
+  };
+
+  return (
+    <PhotoCapture
+      inspectionId={inspectionId}
+      apiConfig={apiConfig}
+      sights={sights}
+      compliances={{ iqa: true }}
+      onComplete={handleSuccess}
+    />
+  );
+}
+```

documentation/docs/v3-docs/guides/upgrading-to-3.5.md

@@ -91,4 +91,3 @@ rename those sights accordingly in the list of sight given as the `sightIds` pro
 | UHZkpCuK | vwtroc-UHZkpCuK |
 | 3a3OheoD | vwtroc-3a3OheoD |
 | IVcF1dOP | vwtroc-IVcF1dOP |
-

packages/private/test-utils/src/__mocks__/@monkvision/camera-web.tsx

@@ -12,4 +12,5 @@ export = {
   Camera: jest.fn(() => <></>),
   SimpleCameraHUD: jest.fn(() => <></>),
   i18nCamera: {},
+  getCameraErrorLabel: jest.fn(() => ({ en: '', fr: '', de: '' })),
 };