diff --git a/frontend/benefit/applicant/public/locales/en/common.json b/frontend/benefit/applicant/public/locales/en/common.json index dd93e0e370..43cadde851 100644 --- 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 index e47a165159..9698b049aa 100644 --- 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 index f41a1dc423..552cdb7647 100644 --- 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 index a0c37552df..027de0e5fb 100644 --- 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> = ({ +const ApplicationList: React.FC = ({ heading, status, isArchived, orderByOptions, noItemsText, - children, onListLengthChanged, + beforeList, + afterList, }) => { const { list, @@ -58,9 +61,9 @@ const ApplicationList: React.FC> = ({ items={items} noItemsText={noItemsText} onListLengthChanged={onListLengthChanged} - > - {children} - + beforeList={beforeList} + afterList={afterList} + /> ); }; diff --git a/frontend/benefit/applicant/src/components/applications/applicationList/ExpandableApplicationList.tsx b/frontend/benefit/applicant/src/components/applications/applicationList/ExpandableApplicationList.tsx index 25c31b4317..b5de4e45a6 100644 --- a/frontend/benefit/applicant/src/components/applications/applicationList/ExpandableApplicationList.tsx +++ b/frontend/benefit/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 = ({ heading, @@ -22,8 +20,9 @@ const ExpandableApplicationList: React.FC = ({ initialItems, orderByOptions, noItemsText, - children, onListLengthChanged, + beforeList, + afterList, }) => { const { list, @@ -66,24 +65,28 @@ const ExpandableApplicationList: React.FC = ({ items={items} noItemsText={noItemsText} onListLengthChanged={onListLengthChanged} - > - {hasItems && showExpand && ( - <$ListActionButtonContainer> - - - )} - {children} - + beforeList={beforeList} + afterList={ + <> + {hasItems && showExpand && ( + <$ListActionButtonContainer> + + + )} + {afterList} + + } + /> ); }; diff --git a/frontend/benefit/applicant/src/components/applications/applicationList/PaginatedApplicationList.tsx b/frontend/benefit/applicant/src/components/applications/applicationList/PaginatedApplicationList.tsx index 154d392376..c0041503b1 100644 --- a/frontend/benefit/applicant/src/components/applications/applicationList/PaginatedApplicationList.tsx +++ b/frontend/benefit/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 = ({ heading, @@ -25,8 +23,9 @@ const PaginatedApplicationList: React.FC = ({ initialPage, orderByOptions, noItemsText, - children, onListLengthChanged, + beforeList, + afterList, }) => { const { list, @@ -71,24 +70,28 @@ const PaginatedApplicationList: React.FC = ({ items={items} noItemsText={noItemsText} onListLengthChanged={onListLengthChanged} - > - {hasItems && ( - <$PaginationContainer> - '#'} - 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} - /> - - )} - {children} - + beforeList={beforeList} + afterList={ + <> + {hasItems && ( + <$PaginationContainer> + '#'} + 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} + /> + + )} + {afterList} + + } + /> ); }; diff --git a/frontend/benefit/applicant/src/components/applications/applicationList/listItem/ListContents.tsx b/frontend/benefit/applicant/src/components/applications/applicationList/listItem/ListContents.tsx index 69a92ac01b..201257b039 100644 --- a/frontend/benefit/applicant/src/components/applications/applicationList/listItem/ListContents.tsx +++ b/frontend/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 & ListContentProps ->; +type Props = Omit & 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 = ({ )} + {beforeList} <$ListWrapper> {items} {!hasItems && noItemsText} - {children} + {afterList} )} diff --git a/frontend/benefit/applicant/src/pages/index.tsx b/frontend/benefit/applicant/src/pages/index.tsx index 5e2d503c13..c7bdba07ed 100644 --- 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> - - - + beforeList={ + isTruthy(process.env.NEXT_PUBLIC_ENABLE_ALTERATION_FEATURES) ? ( + + {t('common:applications.list.alterationReminder.body')} + + ) : null + } + afterList={ + <$ListActionButtonContainer> + + + } + /> )}