feat: Add an ExpirationAlert component

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)

react/Viewer/locales/en.json

@@ -76,6 +76,10 @@
         "expired": "Expired",
         "expiresIn": "Expires in %{duration}"
       },
+      "expiration": {
+        "description": "This document will expire in %{duration}, consider renewing it",
+        "dismiss": "I understood"
+      },
       "title": "Useful information"
     },
     "previous": "Previous",

react/Viewer/locales/fr.json

@@ -76,6 +76,10 @@
         "expired": "Expiré",
         "expiresIn": "Expire dans %{duration}"
       },
+      "expiration": {
+        "description": "Ce document expirera dans %{duration}, pensez à le renouveler",
+        "dismiss": "J'ai compris"
+      },
       "title": "Informations utiles"
     },
     "previous": "Précédente",