Merge branch 'GREG-167-mark-expiring' into 'master'

Mark roles expiring soon

See merge request !267

frontend/public/locales/en/common.json

@@ -91,6 +91,8 @@
   "statusText": {
     "active": "Active",
     "expired": "Expired",
+    "expiring_other": "Expiring in {{count}} days",
+    "expiring_one": "Expiring in {{count}} day",
     "waitingForGuest": "Waiting for guest",
     "waitingForSponsor": "Needs confirmation"
   },

frontend/public/locales/nb/common.json

@@ -91,6 +91,8 @@
   "statusText": {
     "active": "Aktiv",
     "expired": "Utgått",
+    "expiring_other": "Utløper om {{count}} dager",
+    "expiring_one": "Utløper om {{count}} dag",
     "waitingForGuest": "Venter på gjest",
     "waitingForSponsor": "Trenger godkjenning"
   },

frontend/public/locales/nn/common.json

@@ -91,6 +91,8 @@
   "statusText": {
     "active": "Aktiv",
     "expired": "Utgått",
+    "expiring_other": "Utløper om {{count}} dagar",
+    "expiring_one": "Utløper om {{count}} dag",
     "waitingForGuest": "Venter på gjest",
     "waitingForSponsor": "Trenger godkjenning"
   },

frontend/src/routes/sponsor/frontpage/index.tsx

@@ -21,8 +21,8 @@ import Page from 'components/page'
 import { useTranslation, Trans } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { Guest, Role } from 'interfaces'
-import { isBefore } from 'date-fns'
-
+import { differenceInDays, isBefore } from 'date-fns'
+import { getRoleName, getRoleOuName } from 'utils'
 import SponsorGuestButtons from '../../components/sponsorGuestButtons'
 
 interface GuestProps {
@@ -35,7 +35,8 @@ interface PersonLineProps {
 }
 
 interface StatusProps {
-  status: string
+  person: Guest
+  role: Role
 }
 
 interface GuestTableProps {
@@ -81,8 +82,27 @@ const StyledTableHead = styled(TableHead)(({ theme }) => ({
   borderRadius: '0',
 }))
 
-const Status = ({ status }: StatusProps) => {
+const Status = ({ person, role }: StatusProps) => {
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
   const { t } = useTranslation('common')
+  let status = ''
+  const days = differenceInDays(role.end_date, today)
+
+  if (!person.registered) {
+    status = 'waitingForGuest'
+  } else if (person.registered && !person.verified) {
+    status = 'waitingForSponsor'
+  } else if (person.registered && person.verified) {
+    if (isBefore(role.end_date, today)) {
+      status = 'expired'
+    } else if (days <= 7) {
+      status = 'expiring'
+    } else {
+      status = 'active'
+    }
+  }
+
   switch (status) {
     case 'active':
       return (
@@ -108,6 +128,12 @@ const Status = ({ status }: StatusProps) => {
           {t('statusText.waitingForSponsor')}
         </TableCell>
       )
+    case 'expiring':
+      return (
+        <TableCell sx={{ color: 'blue' }} align="left">
+          <Trans t={t} i18nKey="statusText.expiring" count={days} />
+        </TableCell>
+      )
     default:
       return (
         <TableCell sx={{ color: 'error.main' }} align="left">
@@ -118,35 +144,16 @@ const Status = ({ status }: StatusProps) => {
 }
 
 const PersonLine = ({ person, role }: PersonLineProps) => {
-  const [t, i18n] = useTranslation(['common'])
-  const today = new Date()
-  today.setHours(0, 0, 0, 0)
-  let status = ''
-
-  if (!person.registered) {
-    status = 'waitingForGuest'
-  } else if (person.registered && !person.verified) {
-    status = 'waitingForSponsor'
-  } else if (person.registered && person.verified) {
-    if (!isBefore(role.end_date, today)) {
-      status = 'active'
-    } else {
-      status = 'expired'
-    }
-  }
+  const [t] = useTranslation(['common'])
 
   return (
     <StyledTableRow key={`${person.first} ${person.last}`}>
       <TableCell component="th" scope="row">
         {`${person.first} ${person.last}`}
       </TableCell>
-      <TableCell align="left">
-        {i18n.language === 'en' ? role.name_en : role.name_nb}
-      </TableCell>
-      <Status status={status} />
-      <TableCell align="left">
-        {i18n.language === 'en' ? role.ou_en : role.ou_nb}
-      </TableCell>
+      <TableCell align="left">{getRoleName(role)}</TableCell>
+      <Status person={person} role={role} />
+      <TableCell align="left">{getRoleOuName(role)}</TableCell>
       <TableCell align="left">
         <Button
           variant="contained"