feat(web): Multiple updates for grants

apps/web/components/GrantCardsList/GrantCardsList.tsx

@@ -3,7 +3,7 @@ import localeEN from 'date-fns/locale/en-GB'
 import localeIS from 'date-fns/locale/is'
 import { useRouter } from 'next/router'
 
-import { ActionCard, Box, InfoCardGrid } from '@island.is/island-ui/core'
+import { ActionCard, Box, InfoCardGrid, Text } from '@island.is/island-ui/core'
 import { Locale } from '@island.is/shared/types'
 import { isDefined } from '@island.is/shared/utils'
 import {
@@ -20,6 +20,12 @@ interface SliceProps {
   slice: GrantCardsListSchema
 }
 
+const OPEN_GRANT_STATUSES = [
+  GrantStatus.AlwaysOpen,
+  GrantStatus.Open,
+  GrantStatus.OpenWithNote,
+]
+
 const formatDate = (
   date: Date,
   locale: Locale,
@@ -108,24 +114,48 @@ const GrantCardsList = ({ slice }: SliceProps) => {
     }
   }
 
-  if (slice.resolvedGrantsList?.items.length === 1) {
-    const grant = slice.resolvedGrantsList.items[0]
+  const grantItems = slice.resolvedGrantsList?.items ?? []
+
+  if (grantItems.length === 1) {
+    const grant = grantItems[0]
+
+    const cardText = `${getTranslationString(
+      grant?.status && OPEN_GRANT_STATUSES.includes(grant.status)
+        ? 'applicationOpen'
+        : 'applicationClosed',
+    )} / ${parseStatus(grant)}`
+
     return (
-      <ActionCard
-        heading={grant.name}
-        backgroundColor="blue"
-        cta={{
-          disabled: !grant.applicationUrl?.slug,
-          label: grant.applicationButtonLabel ?? getTranslationString('apply'),
-          onClick: () => router.push(grant.applicationUrl?.slug ?? ''),
-          icon: 'open',
-          iconType: 'outline',
-        }}
-      />
+      <>
+        {slice.displayTitle && (
+          <Box marginBottom={2}>
+            <Text variant="h3" as="span" color="dark400">
+              {slice.title}
+            </Text>
+          </Box>
+        )}
+        <ActionCard
+          heading={grant.name}
+          text={cardText}
+          backgroundColor="blue"
+          cta={{
+            disabled:
+              !grant?.status ||
+              grant.status === GrantStatus.Closed ||
+              grant.status === GrantStatus.Unknown,
+            size: 'small',
+            label:
+              grant.applicationButtonLabel ?? getTranslationString('apply'),
+            onClick: () => router.push(grant.applicationUrl?.slug ?? ''),
+            icon: 'open',
+            iconType: 'outline',
+          }}
+        />
+      </>
     )
   }
 
-  const cards = slice.resolvedGrantsList?.items
+  const cards = grantItems
     ?.map((grant) => {
       if (grant.id) {
         return {
@@ -183,14 +213,21 @@ const GrantCardsList = ({ slice }: SliceProps) => {
     .filter(isDefined)
 
   return (
-    <Box padding={1} borderColor="blue100" borderRadius="large">
+    <>
+      {slice.displayTitle && (
+        <Box marginBottom={2}>
+          <Text variant="h3" as="span" color="dark400">
+            {slice.title}
+          </Text>
+        </Box>
+      )}
       <InfoCardGrid
         columns={1}
         cardsBorder="blue200"
         variant="detailed"
         cards={cards ?? []}
       />
-    </Box>
+    </>
   )
 }
 

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

@@ -81,6 +81,10 @@ const GrantSinglePage: CustomScreen<GrantSingleProps> = ({ grant, locale }) => {
     return null
   }
 
+  const applicationStatusLabel = status?.applicationStatus
+    ? generateStatusTag(status.applicationStatus, formatMessage)?.label
+    : undefined
+
   return (
     <GrantWrapper
       pageTitle={grant.name}
@@ -117,11 +121,13 @@ const GrantSinglePage: CustomScreen<GrantSingleProps> = ({ grant, locale }) => {
             <ActionCard
               heading={grant.name}
               text={
-                status
-                  ? generateStatusTag(status.applicationStatus, formatMessage)
-                      ?.label +
-                    (status.deadlineStatus ? ' / ' + status.deadlineStatus : '')
-                  : ''
+                applicationStatusLabel
+                  ? `${applicationStatusLabel}${
+                      status?.deadlineStatus
+                        ? ' / ' + status.deadlineStatus
+                        : ''
+                    }`
+                  : undefined
               }
               backgroundColor="blue"
               cta={{
@@ -181,6 +187,24 @@ const GrantSinglePage: CustomScreen<GrantSingleProps> = ({ grant, locale }) => {
             </>
           ) : undefined}
 
+          {grant.answeringQuestions?.length ? (
+            <>
+              <Box>
+                <Text variant="h3">
+                  {formatMessage(m.single.answeringQuestions)}
+                </Text>
+                <Box className="rs_read">
+                  {webRichText(
+                    grant.answeringQuestions as SliceType[],
+                    undefined,
+                    locale,
+                  )}
+                </Box>
+              </Box>
+              <Divider />
+            </>
+          ) : undefined}
+
           {grant.applicationHints?.length ? (
             <Box className="rs_read">
               {webRichText(

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

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { useIntl } from 'react-intl'
 import NextLink from 'next/link'
 
@@ -13,6 +14,7 @@ import {
   Text,
 } from '@island.is/island-ui/core'
 import { Locale } from '@island.is/shared/types'
+import { isDefined } from '@island.is/shared/utils'
 import { GrantSearchSection } from '@island.is/web/components'
 import { SLICE_SPACING } from '@island.is/web/constants'
 import {
@@ -61,6 +63,22 @@ const GrantsHomePage: CustomScreen<GrantsHomeProps> = ({
     },
   ]
 
+  const categorySlugs: Array<CategorySlug> = useMemo(() => {
+    const ordering: Array<string> | null =
+      customPageData?.configJson?.categoryOrdering ?? null
+    if (!ordering) {
+      return [...CATEGORY_TAG_SLUGS]
+    }
+
+    return ordering
+      .map((slug) => {
+        if (CATEGORY_TAG_SLUGS.includes(slug as CategorySlug)) {
+          return slug as CategorySlug
+        }
+      })
+      .filter(isDefined)
+  }, [customPageData?.configJson?.categoryOrdering])
+
   return (
     <Box>
       <Stack space={SLICE_SPACING}>
@@ -76,29 +94,26 @@ const GrantsHomePage: CustomScreen<GrantsHomeProps> = ({
             customPageData?.ogImage?.url ?? formatMessage(m.home.featuredImage)
           }
           featuredImageAlt={formatMessage(m.home.featuredImageAlt)}
-          //TODO - do when the categories are ready
           quickLinks={[
             {
-              title: 'Listamannalaun',
-              href: searchUrl + '?category=menning-og-listir',
+              title: formatMessage(m.bullets.open),
+              href: searchUrl + '?status=open',
             },
             {
-              title: 'Barnamenningarsjóður',
-              href: searchUrl + '?category=nam-og-kennsla',
+              title: formatMessage(m.bullets.nativeFunds),
+              href: searchUrl + '?category=grant-category-native',
             },
             {
-              title: 'Tónlistarsjóður',
-              href: searchUrl + '?category=nyskopun',
+              title: formatMessage(m.bullets.technologyDevelopmentFund),
+              href: searchUrl + '?query=tækniþróunar',
             },
             {
-              title: 'Rannís',
-              href: searchUrl + '?organization=rannis',
-              variant: 'purple',
+              title: formatMessage(m.bullets.financing),
+              href: searchUrl + '?type=grant-type-financing',
             },
             {
-              title: 'Erasmus',
-              href: searchUrl + '?organization=erasmus',
-              variant: 'purple',
+              title: formatMessage(m.bullets.companies),
+              href: searchUrl + '?query=fyrirtæki',
             },
           ]}
           breadcrumbs={
@@ -135,26 +150,34 @@ const GrantsHomePage: CustomScreen<GrantsHomeProps> = ({
             </Box>
 
             <GridRow>
-              {categories?.map((c) => (
-                <GridColumn
-                  key={c.slug}
-                  span={['1/1', '1/2', '1/2', '1/3']}
-                  paddingTop={3}
-                  paddingBottom={3}
-                >
-                  <CategoryCard
-                    href={`${searchUrl}?category=${c.slug}`}
-                    heading={c.title}
-                    text={
-                      CATEGORY_TAG_SLUGS.includes(c.slug as CategorySlug)
-                        ? formatMessage(
-                            mapTagToMessageId(c.slug as CategorySlug),
-                          )
-                        : ''
-                    }
-                  />
-                </GridColumn>
-              ))}
+              {categorySlugs
+                ?.map((c) => {
+                  const category = categories?.find((ct) => c === ct.slug)
+
+                  if (!category) {
+                    return undefined
+                  }
+
+                  return (
+                    <GridColumn
+                      key={c}
+                      span={['1/1', '1/2', '1/2', '1/3']}
+                      paddingTop={3}
+                      paddingBottom={3}
+                    >
+                      <CategoryCard
+                        href={`${searchUrl}?category=${c}`}
+                        heading={category.title}
+                        text={
+                          CATEGORY_TAG_SLUGS.includes(c)
+                            ? formatMessage(mapTagToMessageId(c))
+                            : ''
+                        }
+                      />
+                    </GridColumn>
+                  )
+                })
+                .filter(isDefined)}
             </GridRow>
           </GridContainer>
         </Box>