feat: Update ScanResultDialog informations

The information is no longer related to the device, but to the file type.
cozy · Nov 8, 2024 · 0b9b2ba · 0b9b2ba
1 parent 2cbed02
commit 0b9b2ba
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 48 deletions.
diff --git a/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImageActions.jsx b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImageActions.jsx
@@ -4,7 +4,6 @@ import React from 'react'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
 
@@ -25,15 +24,12 @@ const ScanResultCardImageActions = ({
 }) => {
   const classes = useStyles()
   const { t } = useI18n()
-  const { isDesktop } = useBreakpoints()
-
-  const device = isDesktop ? 'desktop' : 'mobile'
 
   return (
     <>
       <Button
         data-testid="retry-button"
-        label={t(`Acquisition.${device}.retry`)}
+        label={t('Acquisition.image.edit')}
         fullWidth
         variant="secondary"
         onClick={onCancel}
@@ -43,8 +39,8 @@ const ScanResultCardImageActions = ({
         classes={classes}
         size="small"
         onClick={onRotate}
-        aria-label={t('Acquisition.rotate')}
-        title={t('Acquisition.rotate')}
+        aria-label={t('Acquisition.image.rotate')}
+        title={t('Acquisition.image.rotate')}
         disabled={isImageRotating}
       >
         <Icon icon="rotate-left" />

diff --git a/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDFActions.jsx b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDFActions.jsx
@@ -2,19 +2,15 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 const ScanResultCardPDFActions = ({ onCancel }) => {
   const { t } = useI18n()
-  const { isDesktop } = useBreakpoints()
-
-  const device = isDesktop ? 'desktop' : 'mobile'
 
   return (
     <Button
       data-testid="retry-button"
-      label={t(`Acquisition.${device}.retry`)}
+      label={t('Acquisition.pdf.edit')}
       fullWidth
       variant="secondary"
       onClick={onCancel}

diff --git a/src/components/ModelSteps/ScanResult/ScanResultDialog.jsx b/src/components/ModelSteps/ScanResult/ScanResultDialog.jsx
@@ -8,7 +8,10 @@ import { useStepperDialog } from 'src/components/Contexts/StepperDialogProvider'
 import OcrProcessingDialog from 'src/components/ModelSteps/ScanResult/OcrProcessingDialog'
 import ScanResultCard from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCard'
 import ScanResultTitle from 'src/components/ModelSteps/ScanResult/ScanResultTitle'
-import { makeFileFromBase64 } from 'src/components/ModelSteps/helpers'
+import {
+  isPDFFile,
+  makeFileFromBase64
+} from 'src/components/ModelSteps/helpers'
 import SubmitButton from 'src/components/ModelSteps/widgets/SubmitButton'
 import StepperDialogTitle from 'src/components/StepperDialog/StepperDialogTitle'
 import { FLAGSHIP_SCAN_TEMP_FILENAME, KEYS } from 'src/constants'
@@ -21,7 +24,6 @@ import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import PointerAlert from 'cozy-ui/transpiled/react/PointerAlert'
 import { ButtonLink } from 'cozy-ui/transpiled/react/deprecated/Button'
 import useEventListener from 'cozy-ui/transpiled/react/hooks/useEventListener'
-import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 /**
@@ -47,15 +49,14 @@ const ScanResultDialog = ({
   const { t } = useI18n()
   const webviewIntent = useWebviewIntent()
   const [searchParams] = useSearchParams()
-  const { isDesktop } = useBreakpoints()
 
-  const device = isDesktop ? 'desktop' : 'mobile'
   const imageRef = useRef(null)
   const [rotationImage, setRotationImage] = useState(0)
   const [ocrProcessing, setOcrProcessing] = useState(false)
   const {
     currentStepIndex,
     nextStep,
+    isEdit,
     isLastStep,
     allCurrentSteps,
     currentDefinition
@@ -110,6 +111,12 @@ const ScanResultDialog = ({
     )
   }
   const SubmitButtonComponent = isLastStep() ? SubmitButton : null
+  const isEditStatusChanged =
+    !isEdit || (isEdit && currentFile.name !== formData.file.name)
+
+  const tooltipKey = t(
+    `Acquisition.${isPDFFile(currentFile) ? 'pdf' : 'image'}.tooltip.${page}`
+  )
 
   return (
     <FixedDialog
@@ -127,7 +134,9 @@ const ScanResultDialog = ({
         <div className={cx('u-flex u-flex-column u-flex-justify-center')}>
           {!formData.data?.[0]?.file?.isBlank && (
             <>
-              <ScanResultTitle />
+              {isEditStatusChanged && (
+                <ScanResultTitle currentFile={currentFile} />
+              )}
               {tooltip && (
                 <PointerAlert
                   className="u-mb-1"
@@ -138,7 +147,7 @@ const ScanResultDialog = ({
                     />
                   }
                 >
-                  {t(`Acquisition.${device}.tooltip.${page}`)}
+                  {tooltipKey}
                 </PointerAlert>
               )}
             </>

diff --git a/src/components/ModelSteps/ScanResult/ScanResultTitle.jsx b/src/components/ModelSteps/ScanResult/ScanResultTitle.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
+import { isPDFFile } from 'src/components/ModelSteps/helpers'
 
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
 
@@ -13,12 +13,13 @@ const useStyles = makeStyles(() => ({
   }
 }))
 
-const ScanResultTitle = () => {
+const ScanResultTitle = ({ currentFile }) => {
   const styles = useStyles()
   const { t } = useI18n()
-  const { isDesktop } = useBreakpoints()
 
-  const device = isDesktop ? 'desktop' : 'mobile'
+  const title = t(
+    `Acquisition.${isPDFFile(currentFile) ? 'pdf' : 'image'}.success`
+  )
 
   return (
     <div className="u-flex u-flex-items-center u-flex-justify-center u-mb-1-half">
@@ -28,7 +29,7 @@ const ScanResultTitle = () => {
         aria-hidden="true"
       />
       <Typography variant="h4" className={styles.typography} role="status">
-        {t(`Acquisition.${device}.success`)}
+        {title}
       </Typography>
     </div>
   )

diff --git a/src/components/ModelSteps/helpers.js b/src/components/ModelSteps/helpers.js
@@ -432,3 +432,10 @@ export const normalizeFormdataMetadata = ({
 
   return merge({}, formData, metadataNormalized)
 }
+
+/**
+ * Check if a file is a PDF file
+ * @param {File} file - File object
+ * @returns {boolean}
+ */
+export const isPDFFile = file => file.type === 'application/pdf'
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -35,23 +35,23 @@
   },
   "Acquisition": {
     "repeat": "Scan an additional page",
-    "rotate": "Rotate the image 90 degrees counter-clockwise",
-    "desktop": {
-      "retry": "Change picture",
-      "success": "The picture was added.",
+    "pdf": {
+      "success": "The document was added.",
+      "edit": "Change document",
       "tooltip": {
-        "back": "Check if it is indeed the back side and if the picture is well oriented as on the model",
-        "default": "Check if the picture is well oriented as on the model",
-        "front": "Check if it is indeed the front side and if the picture is well oriented as on the model"
+        "back": "Check if it is indeed the back side and if the document is well oriented as on the model",
+        "default": "Check if the document is well oriented as on the model",
+        "front": "Check if it is indeed the front side and if the document is well oriented as on the model"
       }
     },
-    "mobile": {
-      "retry": "Change photo",
-      "success": "The photo was added.",
+    "image": {
+      "rotate": "Rotate the image 90 degrees counter-clockwise",
+      "success": "The image was added.",
+      "edit": "Change image",
       "tooltip": {
-        "back": "Check if it is indeed the back side and if the photo is well oriented as on the model",
-        "default": "Check if the photo is well oriented as on the model",
-        "front": "Check if it is indeed the front side and if the photo is well oriented as on the model"
+        "back": "Check if it is indeed the back side and if the image is well oriented as on the model",
+        "default": "Check if the image is well oriented as on the model",
+        "front": "Check if it is indeed the front side and if the image is well oriented as on the model"
       }
     }
   },

diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -35,24 +35,24 @@
   },
   "Acquisition": {
     "repeat": "Scanner une page supplémentaire",
-    "rotate": "Tourner l'image à 90 degrés dans le sens anti-horaire",
-    "desktop": {
-      "retry": "Changer l'image",
+    "pdf": {
+      "success": "Le document a bien été ajouté.",
+      "edit": "Modifier le document",
+      "tooltip": {
+        "back": "Vérifier s’il s’agit bien de la face arrière et si le document est bien orienté comme sur le modèle",
+        "default": "Vérifier si le document est bien orienté comme sur le modèle",
+        "front": "Vérifier s’il s’agit bien de la face avant et si le document est bien orienté comme sur le modèle"
+      }
+    },
+    "image": {
+      "rotate": "Tourner l'image à 90 degrés dans le sens anti-horaire",
       "success": "L'image a bien été ajoutée.",
+      "edit": "Modifier l'image",
       "tooltip": {
         "back": "Vérifier s’il s’agit bien de la face arrière et si l'image est bien orientée comme sur le modèle",
         "default": "Vérifier si l'image est bien orientée comme sur le modèle",
         "front": "Vérifier s’il s’agit bien de la face avant et si l'image est bien orientée comme sur le modèle"
       }
-    },
-    "mobile": {
-      "retry": "Changer la photo",
-      "success": "La photo a bien été ajoutée.",
-      "tooltip": {
-        "back": "Vérifier s’il s’agit bien de la face arrière et si la photo est bien orientée comme sur le modèle",
-        "default": "Vérifier si la photo est bien orientée comme sur le modèle",
-        "front": "Vérifier s’il s’agit bien de la face avant et si la photo est bien orientée comme sur le modèle"
-      }
     }
   },
   "action": {