feat: add reminder about alterations to applicant main page

City-of-Helsinki · Apr 11, 2024 · 08d9371 · 08d9371
1 parent aea007f
commit 08d9371
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 74 deletions.
diff --git a/frontend/benefit/applicant/public/locales/en/common.json b/frontend/benefit/applicant/public/locales/en/common.json
@@ -27,7 +27,11 @@
         "contract": "Show less"
       },
       "noApplications": "No submitted Helsinki benefit applications",
-      "navigateToDecisions": "See all applications with decisions"
+      "navigateToDecisions": "See all applications with decisions",
+      "alterationReminder": {
+        "label": "Changes in employment?",
+        "body": "If the employee's work contract is terminated or suspended, please report the change as soon as possible. In this case, overpaid Helsinki benefit may be recovered. A change can be reported by viewing the application and selecting \"Report changes to employment\"."
+      }
     },
     "pageHeaders": {
       "created": "Created",

diff --git a/frontend/benefit/applicant/public/locales/fi/common.json b/frontend/benefit/applicant/public/locales/fi/common.json
@@ -27,7 +27,11 @@
         "contract": "Näytä vähemmän"
       },
       "noApplications": "Ei avoimia Helsinki-lisä -hakemuksia",
-      "navigateToDecisions": "Katso kaikki päätökset"
+      "navigateToDecisions": "Katso kaikki päätökset",
+      "alterationReminder": {
+        "label": "Muutos työsuhteessa?",
+        "body": "Jos työllistetyn henkilön työsuhde päättyy tai keskeytyy, ilmoita muutoksesta mahdollisimman pian. Ylimääräinen Helsinki-lisä saatetaan periä takaisin. Ilmoita muutoksesta avaamalla hakemus ja valitsemalla \"Ilmoita työsuhteen muutoksesta\"."
+      }
     },
     "pageHeaders": {
       "created": "Luotu",

diff --git a/frontend/benefit/applicant/public/locales/sv/common.json b/frontend/benefit/applicant/public/locales/sv/common.json
@@ -27,7 +27,11 @@
         "contract": "Visa mindre"
       },
       "noApplications": "Inga öppna ansökningar om Helsingforstillägget",
-      "navigateToDecisions": "Se alla ansökningar med beslut"
+      "navigateToDecisions": "Se alla ansökningar med beslut",
+      "alterationReminder": {
+        "label": "",
+        "body": ""
+      }
     },
     "pageHeaders": {
       "created": "Skapats",

diff --git a/frontend/benefit/applicant/src/components/applications/applicationList/ApplicationList.tsx b/frontend/benefit/applicant/src/components/applications/applicationList/ApplicationList.tsx
@@ -1,5 +1,5 @@
 import ListContents from 'benefit/applicant/components/applications/applicationList/listItem/ListContents';
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { OptionType } from 'shared/types/common';
 
 import ListItem from './listItem/ListItem';
@@ -12,16 +12,19 @@ export interface ApplicationListProps {
   orderByOptions?: OptionType[];
   noItemsText?: React.ReactNode;
   onListLengthChanged?: (isLoading: boolean, length: number) => void;
+  beforeList?: React.ReactNode;
+  afterList?: React.ReactNode;
 }
 
-const ApplicationList: React.FC<PropsWithChildren<ApplicationListProps>> = ({
+const ApplicationList: React.FC<ApplicationListProps> = ({
   heading,
   status,
   isArchived,
   orderByOptions,
   noItemsText,
-  children,
   onListLengthChanged,
+  beforeList,
+  afterList,
 }) => {
   const {
     list,
@@ -58,9 +61,9 @@ const ApplicationList: React.FC<PropsWithChildren<ApplicationListProps>> = ({
       items={items}
       noItemsText={noItemsText}
       onListLengthChanged={onListLengthChanged}
-    >
-      {children}
-    </ListContents>
+      beforeList={beforeList}
+      afterList={afterList}
+    />
   );
 };
 

diff --git a/...nefit/applicant/src/components/applications/applicationList/ExpandableApplicationList.tsx b/...nefit/applicant/src/components/applications/applicationList/ExpandableApplicationList.tsx
@@ -1,7 +1,7 @@
 import { ApplicationListProps } from 'benefit/applicant/components/applications/applicationList/ApplicationList';
 import ListContents from 'benefit/applicant/components/applications/applicationList/listItem/ListContents';
 import { Button } from 'hds-react';
-import React, { PropsWithChildren, useState } from 'react';
+import React, { useState } from 'react';
 
 import { $ListActionButtonContainer } from './ApplicationList.sc';
 import ListItem from './listItem/ListItem';
@@ -11,9 +11,7 @@ export interface PaginatedApplicationListProps {
   initialItems: number;
 }
 
-type Props = PropsWithChildren<
-  ApplicationListProps & PaginatedApplicationListProps
->;
+type Props = ApplicationListProps & PaginatedApplicationListProps;
 
 const ExpandableApplicationList: React.FC<Props> = ({
   heading,
@@ -22,8 +20,9 @@ const ExpandableApplicationList: React.FC<Props> = ({
   initialItems,
   orderByOptions,
   noItemsText,
-  children,
   onListLengthChanged,
+  beforeList,
+  afterList,
 }) => {
   const {
     list,
@@ -66,24 +65,28 @@ const ExpandableApplicationList: React.FC<Props> = ({
       items={items}
       noItemsText={noItemsText}
       onListLengthChanged={onListLengthChanged}
-    >
-      {hasItems && showExpand && (
-        <$ListActionButtonContainer>
-          <Button
-            onClick={() => setIsExpanded(!isExpanded)}
-            variant="secondary"
-            theme="black"
-          >
-            {t(
-              isExpanded
-                ? 'common:applications.list.common.contract'
-                : 'common:applications.list.common.expand'
-            )}
-          </Button>
-        </$ListActionButtonContainer>
-      )}
-      {children}
-    </ListContents>
+      beforeList={beforeList}
+      afterList={
+        <>
+          {hasItems && showExpand && (
+            <$ListActionButtonContainer>
+              <Button
+                onClick={() => setIsExpanded(!isExpanded)}
+                variant="secondary"
+                theme="black"
+              >
+                {t(
+                  isExpanded
+                    ? 'common:applications.list.common.contract'
+                    : 'common:applications.list.common.expand'
+                )}
+              </Button>
+            </$ListActionButtonContainer>
+          )}
+          {afterList}
+        </>
+      }
+    />
   );
 };
 

diff --git a/...enefit/applicant/src/components/applications/applicationList/PaginatedApplicationList.tsx b/...enefit/applicant/src/components/applications/applicationList/PaginatedApplicationList.tsx
@@ -1,7 +1,7 @@
 import { ApplicationListProps } from 'benefit/applicant/components/applications/applicationList/ApplicationList';
 import ListContents from 'benefit/applicant/components/applications/applicationList/listItem/ListContents';
 import { Pagination } from 'hds-react';
-import React, { PropsWithChildren, useState } from 'react';
+import React, { useState } from 'react';
 
 import { $PaginationContainer } from './ApplicationList.sc';
 import ListItem from './listItem/ListItem';
@@ -13,9 +13,7 @@ export interface PaginatedApplicationListProps {
   pageHref?: (index: number) => string;
 }
 
-type Props = PropsWithChildren<
-  ApplicationListProps & PaginatedApplicationListProps
->;
+type Props = ApplicationListProps & PaginatedApplicationListProps;
 
 const PaginatedApplicationList: React.FC<Props> = ({
   heading,
@@ -25,8 +23,9 @@ const PaginatedApplicationList: React.FC<Props> = ({
   initialPage,
   orderByOptions,
   noItemsText,
-  children,
   onListLengthChanged,
+  beforeList,
+  afterList,
 }) => {
   const {
     list,
@@ -71,24 +70,28 @@ const PaginatedApplicationList: React.FC<Props> = ({
       items={items}
       noItemsText={noItemsText}
       onListLengthChanged={onListLengthChanged}
-    >
-      {hasItems && (
-        <$PaginationContainer>
-          <Pagination
-            pageHref={() => '#'}
-            pageIndex={currentPage}
-            pageCount={Math.ceil(list.length / Math.max(1, itemsPerPage))}
-            paginationAriaLabel={t('common:utility.pagination')}
-            onChange={(e, index) => {
-              e.preventDefault();
-              setPage(index);
-            }}
-            language={language}
-          />
-        </$PaginationContainer>
-      )}
-      {children}
-    </ListContents>
+      beforeList={beforeList}
+      afterList={
+        <>
+          {hasItems && (
+            <$PaginationContainer>
+              <Pagination
+                pageHref={() => '#'}
+                pageIndex={currentPage}
+                pageCount={Math.ceil(list.length / Math.max(1, itemsPerPage))}
+                paginationAriaLabel={t('common:utility.pagination')}
+                onChange={(e, index) => {
+                  e.preventDefault();
+                  setPage(index);
+                }}
+                language={language}
+              />
+            </$PaginationContainer>
+          )}
+          {afterList}
+        </>
+      }
+    />
   );
 };
 

diff --git a/...d/benefit/applicant/src/components/applications/applicationList/listItem/ListContents.tsx b/...d/benefit/applicant/src/components/applications/applicationList/listItem/ListContents.tsx
@@ -7,7 +7,7 @@ import {
 import ListItem from 'benefit/applicant/components/applications/applicationList/listItem/ListItem';
 import { ApplicationListProps } from 'benefit/applicant/components/applications/applicationList/useApplicationList';
 import { Select } from 'hds-react';
-import React, { PropsWithChildren, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import LoadingSkeleton from 'react-loading-skeleton';
 import Container from 'shared/components/container/Container';
 import theme from 'shared/styles/theme';
@@ -20,11 +20,11 @@ interface ListContentProps {
   items: JSX.Element[];
   noItemsText?: React.ReactNode;
   onListLengthChanged?: (isLoading: boolean, length: number) => void;
+  beforeList?: React.ReactNode;
+  afterList?: React.ReactNode;
 }
 
-type Props = PropsWithChildren<
-  Omit<ApplicationListProps, 'language'> & ListContentProps
->;
+type Props = Omit<ApplicationListProps, 'language'> & ListContentProps;
 
 const ListContents = ({
   shouldShowSkeleton,
@@ -40,7 +40,8 @@ const ListContents = ({
   hasItems,
   list,
   onListLengthChanged,
-  children,
+  beforeList,
+  afterList,
 }: Props): JSX.Element => {
   useEffect(() => {
     onListLengthChanged?.(shouldShowSkeleton, list.length);
@@ -77,11 +78,12 @@ const ListContents = ({
               )}
             </$OrderByContainer>
           </$HeadingContainer>
+          {beforeList}
           <$ListWrapper>
             {items}
             {!hasItems && noItemsText}
           </$ListWrapper>
-          {children}
+          {afterList}
         </>
       )}
     </Container>

diff --git a/frontend/benefit/applicant/src/pages/index.tsx b/frontend/benefit/applicant/src/pages/index.tsx
@@ -6,7 +6,8 @@ import FrontPageMainIngress from 'benefit/applicant/components/mainIngress/front
 import PrerequisiteReminder from 'benefit/applicant/components/prerequisiteReminder/PrerequisiteReminder';
 import AppContext from 'benefit/applicant/context/AppContext';
 import { useTranslation } from 'benefit/applicant/i18n';
-import { Button, IconArrowRight } from 'hds-react';
+import { isTruthy } from 'benefit-shared/utils/common';
+import { Button, IconArrowRight, Notification } from 'hds-react';
 import { GetStaticProps, NextPage } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -15,6 +16,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import withAuth from 'shared/components/hocs/withAuth';
 import getServerSideTranslations from 'shared/i18n/get-server-side-translations';
+import { useTheme } from 'styled-components';
 
 import { ROUTES, SUBMITTED_STATUSES } from '../constants';
 import FrontPageProvider from '../context/FrontPageProvider';
@@ -23,6 +25,7 @@ const ApplicantIndex: NextPage = () => {
   const { t } = useTranslation();
   const router = useRouter();
   const queryClient = useQueryClient();
+  const theme = useTheme();
 
   const { setIsNavigationVisible } = React.useContext(AppContext);
 
@@ -100,18 +103,32 @@ const ApplicantIndex: NextPage = () => {
               status={SUBMITTED_STATUSES}
               isArchived={false}
               onListLengthChanged={onSubmittedChange}
-            >
-              <$ListActionButtonContainer>
-                <Button
-                  onClick={() => router.push(ROUTES.DECISIONS)}
-                  variant="secondary"
-                  theme="black"
-                  iconRight={<IconArrowRight />}
-                >
-                  {t('common:applications.list.navigateToDecisions')}
-                </Button>
-              </$ListActionButtonContainer>
-            </ApplicationList>
+              beforeList={
+                isTruthy(process.env.NEXT_PUBLIC_ENABLE_ALTERATION_FEATURES) ? (
+                  <Notification
+                    label={t(
+                      'common:applications.list.alterationReminder.label'
+                    )}
+                    type="info"
+                    style={{ marginBottom: theme.spacing.m }}
+                  >
+                    {t('common:applications.list.alterationReminder.body')}
+                  </Notification>
+                ) : null
+              }
+              afterList={
+                <$ListActionButtonContainer>
+                  <Button
+                    onClick={() => router.push(ROUTES.DECISIONS)}
+                    variant="secondary"
+                    theme="black"
+                    iconRight={<IconArrowRight />}
+                  >
+                    {t('common:applications.list.navigateToDecisions')}
+                  </Button>
+                </$ListActionButtonContainer>
+              }
+            />
           </>
         )}
         <PrerequisiteReminder />