Feature/mn 381/german vm alpha online (#602)

* Design changes in inspection report for images (#587)

Co-authored-by: deepakglobant <deepak.chaudhary@globanmt.com>

* fix: resolved zoom image with transform functionality (#589)

Co-authored-by: deepakglobant <deepak.chaudhary@globanmt.com>

* Updated create inspection params and removed zoom level labels (#590)

Co-authored-by: souyahia-monk <samy.ouyahia@monkvision.ai>

* Release @monkvision/monkjs v3.8.4

* Removed zoom level label from compliance (#591)

Co-authored-by: souyahia-monk <samy.ouyahia@monkvision.ai>

* feat: navigate images on keyboard clicks (#593)

Co-authored-by: deepakglobant <deepak.chaudhary@globanmt.com>

* fix: resolved arrow keys to show all the images (#595)

Co-authored-by: Deepak Chaudhary <deepakglobant>

* fix: change text in exit button in popup (MN-264) (#597)

Co-authored-by: Deepak Chaudhary <deepakglobant>

* feat: allow retaking pictures (MN-366) (#599)

* fix: resolved current picture id if clicked again (#600)

* Added VM to Alpha Controller

* Added German language for Alpha Controller

* feat: update VM components (MN-380) (#604)

* feat: setup feedback package (MN-295) (#601)

* Added debug options

* Added missing translations for german sights

* Added translation for Add Damage button

* Fix : Inspection report handle tasks in error (#605)

Co-authored-by: souyahia-monk <samy.ouyahia@monkvision.ai>

* Added fix to generic webapp for task statuses

* Added VM german translations

* Fixed the language dropdown (#606)

Co-authored-by: souyahia-monk <samy.ouyahia@monkvision.ai>

* Fixed the VM redirect

* Added german to new dropdown

* Fixed the VIN modal isLastTour

* Added generate_visual_outputs for damages

* Removed update VIN task + update how image ocr task done is handled

* Added numberOfSightsToUse in debug params

* Fixed the issue causing the InspectionReport package language to not update

---------

Co-authored-by: deepakglobant <123438709+deepakglobant@users.noreply.github.com>
Co-authored-by: deepakglobant <deepak.chaudhary@globanmt.com>
Co-authored-by: souyahia-monk <samy.ouyahia@monkvision.ai>

.babelrc.json

@@ -19,7 +19,8 @@
         "@monkvision/sights": "./packages/sights",
         "@monkvision/toolkit": "./packages/toolkit",
         "@monkvision/visualization": "./packages/visualization",
-        "@monkvision/inspection-report": "./packages/inspection-report"
+        "@monkvision/inspection-report": "./packages/inspection-report",
+        "@monkvision/feedback": "./packages/feedback"
       }
     }],
     ["babel-plugin-inline-import", { "extensions": [".svg"] }]

.github/workflows/camera-analyze.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '16'
           cache: 'yarn'
       - run: cd packages/camera && yarn install
       - run: cd packages/camera && yarn lint

.github/workflows/corejs-analyze.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '16'
           cache: 'yarn'
       - run: cd packages/corejs && yarn install
       - run: cd packages/corejs && yarn lint

.github/workflows/feedback-analyze.yml

@@ -0,0 +1,30 @@
+name: Check Feedback package
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+          cache: 'yarn'
+      - run: cd packages/feedback && yarn install
+      - run: cd packages/feedback && yarn lint
+      - run: cd packages/feedback && yarn run build

.github/workflows/sights-analyze.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '16'
           cache: 'yarn'
       - run: cd packages/sights && yarn install
       - run: cd packages/sights && yarn lint

.github/workflows/toolkit-analyze.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '16'
           cache: 'yarn'
       - run: cd packages/toolkit && yarn install
       - run: cd packages/toolkit && yarn lint

.github/workflows/ui-analyze.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '16'
           cache: 'yarn'
       - run: cd packages/ui && yarn install
       - run: cd packages/ui && yarn lint

.github/workflows/visualization-analyze.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '16'
           cache: 'yarn'
       - run: cd packages/visualization && yarn install
       - run: cd packages/visualization && yarn lint

.github/workflows/website-deploy.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: "14.x"
+          node-version: "16.x"
       - name: Build Packages
         run: |
           yarn
@@ -36,7 +36,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: "14.x"
+          node-version: "16.x"
       - uses: webfactory/ssh-agent@v0.5.0
         with:
           ssh-private-key: ${{ secrets.FUTURA_SECRET }}

metro.config.js

@@ -13,6 +13,7 @@ config.resolver = {
     '@monkvision/toolkit',
     '@monkvision/visualization',
     '@monkvision/inspection-report',
+    '@monkvision/feedback',
   ],
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "monk",
-  "version": "3.8.3",
+  "version": "3.8.4",
   "author": "monkvision",
   "license": "BSD-3-Clause-Clear",
   "private": true,
@@ -17,22 +17,25 @@
     "start": "expo start --https",
     "start:documentation": "cd website && yarn run docs:start",
     "start:report": "cd services/inspection-report && yarn run start",
+    "start:feedback": "cd services/feedback && yarn run start",
     "watch:ui": "cd ./packages/ui && yarn watch",
     "watch:camera": "cd ./packages/camera && yarn watch",
     "watch:visualization": "cd ./packages/visualization && yarn watch",
     "watch:toolkit": "cd ./packages/toolkit && yarn watch",
     "watch:corejs": "cd ./packages/corejs && yarn watch",
     "watch:sights": "cd ./packages/sights && yarn watch",
     "watch:inspection-report": "cd ./packages/inspection-report && yarn watch",
-    "watch:all": "concurrently \"yarn run watch:ui\" \"yarn run watch:toolkit\" \"yarn run watch:visualization\" \"yarn run watch:camera\" \"yarn run watch:corejs\" \"yarn run watch:sights\" \"yarn run watch:inspection-report\"",
+    "watch:feedback": "cd ./packages/feedback && yarn watch",
+    "watch:all": "concurrently \"yarn run watch:ui\" \"yarn run watch:toolkit\" \"yarn run watch:visualization\" \"yarn run watch:camera\" \"yarn run watch:corejs\" \"yarn run watch:sights\" \"yarn run watch:inspection-report\" \"yarn run watch:feedback\"",
     "build:ui": "cd ./packages/ui && yarn run build",
     "build:camera": "cd ./packages/camera && yarn run build",
     "build:visualization": "cd ./packages/visualization && yarn run build",
     "build:toolkit": "cd ./packages/toolkit && yarn run build",
     "build:corejs": "cd ./packages/corejs && yarn run build",
     "build:sights": "cd ./packages/sights && yarn run build",
     "build:inspection-report": "cd ./packages/inspection-report && yarn run build",
-    "build:all": "concurrently \"yarn run build:ui\" \"yarn run build:toolkit\" \"yarn run build:visualization\" \"yarn run build:camera\" \"yarn run build:corejs\" \"yarn run build:sights\" \"yarn run build:inspection-report\"",
+    "build:all": "concurrently \"yarn run build:ui\" \"yarn run build:toolkit\" \"yarn run build:visualization\" \"yarn run build:camera\" \"yarn run build:corejs\" \"yarn run build:sights\" \"yarn run build:inspection-report\" \"yarn run build:feedback\"",
+    "build:feedback": "cd ./packages/feedback && yarn run build",
     "build:android": "expo build:android",
     "build:ios": "expo build:ios",
     "eject": "expo eject",
@@ -100,6 +103,7 @@
     "react-i18next": "^11.18.0",
     "react-native": "0.64.3",
     "react-native-canvas": "^0.1.38",
+    "react-native-element-dropdown": "^2.10.0",
     "react-native-masked-text": "^1.13.0",
     "react-native-paper": "^4.12.0",
     "react-native-prompt-android": "^1.1.0",
@@ -149,11 +153,12 @@
   "peerDependencies": {
     "@monkvision/camera": "*",
     "@monkvision/corejs": "*",
+    "@monkvision/feedback": "*",
+    "@monkvision/inspection-report": "*",
     "@monkvision/sights": "*",
     "@monkvision/toolkit": "*",
     "@monkvision/ui": "*",
     "@monkvision/visualization": "*",
-    "@monkvision/inspection-report": "*",
     "react-native-svg": "*"
   },
   "resolutions": {

packages/camera/package.json

@@ -2,7 +2,7 @@
   "name": "@monkvision/camera",
   "author": "monkvision",
   "license": "BSD-3-Clause-Clear",
-  "version": "3.8.3",
+  "version": "3.8.4",
   "private": false,
   "description": "AI-powered vehicle damage detection for React Native",
   "homepage": "https://github.com/monkvision/monkjs/packages/camera/#readme",
@@ -73,10 +73,10 @@
     "release-it": "*"
   },
   "peerDependencies": {
-    "@monkvision/corejs": "3.8.3",
-    "@monkvision/inspection-report": "3.8.3",
-    "@monkvision/sights": "3.8.3",
-    "@monkvision/toolkit": "3.8.3",
+    "@monkvision/corejs": "3.8.4",
+    "@monkvision/inspection-report": "3.8.4",
+    "@monkvision/sights": "3.8.4",
+    "@monkvision/toolkit": "3.8.4",
     "expo-camera": "^12.3.0",
     "react": "*",
     "react-native": "*",

packages/camera/src/components/Capture/capture.js

@@ -23,6 +23,8 @@ import SelectedParts from '../SelectedParts';
 import Sights from '../Sights';
 import UploadCenter from '../UploadCenter';
 
+import Actions from '../../actions';
+
 import {
   useCheckComplianceAsync,
   useCreateDamageDetectionAsync,
@@ -89,7 +91,7 @@ const styles = StyleSheet.create({
 });
 
 const defaultNavigationOptions = {
-  allowNavigate: false,
+  allowNavigate: true,
   allowRetake: true,
   allowSkip: false,
   allowSkipImageQualityCheck: true,
@@ -162,6 +164,7 @@ const Capture = forwardRef(({
   });
   const [endTour, setEndTour] = useState(false);
   const [isTourClosed, setIsTourClosed] = useState(false);
+  const [sightBeforeRetake, setSightBeforeRetake] = useState('');
   const { height, width } = useWindowDimensions();
   const { errorHandler, measurePerformance } = useMonitoring();
 
@@ -385,12 +388,13 @@ const Capture = forwardRef(({
     if (confirm) {
       setCloseEarlyModalState({
         show: true,
-        message: confirmationMessage,
+        message: addDamageStatus === AddDamageStatus.TAKE_PICTURE
+          ? confirmationMessage.zoomed : confirmationMessage.normal,
       });
     } else {
       handleCloseCaptureEarly();
     }
-  }, [handleCloseCaptureEarly, setCloseEarlyModalState]);
+  }, [addDamageStatus, handleCloseCaptureEarly, setCloseEarlyModalState]);
 
   const handleCloseEarlyCancel = useCallback(() => {
     setCloseEarlyModalState({
@@ -446,6 +450,23 @@ const Capture = forwardRef(({
     }
   }, []);
 
+  const handlePictureTaken = useCallback(() => {
+    onPictureTaken();
+    if (sightBeforeRetake) {
+      sights.dispatch({
+        type: Actions.sights.SET_CURRENT_SIGHT,
+        payload: { id: sightBeforeRetake },
+      });
+      setSightBeforeRetake('');
+    }
+  }, [sights.dispatch, sightBeforeRetake, onPictureTaken]);
+
+  const handleSightPressed = useCallback((id) => {
+    if (!sightBeforeRetake) {
+      setSightBeforeRetake(id);
+    }
+  }, [sightBeforeRetake]);
+
   // END HANDLERS //
   // EFFECTS //
 
@@ -564,6 +585,7 @@ const Capture = forwardRef(({
         footer={footer}
         navigationOptions={navigationOptions}
         offline={offline}
+        onSightPressed={handleSightPressed}
         thumbnailStyle={thumbnailStyle}
         uploads={uploads}
         additionalPictures={additionalPictures.state.takenPictures}
@@ -593,7 +615,7 @@ const Capture = forwardRef(({
       onResetAddDamageStatus={handleResetDamageStatus}
       hideAddDamage={hideAddDamage}
       isPortraitModeVinLayoutView={isPortraitModeVinLayoutView}
-      onPictureTaken={onPictureTaken}
+      onPictureTaken={handlePictureTaken}
     />
   ), [
     api, controlsContainerStyle, controls, loading,
@@ -938,25 +960,25 @@ Capture.defaultProps = {
   mapTasksToSights: [],
   navigationOptions: defaultNavigationOptions,
   offline: null,
-  onPictureUploaded: () => {},
-  onPictureTaken: () => {},
-  onCameraPermissionError: () => {},
-  onCameraPermissionSuccess: () => {},
-  onCaptureClose: () => {},
-  onCaptureTourFinish: () => {},
-  onCaptureTourStart: () => {},
-  onChange: () => {},
-  onCloseEarly: () => {},
-  onComplianceChange: () => {},
-  onSettingsChange: () => {},
-  onSightsChange: () => {},
-  onUploadsChange: () => {},
-  onComplianceCheckFinish: () => {},
-  onComplianceCheckStart: () => {},
-  onFinishUploadPicture: () => {},
-  onWarningMessage: () => {},
-  onReady: () => {},
-  onStartUploadPicture: () => {},
+  onPictureUploaded: () => { },
+  onPictureTaken: () => { },
+  onCameraPermissionError: () => { },
+  onCameraPermissionSuccess: () => { },
+  onCaptureClose: () => { },
+  onCaptureTourFinish: () => { },
+  onCaptureTourStart: () => { },
+  onChange: () => { },
+  onCloseEarly: () => { },
+  onComplianceChange: () => { },
+  onSettingsChange: () => { },
+  onSightsChange: () => { },
+  onUploadsChange: () => { },
+  onComplianceCheckFinish: () => { },
+  onComplianceCheckStart: () => { },
+  onFinishUploadPicture: () => { },
+  onWarningMessage: () => { },
+  onReady: () => { },
+  onStartUploadPicture: () => { },
   orientationBlockerProps: null,
   overlayPathStyles: {},
   primaryColor: '#FFF',

packages/camera/src/components/Controls/AddDamageButton.js

@@ -1,8 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Text } from 'react-native';
 
-export default function AddDamageButton({ label, customStyle }) {
+export default function AddDamageButton({ customStyle }) {
+  const { t } = useTranslation();
+
   return (
     <Text
       testID="addDamageButton"
@@ -15,14 +18,13 @@ export default function AddDamageButton({ label, customStyle }) {
         textTransform: 'uppercase',
       }, customStyle]}
     >
-      {label}
+      {t('controls.addDamage')}
     </Text>
   );
 }
 
 AddDamageButton.propTypes = {
   customStyle: PropTypes.object,
-  label: PropTypes.string.isRequired,
 };
 
 AddDamageButton.defaultProps = {

packages/camera/src/components/Controls/index.js

@@ -155,10 +155,8 @@ export default function Controls({
 
     if (action === Actions.sights.ADD_PROCESS_TO_QUEUE) {
       if (noOfProcesses < MAX_LIMIT_FOR_PROCESSES && current.index !== (ids.length - 1)) {
-        setTimeout(() => {
-          onFinishUploadPicture(state, api);
-          api.goNextSight();
-        }, 500);
+        onFinishUploadPicture(state, api);
+        api.goNextSight();
       }
     } else if (action === Actions.sights.REMOVE_PROCESS_FROM_QUEUE) {
       if (noOfProcesses === (MAX_LIMIT_FOR_PROCESSES - 1) && current.index !== (ids.length - 1)) {
@@ -300,6 +298,7 @@ Controls.CloseEarlyButtonProps = {
   confirmationMessage: {
     en: 'You haven\'t taken all the required pictures. Are you sure you want to end the insepction ?',
     fr: 'Vous n\'avez pas terminé de prendre toutes les photos nécessaires. Êtes-vous sûr(e) de vouloir terminer l\'inspection ?',
+    de: 'Sie haben nicht alle erforderlichen Bilder aufgenommen. Sind Sie sicher, dass Sie die Inspektion beenden möchten?',
   },
 };
 
@@ -320,7 +319,6 @@ Controls.AddDamageButtonProps = {
   id: 'add-damage',
   accessibilityLabel: 'Zoomed Damage',
   children: <AddDamageButton
-    label="Zoomed Damage"
     customStyle={{
       fontSize: 12,
       color: '#020202',