cozy-ui 58.3.0 → 58.4.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [58.4.0](https://github.com/cozy/cozy-ui/compare/v58.3.0...v58.4.0) (2021-12-14)
+
+
+### Features
+
+* Added Qualification panel block ([9fbaaa6](https://github.com/cozy/cozy-ui/commit/9fbaaa6))
+* Upgrade cozy-client ([8820f81](https://github.com/cozy/cozy-ui/commit/8820f81))
+
 # [58.3.0](https://github.com/cozy/cozy-ui/compare/v58.2.0...v58.3.0) (2021-12-13)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "58.3.0",
+  "version": "58.4.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -87,7 +87,7 @@
     "commitlint": "7.6.1",
     "commitlint-config-cozy": "0.6.0",
     "copyfiles": "2.1.1",
-    "cozy-client": "^18.1.2",
+    "cozy-client": "^27.5.1",
     "cozy-device-helper": "1.12.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
@@ -164,7 +164,7 @@
   },
   "peerDependencies": {
     "@material-ui/core": "4",
-    "cozy-client": ">=18.1.2",
+    "cozy-client": ">=27.5.1",
     "cozy-device-helper": "^1.10.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",

package/react/Viewer/Footer/BottomSheetContent.jsx

@@ -40,7 +40,7 @@ const BottomSheetContent = forwardRef(({ file, disableSharing }, ref) => {
           elevation={index === panelBlocks.length - 1 ? 0 : 2}
           square
         >
-          <Typography variant="h4">
+          <Typography variant="h4" className={'u-pv-1 u-ph-1'}>
             <PanelBlock file={file} />
           </Typography>
         </Paper>

package/react/Viewer/Panel/Certifications.jsx

@@ -36,7 +36,7 @@ const Certifications = ({ file, t }) => {
   const hasElectronicSafe = has(file, 'metadata.electronicSafe')
 
   return (
-    <div className="u-pv-1-half u-ph-2">
+    <>
       {hasCarbonCopy && (
         <Certification
           icon={CarbonCopyIcon}
@@ -51,7 +51,7 @@ const Certifications = ({ file, t }) => {
           caption={t('Viewer.panel.certifications.electronicSafe.caption')}
         />
       )}
-    </div>
+    </>
   )
 }
 

package/react/Viewer/Panel/PanelContent.jsx

@@ -30,7 +30,7 @@ const PanelContent = ({ file, t }) => {
           elevation={2}
           square
         >
-          <Typography variant="h4">
+          <Typography variant="h4" className={'u-pv-1 u-ph-2'}>
             <PanelBlock file={file} />
           </Typography>
         </Paper>

package/react/Viewer/Panel/Qualification.jsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { useQuery, models, getReferencedBy } from 'cozy-client'
+
+import List from '../../MuiCozyTheme/List'
+import ListItem from '../../MuiCozyTheme/ListItem'
+import QualificationListItemText from './QualificationListItemText'
+import { withViewerLocales } from '../withViewerLocales'
+import { buildContactByIdsQuery } from '../queries'
+
+const {
+  contact: { getDisplayName },
+  document: {
+    locales: { getBoundT }
+  }
+} = models
+
+const Qualification = ({ file = {}, t, f, lang }) => {
+  const scannerT = getBoundT(lang)
+
+  const { name: filename, metadata = {} } = file
+  const {
+    qualification = {},
+    page: pageLabel,
+    datetime,
+    datetimeLabel
+  } = metadata
+
+  const contactIds = getReferencedBy(file, 'io.cozy.contacts').map(
+    ref => ref.id
+  )
+
+  const contactByIdsQuery = buildContactByIdsQuery(contactIds)
+  const { data: contactList } = useQuery(
+    contactByIdsQuery.definition,
+    contactByIdsQuery.options
+  )
+
+  const contactsFullname = Array.isArray(contactList)
+    ? contactList.map(contact => `${getDisplayName(contact)}`).join(', ')
+    : ''
+
+  return (
+    <List>
+      {datetime && (
+        <ListItem className={'u-ph-0'}>
+          <QualificationListItemText
+            primary={t(
+              `Viewer.panel.qualification.date.title.${
+                datetimeLabel === 'datetime' || datetimeLabel === undefined
+                  ? 'addedOn'
+                  : datetimeLabel
+              }`
+            )}
+            secondary={f(datetime, 'DD/MM/YYYY')}
+          />
+        </ListItem>
+      )}
+      {contactsFullname && (
+        <ListItem className={'u-ph-0'}>
+          <QualificationListItemText
+            primary={t('Viewer.panel.qualification.identity')}
+            secondary={contactsFullname}
+          />
+        </ListItem>
+      )}
+      <ListItem className={'u-ph-0'}>
+        <QualificationListItemText
+          primary={t('Viewer.panel.qualification.label.title')}
+          secondary={
+            pageLabel
+              ? t(`Viewer.panel.qualification.label.${pageLabel}`)
+              : filename
+          }
+        />
+      </ListItem>
+      <ListItem className={'u-ph-0'}>
+        <QualificationListItemText
+          primary={t('Viewer.panel.qualification.qualification')}
+          secondary={scannerT(`Scan.items.${qualification.label}`)}
+        />
+      </ListItem>
+    </List>
+  )
+}
+
+Qualification.propTypes = {
+  file: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired,
+  f: PropTypes.func.isRequired,
+  lang: PropTypes.string.isRequired
+}
+
+export default withViewerLocales(Qualification)

package/react/Viewer/Panel/QualificationListItemText.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import ListItemText from '../../ListItemText'
+import Typography from '../../Typography'
+
+const QualificationListItemText = ({ primary, secondary }) => {
+  return (
+    <ListItemText
+      className={'u-pv-0'}
+      disableTypography
+      primary={<Typography variant={'caption'}>{primary}</Typography>}
+      secondary={<Typography variant={'body1'}>{secondary}</Typography>}
+    />
+  )
+}
+
+QualificationListItemText.propTypes = {
+  primary: PropTypes.string.isRequired,
+  secondary: PropTypes.string.isRequired
+}
+
+export default QualificationListItemText

package/react/Viewer/Panel/getPanelBlocks.jsx

@@ -1,9 +1,18 @@
 import KonnectorBlock from 'cozy-harvest-lib/dist/components/KonnectorBlock'
 
-import { hasCertifications, isFromKonnector } from '../helpers'
+import {
+  hasCertifications,
+  hasQualifications,
+  isFromKonnector
+} from '../helpers'
 import Certifications from './Certifications'
+import Qualification from './Qualification'
 
 export const panelBlocksSpecs = {
+  qualifications: {
+    condition: hasQualifications,
+    component: Qualification
+  },
   konnector: {
     condition: isFromKonnector,
     component: KonnectorBlock

package/react/Viewer/Readme.md

@@ -18,7 +18,7 @@ import cx from 'classnames';
 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 { ViewerWithCustomPanelAndFooter as Viewer } from 'cozy-ui/transpiled/react/Viewer';
+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';
@@ -54,19 +54,20 @@ const files = [
     class: 'pdf',
     name: 'Demo.pdf',
     mime: 'application/pdf',
-    links: {
-      preview: 'https://viewerdemo.cozycloud.cc/IMG_0062.PNG'
-    },
     metadata: {
-      carbonCopy: true
+      carbonCopy: true,
+      datetime: "2021-01-01T12:00:00.000Z",
+      datetimeLabel: "referencedDate",
+      referencedDate: "2021-01-01T12:00:00.000Z",
+      qualification: {
+        label: "isp_invoice",
+        purpose: "invoice",
+        sourceCategory: "telecom",
+        sourceSubCategory: "internet",
+        subjects: ["subscription"]
+      }
     }
   },
-  {
-    _id: 'pdf',
-    class: 'pdf',
-    name: 'Demo.pdf',
-    mime: 'application/pdf'
-  },
   {
     _id: 'text',
     class: 'text',
@@ -102,113 +103,6 @@ const toggleViewer = () => setState({ viewerOpened: !state.viewerOpened });
 const handleToggleToolbarClose = () => setState({ showToolbarCloseButton: !state.showToolbarCloseButton });
 const onFileChange = (file, nextIndex) => setState({ currentIndex: nextIndex });
 
-const PanelContent = ({ file }) => {
-  return (
-    <Stack
-      spacing="s"
-      className="u-flex u-flex-column u-h-100"
-    >
-      <Paper className={'u-ph-2 u-flex u-flex-items-center u-h-3'} elevation={2} square>
-        <Typography variant="h4">Informations utiles</Typography>
-      </Paper>
-      <Paper className={'u-ph-2 u-pv-1-half'} elevation={2} square>
-        <Typography variant="body1">Titre du fichier : {file.name}</Typography>
-      </Paper>
-      <Paper className={'u-ph-2 u-pv-1-half u-flex-grow-1'} elevation={2} square>
-        <Typography variant="h4">
-          <Media className="u-mb-half">
-            <Img>
-              <Icon icon={CarbonCopyIcon} className="u-mr-half" />
-            </Img>
-            <Bd>
-              <Typography variant="body1">Copie conforme</Typography>
-            </Bd>
-          </Media>
-          <Typography variant="caption">Ce document a été fourni par Grand Lyon. Il est défini “authentique et original” par Cozy Cloud, hébergeur de votre Cozy, car il peut affirmer qu'il provient directement du service du Grand Lyon, sans qu’il n’ait subit aucune modification.</Typography>
-        </Typography>
-      </Paper>
-    </Stack>
-  )
-};
-
-const useStyles = makeStyles({
-  footer: {
-    display: 'flex',
-    alignItems: 'center',
-    width: 'calc(100% - 2rem)',
-    height: '100%',
-    paddingLeft: '1rem',
-    paddingRight: '1rem',
-    borderTop: '1px solid var(--dividerColor)'
-  }
-});
-
-const FooterContent = ({ file, toolbarRef }) => {
-  const styles = useStyles()
-  const actionButtonsRef = React.useRef()
-  const panelBlocks = getPanelBlocks({ panelBlocksSpecs, file })
-
-  if (isValidForPanel({ file })) {
-    return (
-      <BottomSheetWrapper
-        file={file}
-        actionButtonsRef={actionButtonsRef}
-        toolbarRef={toolbarRef}
-      >
-        <Stack
-          spacing="s"
-          className={cx('u-flex u-flex-column u-ov-hidden', styles.stack)}
-        >
-          <Paper className={'u-flex u-ph-1 u-pb-1'} elevation={2} square ref={actionButtonsRef}>
-            <Button
-              className="u-mr-half"
-              extension="full"
-              theme="secondary"
-              icon={ShareIcon}
-              label="Share"
-            />
-            <Button
-              extension="full"
-              theme="secondary"
-              icon={DownloadIcon}
-              label="Download"
-            />
-          </Paper>
-          {panelBlocks.map((PanelBlock, index) => (
-            <Paper
-              key={index}
-              elevation={index === panelBlocks.length - 1 ? 0 : 2}
-              square
-            >
-              <Typography variant="h4">
-                <PanelBlock file={file} />
-              </Typography>
-            </Paper>
-          ))}
-        </Stack>
-      </BottomSheetWrapper>
-    )
-  }
-
-  return (
-    <div className={styles.footer}>
-      <Button
-        className="u-mr-half"
-        extension="full"
-        theme="secondary"
-        icon={ShareIcon}
-        label="Share"
-      />
-      <Button
-        extension="full"
-        theme="secondary"
-        icon={DownloadIcon}
-        label="Download"
-      />
-    </div>
-  )
-}
-
 <DemoProvider>
   <Variants initialVariants={initialVariants}>{
       variant => (
@@ -241,13 +135,6 @@ const FooterContent = ({ file, toolbarRef }) => {
                   showToolbar: variant.toolbar,
                   showClose: state.showToolbarCloseButton
                 }}
-                panelInfoProps={{
-                  showPanel: isValidForPanel,
-                  PanelContent
-                }}
-                footerProps={{
-                  FooterContent
-                }}
               />
             </Overlay>
           )}

package/react/Viewer/helpers.js

@@ -1,10 +1,20 @@
 import has from 'lodash/has'
 
+/**
+ * @typedef {object} Reference
+ * @property {string} id - id of the document
+ * @property {string} type - doctype of the document
+ */
+
 // TODO : should be in file model of cozy-client
 export const isPlainText = (mimeType = '', fileName = '') => {
   return mimeType ? /^text\//.test(mimeType) : /\.(txt|md)$/.test(fileName)
 }
 
+export const hasQualifications = ({ file }) => {
+  return has(file, 'metadata.qualification')
+}
+
 export const hasCertifications = ({ file }) => {
   return (
     has(file, 'metadata.carbonCopy') || has(file, 'metadata.electronicSafe')
@@ -16,5 +26,9 @@ export const isFromKonnector = ({ file }) => {
 }
 
 export const isValidForPanel = ({ file }) => {
-  return hasCertifications({ file }) || isFromKonnector({ file })
+  return (
+    hasCertifications({ file }) ||
+    hasQualifications({ file }) ||
+    isFromKonnector({ file })
+  )
 }

package/react/Viewer/helpers.spec.js

@@ -1,42 +1,48 @@
 import { isPlainText } from './helpers'
 
-describe('isPlainText', () => {
-  describe('using mime types', () => {
-    it('should match mime types starting with "text/"', () => {
-      expect(isPlainText('text/plain')).toBe(true)
-      expect(isPlainText('text/markdown')).toBe(true)
-      expect(isPlainText('application/text')).toBe(false)
-      expect(isPlainText('something/text/else')).toBe(false)
-      expect(isPlainText('text/vnd.cozy.note+markdown')).toBe(true)
-    })
+describe('helpers', () => {
+  describe('isPlainText', () => {
+    describe('using mime types', () => {
+      it('should match mime types starting with "text/"', () => {
+        expect(isPlainText('text/plain')).toBe(true)
+        expect(isPlainText('text/markdown')).toBe(true)
+        expect(isPlainText('application/text')).toBe(false)
+        expect(isPlainText('something/text/else')).toBe(false)
+        expect(isPlainText('text/vnd.cozy.note+markdown')).toBe(true)
+      })
 
-    it('should not match complex text formats', () => {
-      expect(isPlainText('application/msword')).toBe(false)
-      expect(isPlainText('application/vnd.oasis.opendocument.text')).toBe(false)
-      expect(isPlainText('application/x-iwork-pages-sffpages')).toBe(false)
-    })
+      it('should not match complex text formats', () => {
+        expect(isPlainText('application/msword')).toBe(false)
+        expect(isPlainText('application/vnd.oasis.opendocument.text')).toBe(
+          false
+        )
+        expect(isPlainText('application/x-iwork-pages-sffpages')).toBe(false)
+      })
 
-    it('should not use the filename if a mime type is present', () => {
-      expect(isPlainText('application/msword', 'iswearitstext.txt')).toBe(false)
+      it('should not use the filename if a mime type is present', () => {
+        expect(isPlainText('application/msword', 'iswearitstext.txt')).toBe(
+          false
+        )
+      })
     })
-  })
 
-  describe('using file names', () => {
-    it('should match txt files', () => {
-      expect(isPlainText(undefined, 'iswearitstext.txt')).toBe(true)
-    })
+    describe('using file names', () => {
+      it('should match txt files', () => {
+        expect(isPlainText(undefined, 'iswearitstext.txt')).toBe(true)
+      })
 
-    it('should match md files', () => {
-      expect(isPlainText(undefined, 'markdown.md')).toBe(true)
-    })
+      it('should match md files', () => {
+        expect(isPlainText(undefined, 'markdown.md')).toBe(true)
+      })
 
-    it('should not match anything else', () => {
-      expect(isPlainText(undefined, 'file.doc')).toBe(false)
-      expect(isPlainText(undefined, 'file.docx')).toBe(false)
-      expect(isPlainText(undefined, 'file.pages')).toBe(false)
-      expect(isPlainText(undefined, 'file.odt')).toBe(false)
-      expect(isPlainText(undefined, 'file.csv')).toBe(false)
-      expect(isPlainText(undefined, 'file.vcf')).toBe(false)
+      it('should not match anything else', () => {
+        expect(isPlainText(undefined, 'file.doc')).toBe(false)
+        expect(isPlainText(undefined, 'file.docx')).toBe(false)
+        expect(isPlainText(undefined, 'file.pages')).toBe(false)
+        expect(isPlainText(undefined, 'file.odt')).toBe(false)
+        expect(isPlainText(undefined, 'file.csv')).toBe(false)
+        expect(isPlainText(undefined, 'file.vcf')).toBe(false)
+      })
     })
   })
 })

package/react/Viewer/index.jsx

@@ -119,7 +119,7 @@ export const toolbarPropsPropType = {
 
 Viewer.propTypes = {
   /** One `io.cozy.files` to display */
-  currentFile: PropTypes.shape(FileDoctype).isRequired,
+  currentFile: FileDoctype.isRequired,
   hasNext: PropTypes.bool,
   hasPrevious: PropTypes.bool,
   /** Called when the user wants to leave the Viewer */
@@ -170,7 +170,7 @@ const ViewerInformationsWrapper = ({
 }
 
 ViewerInformationsWrapper.propTypes = {
-  currentFile: PropTypes.shape(FileDoctype).isRequired,
+  currentFile: FileDoctype.isRequired,
   disableFooter: PropTypes.bool,
   disableSharing: PropTypes.bool,
   validForPanel: PropTypes.bool,

package/react/Viewer/locales/en.json

@@ -34,6 +34,25 @@
           "caption": "Indicates whether the original document is secured by your personal digital safe with the certifications that give it probative value and a 50-year retention guarantee beyond its deposit."
         }
       },
+      "qualification": {
+        "date": {
+          "title": {
+            "addedOn": "Added on",
+            "obtentionDate": "Delivered on",
+            "issueDate": "Delivered on",
+            "expirationDate": "Expiration date",
+            "referencedDate": "Referenced date",
+            "shootingDate": "Shooting date"
+          }
+        },
+        "identity": "Identity",
+        "label": {
+          "title": "Label",
+          "front": "Front side",
+          "back": "Back side"
+        },
+        "qualification": "Qualification"
+      },
       "title": "Useful information"
     },
     "previous": "Previous",

package/react/Viewer/locales/fr.json

@@ -34,6 +34,25 @@
           "caption": "Indique si le document original est sécurisé par votre coffre-fort numérique personnel avec les certifications qui lui confèrent une valeur probante et une garantie de conservation de 50 ans au-delà de son dépôt."
         }
       },
+      "qualification": {
+        "date": {
+          "title": {
+            "addedOn": "Ajouté le",
+            "obtentionDate": "Délivré le",
+            "issueDate": "Délivré le",
+            "expirationDate": "Expire le",
+            "referencedDate": "Date de référence",
+            "shootingDate": "Date de prise de vue"
+          }
+        },
+        "identity": "Identité",
+        "label": {
+          "title": "Label",
+          "front": "Face avant",
+          "back": "Face arrière"
+        },
+        "qualification": "Qualification"
+      },
       "title": "Informations utiles"
     },
     "previous": "Précédente",

package/react/Viewer/queries.js

@@ -0,0 +1,11 @@
+import { Q, fetchPolicies } from 'cozy-client'
+
+const defaultFetchPolicy = fetchPolicies.olderThan(30 * 1000)
+
+export const buildContactByIdsQuery = (ids = []) => ({
+  definition: () => Q('io.cozy.contacts').getByIds(ids),
+  options: {
+    as: `io.cozy.contacts/${ids.join('')}`,
+    fetchPolicy: defaultFetchPolicy
+  }
+})

package/transpiled/react/Viewer/Footer/BottomSheetContent.js

@@ -44,7 +44,8 @@ var BottomSheetContent = forwardRef(function (_ref, ref) {
       elevation: index === panelBlocks.length - 1 ? 0 : 2,
       square: true
     }, React.createElement(Typography, {
-      variant: "h4"
+      variant: "h4",
+      className: 'u-pv-1 u-ph-1'
     }, React.createElement(PanelBlock, {
       file: file
     })));

package/transpiled/react/Viewer/Panel/Certifications.js

@@ -39,9 +39,7 @@ var Certifications = function Certifications(_ref2) {
       t = _ref2.t;
   var hasCarbonCopy = has(file, 'metadata.carbonCopy');
   var hasElectronicSafe = has(file, 'metadata.electronicSafe');
-  return React.createElement("div", {
-    className: "u-pv-1-half u-ph-2"
-  }, hasCarbonCopy && React.createElement(Certification, {
+  return React.createElement(React.Fragment, null, hasCarbonCopy && React.createElement(Certification, {
     icon: CarbonCopyIcon,
     title: t('Viewer.panel.certifications.carbonCopy.title'),
     caption: t('Viewer.panel.certifications.carbonCopy.caption')

package/transpiled/react/Viewer/Panel/PanelContent.js

@@ -32,7 +32,8 @@ var PanelContent = function PanelContent(_ref) {
       elevation: 2,
       square: true
     }, React.createElement(Typography, {
-      variant: "h4"
+      variant: "h4",
+      className: 'u-pv-1 u-ph-2'
     }, React.createElement(PanelBlock, {
       file: file
     })));

package/transpiled/react/Viewer/Panel/Qualification.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useQuery, models, getReferencedBy } from 'cozy-client';
+import List from "cozy-ui/transpiled/react/MuiCozyTheme/List";
+import ListItem from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem";
+import QualificationListItemText from "cozy-ui/transpiled/react/Viewer/Panel/QualificationListItemText";
+import { withViewerLocales } from "cozy-ui/transpiled/react/Viewer/withViewerLocales";
+import { buildContactByIdsQuery } from "cozy-ui/transpiled/react/Viewer/queries";
+var getDisplayName = models.contact.getDisplayName,
+    getBoundT = models.document.locales.getBoundT;
+
+var Qualification = function Qualification(_ref) {
+  var _ref$file = _ref.file,
+      file = _ref$file === void 0 ? {} : _ref$file,
+      t = _ref.t,
+      f = _ref.f,
+      lang = _ref.lang;
+  var scannerT = getBoundT(lang);
+  var filename = file.name,
+      _file$metadata = file.metadata,
+      metadata = _file$metadata === void 0 ? {} : _file$metadata;
+  var _metadata$qualificati = metadata.qualification,
+      qualification = _metadata$qualificati === void 0 ? {} : _metadata$qualificati,
+      pageLabel = metadata.page,
+      datetime = metadata.datetime,
+      datetimeLabel = metadata.datetimeLabel;
+  var contactIds = getReferencedBy(file, 'io.cozy.contacts').map(function (ref) {
+    return ref.id;
+  });
+  var contactByIdsQuery = buildContactByIdsQuery(contactIds);
+
+  var _useQuery = useQuery(contactByIdsQuery.definition, contactByIdsQuery.options),
+      contactList = _useQuery.data;
+
+  var contactsFullname = Array.isArray(contactList) ? contactList.map(function (contact) {
+    return "".concat(getDisplayName(contact));
+  }).join(', ') : '';
+  return React.createElement(List, null, datetime && React.createElement(ListItem, {
+    className: 'u-ph-0'
+  }, React.createElement(QualificationListItemText, {
+    primary: t("Viewer.panel.qualification.date.title.".concat(datetimeLabel === 'datetime' || datetimeLabel === undefined ? 'addedOn' : datetimeLabel)),
+    secondary: f(datetime, 'DD/MM/YYYY')
+  })), contactsFullname && React.createElement(ListItem, {
+    className: 'u-ph-0'
+  }, React.createElement(QualificationListItemText, {
+    primary: t('Viewer.panel.qualification.identity'),
+    secondary: contactsFullname
+  })), React.createElement(ListItem, {
+    className: 'u-ph-0'
+  }, React.createElement(QualificationListItemText, {
+    primary: t('Viewer.panel.qualification.label.title'),
+    secondary: pageLabel ? t("Viewer.panel.qualification.label.".concat(pageLabel)) : filename
+  })), React.createElement(ListItem, {
+    className: 'u-ph-0'
+  }, React.createElement(QualificationListItemText, {
+    primary: t('Viewer.panel.qualification.qualification'),
+    secondary: scannerT("Scan.items.".concat(qualification.label))
+  })));
+};
+
+Qualification.propTypes = {
+  file: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired,
+  f: PropTypes.func.isRequired,
+  lang: PropTypes.string.isRequired
+};
+export default withViewerLocales(Qualification);

package/transpiled/react/Viewer/Panel/QualificationListItemText.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ListItemText from "cozy-ui/transpiled/react/ListItemText";
+import Typography from "cozy-ui/transpiled/react/Typography";
+
+var QualificationListItemText = function QualificationListItemText(_ref) {
+  var primary = _ref.primary,
+      secondary = _ref.secondary;
+  return React.createElement(ListItemText, {
+    className: 'u-pv-0',
+    disableTypography: true,
+    primary: React.createElement(Typography, {
+      variant: 'caption'
+    }, primary),
+    secondary: React.createElement(Typography, {
+      variant: 'body1'
+    }, secondary)
+  });
+};
+
+QualificationListItemText.propTypes = {
+  primary: PropTypes.string.isRequired,
+  secondary: PropTypes.string.isRequired
+};
+export default QualificationListItemText;

package/transpiled/react/Viewer/Panel/getPanelBlocks.js

@@ -1,7 +1,12 @@
 import KonnectorBlock from 'cozy-harvest-lib/dist/components/KonnectorBlock';
-import { hasCertifications, isFromKonnector } from "cozy-ui/transpiled/react/Viewer/helpers";
+import { hasCertifications, hasQualifications, isFromKonnector } from "cozy-ui/transpiled/react/Viewer/helpers";
 import Certifications from "cozy-ui/transpiled/react/Viewer/Panel/Certifications";
+import Qualification from "cozy-ui/transpiled/react/Viewer/Panel/Qualification";
 export var panelBlocksSpecs = {
+  qualifications: {
+    condition: hasQualifications,
+    component: Qualification
+  },
   konnector: {
     condition: isFromKonnector,
     component: KonnectorBlock

package/transpiled/react/Viewer/helpers.js

@@ -1,22 +1,34 @@
-import has from 'lodash/has'; // TODO : should be in file model of cozy-client
+import has from 'lodash/has';
+/**
+ * @typedef {object} Reference
+ * @property {string} id - id of the document
+ * @property {string} type - doctype of the document
+ */
+// TODO : should be in file model of cozy-client
 
 export var isPlainText = function isPlainText() {
   var mimeType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var fileName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   return mimeType ? /^text\//.test(mimeType) : /\.(txt|md)$/.test(fileName);
 };
-export var hasCertifications = function hasCertifications(_ref) {
+export var hasQualifications = function hasQualifications(_ref) {
   var file = _ref.file;
-  return has(file, 'metadata.carbonCopy') || has(file, 'metadata.electronicSafe');
+  return has(file, 'metadata.qualification');
 };
-export var isFromKonnector = function isFromKonnector(_ref2) {
+export var hasCertifications = function hasCertifications(_ref2) {
   var file = _ref2.file;
-  return has(file, 'cozyMetadata.sourceAccount');
+  return has(file, 'metadata.carbonCopy') || has(file, 'metadata.electronicSafe');
 };
-export var isValidForPanel = function isValidForPanel(_ref3) {
+export var isFromKonnector = function isFromKonnector(_ref3) {
   var file = _ref3.file;
+  return has(file, 'cozyMetadata.sourceAccount');
+};
+export var isValidForPanel = function isValidForPanel(_ref4) {
+  var file = _ref4.file;
   return hasCertifications({
     file: file
+  }) || hasQualifications({
+    file: file
   }) || isFromKonnector({
     file: file
   });

package/transpiled/react/Viewer/index.js

@@ -142,7 +142,7 @@ export var toolbarPropsPropType = {
 };
 Viewer.propTypes = {
   /** One `io.cozy.files` to display */
-  currentFile: PropTypes.shape(FileDoctype).isRequired,
+  currentFile: FileDoctype.isRequired,
   hasNext: PropTypes.bool,
   hasPrevious: PropTypes.bool,
 
@@ -187,7 +187,7 @@ var ViewerInformationsWrapper = function ViewerInformationsWrapper(_ref) {
 };
 
 ViewerInformationsWrapper.propTypes = {
-  currentFile: PropTypes.shape(FileDoctype).isRequired,
+  currentFile: FileDoctype.isRequired,
   disableFooter: PropTypes.bool,
   disableSharing: PropTypes.bool,
   validForPanel: PropTypes.bool,

package/transpiled/react/Viewer/queries.js

@@ -0,0 +1,14 @@
+import { Q, fetchPolicies } from 'cozy-client';
+var defaultFetchPolicy = fetchPolicies.olderThan(30 * 1000);
+export var buildContactByIdsQuery = function buildContactByIdsQuery() {
+  var ids = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return {
+    definition: function definition() {
+      return Q('io.cozy.contacts').getByIds(ids);
+    },
+    options: {
+      as: "io.cozy.contacts/".concat(ids.join('')),
+      fetchPolicy: defaultFetchPolicy
+    }
+  };
+};

package/transpiled/react/Viewer/withViewerLocales.js

@@ -35,6 +35,25 @@ var en = {
           caption: "Indicates whether the original document is secured by your personal digital safe with the certifications that give it probative value and a 50-year retention guarantee beyond its deposit."
         }
       },
+      qualification: {
+        date: {
+          title: {
+            addedOn: "Added on",
+            obtentionDate: "Delivered on",
+            issueDate: "Delivered on",
+            expirationDate: "Expiration date",
+            referencedDate: "Referenced date",
+            shootingDate: "Shooting date"
+          }
+        },
+        identity: "Identity",
+        label: {
+          title: "Label",
+          front: "Front side",
+          back: "Back side"
+        },
+        qualification: "Qualification"
+      },
       title: "Useful information"
     },
     previous: "Previous",
@@ -82,6 +101,25 @@ var fr = {
           caption: "Indique si le document original est s\xE9curis\xE9 par votre coffre-fort num\xE9rique personnel avec les certifications qui lui conf\xE8rent une valeur probante et une garantie de conservation de 50 ans au-del\xE0 de son d\xE9p\xF4t."
         }
       },
+      qualification: {
+        date: {
+          title: {
+            addedOn: "Ajout\xE9 le",
+            obtentionDate: "D\xE9livr\xE9 le",
+            issueDate: "D\xE9livr\xE9 le",
+            expirationDate: "Expire le",
+            referencedDate: "Date de r\xE9f\xE9rence",
+            shootingDate: "Date de prise de vue"
+          }
+        },
+        identity: "Identit\xE9",
+        label: {
+          title: "Label",
+          front: "Face avant",
+          back: "Face arri\xE8re"
+        },
+        qualification: "Qualification"
+      },
       title: "Informations utiles"
     },
     previous: "Pr\xE9c\xE9dente",