From e8754260e25f2ff9fc88c6c6c42ab424b53ea4ef Mon Sep 17 00:00:00 2001
From: AlexisG <merkkur39@gmail.com>
Date: Thu, 31 Oct 2024 10:26:04 +0100
Subject: [PATCH 1/5] refactor(ScanResultCard): Split component to process
 image and pdf files

---
 .../ModelSteps/ScanResult/ScanResultCard.jsx  | 103 ++++++------------
 .../ModelSteps/ScanResult/ScanResultCard.styl |  12 +-
 .../ScanResult/ScanResultCardImage.jsx        |  63 +++++++++++
 .../ScanResult/ScanResultCardPDF.jsx          |  32 ++++++
 4 files changed, 131 insertions(+), 79 deletions(-)
 create mode 100644 src/components/ModelSteps/ScanResult/ScanResultCardImage.jsx
 create mode 100644 src/components/ModelSteps/ScanResult/ScanResultCardPDF.jsx

diff --git a/src/components/ModelSteps/ScanResult/ScanResultCard.jsx b/src/components/ModelSteps/ScanResult/ScanResultCard.jsx
index 6a89b795..41482283 100644
--- a/src/components/ModelSteps/ScanResult/ScanResultCard.jsx
+++ b/src/components/ModelSteps/ScanResult/ScanResultCard.jsx
@@ -1,89 +1,48 @@
 import PropTypes from 'prop-types'
-import React, { useState, forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import { useFormData } from 'src/components/Contexts/FormDataProvider'
 import { useStepperDialog } from 'src/components/Contexts/StepperDialogProvider'
-import styles from 'src/components/ModelSteps/ScanResult/ScanResultCard.styl'
-import ScanResultCardActions from 'src/components/ModelSteps/ScanResult/ScanResultCardActions'
+import ScanResultCardImage from 'src/components/ModelSteps/ScanResult/ScanResultCardImage'
+import ScanResultCardPDF from 'src/components/ModelSteps/ScanResult/ScanResultCardPDF'
 import {
   getLastFormDataFile,
   isSameFile
 } from 'src/components/ModelSteps/helpers'
-import RotateImage from 'src/components/ModelSteps/widgets/RotateImage'
 
-import Box from 'cozy-ui/transpiled/react/Box'
-import Card from 'cozy-ui/transpiled/react/Card'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import Typography from 'cozy-ui/transpiled/react/Typography'
+const ScanResultCard = forwardRef((props, ref) => {
+  const { currentFile, setCurrentFile } = props
+  const { setFormData, formData } = useFormData()
+  const { currentStepIndex } = useStepperDialog()
 
-const isImageType = file => file.type.match(/image\/.*/)
-
-const ScanResultCard = forwardRef(
-  ({ currentFile, setCurrentFile, setRotationImage, rotationImage }, ref) => {
-    const { setFormData, formData } = useFormData()
-    const { currentStepIndex } = useStepperDialog()
-    const [imgWrapperMinHeight, setImgWrapperMinHeight] = useState(0)
-    const [isImageRotating, setIsImageRotating] = useState(false)
-
-    const handleSelectedFile = () => {
-      const newData = formData.data.filter(
-        data => !isSameFile(currentFile, data.file)
-      )
-      setCurrentFile(
-        getLastFormDataFile({ formData: { data: newData }, currentStepIndex })
-      )
-
-      setFormData(prev => ({
-        ...prev,
-        data: newData
-      }))
-    }
-
-    const handleRotate = () => {
-      setIsImageRotating(true)
-      setRotationImage(prev => prev - 90)
-    }
+  const handleSelectedFile = () => {
+    const newData = formData.data.filter(
+      data => !isSameFile(currentFile, data.file)
+    )
+    setCurrentFile(
+      getLastFormDataFile({ formData: { data: newData }, currentStepIndex })
+    )
 
-    const handleImageLoaded = () => {
-      setIsImageRotating(false)
-      // We don't want to recalculate the size on every rotation
-      if (ref.current && imgWrapperMinHeight === 0) {
-        const maxSize = Math.max(
-          ref.current.offsetWidth,
-          ref.current.offsetHeight
-        )
-        setImgWrapperMinHeight(maxSize)
-      }
-    }
+    setFormData(prev => ({
+      ...prev,
+      data: newData
+    }))
+  }
 
+  if (currentFile.type === 'application/pdf') {
     return (
-      <Card className="u-ta-center u-p-1 u-flex u-flex-column u-flex-justify-between">
-        <div className={styles['image-container']}>
-          {isImageType(currentFile) ? (
-            <RotateImage
-              image={URL.createObjectURL(currentFile)}
-              onLoaded={handleImageLoaded}
-              rotation={rotationImage}
-              a11n={{ 'aria-hidden': true }}
-              ref={ref}
-            />
-          ) : (
-            <>
-              <Icon icon="file-type-pdf" size={80} aria-hidden="true" />
-              <Typography className="u-mt-half">{currentFile.name}</Typography>
-            </>
-          )}
-        </div>
-        <Box display="flex" gridGap="1rem" marginTop="1rem">
-          <ScanResultCardActions
-            onRotate={handleRotate}
-            onCancel={handleSelectedFile}
-            isImageRotating={isImageRotating}
-          />
-        </Box>
-      </Card>
+      <ScanResultCardPDF {...props} handleSelectedFile={handleSelectedFile} />
     )
   }
-)
+
+  return (
+    <ScanResultCardImage
+      {...props}
+      handleSelectedFile={handleSelectedFile}
+      ref={ref}
+    />
+  )
+})
+
 ScanResultCard.displayName = 'ScanResultCard'
 
 ScanResultCard.propTypes = {
diff --git a/src/components/ModelSteps/ScanResult/ScanResultCard.styl b/src/components/ModelSteps/ScanResult/ScanResultCard.styl
index 83b0b06e..a2a319dd 100644
--- a/src/components/ModelSteps/ScanResult/ScanResultCard.styl
+++ b/src/components/ModelSteps/ScanResult/ScanResultCard.styl
@@ -2,18 +2,16 @@
   width 100%
   padding-top 100%
   position relative
-
-.image-container:before
-  content ""
-  display block
-  margin-top -100%
-
-.image-container
   display flex
   flex-direction column
   align-items center
   justify-content center
 
+  &:before
+    content ""
+    display block
+    margin-top -100%
+
   & > img
     position absolute
     top 0
diff --git a/src/components/ModelSteps/ScanResult/ScanResultCardImage.jsx b/src/components/ModelSteps/ScanResult/ScanResultCardImage.jsx
new file mode 100644
index 00000000..74902c8b
--- /dev/null
+++ b/src/components/ModelSteps/ScanResult/ScanResultCardImage.jsx
@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types'
+import React, { useState, forwardRef } from 'react'
+import styles from 'src/components/ModelSteps/ScanResult/ScanResultCard.styl'
+import ScanResultCardActions from 'src/components/ModelSteps/ScanResult/ScanResultCardActions'
+import RotateImage from 'src/components/ModelSteps/widgets/RotateImage'
+
+import Box from 'cozy-ui/transpiled/react/Box'
+import Card from 'cozy-ui/transpiled/react/Card'
+
+const ScanResultCardImage = forwardRef((props, ref) => {
+  const { currentFile, handleSelectedFile, setRotationImage, rotationImage } =
+    props
+  const [imgWrapperMinHeight, setImgWrapperMinHeight] = useState(0)
+  const [isImageRotating, setIsImageRotating] = useState(false)
+
+  const handleRotate = () => {
+    setIsImageRotating(true)
+    setRotationImage(prev => prev - 90)
+  }
+
+  const handleImageLoaded = () => {
+    setIsImageRotating(false)
+    // We don't want to recalculate the size on every rotation
+    if (ref.current && imgWrapperMinHeight === 0) {
+      const maxSize = Math.max(
+        ref.current.offsetWidth,
+        ref.current.offsetHeight
+      )
+      setImgWrapperMinHeight(maxSize)
+    }
+  }
+
+  return (
+    <Card className="u-ta-center u-p-1 u-flex u-flex-column u-flex-justify-between">
+      <div className={styles['image-container']}>
+        <RotateImage
+          image={URL.createObjectURL(currentFile)}
+          onLoaded={handleImageLoaded}
+          rotation={rotationImage}
+          a11n={{ 'aria-hidden': true }}
+          ref={ref}
+        />
+      </div>
+      <Box display="flex" gridGap="1rem" marginTop="1rem">
+        <ScanResultCardActions
+          onRotate={handleRotate}
+          onCancel={handleSelectedFile}
+          isImageRotating={isImageRotating}
+        />
+      </Box>
+    </Card>
+  )
+})
+ScanResultCardImage.displayName = 'ScanResultCardImage'
+
+ScanResultCardImage.propTypes = {
+  currentFile: PropTypes.object.isRequired,
+  handleSelectedFile: PropTypes.func.isRequired,
+  setRotationImage: PropTypes.func.isRequired,
+  rotationImage: PropTypes.number.isRequired
+}
+
+export default ScanResultCardImage
diff --git a/src/components/ModelSteps/ScanResult/ScanResultCardPDF.jsx b/src/components/ModelSteps/ScanResult/ScanResultCardPDF.jsx
new file mode 100644
index 00000000..86d4e282
--- /dev/null
+++ b/src/components/ModelSteps/ScanResult/ScanResultCardPDF.jsx
@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from 'src/components/ModelSteps/ScanResult/ScanResultCard.styl'
+import ScanResultCardActions from 'src/components/ModelSteps/ScanResult/ScanResultCardActions'
+
+import Box from 'cozy-ui/transpiled/react/Box'
+import Card from 'cozy-ui/transpiled/react/Card'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+const ScanResultCardPDF = props => {
+  const { currentFile, handleSelectedFile } = props
+
+  return (
+    <Card className="u-ta-center u-p-1 u-flex u-flex-column u-flex-justify-between">
+      <div className={styles['image-container']}>
+        <Icon icon="file-type-pdf" size={80} aria-hidden="true" />
+        <Typography className="u-mt-half">{currentFile.name}</Typography>
+      </div>
+      <Box display="flex" gridGap="1rem" marginTop="1rem">
+        <ScanResultCardActions onCancel={handleSelectedFile} />
+      </Box>
+    </Card>
+  )
+}
+
+ScanResultCardPDF.propTypes = {
+  currentFile: PropTypes.object.isRequired,
+  handleSelectedFile: PropTypes.func.isRequired
+}
+
+export default ScanResultCardPDF

From a9e383a94e72269a1cc2eba429ca32884b069f30 Mon Sep 17 00:00:00 2001
From: AlexisG <merkkur39@gmail.com>
Date: Thu, 31 Oct 2024 10:59:23 +0100
Subject: [PATCH 2/5] refactor: Move ScanResultCard components to the specific
 folder

---
 .../ScanResult/{ => ScanResultCard}/ScanResultCard.jsx        | 4 ++--
 .../ScanResult/{ => ScanResultCard}/ScanResultCard.styl       | 0
 .../ScanResult/{ => ScanResultCard}/ScanResultCardActions.jsx | 0
 .../ScanResult/{ => ScanResultCard}/ScanResultCardImage.jsx   | 4 ++--
 .../ScanResult/{ => ScanResultCard}/ScanResultCardPDF.jsx     | 4 ++--
 src/components/ModelSteps/ScanResult/ScanResultDialog.jsx     | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)
 rename src/components/ModelSteps/ScanResult/{ => ScanResultCard}/ScanResultCard.jsx (95%)
 rename src/components/ModelSteps/ScanResult/{ => ScanResultCard}/ScanResultCard.styl (100%)
 rename src/components/ModelSteps/ScanResult/{ => ScanResultCard}/ScanResultCardActions.jsx (100%)
 rename src/components/ModelSteps/ScanResult/{ => ScanResultCard}/ScanResultCardImage.jsx (96%)
 rename src/components/ModelSteps/ScanResult/{ => ScanResultCard}/ScanResultCardPDF.jsx (93%)

diff --git a/src/components/ModelSteps/ScanResult/ScanResultCard.jsx b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCard.jsx
similarity index 95%
rename from src/components/ModelSteps/ScanResult/ScanResultCard.jsx
rename to src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCard.jsx
index 41482283..200a3a22 100644
--- a/src/components/ModelSteps/ScanResult/ScanResultCard.jsx
+++ b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCard.jsx
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types'
 import React, { forwardRef } from 'react'
 import { useFormData } from 'src/components/Contexts/FormDataProvider'
 import { useStepperDialog } from 'src/components/Contexts/StepperDialogProvider'
-import ScanResultCardImage from 'src/components/ModelSteps/ScanResult/ScanResultCardImage'
-import ScanResultCardPDF from 'src/components/ModelSteps/ScanResult/ScanResultCardPDF'
+import ScanResultCardImage from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImage'
+import ScanResultCardPDF from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF'
 import {
   getLastFormDataFile,
   isSameFile
diff --git a/src/components/ModelSteps/ScanResult/ScanResultCard.styl b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCard.styl
similarity index 100%
rename from src/components/ModelSteps/ScanResult/ScanResultCard.styl
rename to src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCard.styl
diff --git a/src/components/ModelSteps/ScanResult/ScanResultCardActions.jsx b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardActions.jsx
similarity index 100%
rename from src/components/ModelSteps/ScanResult/ScanResultCardActions.jsx
rename to src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardActions.jsx
diff --git a/src/components/ModelSteps/ScanResult/ScanResultCardImage.jsx b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImage.jsx
similarity index 96%
rename from src/components/ModelSteps/ScanResult/ScanResultCardImage.jsx
rename to src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImage.jsx
index 74902c8b..848c9c6d 100644
--- a/src/components/ModelSteps/ScanResult/ScanResultCardImage.jsx
+++ b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImage.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { useState, forwardRef } from 'react'
-import styles from 'src/components/ModelSteps/ScanResult/ScanResultCard.styl'
-import ScanResultCardActions from 'src/components/ModelSteps/ScanResult/ScanResultCardActions'
+import styles from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCard.styl'
+import ScanResultCardActions from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardActions'
 import RotateImage from 'src/components/ModelSteps/widgets/RotateImage'
 
 import Box from 'cozy-ui/transpiled/react/Box'
diff --git a/src/components/ModelSteps/ScanResult/ScanResultCardPDF.jsx b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx
similarity index 93%
rename from src/components/ModelSteps/ScanResult/ScanResultCardPDF.jsx
rename to src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx
index 86d4e282..91d85737 100644
--- a/src/components/ModelSteps/ScanResult/ScanResultCardPDF.jsx
+++ b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import styles from 'src/components/ModelSteps/ScanResult/ScanResultCard.styl'
-import ScanResultCardActions from 'src/components/ModelSteps/ScanResult/ScanResultCardActions'
+import styles from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCard.styl'
+import ScanResultCardActions from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardActions'
 
 import Box from 'cozy-ui/transpiled/react/Box'
 import Card from 'cozy-ui/transpiled/react/Card'
diff --git a/src/components/ModelSteps/ScanResult/ScanResultDialog.jsx b/src/components/ModelSteps/ScanResult/ScanResultDialog.jsx
index 2397902a..1ae4f02d 100644
--- a/src/components/ModelSteps/ScanResult/ScanResultDialog.jsx
+++ b/src/components/ModelSteps/ScanResult/ScanResultDialog.jsx
@@ -5,7 +5,7 @@ import CompositeHeaderImage from 'src/components/CompositeHeader/CompositeHeader
 import { useFormData } from 'src/components/Contexts/FormDataProvider'
 import { useStepperDialog } from 'src/components/Contexts/StepperDialogProvider'
 import OcrProcessingDialog from 'src/components/ModelSteps/ScanResult/OcrProcessingDialog'
-import ScanResultCard from 'src/components/ModelSteps/ScanResult/ScanResultCard'
+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 StepperDialogTitle from 'src/components/StepperDialog/StepperDialogTitle'

From 9a8e91fb985067bde5317a3bdfd4c9216f7bd7fd Mon Sep 17 00:00:00 2001
From: AlexisG <merkkur39@gmail.com>
Date: Thu, 31 Oct 2024 11:07:00 +0100
Subject: [PATCH 3/5] refactor(ScanResultCardActions): Split component

---
 .../ScanResultCard/ScanResultCardImage.jsx    |  4 +--
 ...ons.jsx => ScanResultCardImageActions.jsx} | 10 +++++--
 .../ScanResultCard/ScanResultCardPDF.jsx      |  4 +--
 .../ScanResultCardPDFActions.jsx              | 29 +++++++++++++++++++
 4 files changed, 40 insertions(+), 7 deletions(-)
 rename src/components/ModelSteps/ScanResult/ScanResultCard/{ScanResultCardActions.jsx => ScanResultCardImageActions.jsx} (88%)
 create mode 100644 src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDFActions.jsx

diff --git a/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImage.jsx b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImage.jsx
index 848c9c6d..995c9ac6 100644
--- a/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImage.jsx
+++ b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImage.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { useState, forwardRef } from 'react'
 import styles from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCard.styl'
-import ScanResultCardActions from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardActions'
+import ScanResultCardImageActions from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImageActions'
 import RotateImage from 'src/components/ModelSteps/widgets/RotateImage'
 
 import Box from 'cozy-ui/transpiled/react/Box'
@@ -42,7 +42,7 @@ const ScanResultCardImage = forwardRef((props, ref) => {
         />
       </div>
       <Box display="flex" gridGap="1rem" marginTop="1rem">
-        <ScanResultCardActions
+        <ScanResultCardImageActions
           onRotate={handleRotate}
           onCancel={handleSelectedFile}
           isImageRotating={isImageRotating}
diff --git a/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardActions.jsx b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImageActions.jsx
similarity index 88%
rename from src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardActions.jsx
rename to src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImageActions.jsx
index 5974a07a..fca2c794 100644
--- a/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardActions.jsx
+++ b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardImageActions.jsx
@@ -18,7 +18,11 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-const ScanResultCardActions = ({ onRotate, onCancel, isImageRotating }) => {
+const ScanResultCardImageActions = ({
+  onRotate,
+  onCancel,
+  isImageRotating
+}) => {
   const classes = useStyles()
   const { t } = useI18n()
   const { isDesktop } = useBreakpoints()
@@ -49,10 +53,10 @@ const ScanResultCardActions = ({ onRotate, onCancel, isImageRotating }) => {
   )
 }
 
-ScanResultCardActions.propTypes = {
+ScanResultCardImageActions.propTypes = {
   onCancel: PropTypes.func,
   onRotate: PropTypes.func,
   isImageRotating: PropTypes.bool
 }
 
-export default ScanResultCardActions
+export default ScanResultCardImageActions
diff --git a/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx
index 91d85737..71ab8d23 100644
--- a/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx
+++ b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import styles from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCard.styl'
-import ScanResultCardActions from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardActions'
+import ScanResultCardPDFActions from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDFActions'
 
 import Box from 'cozy-ui/transpiled/react/Box'
 import Card from 'cozy-ui/transpiled/react/Card'
@@ -18,7 +18,7 @@ const ScanResultCardPDF = props => {
         <Typography className="u-mt-half">{currentFile.name}</Typography>
       </div>
       <Box display="flex" gridGap="1rem" marginTop="1rem">
-        <ScanResultCardActions onCancel={handleSelectedFile} />
+        <ScanResultCardPDFActions onCancel={handleSelectedFile} />
       </Box>
     </Card>
   )
diff --git a/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDFActions.jsx b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDFActions.jsx
new file mode 100644
index 00000000..7d49e6fe
--- /dev/null
+++ b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDFActions.jsx
@@ -0,0 +1,29 @@
+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`)}
+      fullWidth
+      variant="secondary"
+      onClick={onCancel}
+    />
+  )
+}
+
+ScanResultCardPDFActions.propTypes = {
+  onCancel: PropTypes.func
+}
+
+export default ScanResultCardPDFActions

From 4152a18e78e3ef8c682fbc7d5a28b7aa63b1b50d Mon Sep 17 00:00:00 2001
From: AlexisG <merkkur39@gmail.com>
Date: Thu, 31 Oct 2024 11:22:52 +0100
Subject: [PATCH 4/5] feat: View PDF document preview when adding a document

And add react-pdf to deps.
The version number is intended to be synchronized
with the version present in cozy-viewer.
---
 package.json                                  |  2 +
 .../ScanResultCard/ScanResultCardPDF.jsx      |  4 +-
 src/components/PdfOverview/PdfOverview.tsx    | 39 +++++++++++++++++++
 yarn.lock                                     | 26 +++++++++++++
 4 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 src/components/PdfOverview/PdfOverview.tsx

diff --git a/package.json b/package.json
index 9a91b208..3f432022 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@testing-library/jest-dom": "6.6.2",
     "@testing-library/react": "16.0.1",
     "@testing-library/react-hooks": "8.0.1",
+    "@types/react-pdf": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "5.54.0",
     "@typescript-eslint/parser": "5.54.0",
     "babel-preset-cozy-app": "2.0.2",
@@ -105,6 +106,7 @@
     "react-dom": "18.2.0",
     "react-input-mask": "3.0.0-alpha.2",
     "react-inspector": "5.1.1",
+    "react-pdf": "^5.7.2",
     "react-router-dom": "6.23.1",
     "terser-webpack-plugin": "1.4.5"
   }
diff --git a/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx
index 71ab8d23..b322017d 100644
--- a/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx
+++ b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx
@@ -2,10 +2,10 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import styles from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCard.styl'
 import ScanResultCardPDFActions from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDFActions'
+import { PdfOverview } from 'src/components/PdfOverview/PdfOverview'
 
 import Box from 'cozy-ui/transpiled/react/Box'
 import Card from 'cozy-ui/transpiled/react/Card'
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const ScanResultCardPDF = props => {
@@ -14,7 +14,7 @@ const ScanResultCardPDF = props => {
   return (
     <Card className="u-ta-center u-p-1 u-flex u-flex-column u-flex-justify-between">
       <div className={styles['image-container']}>
-        <Icon icon="file-type-pdf" size={80} aria-hidden="true" />
+        <PdfOverview file={currentFile} />
         <Typography className="u-mt-half">{currentFile.name}</Typography>
       </div>
       <Box display="flex" gridGap="1rem" marginTop="1rem">
diff --git a/src/components/PdfOverview/PdfOverview.tsx b/src/components/PdfOverview/PdfOverview.tsx
new file mode 100644
index 00000000..bf24f016
--- /dev/null
+++ b/src/components/PdfOverview/PdfOverview.tsx
@@ -0,0 +1,39 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Document, Page } from 'react-pdf'
+
+interface PdfOverviewProps {
+  file: File
+}
+
+const styles = {
+  container: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center'
+  }
+}
+
+export const PdfOverview: React.FC<PdfOverviewProps> = ({
+  file
+}: PdfOverviewProps) => {
+  const parentRef = useRef<HTMLDivElement | null>(null)
+  const [parentWidth, setParentWidth] = useState(0)
+
+  useEffect(() => {
+    const updateSize = (): void => {
+      if (parentRef.current) {
+        const width = parentRef.current.getBoundingClientRect().width
+        setParentWidth(width)
+      }
+    }
+    updateSize()
+  }, [])
+
+  return (
+    <div style={styles.container} ref={parentRef}>
+      <Document file={file}>
+        <Page pageNumber={1} width={parentWidth} />
+      </Document>
+    </div>
+  )
+}
diff --git a/yarn.lock b/yarn.lock
index 775e9906..f78347b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3052,6 +3052,14 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/react-pdf@^5.0.0":
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/@types/react-pdf/-/react-pdf-5.7.4.tgz#031a46a13f82390f84f490e66b0d263c8b7b3728"
+  integrity sha512-Im/HY4QhkhYcG+FJoGCy0WoGvdgYcpm+89W1lK5K9KBEQCy1YqTxhmWey5UkdnIPymmEDyeVJXdK0lPjtcvMyA==
+  dependencies:
+    "@types/react" "*"
+    pdfjs-dist "^2.10.377"
+
 "@types/react-transition-group@^4.2.0":
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.1.tgz#e1a3cb278df7f47f17b5082b1b3da17170bd44b1"
@@ -6387,6 +6395,11 @@ domhandler@^4.0.0, domhandler@^4.2.0:
   dependencies:
     domelementtype "^2.2.0"
 
+dommatrix@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/dommatrix/-/dommatrix-1.0.3.tgz#e7c18e8d6f3abdd1fef3dd4aa74c4d2e620a0525"
+  integrity sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww==
+
 domready@1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/domready/-/domready-1.0.8.tgz#91f252e597b65af77e745ae24dd0185d5e26d58c"
@@ -12400,6 +12413,14 @@ pdfjs-dist@2.12.313:
   resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-2.12.313.tgz#62f2273737bb956267ae2e02cdfaddcb1099819c"
   integrity sha512-1x6iXO4Qnv6Eb+YFdN5JdUzt4pAkxSp3aLAYPX93eQCyg/m7QFzXVWJHJVtoW48CI8HCXju4dSkhQZwoheL5mA==
 
+pdfjs-dist@^2.10.377:
+  version "2.16.105"
+  resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-2.16.105.tgz#937b9c4a918f03f3979c88209d84c1ce90122c2a"
+  integrity sha512-J4dn41spsAwUxCpEoVf6GVoz908IAA3mYiLmNxg8J9kfRXc2jxpbUepcP0ocp0alVNLFthTAM8DZ1RaHh8sU0A==
+  dependencies:
+    dommatrix "^1.0.3"
+    web-streams-polyfill "^3.2.1"
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -15912,6 +15933,11 @@ web-resource-inliner@^4.2.1:
     valid-data-url "^2.0.0"
     xtend "^4.0.2"
 
+web-streams-polyfill@^3.2.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz#2073b91a2fdb1fbfbd401e7de0ac9f8214cecb4b"
+  integrity sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==
+
 webidl-conversions@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"

From bd8c62815fbd1f7407f9b2a755e9d51414d9046f Mon Sep 17 00:00:00 2001
From: AlexisG <merkkur39@gmail.com>
Date: Thu, 31 Oct 2024 11:55:05 +0100
Subject: [PATCH 5/5] feat(ScanResultCardPDF): Improve readability filename

---
 .../ScanResult/ScanResultCard/ScanResultCardPDF.jsx           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx
index b322017d..569a36f5 100644
--- a/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx
+++ b/src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx
@@ -10,12 +10,14 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const ScanResultCardPDF = props => {
   const { currentFile, handleSelectedFile } = props
+  // Replace all "_" with a space in the filename for better readability
+  const fileName = currentFile.name.replaceAll('_', ' ')
 
   return (
     <Card className="u-ta-center u-p-1 u-flex u-flex-column u-flex-justify-between">
       <div className={styles['image-container']}>
         <PdfOverview file={currentFile} />
-        <Typography className="u-mt-half">{currentFile.name}</Typography>
+        <Typography className="u-mt-half">{fileName}</Typography>
       </div>
       <Box display="flex" gridGap="1rem" marginTop="1rem">
         <ScanResultCardPDFActions onCancel={handleSelectedFile} />