diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json index c4494bb693f3eee59cb3e401cb80977d1d37e4ce..c4a646c103c99506643c54836fa36ba5b0ab2730 100644 --- a/frontend/public/locales/en/common.json +++ b/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" }, diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json index addb362c713a3bdedf8b5a003a336634d95246ea..05d320ad596608d38455d197ab4cff8bca099990 100644 --- a/frontend/public/locales/nb/common.json +++ b/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" }, diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json index e4cc713e76d1512c8c6858429b35183a28acd8f7..cf4dd4943cddf9fb54548b3699e16ba7b4ae3cc7 100644 --- a/frontend/public/locales/nn/common.json +++ b/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" }, diff --git a/frontend/src/routes/sponsor/frontpage/index.tsx b/frontend/src/routes/sponsor/frontpage/index.tsx index e082f00cae69e394da441ba97e50ad56c9fd3f36..83d74c91e117edb1a0e7b5cb367fa242ce88f7f5 100644 --- a/frontend/src/routes/sponsor/frontpage/index.tsx +++ b/frontend/src/routes/sponsor/frontpage/index.tsx @@ -21,7 +21,7 @@ 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' @@ -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"> @@ -119,21 +145,6 @@ const Status = ({ status }: StatusProps) => { const PersonLine = ({ person, role }: PersonLineProps) => { const [t] = 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' - } - } return ( <StyledTableRow key={`${person.first} ${person.last}`}> @@ -141,7 +152,7 @@ const PersonLine = ({ person, role }: PersonLineProps) => { {`${person.first} ${person.last}`} </TableCell> <TableCell align="left">{getRoleName(role)}</TableCell> - <Status status={status} /> + <Status person={person} role={role} /> <TableCell align="left">{getRoleOuName(role)}</TableCell> <TableCell align="left"> <Button