cozy-ui 77.10.0 → 78.0.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [78.0.0](https://github.com/cozy/cozy-ui/compare/v77.10.0...v78.0.0) (2022-12-07)
+
+
+### Bug Fixes
+
+* Require `file` prop in `Qualification` ([c29f5c7](https://github.com/cozy/cozy-ui/commit/c29f5c7))
+
+
+### Features
+
+* Add an `ExpirationAlert` component ([9793851](https://github.com/cozy/cozy-ui/commit/9793851))
+* Add an `ExpirationAnnotation` component ([50109bc](https://github.com/cozy/cozy-ui/commit/50109bc))
+* Add expiration annotations to date qualifications ([a48496d](https://github.com/cozy/cozy-ui/commit/a48496d))
+* Add the expiration alert to the qualification block ([651be00](https://github.com/cozy/cozy-ui/commit/651be00))
+* Update `cozy-client` to 34.4.0 ([6bdaa34](https://github.com/cozy/cozy-ui/commit/6bdaa34))
+
+
+### BREAKING CHANGES
+
+* You need to update `cozy-client` to `>34.4.0`.
+
 # [77.10.0](https://github.com/cozy/cozy-ui/compare/v77.9.2...v77.10.0) (2022-12-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "77.10.0",
+  "version": "78.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -90,7 +90,7 @@
     "babel-preset-cozy-app": "2.0.2",
     "browserslist-config-cozy": "0.4.0",
     "copyfiles": "2.4.1",
-    "cozy-client": "^33.0.0",
+    "cozy-client": "^34.4.0",
     "cozy-device-helper": "2.0.0",
     "cozy-flags": "^2.10.1",
     "cozy-harvest-lib": "^6.7.3",
@@ -179,7 +179,7 @@
     "rooks": "^5.11.2"
   },
   "peerDependencies": {
-    "cozy-client": ">=33.0.0",
+    "cozy-client": ">=34.4.0",
     "cozy-device-helper": "^2.0.0",
     "cozy-harvest-lib": "^6.7.3",
     "cozy-intent": ">=1.3.0",

package/react/Viewer/Panel/Qualification.jsx

@@ -1,6 +1,8 @@
 import React, { useRef, useState, createRef, useMemo, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
+import { models } from 'cozy-client'
+
 import List from '../../MuiCozyTheme/List'
 import { withViewerLocales } from '../hoc/withViewerLocales'
 import {
@@ -9,12 +11,15 @@ import {
   knownInformationMetadataNames,
   knownOtherMetadataNames
 } from '../helpers'
+import ExpirationAlert from '../components/ExpirationAlert'
 import QualificationListItemContact from './QualificationListItemContact'
 import ActionMenuWrapper from './ActionMenuWrapper'
 import QualificationListItemDate from './QualificationListItemDate'
 import QualificationListItemInformation from './QualificationListItemInformation'
 import QualificationListItemOther from './QualificationListItemOther'
 
+const { isExpiringSoon } = models.paper
+
 const makeQualificationListItemComp = metadataName => {
   if (knownDateMetadataNames.includes(metadataName)) {
     return QualificationListItemDate
@@ -32,7 +37,11 @@ const makeQualificationListItemComp = metadataName => {
   }
 }
 
-const Qualification = ({ file = {} }) => {
+const isExpirationAlertHidden = file => {
+  return file?.metadata?.hideExpirationAlert ?? false
+}
+
+const Qualification = ({ file }) => {
   const { metadata = {} } = file
   const actionBtnRef = useRef([])
   const [optionFile, setOptionFile] = useState({
@@ -63,36 +72,41 @@ const Qualification = ({ file = {} }) => {
   }, [formatedMetadataQualification])
 
   return (
-    <List className={'u-pv-1'}>
-      {formatedMetadataQualification.map((meta, idx) => {
-        const { name } = meta
-        const QualificationListItemComp = makeQualificationListItemComp(name)
-
-        return (
-          <QualificationListItemComp
-            key={idx}
+    <>
+      {isExpiringSoon(file) && !isExpirationAlertHidden(file) && (
+        <ExpirationAlert file={file} />
+      )}
+      <List className={'u-pv-1'}>
+        {formatedMetadataQualification.map((meta, idx) => {
+          const { name } = meta
+          const QualificationListItemComp = makeQualificationListItemComp(name)
+
+          return (
+            <QualificationListItemComp
+              key={idx}
+              file={file}
+              ref={actionBtnRef.current[idx]}
+              formatedMetadataQualification={meta}
+              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
+            />
+          )
+        })}
+
+        {optionFile.name && (
+          <ActionMenuWrapper
+            onClose={hideActionsMenu}
             file={file}
-            ref={actionBtnRef.current[idx]}
-            formatedMetadataQualification={meta}
-            toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
+            optionFile={optionFile}
+            ref={actionBtnRef.current[optionFile.id]}
           />
-        )
-      })}
-
-      {optionFile.name && (
-        <ActionMenuWrapper
-          onClose={hideActionsMenu}
-          file={file}
-          optionFile={optionFile}
-          ref={actionBtnRef.current[optionFile.id]}
-        />
-      )}
-    </List>
+        )}
+      </List>
+    </>
   )
 }
 
 Qualification.propTypes = {
-  file: PropTypes.object
+  file: PropTypes.object.isRequired
 }
 
 export default withViewerLocales(Qualification)

package/react/Viewer/Panel/QualificationListItemDate.jsx

@@ -1,17 +1,23 @@
 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'
 import Icon from '../../Icon'
 import Dots from '../../Icons/Dots'
+import Typography from '../../Typography'
+import ExpirationAnnotation from '../components/ExpirationAnnotation'
 import QualificationListItemText from './QualificationListItemText'
 import { useI18n } from '../../I18n'
 import { formatDate } from '../helpers'
 
+const { isExpired, isExpiringSoon } = models.paper
+
 const QualificationListItemDate = forwardRef(
-  ({ formatedMetadataQualification, toggleActionsMenu }, ref) => {
+  ({ file, formatedMetadataQualification, toggleActionsMenu }, ref) => {
     const { t, f, lang } = useI18n()
     const { name, value } = formatedMetadataQualification
     const formattedDate = value
@@ -22,7 +28,21 @@ const QualificationListItemDate = forwardRef(
       <ListItem className={'u-pl-2 u-pr-3'}>
         <QualificationListItemText
           primary={t(`Viewer.panel.qualification.date.title.${name}`)}
-          secondary={formattedDate}
+          secondary={
+            <>
+              <Typography component="span" variant="inherit">
+                {formattedDate}
+              </Typography>
+              {(isExpired(file) || isExpiringSoon(file)) && (
+                <>
+                  <Typography component="span" variant="inherit">
+                    {' · '}
+                  </Typography>
+                  <ExpirationAnnotation file={file} />
+                </>
+              )}
+            </>
+          }
           disabled={!value}
         />
         <ListItemSecondaryAction>
@@ -41,6 +61,7 @@ const QualificationListItemDate = forwardRef(
 QualificationListItemDate.displayName = 'QualificationListItemDate'
 
 QualificationListItemDate.propTypes = {
+  file: PropTypes.object.isRequired,
   formatedMetadataQualification: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.string

package/react/Viewer/Readme.md

@@ -122,7 +122,16 @@ const files = [
     _id: 'image',
     class: 'image',
     name: 'Demo.jpg',
-    mime: 'image/jpg'
+    mime: 'image/jpg',
+    metadata: {
+      carbonCopy: true,
+      electronicSafe: true,
+      referencedDate: new Date(Date.now() - 357 * 24 * 60 * 60 * 1000).toISOString(),
+      datetimeLabel: "referencedDate",
+      qualification: {
+        label: 'personal_sporting_licence'
+      }
+    }
   },
   {
     _id: 'none',

package/react/Viewer/components/ExpirationAlert.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import { useClient, models } from 'cozy-client'
+
+import Alert from '../../Alert'
+import Button from '../../Buttons'
+import Link from '../../Link'
+import Typography from '../../Typography'
+import { withViewerLocales } from '../hoc/withViewerLocales'
+import { useI18n } from '../../I18n'
+import { formatLocallyDistanceToNow } from '../../I18n/format'
+
+const FILES_DOCTYPE = 'io.cozy.files'
+
+const { computeExpirationDate, computeExpirationNoticeLink } = models.paper
+
+const ExpirationAlert = ({ file }) => {
+  const { t } = useI18n()
+  const client = useClient()
+  const [isBusy, setIsBusy] = useState(false)
+
+  const handleClose = async () => {
+    setIsBusy(true)
+    await client.collection(FILES_DOCTYPE).updateMetadataAttribute(file.id, {
+      ...file.metadata,
+      hideExpirationAlert: true
+    })
+    setIsBusy(false)
+  }
+
+  const expirationDate = computeExpirationDate(file)
+  const expirationNoticeLink = computeExpirationNoticeLink(file)
+
+  return (
+    <Alert
+      severity="warning"
+      block
+      action={
+        <Button
+          color="warning"
+          variant="text"
+          size="small"
+          busy={isBusy}
+          label={t('Viewer.panel.expiration.dismiss')}
+          onClick={handleClose}
+        />
+      }
+      className="u-mt-1 u-mh-1"
+    >
+      <Typography component="span" variant="inherit">
+        <Typography component="span" variant="inherit">
+          {t('Viewer.panel.expiration.description', {
+            duration: formatLocallyDistanceToNow(expirationDate)
+          })}
+        </Typography>
+        {expirationNoticeLink && (
+          <>
+            <Typography component="span" variant="inherit">
+              {' : '}
+            </Typography>
+            <Link
+              href={expirationNoticeLink}
+              rel="noreferrer"
+              target="_blank"
+              className="u-warning"
+            >
+              {new URL(expirationNoticeLink).hostname}
+            </Link>
+          </>
+        )}
+      </Typography>
+    </Alert>
+  )
+}
+
+ExpirationAlert.propTypes = {
+  file: PropTypes.object.isRequired
+}
+
+export default withViewerLocales(ExpirationAlert)

package/react/Viewer/components/ExpirationAnnotation.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { models } from 'cozy-client'
+
+import Typography from '../../Typography'
+import { useI18n } from '../../I18n'
+import { formatLocallyDistanceToNow } from '../../I18n/format'
+
+const { computeExpirationDate, isExpired } = models.paper
+
+const ExpirationAnnotation = ({ file }) => {
+  const { t } = useI18n()
+
+  if (isExpired(file)) {
+    return (
+      <Typography component="span" variant="inherit" color="error">
+        {t('Viewer.panel.qualification.expired')}
+      </Typography>
+    )
+  }
+
+  const expirationDate = computeExpirationDate(file)
+
+  return (
+    <Typography component="span" variant="inherit" className="u-warning">
+      {t('Viewer.panel.qualification.expiresIn', {
+        duration: formatLocallyDistanceToNow(expirationDate)
+      })}
+    </Typography>
+  )
+}
+
+ExpirationAnnotation.propTypes = {
+  file: PropTypes.object.isRequired
+}
+
+export default ExpirationAnnotation

package/react/Viewer/locales/en.json

@@ -72,7 +72,13 @@
           "copy": "Copy",
           "copyClipboard": "Copy to clipboard",
           "edit": "Edit"
-        }
+        },
+        "expired": "Expired",
+        "expiresIn": "Expires in %{duration}"
+      },
+      "expiration": {
+        "description": "This document will expire in %{duration}, consider renewing it",
+        "dismiss": "I understood"
       },
       "title": "Useful information"
     },

package/react/Viewer/locales/fr.json

@@ -72,7 +72,13 @@
           "copy": "Copier",
           "copyClipboard": "Copier dans le presse-papier",
           "edit": "Modifier"
-        }
+        },
+        "expired": "Expiré",
+        "expiresIn": "Expire dans %{duration}"
+      },
+      "expiration": {
+        "description": "Ce document expirera dans %{duration}, pensez à le renouveler",
+        "dismiss": "J'ai compris"
       },
       "title": "Informations utiles"
     },

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

@@ -1,14 +1,17 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useRef, useState, createRef, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { models } from 'cozy-client';
 import List from "cozy-ui/transpiled/react/MuiCozyTheme/List";
 import { withViewerLocales } from "cozy-ui/transpiled/react/Viewer/hoc/withViewerLocales";
 import { formatMetadataQualification, knownDateMetadataNames, knownInformationMetadataNames, knownOtherMetadataNames } from "cozy-ui/transpiled/react/Viewer/helpers";
+import ExpirationAlert from "cozy-ui/transpiled/react/Viewer/components/ExpirationAlert";
 import QualificationListItemContact from "cozy-ui/transpiled/react/Viewer/Panel/QualificationListItemContact";
 import ActionMenuWrapper from "cozy-ui/transpiled/react/Viewer/Panel/ActionMenuWrapper";
 import QualificationListItemDate from "cozy-ui/transpiled/react/Viewer/Panel/QualificationListItemDate";
 import QualificationListItemInformation from "cozy-ui/transpiled/react/Viewer/Panel/QualificationListItemInformation";
 import QualificationListItemOther from "cozy-ui/transpiled/react/Viewer/Panel/QualificationListItemOther";
+var isExpiringSoon = models.paper.isExpiringSoon;
 
 var makeQualificationListItemComp = function makeQualificationListItemComp(metadataName) {
   if (knownDateMetadataNames.includes(metadataName)) {
@@ -28,11 +31,16 @@ var makeQualificationListItemComp = function makeQualificationListItemComp(metad
   }
 };
 
+var isExpirationAlertHidden = function isExpirationAlertHidden(file) {
+  var _file$metadata$hideEx, _file$metadata;
+
+  return (_file$metadata$hideEx = file === null || file === void 0 ? void 0 : (_file$metadata = file.metadata) === null || _file$metadata === void 0 ? void 0 : _file$metadata.hideExpirationAlert) !== null && _file$metadata$hideEx !== void 0 ? _file$metadata$hideEx : false;
+};
+
 var Qualification = function Qualification(_ref) {
-  var _ref$file = _ref.file,
-      file = _ref$file === void 0 ? {} : _ref$file;
-  var _file$metadata = file.metadata,
-      metadata = _file$metadata === void 0 ? {} : _file$metadata;
+  var file = _ref.file;
+  var _file$metadata2 = file.metadata,
+      metadata = _file$metadata2 === void 0 ? {} : _file$metadata2;
   var actionBtnRef = useRef([]);
 
   var _useState = useState({
@@ -77,7 +85,9 @@ var Qualification = function Qualification(_ref) {
       return (_actionBtnRef$current = actionBtnRef.current[idx]) !== null && _actionBtnRef$current !== void 0 ? _actionBtnRef$current : /*#__PURE__*/createRef();
     });
   }, [formatedMetadataQualification]);
-  return /*#__PURE__*/React.createElement(List, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isExpiringSoon(file) && !isExpirationAlertHidden(file) && /*#__PURE__*/React.createElement(ExpirationAlert, {
+    file: file
+  }), /*#__PURE__*/React.createElement(List, {
     className: 'u-pv-1'
   }, formatedMetadataQualification.map(function (meta, idx) {
     var name = meta.name;
@@ -96,10 +106,10 @@ var Qualification = function Qualification(_ref) {
     file: file,
     optionFile: optionFile,
     ref: actionBtnRef.current[optionFile.id]
-  }));
+  })));
 };
 
 Qualification.propTypes = {
-  file: PropTypes.object
+  file: PropTypes.object.isRequired
 };
 export default withViewerLocales(Qualification);

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

@@ -1,15 +1,22 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
+import { models } from 'cozy-client';
 import ListItem from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem";
 import ListItemSecondaryAction from "cozy-ui/transpiled/react/MuiCozyTheme/ListItemSecondaryAction";
 import IconButton from "cozy-ui/transpiled/react/IconButton";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import Dots from "cozy-ui/transpiled/react/Icons/Dots";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import ExpirationAnnotation from "cozy-ui/transpiled/react/Viewer/components/ExpirationAnnotation";
 import QualificationListItemText from "cozy-ui/transpiled/react/Viewer/Panel/QualificationListItemText";
 import { useI18n } from "cozy-ui/transpiled/react/I18n";
 import { formatDate } from "cozy-ui/transpiled/react/Viewer/helpers";
+var _models$paper = models.paper,
+    isExpired = _models$paper.isExpired,
+    isExpiringSoon = _models$paper.isExpiringSoon;
 var QualificationListItemDate = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var formatedMetadataQualification = _ref.formatedMetadataQualification,
+  var file = _ref.file,
+      formatedMetadataQualification = _ref.formatedMetadataQualification,
       toggleActionsMenu = _ref.toggleActionsMenu;
 
   var _useI18n = useI18n(),
@@ -28,7 +35,15 @@ var QualificationListItemDate = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: 'u-pl-2 u-pr-3'
   }, /*#__PURE__*/React.createElement(QualificationListItemText, {
     primary: t("Viewer.panel.qualification.date.title.".concat(name)),
-    secondary: formattedDate,
+    secondary: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+      component: "span",
+      variant: "inherit"
+    }, formattedDate), (isExpired(file) || isExpiringSoon(file)) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+      component: "span",
+      variant: "inherit"
+    }, ' · '), /*#__PURE__*/React.createElement(ExpirationAnnotation, {
+      file: file
+    }))),
     disabled: !value
   }), /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(IconButton, {
     ref: ref,
@@ -41,6 +56,7 @@ var QualificationListItemDate = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 QualificationListItemDate.displayName = 'QualificationListItemDate';
 QualificationListItemDate.propTypes = {
+  file: PropTypes.object.isRequired,
   formatedMetadataQualification: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.string

package/transpiled/react/Viewer/components/ExpirationAlert.js

@@ -0,0 +1,102 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useClient, models } from 'cozy-client';
+import Alert from "cozy-ui/transpiled/react/Alert";
+import Button from "cozy-ui/transpiled/react/Buttons";
+import Link from "cozy-ui/transpiled/react/Link";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { withViewerLocales } from "cozy-ui/transpiled/react/Viewer/hoc/withViewerLocales";
+import { useI18n } from "cozy-ui/transpiled/react/I18n";
+import { formatLocallyDistanceToNow } from "cozy-ui/transpiled/react/I18n/format";
+var FILES_DOCTYPE = 'io.cozy.files';
+var _models$paper = models.paper,
+    computeExpirationDate = _models$paper.computeExpirationDate,
+    computeExpirationNoticeLink = _models$paper.computeExpirationNoticeLink;
+
+var ExpirationAlert = function ExpirationAlert(_ref) {
+  var file = _ref.file;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var client = useClient();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isBusy = _useState2[0],
+      setIsBusy = _useState2[1];
+
+  var handleClose = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setIsBusy(true);
+              _context.next = 3;
+              return client.collection(FILES_DOCTYPE).updateMetadataAttribute(file.id, _objectSpread(_objectSpread({}, file.metadata), {}, {
+                hideExpirationAlert: true
+              }));
+
+            case 3:
+              setIsBusy(false);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleClose() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var expirationDate = computeExpirationDate(file);
+  var expirationNoticeLink = computeExpirationNoticeLink(file);
+  return /*#__PURE__*/React.createElement(Alert, {
+    severity: "warning",
+    block: true,
+    action: /*#__PURE__*/React.createElement(Button, {
+      color: "warning",
+      variant: "text",
+      size: "small",
+      busy: isBusy,
+      label: t('Viewer.panel.expiration.dismiss'),
+      onClick: handleClose
+    }),
+    className: "u-mt-1 u-mh-1"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    component: "span",
+    variant: "inherit"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    component: "span",
+    variant: "inherit"
+  }, t('Viewer.panel.expiration.description', {
+    duration: formatLocallyDistanceToNow(expirationDate)
+  })), expirationNoticeLink && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+    component: "span",
+    variant: "inherit"
+  }, ' : '), /*#__PURE__*/React.createElement(Link, {
+    href: expirationNoticeLink,
+    rel: "noreferrer",
+    target: "_blank",
+    className: "u-warning"
+  }, new URL(expirationNoticeLink).hostname))));
+};
+
+ExpirationAlert.propTypes = {
+  file: PropTypes.object.isRequired
+};
+export default withViewerLocales(ExpirationAlert);

package/transpiled/react/Viewer/components/ExpirationAnnotation.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { models } from 'cozy-client';
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { useI18n } from "cozy-ui/transpiled/react/I18n";
+import { formatLocallyDistanceToNow } from "cozy-ui/transpiled/react/I18n/format";
+var _models$paper = models.paper,
+    computeExpirationDate = _models$paper.computeExpirationDate,
+    isExpired = _models$paper.isExpired;
+
+var ExpirationAnnotation = function ExpirationAnnotation(_ref) {
+  var file = _ref.file;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  if (isExpired(file)) {
+    return /*#__PURE__*/React.createElement(Typography, {
+      component: "span",
+      variant: "inherit",
+      color: "error"
+    }, t('Viewer.panel.qualification.expired'));
+  }
+
+  var expirationDate = computeExpirationDate(file);
+  return /*#__PURE__*/React.createElement(Typography, {
+    component: "span",
+    variant: "inherit",
+    className: "u-warning"
+  }, t('Viewer.panel.qualification.expiresIn', {
+    duration: formatLocallyDistanceToNow(expirationDate)
+  }));
+};
+
+ExpirationAnnotation.propTypes = {
+  file: PropTypes.object.isRequired
+};
+export default ExpirationAnnotation;

package/transpiled/react/Viewer/hoc/withViewerLocales.js

@@ -73,7 +73,13 @@ var en = {
           copy: "Copy",
           copyClipboard: "Copy to clipboard",
           edit: "Edit"
-        }
+        },
+        expired: "Expired",
+        expiresIn: "Expires in %{duration}"
+      },
+      expiration: {
+        description: "This document will expire in %{duration}, consider renewing it",
+        dismiss: "I understood"
       },
       title: "Useful information"
     },
@@ -169,7 +175,13 @@ var fr = {
           copy: "Copier",
           copyClipboard: "Copier dans le presse-papier",
           edit: "Modifier"
-        }
+        },
+        expired: "Expir\xE9",
+        expiresIn: "Expire dans %{duration}"
+      },
+      expiration: {
+        description: "Ce document expirera dans %{duration}, pensez \xE0 le renouveler",
+        dismiss: "J'ai compris"
       },
       title: "Informations utiles"
     },