feat: Add navigation and a new page for processed applications

City-of-Helsinki · Jan 25, 2024 · 128023c · 128023c
1 parent f1e79d5
commit 128023c
Show file tree

Hide file tree

Showing 19 changed files with 309 additions and 89 deletions.
diff --git a/frontend/benefit/applicant/browser-tests/page-model/MainIngress.ts b/frontend/benefit/applicant/browser-tests/page-model/MainIngress.ts
@@ -8,7 +8,7 @@ class MainIngress extends ApplicantPageComponent {
   }
 
   newApplicationButton = this.component.findByRole('button', {
-    name: this.translations.mainIngress.newApplicationBtnText,
+    name: this.translations.mainIngress.frontPage.newApplicationBtnText,
   });
 
   public async clickCreateNewApplicationButton(): Promise<void> {

diff --git a/frontend/benefit/applicant/public/locales/en/common.json b/frontend/benefit/applicant/public/locales/en/common.json
@@ -423,7 +423,11 @@
       "title": "Application’s messages"
     },
     "languageMenuButtonAriaLabel": "Select language",
-    "menuToggleAriaLabel": "Menu"
+    "menuToggleAriaLabel": "Menu",
+    "navigation": {
+      "home": "Applications",
+      "decisions": "Archive"
+    }
   },
   "footer": {
     "copyrightText": "Copyright",
@@ -459,11 +463,17 @@
     "en": "In English"
   },
   "mainIngress": {
-    "heading": "Applications",
-    "description1": "Welcome to the Helsinki benefit service.",
-    "description2": "Before filling out the application, review the necessary information and required attachments if needed. You can save an incomplete application as a draft and return to it later.",
-    "linkText": " Please take a look at the required information and attachments before filling in the application.",
-    "newApplicationBtnText": "Submit a new application"
+    "frontPage": {
+      "heading": "Applications",
+      "description1": "Welcome to the Helsinki benefit service.",
+      "description2": "Before filling out the application, review the necessary information and required attachments if needed. You can save an incomplete application as a draft and return to it later.",
+      "linkText": " Please take a look at the required information and attachments before filling in the application.",
+      "newApplicationBtnText": "Submit a new application"
+    },
+    "decisions": {
+      "heading": "Archive",
+      "description": "Review Helsinki benefit applications for which decisions have been made."
+    }
   },
   "prerequisiteReminder": {
     "heading": "Did you remember these before filling out the application form?",
@@ -628,6 +638,7 @@
   "pageTitles": {
     "login": "Helsinki benefit - Log in",
     "home": "Helsinki benefit - Frontpage",
+    "decisions": "Helsinki benefit - Archive",
     "createApplication": "Helsinki benefit - Application - Create",
     "editApplication": "Helsinki benefit - Application - Edit",
     "viewApplication": "Helsinki benefit - Application - View",
@@ -732,5 +743,8 @@
     "title": "Sivun palautenappeja ei voida näyttää",
     "text": "Toiminnon käyttämiseksi vaaditaan, että hyväksyt sivuston evästeet. Pääsen antamaan palautetta tästä sivusta sallimalla evästeasetuksista tilastointiin liittyvät evästeet.",
     "button": "Muokkaa evästeasetuksia"
+  },
+  "decisions": {
+    "heading": "Archive"
   }
 }
diff --git a/frontend/benefit/applicant/public/locales/fi/common.json b/frontend/benefit/applicant/public/locales/fi/common.json
@@ -423,7 +423,11 @@
       "title": "Hakemuksen viestit"
     },
     "languageMenuButtonAriaLabel": "Valitse kieli",
-    "menuToggleAriaLabel": "Valikko"
+    "menuToggleAriaLabel": "Valikko",
+    "navigation": {
+      "home": "Hakemukset",
+      "decisions": "Arkisto"
+    }
   },
   "footer": {
     "copyrightText": "Copyright",
@@ -459,11 +463,17 @@
     "en": "In English"
   },
   "mainIngress": {
-    "heading": "Hakemukset",
-    "description1": "Tervetuloa Helsinki-lisän asiointipalveluun.",
-    "description2": "Ennen hakemuksen täyttämistä tutustu hakemisessa vaadittaviin tietoihin ja liitteisiin. Voit tallentaa hakemuksen keskeneräisenä luonnokseksi ja jatkaa sen täyttämistä myöhemmin.",
-    "linkText": " Tutustu vaadittaviin tietoihin ja tarvittaviin liitteisiin ennen hakemuksen täyttämistä.",
-    "newApplicationBtnText": "Tee uusi hakemus"
+    "frontPage": {
+      "heading": "Hakemukset",
+      "description1": "Tervetuloa Helsinki-lisän asiointipalveluun.",
+      "description2": "Ennen hakemuksen täyttämistä tutustu hakemisessa vaadittaviin tietoihin ja liitteisiin. Voit tallentaa hakemuksen keskeneräisenä luonnokseksi ja jatkaa sen täyttämistä myöhemmin.",
+      "linkText": " Tutustu vaadittaviin tietoihin ja tarvittaviin liitteisiin ennen hakemuksen täyttämistä.",
+      "newApplicationBtnText": "Tee uusi hakemus"
+    },
+    "decisions": {
+      "heading": "Arkisto",
+      "description": "Tarkastele Helsinki-lisä -hakemuksia, joille on tehty päätös."
+    }
   },
   "prerequisiteReminder": {
     "heading": "Muistitko nämä ennen hakulomakkeen täyttämistä?",
@@ -628,6 +638,7 @@
   "pageTitles": {
     "login": "Helsinki-lisä - Kirjautuminen",
     "home": "Helsinki-lisä - Etusivu",
+    "decisions": "Helsinki-lisä - Arkisto",
     "createApplication": "Helsinki-lisä - Hakemus - Luo uusi",
     "editApplication": "Helsinki-lisä - Hakemus - Muokkaa hakemusta",
     "viewApplication": "Helsinki-lisä - Hakemus - Tarkastele hakemusta",
@@ -732,5 +743,8 @@
     "title": "Sivun palautenappeja ei voida näyttää",
     "text": "Toiminnon käyttämiseksi vaaditaan, että hyväksyt sivuston evästeet. Pääsen antamaan palautetta tästä sivusta sallimalla evästeasetuksista tilastointiin liittyvät evästeet.",
     "button": "Muokkaa evästeasetuksia"
+  },
+  "decisions": {
+    "heading": "Arkisto"
   }
 }
diff --git a/frontend/benefit/applicant/public/locales/sv/common.json b/frontend/benefit/applicant/public/locales/sv/common.json
@@ -423,7 +423,11 @@
       "title": "Meddelanden om ansökan"
     },
     "languageMenuButtonAriaLabel": "Ändra språk",
-    "menuToggleAriaLabel": "Menu"
+    "menuToggleAriaLabel": "Menu",
+    "navigation": {
+      "home": "Ansökningar",
+      "decisions": "Arkiv"
+    }
   },
   "footer": {
     "copyrightText": "Copyright",
@@ -459,11 +463,17 @@
     "en": "In English"
   },
   "mainIngress": {
-    "heading": "Ansökningar",
-    "description1": "Välkommen till e-tjänsten för Helsingforstillägg.",
-    "description2": "Innan du fyller i ansökan, bekanta dig med den information och de bilagor som krävs för att ansöka. Du kan spara en halvfärdig ansökan och komplettera den senare.",
-    "linkText": " Se vilka uppgifter och bilagor som krävs innan du fyller i ansökan.",
-    "newApplicationBtnText": "Gör en ny ansökan"
+    "frontPage": {
+      "heading": "Ansökningar",
+      "description1": "Välkommen till e-tjänsten för Helsingforstillägg.",
+      "description2": "Innan du fyller i ansökan, bekanta dig med den information och de bilagor som krävs för att ansöka. Du kan spara en halvfärdig ansökan och komplettera den senare.",
+      "linkText": " Se vilka uppgifter och bilagor som krävs innan du fyller i ansökan.",
+      "newApplicationBtnText": "Gör en ny ansökan"
+    },
+    "decisions": {
+      "heading": "Arkiv",
+      "description": "Se Helsingforstillägget-ansökningarna, för vilka beslut har fattats."
+    }
   },
   "prerequisiteReminder": {
     "heading": "Kom du ihåg dessa innan du fyllde i ansökan om Helsingforstillägget?",
@@ -628,6 +638,7 @@
   "pageTitles": {
     "login": "Helsingforstillägg - Logga in",
     "home": "Helsingforstillägg - Framsida",
+    "decisions": "Helsingforstillägg - Arkiv",
     "createApplication": "Helsingforstillägg - Ansökan - Skapa",
     "editApplication": "Helsingforstillägg - Ansökan - Redigera",
     "viewApplication": "Helsingforstillägg - Ansökan - Granska",
@@ -732,5 +743,8 @@
     "title": "Sivun palautenappeja ei voida näyttää",
     "text": "Toiminnon käyttämiseksi vaaditaan, että hyväksyt sivuston evästeet. Pääsen antamaan palautetta tästä sivusta sallimalla evästeasetuksista tilastointiin liittyvät evästeet.",
     "button": "Muokkaa evästeasetuksia"
+  },
+  "decisions": {
+    "heading": "Arkiv"
   }
 }
diff --git a/frontend/benefit/applicant/src/components/header/Header.tsx b/frontend/benefit/applicant/src/components/header/Header.tsx
@@ -23,6 +23,8 @@ const Header: React.FC = () => {
     handleLanguageChange,
     setMessagesDrawerVisiblity,
     canWriteNewMessages,
+    navigationItems,
+    isNavigationVisible,
   } = useHeader();
   const router = useRouter();
   const { asPath } = router;
@@ -79,6 +81,8 @@ const Header: React.FC = () => {
               ]
             : undefined
         }
+        navigationItems={navigationItems}
+        isNavigationVisible={isNavigationVisible}
       />
       {isAuthenticated && hasMessenger && (
         <Messenger

diff --git a/frontend/benefit/applicant/src/components/header/useHeader.ts b/frontend/benefit/applicant/src/components/header/useHeader.ts
@@ -1,18 +1,21 @@
+import { ROUTES } from 'benefit/applicant/constants';
+import AppContext from 'benefit/applicant/context/AppContext';
 import useApplicationQuery from 'benefit/applicant/hooks/useApplicationQuery';
 import { useTranslation } from 'benefit/applicant/i18n';
 import { getLanguageOptions } from 'benefit/applicant/utils/common';
 import { BackendEndpoint } from 'benefit-shared/backend-api/backend-api';
 import { APPLICATION_STATUSES } from 'benefit-shared/constants';
 import { useRouter } from 'next/router';
 import { TFunction } from 'next-i18next';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import useBackendAPI from 'shared/hooks/useBackendAPI';
 import { NavigationItem, OptionType } from 'shared/types/common';
 
 type ExtendedComponentProps = {
   t: TFunction;
   languageOptions: OptionType<string>[];
-  navigationItems?: NavigationItem[];
+  navigationItems: NavigationItem[];
+  isNavigationVisible: boolean;
   hasMessenger: boolean;
   handleLanguageChange: (
     e: React.SyntheticEvent<unknown>,
@@ -31,6 +34,7 @@ const useHeader = (): ExtendedComponentProps => {
   const id = router?.query?.id?.toString() ?? '';
   const openDrawer = Boolean(router?.query?.openDrawer);
   const { axios } = useBackendAPI();
+  const { isNavigationVisible } = React.useContext(AppContext);
 
   const [hasMessenger, setHasMessenger] = useState<boolean>(false);
   const [unreadMessagesCount, setUnredMessagesCount] = useState<
@@ -96,6 +100,20 @@ const useHeader = (): ExtendedComponentProps => {
     void router.push(url);
   };
 
+  const navigationItems = useMemo<Array<NavigationItem>>(
+    () => [
+      {
+        label: t('common:header.navigation.home'),
+        url: ROUTES.HOME,
+      },
+      {
+        label: t('common:header.navigation.decisions'),
+        url: ROUTES.DECISIONS,
+      },
+    ],
+    [t]
+  );
+
   return {
     t,
     handleLanguageChange,
@@ -106,6 +124,8 @@ const useHeader = (): ExtendedComponentProps => {
     unreadMessagesCount,
     isMessagesDrawerVisible,
     canWriteNewMessages,
+    navigationItems,
+    isNavigationVisible,
   };
 };
 

diff --git a/frontend/benefit/applicant/src/components/mainIngress/MainIngress.sc.ts b/frontend/benefit/applicant/src/components/mainIngress/MainIngress.sc.ts
@@ -32,16 +32,6 @@ export const $Link = styled.span`
   cursor: pointer;
 `;
 
-export const $ActionContainer = styled.div`
-  display: flex;
-  align-items: center;
-  flex: 1 0 30%;
-  box-sizing: border-box;
-  ${respondAbove('sm')`
-    justify-content: flex-end;
-  `}
-`;
-
 export const $Notification = styled(NotificationBase)`
   margin-bottom: ${(props) => props.theme.spacing.xs};
 `;

diff --git a/frontend/benefit/applicant/src/components/mainIngress/MainIngress.tsx b/frontend/benefit/applicant/src/components/mainIngress/MainIngress.tsx
@@ -1,10 +1,9 @@
 import { $Notification } from 'benefit/applicant/components/Notification/Notification.sc';
-import { Button, IconPlus } from 'hds-react';
 import * as React from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import Container from 'shared/components/container/Container';
 
 import {
-  $ActionContainer,
   $Container,
   $Description,
   $Heading,
@@ -14,8 +13,17 @@ import {
 } from './MainIngress.sc';
 import { useMainIngress } from './useMainIngress';
 
-const MainIngress: React.FC = () => {
-  const { errors, handleNewApplicationClick, t } = useMainIngress();
+type Props = {
+  heading: string;
+  description?: ReactNode;
+};
+
+const MainIngress: React.FC<PropsWithChildren<Props>> = ({
+  heading,
+  description,
+  children,
+}) => {
+  const { errors } = useMainIngress();
 
   const notificationItems = errors?.map(({ message, name }, i) => (
     // eslint-disable-next-line react/no-array-index-key
@@ -28,29 +36,11 @@ const MainIngress: React.FC = () => {
     <div data-testid="main-ingress">
       <$Container>
         <Container>
-          <$Heading>{t('common:mainIngress.heading')}</$Heading>
+          <$Heading>{heading}</$Heading>
           {notificationItems}
           <$TextContainer>
-            <$Description>
-              {t('common:mainIngress.description1')}{' '}
-              {/* TODO: uncomment once having link to redirect to more info url
-                   or remove if this won't be used.
-                   handleMoreInfoClick is from useMainIngress */}
-              {/* <$Link onClick={handleMoreInfoClick}>
-              {t('common:mainIngress.linkText')}
-            </$Link> */}
-              {t('common:mainIngress.description2')}
-            </$Description>
-            <$ActionContainer>
-              <Button
-                data-testid="newApplicationButton"
-                iconLeft={<IconPlus />}
-                onClick={handleNewApplicationClick}
-                theme="coat"
-              >
-                {t('common:mainIngress.newApplicationBtnText')}
-              </Button>
-            </$ActionContainer>
+            <$Description>{description}</$Description>
+            {children}
           </$TextContainer>
         </Container>
       </$Container>

diff --git a/frontend/benefit/applicant/src/components/mainIngress/decisions/DecisionsMainIngress.tsx b/frontend/benefit/applicant/src/components/mainIngress/decisions/DecisionsMainIngress.tsx
@@ -0,0 +1,15 @@
+import MainIngress from 'benefit/applicant/components/mainIngress/MainIngress';
+import { useTranslation } from 'benefit/applicant/i18n';
+import * as React from 'react';
+
+const DecisionsMainIngress: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <MainIngress
+      heading={t('common:mainIngress.decisions.heading')}
+      description={<>{t('common:mainIngress.decisions.description')}</>}
+    />
+  );
+};
+
+export default DecisionsMainIngress;
diff --git a/frontend/benefit/applicant/src/components/mainIngress/frontPage/FrontPageMainIngress.sc.ts b/frontend/benefit/applicant/src/components/mainIngress/frontPage/FrontPageMainIngress.sc.ts
@@ -0,0 +1,12 @@
+import { respondAbove } from 'shared/styles/mediaQueries';
+import styled from 'styled-components';
+
+export const $ActionContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1 0 30%;
+  box-sizing: border-box;
+  ${respondAbove('sm')`
+    justify-content: flex-end;
+  `}
+`;
diff --git a/frontend/benefit/applicant/src/components/mainIngress/frontPage/FrontPageMainIngress.tsx b/frontend/benefit/applicant/src/components/mainIngress/frontPage/FrontPageMainIngress.tsx
@@ -0,0 +1,40 @@
+import { $ActionContainer } from 'benefit/applicant/components/mainIngress/frontPage/FrontPageMainIngress.sc';
+import { useFrontPageMainIngress } from 'benefit/applicant/components/mainIngress/frontPage/useFrontPageMainIngress';
+import MainIngress from 'benefit/applicant/components/mainIngress/MainIngress';
+import { Button, IconPlus } from 'hds-react';
+import React from 'react';
+
+const FrontPageMainIngress: React.FC = () => {
+  const { t, handleNewApplicationClick } = useFrontPageMainIngress();
+
+  return (
+    <MainIngress
+      heading={t('common:mainIngress.frontPage.heading')}
+      description={
+        <>
+          {t('common:mainIngress.frontPage.description1')}{' '}
+          {/* TODO: uncomment once having link to redirect to more info url
+                 or remove if this won't be used.
+                 handleMoreInfoClick is from useMainIngress */}
+          {/* <$Link onClick={handleMoreInfoClick}>
+            {t('common:mainIngress.frontPage.linkText')}
+          </$Link> */}
+          {t('common:mainIngress.frontPage.description2')}
+        </>
+      }
+    >
+      <$ActionContainer>
+        <Button
+          data-testid="newApplicationButton"
+          iconLeft={<IconPlus />}
+          onClick={handleNewApplicationClick}
+          theme="coat"
+        >
+          {t('common:mainIngress.frontPage.newApplicationBtnText')}
+        </Button>
+      </$ActionContainer>
+    </MainIngress>
+  );
+};
+
+export default FrontPageMainIngress;