feat: Add an ExpirationAnnotation component

Author: PolariTOON

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

react/Viewer/locales/en.json

@@ -72,7 +72,9 @@
           "copy": "Copy",
           "copyClipboard": "Copy to clipboard",
           "edit": "Edit"
-        }
+        },
+        "expired": "Expired",
+        "expiresIn": "Expires in %{duration}"
       },
       "title": "Useful information"
     },

react/Viewer/locales/fr.json

@@ -72,7 +72,9 @@
           "copy": "Copier",
           "copyClipboard": "Copier dans le presse-papier",
           "edit": "Modifier"
-        }
+        },
+        "expired": "Expiré",
+        "expiresIn": "Expire dans %{duration}"
       },
       "title": "Informations utiles"
     },