feat(web): updated grant status logic

apps/web/pages/en/grants-plaza/grant/[id].ts

@@ -0,0 +1,12 @@
+import withApollo from '@island.is/web/graphql/withApollo'
+import { withLocale } from '@island.is/web/i18n'
+import GrantSinglePage from '@island.is/web/screens/Grants/Grant/Grant'
+import { getServerSidePropsWrapper } from '@island.is/web/utils/getServerSidePropsWrapper'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore make web strict
+//
+const Screen = withApollo(withLocale('en')(GrantSinglePage))
+
+export default Screen
+
+export const getServerSideProps = getServerSidePropsWrapper(Screen)

apps/web/pages/en/grants-plaza/grants/index.ts

@@ -0,0 +1,12 @@
+import withApollo from '@island.is/web/graphql/withApollo'
+import { withLocale } from '@island.is/web/i18n'
+import GrantsSearchResults from '@island.is/web/screens/Grants/SearchResults/SearchResults'
+import { getServerSidePropsWrapper } from '@island.is/web/utils/getServerSidePropsWrapper'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore make web strict
+//
+const Screen = withApollo(withLocale('en')(GrantsSearchResults))
+
+export default Screen
+
+export const getServerSideProps = getServerSidePropsWrapper(Screen)

apps/web/pages/en/grants-plaza/index.ts

@@ -0,0 +1,11 @@
+import withApollo from '@island.is/web/graphql/withApollo'
+import { withLocale } from '@island.is/web/i18n'
+import GrantsHome from '@island.is/web/screens/Grants/Home/GrantsHome'
+import { getServerSidePropsWrapper } from '@island.is/web/utils/getServerSidePropsWrapper'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore make web strict
+const Screen = withApollo(withLocale('en')(GrantsHome))
+
+export default Screen
+
+export const getServerSideProps = getServerSidePropsWrapper(Screen)

apps/web/screens/Grants/Grant/GrantSidebar.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { useIntl } from 'react-intl'
 
 import { Box, Button, LinkV2, Stack, Text } from '@island.is/island-ui/core'
 import { Locale } from '@island.is/shared/types'
@@ -8,8 +9,7 @@ import { Grant } from '@island.is/web/graphql/schema'
 import { LinkType, useLinkResolver } from '@island.is/web/hooks'
 
 import { m } from '../messages'
-import { useLocale } from '@island.is/localization'
-import { generateStatusTag } from '../utils'
+import { generateStatusTag, parseStatus } from '../utils'
 
 interface Props {
   grant: Grant
@@ -32,7 +32,12 @@ const generateLine = (heading: string, content?: React.ReactNode) => {
 
 export const GrantSidebar = ({ grant, locale }: Props) => {
   const { linkResolver } = useLinkResolver()
-  const { formatMessage } = useLocale()
+  const { formatMessage } = useIntl()
+
+  const status = useMemo(
+    () => parseStatus(grant, formatMessage, locale),
+    [grant, formatMessage, locale],
+  )
 
   const detailPanelData = useMemo(
     () =>
@@ -74,20 +79,23 @@ export const GrantSidebar = ({ grant, locale }: Props) => {
         ),
         generateLine(
           formatMessage(m.single.deadline),
-          grant?.applicationDeadlineStatus ? (
-            <Text variant="medium">{grant.applicationDeadlineStatus}</Text>
+          status.deadlineStatus ? (
+            <Text variant="medium">{status.deadlineStatus}</Text>
           ) : undefined,
         ),
         generateLine(
           formatMessage(m.single.status),
           grant?.status ? (
             <Text variant="medium">
-              {generateStatusTag(grant.status, formatMessage)?.label}
+              {
+                generateStatusTag(status.applicationStatus, formatMessage)
+                  ?.label
+              }
             </Text>
           ) : undefined,
         ),
       ].filter(isDefined) ?? [],
-    [grant, formatMessage, linkResolver],
+    [grant, formatMessage, linkResolver, status],
   )
 
   const filesPanelData = useMemo(

apps/web/screens/Grants/Home/GrantsHome.tsx

@@ -42,8 +42,9 @@ const GrantsHomePage: CustomScreen<GrantsHomeProps> = ({
   locale,
   customPageData,
 }) => {
-  const { formatMessage } = useIntl()
+  const intl = useIntl()
   const { linkResolver } = useLinkResolver()
+  const { formatMessage } = intl
 
   const baseUrl = linkResolver('styrkjatorg', [], locale).href
   const searchUrl = linkResolver('styrkjatorgsearch', [], locale).href

apps/web/screens/Grants/SearchResults/SearchResultsContent.tsx

@@ -1,4 +1,3 @@
-import { useIntl } from 'react-intl'
 import { useWindowSize } from 'react-use'
 import format from 'date-fns/format'
 import { useRouter } from 'next/router'
@@ -13,7 +12,7 @@ import { Grant } from '@island.is/web/graphql/schema'
 import { useLinkResolver } from '@island.is/web/hooks'
 
 import { m } from '../messages'
-import { generateStatusTag } from '../utils'
+import { generateStatusTag, parseStatus } from '../utils'
 
 interface Props {
   grants?: Array<Grant>
@@ -44,6 +43,7 @@ export const SearchResultsContent = ({ grants, subheader, locale }: Props) => {
               return null
             }
 
+            const status = parseStatus(grant, formatMessage, locale)
             return (
               <Box key={grant.id}>
                 {grant.applicationId && (
@@ -54,11 +54,10 @@ export const SearchResultsContent = ({ grants, subheader, locale }: Props) => {
                     text={grant.description ?? ''}
                     logo={grant.fund?.parentOrganization?.logo?.url ?? ''}
                     logoAlt={grant.fund?.parentOrganization?.logo?.title ?? ''}
-                    tag={
-                      grant.status
-                        ? generateStatusTag(grant.status, formatMessage)
-                        : undefined
-                    }
+                    tag={generateStatusTag(
+                      status.applicationStatus,
+                      formatMessage,
+                    )}
                     cta={{
                       label: formatMessage(m.general.seeMore),
                       variant: 'text',
@@ -80,14 +79,17 @@ export const SearchResultsContent = ({ grants, subheader, locale }: Props) => {
                             text: `${format(
                               new Date(grant.dateFrom),
                               'dd.MM.',
-                            )}-${format(new Date(grant.dateTo), 'dd.MM.yyyy')}`,
+                            )} - ${format(
+                              new Date(grant.dateTo),
+                              'dd.MM.yyyy',
+                            )}`,
                           }
                         : null,
-                      grant.applicationDeadlineStatus
+                      status.deadlineStatus
                         ? {
                             icon: 'time' as const,
                             //todo: fix when the text is ready
-                            text: grant.applicationDeadlineStatus,
+                            text: status.deadlineStatus,
                           }
                         : undefined,
                       grant.categoryTags

apps/web/screens/Grants/messages.ts

@@ -34,7 +34,7 @@ export const m = {
     },
     applicationStatus: {
       id: 'web.grants:search.applicationStatus',
-      defaultMessage: 'Staða umsóknar',
+      defaultMessage: 'Staða umsókna',
     },
     applicationOpen: {
       id: 'web.grants:search.applicationOpen',
@@ -52,6 +52,34 @@ export const m = {
       id: 'web.grants:search.applicationSeeDescription',
       defaultMessage: 'Sjá lýsingu',
     },
+    applicationOpensAt: {
+      id: 'web.grants:search.applicationOpensAt',
+      defaultMessage: 'Opnar {arg}',
+    },
+    applicationEstimatedOpensAt: {
+      id: 'web.grants:search.applicationEstimatedOpensAt',
+      defaultMessage: 'Áætlað næst í {arg}',
+    },
+    applicationOpensTo: {
+      id: 'web.grants:search.applicationOpensTo',
+      defaultMessage: 'Frestur til {arg}',
+    },
+    applicationOpensToWithDay: {
+      id: 'web.grants:search.applicationOpensToWithDay',
+      defaultMessage: 'Frestur til og með {arg}',
+    },
+    applicationWasOpenTo: {
+      id: 'web.grants:search.applicationWasOpenTo',
+      defaultMessage: 'Frestur var til {arg}',
+    },
+    applicationWasOpenToAndWith: {
+      id: 'web.grants:search.applicationWasOpenToAndWith',
+      defaultMessage: 'Frestur var til og með {arg}',
+    },
+    applicationAlwaysOpen: {
+      id: 'web.grants:search.applicationAlwaysOpen',
+      defaultMessage: 'Opið er allt árið',
+    },
     category: {
       id: 'web.grants:search.category',
       defaultMessage: 'Flokkun',

apps/web/screens/Grants/utils.ts

@@ -1,29 +1,131 @@
-import { TagVariant } from '@island.is/island-ui/core'
+import format from 'date-fns/format'
+import localeEn from 'date-fns/locale/en-GB'
+import localeIS from 'date-fns/locale/is'
+
 import { FormatMessage } from '@island.is/localization'
-import { GrantStatus } from '@island.is/web/graphql/schema'
+import { Locale } from '@island.is/shared/types'
+import { Grant, GrantStatus } from '@island.is/web/graphql/schema'
+
 import { m } from './messages'
+import { IntlFormatters, IntlShape } from 'react-intl'
 
-export const generateStatusTag = (
-  status: GrantStatus,
-  formatMessage: FormatMessage,
-): { label: string; variant: TagVariant } | undefined => {
-  switch (status) {
-    case GrantStatus.Open:
+interface Status {
+  applicationStatus: 'open' | 'closed' | 'unknown'
+  deadlineStatus: string
+  note?: string
+}
+
+const formatDate = (
+  date: Date,
+  locale: Locale,
+  stringFormat = 'dd.MMMM yyyy',
+) =>
+  format(date, stringFormat, {
+    locale: locale === 'is' ? localeIS : localeEn,
+  })
+
+export const containsTimePart = (date: string) => date.includes('T')
+
+export const parseStatus = (
+  grant: Grant,
+  formatMessage: IntlShape['formatMessage'],
+  locale: Locale,
+): Status => {
+  switch (grant.status) {
+    case GrantStatus.Closed: {
+      return {
+        applicationStatus: 'closed',
+        deadlineStatus: grant.dateTo
+          ? formatMessage(
+              containsTimePart(grant.dateTo)
+                ? m.search.applicationWasOpenToAndWith
+                : m.search.applicationWasOpenTo,
+              {
+                arg: formatDate(new Date(grant.dateTo), locale),
+              },
+            )
+          : formatMessage(m.search.applicationClosed),
+        note: grant.statusText ?? undefined,
+      }
+    }
+    case GrantStatus.ClosedOpeningSoon: {
+      return {
+        applicationStatus: 'closed',
+        deadlineStatus: grant.dateFrom
+          ? formatMessage(m.search.applicationOpensAt, {
+              arg: formatDate(new Date(grant.dateFrom), locale),
+            })
+          : formatMessage(m.search.applicationClosed),
+        note: grant.statusText ?? undefined,
+      }
+    }
+    case GrantStatus.ClosedOpeningSoonWithEstimation: {
+      return {
+        applicationStatus: 'closed',
+        deadlineStatus: grant.dateFrom
+          ? formatMessage(m.search.applicationEstimatedOpensAt, {
+              arg: formatDate(new Date(grant.dateFrom), locale, 'MMMM yyyy'),
+            })
+          : formatMessage(m.search.applicationClosed),
+        note: grant.statusText ?? undefined,
+      }
+    }
+    case GrantStatus.ClosedWithNote: {
+      return {
+        applicationStatus: 'closed',
+        deadlineStatus: formatMessage(m.search.applicationSeeDescription),
+        note: grant.statusText ?? undefined,
+      }
+    }
+    case GrantStatus.AlwaysOpen: {
       return {
-        label: formatMessage(m.search.applicationOpen),
-        variant: 'mint',
+        applicationStatus: 'open',
+        deadlineStatus: formatMessage(m.search.applicationAlwaysOpen),
+        note: grant.statusText ?? undefined,
       }
-    case GrantStatus.Closed:
+    }
+    case GrantStatus.Open: {
       return {
-        label: formatMessage(m.search.applicationClosed),
-        variant: 'rose',
+        applicationStatus: 'open',
+        deadlineStatus: grant.dateTo
+          ? formatMessage(
+              containsTimePart(grant.dateTo)
+                ? m.search.applicationOpensToWithDay
+                : m.search.applicationOpensTo,
+              {
+                arg: formatDate(new Date(grant.dateTo), locale, 'dd.MMMM.'),
+              },
+            )
+          : formatMessage(m.search.applicationOpen),
+        note: grant.statusText ?? undefined,
       }
-    case GrantStatus.SeeDescription:
+    }
+    case GrantStatus.OpenWithNote: {
       return {
-        label: formatMessage(m.search.applicationSeeDescription),
-        variant: 'purple',
+        applicationStatus: 'open',
+        deadlineStatus: formatMessage(m.search.applicationSeeDescription),
+        note: grant.statusText ?? undefined,
       }
-    default:
-      return
+    }
+    default: {
+      return {
+        applicationStatus: 'unknown',
+        deadlineStatus: '',
+      }
+    }
   }
 }
+
+export const generateStatusTag = (
+  status: Status['applicationStatus'],
+  formatMessage: IntlShape['formatMessage'],
+) =>
+  status !== 'unknown'
+    ? {
+        label:
+          status === 'open'
+            ? formatMessage(m.search.applicationOpen)
+            : formatMessage(m.search.applicationClosed),
+        variant: status === 'open' ? ('mint' as const) : ('rose' as const),
+      }
+    : undefined

apps/web/screens/queries/Grants.ts

@@ -16,8 +16,8 @@ export const GET_GRANTS_QUERY = gql`
         }
         dateFrom
         dateTo
-        isOpen
         status
+        statusText
         categoryTags {
           id
           title
@@ -69,6 +69,9 @@ export const GET_GRANT_QUERY = gql`
     }
       applicationDeadlineStatus
       status
+      statusText
+      dateFrom
+      dateTo
       categoryTags {
         id
         title