feat(Viewer): Add support of contract type in enhanced viewer

cozy · Feb 13, 2023 · 69ca4c8 · 69ca4c8
1 parent 3d1c855
commit 69ca4c8
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 37 deletions.
diff --git a/react/Viewer/Panel/QualificationListItemInformation.jsx b/react/Viewer/Panel/QualificationListItemInformation.jsx
@@ -1,6 +1,8 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
+import { models } from 'cozy-client'
+
 import ListItem from '../../MuiCozyTheme/ListItem'
 import ListItemSecondaryAction from '../../MuiCozyTheme/ListItemSecondaryAction'
 import IconButton from '../../IconButton'
@@ -10,7 +12,13 @@ import QualificationListItemText from './QualificationListItemText'
 import { useI18n } from '../../I18n'
 import MidEllipsis from '../../MidEllipsis'
 
-export const makeInformationValue = (name, value, t) => {
+const {
+  document: {
+    locales: { getBoundT }
+  }
+} = models
+
+export const makeInformationValue = ({ name, value, t, scannerT }) => {
   if (!value) {
     return t('Viewer.panel.qualification.noInfo')
   }
@@ -21,15 +29,20 @@ export const makeInformationValue = (name, value, t) => {
     })}`
   }
 
+  if (name === 'contractType') {
+    return scannerT(`Scan.attributes.contractType.${value}`)
+  }
+
   return <MidEllipsis text={value} />
 }
 
 const QualificationListItemInformation = forwardRef(
   ({ formatedMetadataQualification, toggleActionsMenu }, ref) => {
-    const { t } = useI18n()
+    const { t, lang } = useI18n()
+    const scannerT = getBoundT(lang)
     const { name, value } = formatedMetadataQualification
 
-    const currentValue = makeInformationValue(name, value, t)
+    const currentValue = makeInformationValue({ name, value, t, scannerT })
 
     return (
       <ListItem className={'u-pl-2 u-pr-3'}>

diff --git a/react/Viewer/Panel/QualificationListItemInformation.spec.jsx b/react/Viewer/Panel/QualificationListItemInformation.spec.jsx
@@ -62,22 +62,42 @@ describe('QualificationListItemInformation', () => {
     })
 
     it('should return "MidEllipsis" component with the value', () => {
-      const res = makeInformationValue('metadataName', 'metadataValue', mockT)
+      const res = makeInformationValue({
+        name: 'metadataName',
+        value: 'metadataValue',
+        t: mockT,
+        scannerT: mockT
+      })
 
       expect(res).toEqual(<MidEllipsis text="metadataValue" />)
     })
     it('should return value with suffix locale', () => {
-      const res = makeInformationValue('noticePeriod', '88', mockT)
+      const res = makeInformationValue({
+        name: 'noticePeriod',
+        value: '88',
+        t: mockT,
+        scannerT: mockT
+      })
 
       expect(res).toEqual('88 Viewer.panel.qualification.information.day')
     })
     it('should return "noInfo" value', () => {
-      const res = makeInformationValue('metadataName', '', mockT)
+      const res = makeInformationValue({
+        name: 'metadataName',
+        value: '',
+        t: mockT,
+        scannerT: mockT
+      })
 
       expect(res).toEqual('Viewer.panel.qualification.noInfo')
     })
     it('should return noInfo value with "noticePeriod" metadata name', () => {
-      const res = makeInformationValue('noticePeriod', '', mockT)
+      const res = makeInformationValue({
+        name: 'noticePeriod',
+        value: '',
+        t: mockT,
+        scannerT: mockT
+      })
 
       expect(res).toEqual('Viewer.panel.qualification.noInfo')
     })

diff --git a/react/Viewer/Readme.md b/react/Viewer/Readme.md
@@ -38,29 +38,28 @@ The `Viewer` can display an **information panel** to show additional information
 ### Demo
 
 ```jsx
-import cx from 'classnames';
-import { makeStyles } from 'cozy-ui/transpiled/react/styles';
-import Variants from 'cozy-ui/docs/components/Variants';
-import Card from 'cozy-ui/transpiled/react/Card';
-import Checkbox from 'cozy-ui/transpiled/react/Checkbox';
-import Viewer from 'cozy-ui/transpiled/react/Viewer';
-import Stack from 'cozy-ui/transpiled/react/Stack';
-import Paper from 'cozy-ui/transpiled/react/Paper';
-import Typography from 'cozy-ui/transpiled/react/Typography';
-import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media';
-import Icon from 'cozy-ui/transpiled/react/Icon';
-import CarbonCopyIcon from 'cozy-ui/transpiled/react/Icons/CarbonCopy';
+import cx from 'classnames'
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+import Variants from 'cozy-ui/docs/components/Variants'
+import Card from 'cozy-ui/transpiled/react/Card'
+import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
+import Viewer from 'cozy-ui/transpiled/react/Viewer'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CarbonCopyIcon from 'cozy-ui/transpiled/react/Icons/CarbonCopy'
 // The DemoProvider inserts a fake cozy-client in the React context.
-import DemoProvider from './docs/DemoProvider';
-import Overlay from 'cozy-ui/transpiled/react/Overlay';
-import Button from 'cozy-ui/transpiled/react/Buttons';
-import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download';
-import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share';
-import { isValidForPanel } from 'cozy-ui/transpiled/react/Viewer/helpers';
-import getPanelBlocks, { panelBlocksSpecs } from 'cozy-ui/transpiled/react/Viewer/Panel/getPanelBlocks';
-import FooterActionButtons from 'cozy-ui/transpiled/react/Viewer/Footer/FooterActionButtons';
-import ForwardOrDownloadButton from 'cozy-ui/transpiled/react/Viewer/Footer/ForwardOrDownloadButton';
-
+import DemoProvider from './docs/DemoProvider'
+import Overlay from 'cozy-ui/transpiled/react/Overlay'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
+import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
+import { isValidForPanel } from 'cozy-ui/transpiled/react/Viewer/helpers'
+import getPanelBlocks, { panelBlocksSpecs } from 'cozy-ui/transpiled/react/Viewer/Panel/getPanelBlocks'
+import FooterActionButtons from 'cozy-ui/transpiled/react/Viewer/Footer/FooterActionButtons'
+import ForwardOrDownloadButton from 'cozy-ui/transpiled/react/Viewer/Footer/ForwardOrDownloadButton'
 
 // We provide a collection of (fake) io.cozy.files to be rendered
 const files = [
@@ -142,7 +141,7 @@ const files = [
     name: 'Unsupported file type',
     mime: '???/???'
   }
-];
+]
 
 const ShareButtonFake = () => {
   return (
@@ -156,18 +155,18 @@ const ShareButtonFake = () => {
       }}
     />
   )
-};
+}
 
 // The host app will usually need a small wrapper to display the Viewer. This is a very small example of such a wrapper that handles opening, closing, and navigating between files.
 initialState = {
   viewerOpened: isTesting(),
   currentIndex: 0,
   showToolbarCloseButton: true
-};
+}
 
 const initialVariants = [
   { navigation: true, toolbar: true, onlyOfficeEnabled: true }
-];
+]
 
 const getURL = (file) => {
   if (file.encrypted && file.class === 'text') {
@@ -180,13 +179,15 @@ const getURL = (file) => {
   return null
 }
 
-const toggleViewer = () => setState({ viewerOpened: !state.viewerOpened });
-const handleToggleToolbarClose = () => setState({ showToolbarCloseButton: !state.showToolbarCloseButton });
-const onFileChange = (file, nextIndex) => setState({ currentIndex: nextIndex, currentURL: getURL(file) });
+const toggleViewer = () => setState({ viewerOpened: !state.viewerOpened })
+const handleToggleToolbarClose = () => setState({ showToolbarCloseButton: !state.showToolbarCloseButton })
+const onFileChange = (file, nextIndex) => setState({ currentIndex: nextIndex, currentURL: getURL(file) })
 const editPathByModelProps = {
   information: `#!/Viewer?metadata=__NAME__`,
   page: `#!/Viewer`
-};
+}
+
+;
 
 <DemoProvider>
   <Variants initialVariants={initialVariants}>{

diff --git a/react/Viewer/helpers.js b/react/Viewer/helpers.js
@@ -28,6 +28,7 @@ export const knownInformationMetadataNames = [
   'country',
   'passportNumber',
   'refTaxIncome',
+  'contractType',
   'noticePeriod'
 ]
 export const knownOtherMetadataNames = ['contact', 'page', 'qualification']

diff --git a/react/Viewer/locales/en.json b/react/Viewer/locales/en.json
@@ -60,6 +60,7 @@
             "country": "Country of delivery",
             "passportNumber": "Passport number",
             "refTaxIncome": "Reference tax income",
+            "contractType": "Contract type",
             "noticePeriod": "Expiration alert"
           },
           "day": "day |||| days"

diff --git a/react/Viewer/locales/fr.json b/react/Viewer/locales/fr.json
@@ -60,6 +60,7 @@
             "country": "Pays de délivrance",
             "passportNumber": "Numéro du passeport",
             "refTaxIncome": "Revenu fiscal de référence",
+            "contractType": "Type de contat",
             "noticePeriod": "Alerte d’expiration"
           },
           "day": "jour |||| jours"