feat(mespapiers): Split ScanResultWrapper component

And use the new components

packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResultActions.jsx

@@ -0,0 +1,53 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Button, { ButtonLink } from 'cozy-ui/transpiled/react/Button'
+import DialogActions from 'cozy-ui/transpiled/react/DialogActions'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+
+import { PaperDefinitionsStepPropTypes } from '../../constants/PaperDefinitionsPropTypes'
+
+const ScanResultActions = ({ currentStep, onNextStep, onRepeatStep }) => {
+  const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
+  const { multipage } = currentStep
+
+  return (
+    <DialogActions
+      disableSpacing
+      className={cx('columnLayout u-mb-1-half u-mt-0 cozyDialogActions', {
+        'u-mh-1': !isMobile,
+        'u-mh-0': isMobile
+      })}
+    >
+      <Button
+        className="u-db"
+        data-testid="next-button"
+        extension="full"
+        label={t('common.next')}
+        onClick={onNextStep}
+      />
+      {multipage && (
+        <ButtonLink
+          className="u-ml-0 u-mb-half"
+          data-testid="repeat-button"
+          extension="full"
+          theme="secondary"
+          icon="camera"
+          label={t('Acquisition.repeat')}
+          onClick={onRepeatStep}
+        />
+      )}
+    </DialogActions>
+  )
+}
+
+ScanResultActions.propTypes = {
+  onNextStep: PropTypes.func,
+  onRepeatStep: PropTypes.func,
+  currentStep: PaperDefinitionsStepPropTypes
+}
+
+export default ScanResultActions

packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResultCard.jsx

@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types'
+import React, { useState, useRef } from 'react'
+
+import Card from 'cozy-ui/transpiled/react/Card'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+import ScanResultCardActions from './ScanResultCardActions'
+import { isSameFile } from './helpers'
+import RotateImage from './widgets/RotateImage'
+import { useFormData } from '../Hooks/useFormData'
+
+const isImageType = file => file.type.match(/image\/.*/)
+
+const ScanResultCard = ({ currentFile, setCurrentFile }) => {
+  const imageRef = useRef(null)
+  const { setFormData, formData } = useFormData()
+  const [rotationImage, setRotationImage] = useState(0)
+
+  const handleSelectedFile = () => {
+    const newData = formData.data.filter(
+      data => !isSameFile(currentFile, data.file)
+    )
+
+    setFormData(prev => ({
+      ...prev,
+      data: newData
+    }))
+
+    setCurrentFile(null)
+  }
+
+  const handleRotate = () => {
+    setRotationImage(prev => prev - 90)
+  }
+
+  return (
+    <Card className="u-ta-center u-p-1">
+      <div className="u-mah-5">
+        {isImageType(currentFile) ? (
+          <RotateImage
+            image={URL.createObjectURL(currentFile)}
+            rotation={rotationImage}
+            a11n={{ 'aria-hidden': true }}
+            ref={imageRef}
+          />
+        ) : (
+          <>
+            <Icon icon="file-type-pdf" size={80} aria-hidden="true" />
+            <Typography>{currentFile.name}</Typography>
+          </>
+        )}
+      </div>
+      <div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
+        <ScanResultCardActions
+          onRotate={handleRotate}
+          onCancel={handleSelectedFile}
+        />
+      </div>
+    </Card>
+  )
+}
+
+ScanResultCard.propTypes = {
+  currentFile: PropTypes.object.isRequired,
+  setCurrentFile: PropTypes.func.isRequired
+}
+
+export default ScanResultCard

packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResultCardActions.jsx

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    border: `1px solid ${theme.palette.border.main}`,
+    borderRadius: 0,
+    '&.small': {
+      padding: '0 1rem'
+    }
+  }
+}))
+
+const ScanResultCardActions = ({ onRotate, onCancel }) => {
+  const classes = useStyles()
+  const { t } = useI18n()
+
+  return (
+    <>
+      <Button
+        data-testid="retry-button"
+        label={t('Acquisition.retry')}
+        fullWidth
+        variant="secondary"
+        onClick={onCancel}
+      />
+      <IconButton
+        data-testid="rotate-button"
+        classes={classes}
+        size="small"
+        onClick={onRotate}
+        aria-label={t('Acquisition.rotate')}
+        title={t('Acquisition.rotate')}
+      >
+        <Icon icon="rotate-left" />
+      </IconButton>
+    </>
+  )
+}
+
+ScanResultCardActions.propTypes = {
+  onCancel: PropTypes.func,
+  onRotate: PropTypes.func
+}
+
+export default ScanResultCardActions

packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResultWrapper.jsx

@@ -1,74 +1,29 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React, { memo, useCallback } from 'react'
+import React, { memo } from 'react'
 
-import Avatar from 'cozy-ui/transpiled/react/Avatar'
-import Button, { ButtonLink } from 'cozy-ui/transpiled/react/Button'
-import Card from 'cozy-ui/transpiled/react/Card'
-import DialogActions from 'cozy-ui/transpiled/react/DialogActions'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import Typography from 'cozy-ui/transpiled/react/Typography'
 import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 import useEventListener from 'cozy-ui/transpiled/react/hooks/useEventListener'
-import { makeStyles } from 'cozy-ui/transpiled/react/styles'
 
-import { isSameFile } from './helpers'
+import ScanResultActions from './ScanResultActions'
+import ScanResultCard from './ScanResultCard'
+import ScanResultInfo from './ScanResultInfo'
+import ScanResultTitle from './ScanResultTitle'
 import { PaperDefinitionsStepPropTypes } from '../../constants/PaperDefinitionsPropTypes'
 import { KEYS } from '../../constants/const'
-import { useFormData } from '../Hooks/useFormData'
 import { useStepperDialog } from '../Hooks/useStepperDialog'
 
-const isPDF = file => file.type === 'application/pdf'
-
-const useStyles = makeStyles(() => ({
-  img: {
-    maxWidth: '100%',
-    maxHeight: 'inherit'
-  },
-  avatar: {
-    color: 'var(--paperBackgroundColor)',
-    backgroundColor: 'var(--successColor)',
-    marginBottom: '1rem'
-  }
-}))
-
 const ScanResultWrapper = ({ currentFile, setCurrentFile, currentStep }) => {
-  const styles = useStyles()
+  const { page = 'default', illustration } = currentStep
   const { t } = useI18n()
   const { isMobile } = useBreakpoints()
   const { nextStep } = useStepperDialog()
-  const { setFormData, formData } = useFormData()
-  const { multipage } = currentStep
-
-  const changeSelectedFile = () => {
-    const newData = formData.data.filter(
-      data => !isSameFile(currentFile, data.file)
-    )
 
-    setFormData(prev => ({
-      ...prev,
-      data: newData
-    }))
-
-    setCurrentFile(null)
+  const handleKeyDown = ({ key }) => {
+    if (key === KEYS.ENTER) nextStep()
   }
 
-  const onValid = useCallback(
-    (repeat = false) => {
-      if (!repeat) nextStep()
-      else setCurrentFile(null)
-    },
-    [nextStep, setCurrentFile]
-  )
-
-  const handleKeyDown = useCallback(
-    ({ key }) => {
-      if (key === KEYS.ENTER) onValid()
-    },
-    [onValid]
-  )
-
   useEventListener(window, 'keydown', handleKeyDown)
 
   return (
@@ -81,59 +36,22 @@ const ScanResultWrapper = ({ currentFile, setCurrentFile, currentStep }) => {
           }
         )}
       >
-        <div className="u-flex u-flex-column u-flex-items-center u-mb-2">
-          <Avatar icon="check" size="xlarge" className={styles.avatar} />
-          <Typography variant="h5">{t('Acquisition.success')}</Typography>
-        </div>
-        <Card className="u-ta-center u-p-1 u-pb-half">
-          <div className="u-mah-5">
-            {!isPDF(currentFile) ? (
-              <img
-                src={URL.createObjectURL(currentFile)}
-                className={styles.img}
-              />
-            ) : (
-              <>
-                <Icon icon="file-type-pdf" size={80} />
-                <Typography>{currentFile.name}</Typography>
-              </>
-            )}
-          </div>
-          <Button
-            className="u-mt-half"
-            data-testid="retry-button"
-            label={t('Acquisition.retry')}
-            theme="text"
-            onClick={changeSelectedFile}
-          />
-        </Card>
-      </div>
-      <DialogActions
-        disableSpacing
-        className={cx('columnLayout u-mb-1-half u-mt-0 cozyDialogActions', {
-          'u-mh-1': !isMobile,
-          'u-mh-0': isMobile
-        })}
-      >
-        <Button
-          className="u-db"
-          data-testid="next-button"
-          extension="full"
-          label={t('common.next')}
-          onClick={() => onValid(false)}
+        <ScanResultTitle />
+        <ScanResultInfo
+          icon={illustration}
+          text={t(`Acquisition.tooltip.${page}`)}
+          className="u-mb-1"
         />
-        {multipage && (
-          <ButtonLink
-            className="u-ml-0 u-mb-half"
-            data-testid="repeat-button"
-            extension="full"
-            theme="secondary"
-            icon="camera"
-            label={t('Acquisition.repeat')}
-            onClick={() => onValid(true)}
-          />
-        )}
-      </DialogActions>
+        <ScanResultCard
+          currentFile={currentFile}
+          setCurrentFile={setCurrentFile}
+        />
+      </div>
+      <ScanResultActions
+        currentStep={currentStep}
+        onNextStep={nextStep}
+        onRepeatStep={() => setCurrentFile(null)}
+      />
     </>
   )
 }

packages/cozy-mespapiers-lib/src/locales/en.json

@@ -1,8 +1,14 @@
 {
   "Acquisition": {
     "repeat": "Scan an additional page",
-    "retry": "Cancel picture",
-    "success": "The picture was taken."
+    "retry": "Retake picture",
+    "rotate": "Rotate the image 90 degrees counter-clockwise",
+    "success": "The picture was taken.",
+    "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"
+    }
   },
   "action": {
     "createPaper": "Add a paper",

packages/cozy-mespapiers-lib/src/locales/fr.json

@@ -1,8 +1,14 @@
 {
   "Acquisition": {
     "repeat": "Scanner une page supplémentaire",
-    "retry": "Annuler la photo",
-    "success": "La photo a bien été prise."
+    "retry": "Reprendre la photo",
+    "rotate": "Tourner l'image à 90 degrés dans le sens anti-horaire",
+    "success": "La photo a bien été prise.",
+    "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": {
     "createPaper": "Ajouter un papier",