feat(mespapiers): Add a PaperItemAnnotation component

packages/cozy-mespapiers-lib/src/components/Papers/PaperItemAnnotation.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { models } from 'cozy-client'
+
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { formatLocallyDistanceToNow } from 'cozy-ui/transpiled/react/I18n/format'
+
+const { computeExpirationDate, isExpired, isExpiringSoon } = models.paper
+
+const PaperItemAnnotation = ({ file }) => {
+  const { t } = useI18n()
+
+  if (isExpired(file)) {
+    return (
+      <>
+        {' · '}
+        <span className="u-error">{t('PapersList.expired')}</span>
+      </>
+    )
+  }
+
+  if (isExpiringSoon(file)) {
+    const expirationDate = computeExpirationDate(file)
+
+    return (
+      <>
+        {' · '}
+        <span className="u-warning">
+          {t('PapersList.expiresIn', {
+            duration: formatLocallyDistanceToNow(expirationDate)
+          })}
+        </span>
+      </>
+    )
+  }
+
+  return null
+}
+
+PaperItemAnnotation.propTypes = {
+  file: PropTypes.object.isRequired
+}
+
+export default PaperItemAnnotation

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

@@ -269,7 +269,9 @@
     "PapersListByContact": {
       "seeMore": "See more (%{number})"
     },
-    "empty": "You do not have any papers yet in this topic."
+    "empty": "You do not have any papers yet in this topic.",
+    "expired": "Expired",
+    "expiresIn": "Expires in %{duration}"
   },
   "PlaceholdersList": {
     "title": "New paper%{name}"

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

@@ -269,7 +269,9 @@
     "PapersListByContact": {
       "seeMore": "Voir plus (%{number})"
     },
-    "empty": "Vous n'avez aucun papier dans ce thème."
+    "empty": "Vous n'avez aucun papier dans ce thème.",
+    "expired": "Expiré",
+    "expiresIn": "Expire dans %{duration}"
   },
   "PlaceholdersList": {
     "title": "Nouveau papier%{name}"