feat(mespapiers): Add the SelectPaperFormat modal to the process

cozy · Dec 14, 2023 · 2d95154 · 2d95154
1 parent afa06a7
commit 2d95154
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 15 deletions.
diff --git a/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResult/OcrProcessingDialog.jsx b/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResult/OcrProcessingDialog.jsx
@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { useWebviewIntent } from 'cozy-intent'
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Empty from 'cozy-ui/transpiled/react/Empty'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
+import SelectPaperFormat from './SelectPaperFormat'
 import OcrProcessingIcon from '../../../assets/icons/OcrProcessing.svg'
 import { useFormData } from '../../Hooks/useFormData'
 import { useStepperDialog } from '../../Hooks/useStepperDialog'
@@ -21,32 +22,50 @@ const OcrProcessingDialog = ({ onBack, rotatedFile }) => {
   const { setFormData, formData } = useFormData()
   const webviewIntent = useWebviewIntent()
   const { currentDefinition, nextStep } = useStepperDialog()
+  const [multipleFormat, setMultipleFormat] = useState({
+    enabled: false,
+    ocr: null
+  })
   const { ocrAttributes } = currentDefinition
 
   useEffect(() => {
     const init = async () => {
       const fileSides = getFormDataFilesForOcr(formData, rotatedFile)
       const ocrFromFlagship = await getOcrFromFlagship(fileSides, webviewIntent)
-      const attributesFound = getAttributesFromOcr(
-        ocrFromFlagship,
-        ocrAttributes[0]
-      )
+      const fileVersions = ocrAttributes.map(attr => attr.version)
 
-      const metadataFromOcr = makeMetadataFromOcr(attributesFound)
-      setFormData(prev => ({
-        ...prev,
-        metadata: {
-          ...prev.metadata,
-          ...metadataFromOcr
-        }
-      }))
+      // If paper has multiple formats, we need to display a dialog to let user confirm the right format
+      if (fileVersions.length > 1) {
+        setMultipleFormat({ enabled: true, ocr: ocrFromFlagship })
+      } else {
+        // If paper has no format, we can go to next step
+        const attributesFound = getAttributesFromOcr(
+          ocrFromFlagship,
+          ocrAttributes[0]
+        )
 
-      nextStep()
+        const metadataFromOcr = makeMetadataFromOcr(attributesFound)
+        setFormData(prev => ({
+          ...prev,
+          metadata: {
+            ...prev.metadata,
+            ...metadataFromOcr
+          }
+        }))
+
+        nextStep()
+      }
     }
     init()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  if (multipleFormat.enabled) {
+    return (
+      <SelectPaperFormat onBack={onBack} ocrFromFlagship={multipleFormat.ocr} />
+    )
+  }
+
   return (
     <Dialog
       open

diff --git a/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResult/SelectPaperFormat.jsx b/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResult/SelectPaperFormat.jsx
@@ -11,17 +11,41 @@ import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Radio from 'cozy-ui/transpiled/react/Radios'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
+import { findPaperVersion } from '../../../helpers/findAttributes'
 import CompositeHeader from '../../CompositeHeader/CompositeHeader'
 import CompositeHeaderImage from '../../CompositeHeader/CompositeHeaderImage'
 import { useFormData } from '../../Hooks/useFormData'
 import { useStepperDialog } from '../../Hooks/useStepperDialog'
 import { getAttributesFromOcr, makeMetadataFromOcr } from '../helpers'
 
+const getDefaultSelectedFormat = ({ ocrFromFlagship, ocrAttributes }) => {
+  const allReferenceRules = ocrAttributes.map(attrs => ({
+    version: attrs.version,
+    referencesRules: Object.keys(attrs)
+      .filter(attr => /(front|back)/.test(attr))
+      .flatMap(
+        side =>
+          attrs[side].referenceRules?.map(ref => ({
+            ...ref,
+            side
+          })) || []
+      )
+  }))
+
+  const { version } = findPaperVersion(ocrFromFlagship, allReferenceRules)
+  return version
+}
+
 const SelectPaperFormat = ({ onBack, ocrFromFlagship }) => {
   const { t } = useI18n()
   const { setFormData } = useFormData()
   const { currentDefinition, nextStep } = useStepperDialog()
-  const [selectedVersion, setSelectedVersion] = useState()
+  const [selectedVersion, setSelectedVersion] = useState(() =>
+    getDefaultSelectedFormat({
+      ocrFromFlagship,
+      ocrAttributes: currentDefinition.ocrAttributes
+    })
+  )
   const { ocrAttributes } = currentDefinition
 
   const handleClick = () => {