From bb5a55d48714177c867702c276a49ce754ed2e9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilia=20M=C3=A4kel=C3=A4?= Date: Thu, 11 Jan 2024 08:30:08 +0200 Subject: [PATCH] feat: Applicant landing page adjustments (HL-1033) (#2709) * feat: Add Koros background to applicant landing page main heading * feat: Add checklist note to the benefit applicant front page * chore: Adjust benefit applicant landing page intro wording --- .../applicant/public/locales/en/common.json | 14 ++++- .../applicant/public/locales/fi/common.json | 14 ++++- .../applicant/public/locales/sv/common.json | 14 ++++- .../components/mainIngress/MainIngress.sc.ts | 14 ++++- .../components/mainIngress/MainIngress.tsx | 58 ++++++++++--------- .../PrerequisiteReminder.sc.ts | 34 +++++++++++ .../PrerequisiteReminder.tsx | 51 ++++++++++++++++ .../benefit/applicant/src/pages/index.tsx | 2 + 8 files changed, 170 insertions(+), 31 deletions(-) create mode 100644 frontend/benefit/applicant/src/components/prerequisiteReminder/PrerequisiteReminder.sc.ts create mode 100644 frontend/benefit/applicant/src/components/prerequisiteReminder/PrerequisiteReminder.tsx diff --git a/frontend/benefit/applicant/public/locales/en/common.json b/frontend/benefit/applicant/public/locales/en/common.json index 8ece2685ea..48ae5b85e5 100644 --- a/frontend/benefit/applicant/public/locales/en/common.json +++ b/frontend/benefit/applicant/public/locales/en/common.json @@ -461,10 +461,22 @@ "mainIngress": { "heading": "Applications", "description1": "Welcome to the Helsinki benefit service.", - "description2": " You can save an incomplete application and continue to fill it in later.", + "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" }, + "prerequisiteReminder": { + "heading": "Did you remember these before filling out the application form?", + "body": "You need the following attachments for the application: a notice of personal data processing signed by the hired person, a signed employment contract, and one of the following: a pay subsidy decision, a decision on employment subsidy for ages 55 and above, or a Helsinki benefit card.", + "downloadButton": { + "href": "https://stplattaprod.blob.core.windows.net/tyoyrittaminen5ce88prod/Helsinki_benefit_notification_0.pdf", + "label": "Download the notice of personal data processing" + }, + "moreDetailsLink": { + "href": "https://hel.fi/helsinki-benefit", + "label": "See the instructions for applying for the Helsinki benefit" + } + }, "attachmentsIngress": { "text": "Add the following attachments to the application. All attachments marked with * are required. The accepted file formats are JPG, PNG and PDF and the maximum file size is 10 MB." }, diff --git a/frontend/benefit/applicant/public/locales/fi/common.json b/frontend/benefit/applicant/public/locales/fi/common.json index 2d5c4de761..778d0474a6 100644 --- a/frontend/benefit/applicant/public/locales/fi/common.json +++ b/frontend/benefit/applicant/public/locales/fi/common.json @@ -461,10 +461,22 @@ "mainIngress": { "heading": "Hakemukset", "description1": "Tervetuloa Helsinki-lisän asiointipalveluun.", - "description2": " Voit tallentaa hakemuksen keskeneräisenä ja jatkaa täyttämistä myöhemmin.", + "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" }, + "prerequisiteReminder": { + "heading": "Muistitko nämä ennen hakulomakkeen täyttämistä?", + "body": "Tarvitset hakemuksen liitteiksi työllistettävän allekirjoituksen henkilötietojen käsittelystä, allekirjoitetun työsopimuksen, sekä jonkin seuraavista: palkkatukipäätös, 55 vuotta täyttäneiden työllistämistukipäätös tai Helsinki-lisä -kortti.", + "downloadButton": { + "href": "https://stplattaprod.blob.core.windows.net/tyoyrittaminen5ce88prod/Helsinki-lisä_tiedoksianto.pdf", + "label": "Lataa tiedoksianto työllistettävän henkilötietojen käsittelystä" + }, + "moreDetailsLink": { + "href": "https://hel.fi/helsinki-lisa", + "label": "Katso ohjeet Helsinki-lisän hakemiseen" + } + }, "attachmentsIngress": { "text": "Lisää hakemukselle seuraavat liitteet. Kaikki *-merkityt liitteet ovat pakollisia. Tiedostomuoto voi olla JPG, PNG tai PDF ja kooltaan maksimissaan 10 MB." }, diff --git a/frontend/benefit/applicant/public/locales/sv/common.json b/frontend/benefit/applicant/public/locales/sv/common.json index c0bb4834f4..604125f3aa 100644 --- a/frontend/benefit/applicant/public/locales/sv/common.json +++ b/frontend/benefit/applicant/public/locales/sv/common.json @@ -461,10 +461,22 @@ "mainIngress": { "heading": "Ansökningar", "description1": "Välkommen till e-tjänsten för Helsingforstillägg.", - "description2": " Du kan spara en halvfärdig ansökan och komplettera den senare.", + "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" }, + "prerequisiteReminder": { + "heading": "Kom du ihåg dessa innan du fyllde i ansökan om Helsingforstillägget?", + "body": "Du behöver följande bilagor till ansökan: ett meddelande om personuppgiftsbehandling undertecknat av den som anställs, \nundertecknat arbetsavtal, och något av följande: beslutet om lönesubvention, beslutet om sysselsättningsstöd för personer som fyllt 55 år eller Helsingforstillägg-kortet.", + "downloadButton": { + "href": "https://stplattaprod.blob.core.windows.net/tyoyrittaminen5ce88prod/Helsingforstillägg_delgivning_0.pdf", + "label": "Ladda ner meddelandet om behandlingen av personuppgifter" + }, + "moreDetailsLink": { + "href": "https://hel.fi/helsingforstillagg", + "label": "Se instruktionerna för att ansöka om Helsingforstilläggetn" + } + }, "attachmentsIngress": { "text": "Bifoga följande bilagor till ansökan. Alla bilagor märkta med * är obligatoriska. Filformatet kan vara JPG, PNG eller PDF och den maximala filstorleken får vara 10 MB." }, diff --git a/frontend/benefit/applicant/src/components/mainIngress/MainIngress.sc.ts b/frontend/benefit/applicant/src/components/mainIngress/MainIngress.sc.ts index d3618a22c7..49fe1a5ca3 100644 --- a/frontend/benefit/applicant/src/components/mainIngress/MainIngress.sc.ts +++ b/frontend/benefit/applicant/src/components/mainIngress/MainIngress.sc.ts @@ -1,9 +1,10 @@ import { $Notification as NotificationBase } from 'benefit/applicant/components/Notification/Notification.sc'; +import { Koros } from 'hds-react'; import { respondAbove } from 'shared/styles/mediaQueries'; import styled from 'styled-components'; export const $Container = styled.div` - padding-bottom: ${(props) => props.theme.spacing.m}; + background-color: ${(props) => props.theme.colors.silver}; `; export const $TextContainer = styled.div` @@ -44,3 +45,14 @@ export const $ActionContainer = styled.div` export const $Notification = styled(NotificationBase)` margin-bottom: ${(props) => props.theme.spacing.xs}; `; + +export const $KorosContainer = styled.div` + position: relative; + overflow: hidden; + margin-bottom: ${(props) => props.theme.spacing.m}; +`; + +export const $Koros = styled(Koros)` + fill: ${(props) => props.theme.colors.silver}; + margin-top: calc(${(props) => props.theme.spacing.xl} * -1); +`; diff --git a/frontend/benefit/applicant/src/components/mainIngress/MainIngress.tsx b/frontend/benefit/applicant/src/components/mainIngress/MainIngress.tsx index d50f3a9c7a..5a44c7ee69 100644 --- a/frontend/benefit/applicant/src/components/mainIngress/MainIngress.tsx +++ b/frontend/benefit/applicant/src/components/mainIngress/MainIngress.tsx @@ -2,13 +2,14 @@ import { $Notification } from 'benefit/applicant/components/Notification/Notific import { Button, IconPlus } from 'hds-react'; import * as React from 'react'; import Container from 'shared/components/container/Container'; -import theme from 'shared/styles/theme'; import { $ActionContainer, $Container, $Description, $Heading, + $Koros, + $KorosContainer, $TextContainer, } from './MainIngress.sc'; import { useMainIngress } from './useMainIngress'; @@ -24,36 +25,39 @@ const MainIngress: React.FC = () => { )); return ( - +
<$Container> - <$Heading>{t('common:mainIngress.heading')} - {notificationItems} - <$TextContainer> - <$Description> - {t('common:mainIngress.description1')} - {/* TODO: uncomment once having link to redirect to more info url, - handleMoreInfoClick is from useMainIngress */} - {/* <$Link onClick={handleMoreInfoClick}> + + <$Heading>{t('common:mainIngress.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')} */} - {t('common:mainIngress.description2')} - - <$ActionContainer> - - - + {t('common:mainIngress.description2')} + + <$ActionContainer> + + + + - + <$KorosContainer> + <$Koros type="basic" rotate="180deg" /> + +
); }; diff --git a/frontend/benefit/applicant/src/components/prerequisiteReminder/PrerequisiteReminder.sc.ts b/frontend/benefit/applicant/src/components/prerequisiteReminder/PrerequisiteReminder.sc.ts new file mode 100644 index 0000000000..fcaf93ded9 --- /dev/null +++ b/frontend/benefit/applicant/src/components/prerequisiteReminder/PrerequisiteReminder.sc.ts @@ -0,0 +1,34 @@ +import { Card, IconInfoCircle, Link } from 'hds-react'; +import styled from 'styled-components'; + +export const $PrerequisiteCard = styled(Card)` + --background-color: ${(props) => props.theme.colors.fogMediumLight}; + display: flex; + gap: ${(props) => props.theme.spacing.m}; + padding-bottom: ${(props) => props.theme.spacingLayout.m}; + + p { + line-height: ${(props) => props.theme.lineHeight.l}; + } +`; + +export const $IconInfoCircle = styled(IconInfoCircle)` + flex: 0 0 auto; + && { + --icon-size: ${(props) => props.theme.spacingLayout.xl2}; + } +`; + +export const $Heading = styled.h2` + font-weight: 300; + font-size: ${(props) => props.theme.fontSize.heading.l}; +`; + +export const $DownloadButtonContainer = styled.div` + margin: ${(props) => props.theme.spacing.m} 0; +`; + +export const $Link = styled(Link)` + --link-color: ${(props) => props.theme.colors.black}; + --link-visited-color: ${(props) => props.theme.colors.black}; +`; diff --git a/frontend/benefit/applicant/src/components/prerequisiteReminder/PrerequisiteReminder.tsx b/frontend/benefit/applicant/src/components/prerequisiteReminder/PrerequisiteReminder.tsx new file mode 100644 index 0000000000..ee60ad1479 --- /dev/null +++ b/frontend/benefit/applicant/src/components/prerequisiteReminder/PrerequisiteReminder.tsx @@ -0,0 +1,51 @@ +import { + $DownloadButtonContainer, + $Heading, + $IconInfoCircle, + $Link, + $PrerequisiteCard, +} from 'benefit/applicant/components/prerequisiteReminder/PrerequisiteReminder.sc'; +import { Button, IconDownload } from 'hds-react'; +import { NextPage } from 'next'; +import { useTranslation } from 'next-i18next'; +import React from 'react'; +import Container from 'shared/components/container/Container'; +import { openFileInNewTab } from 'shared/utils/file.utils'; + +const PrerequisiteReminder: NextPage = () => { + const { t } = useTranslation(); + + return ( + + <$PrerequisiteCard> + <$IconInfoCircle /> +
+ <$Heading>{t('common:prerequisiteReminder.heading')} +

{t('common:prerequisiteReminder.body')}

+ <$DownloadButtonContainer> + + + <$Link + href={t('common:prerequisiteReminder.moreDetailsLink.href')} + openInNewTab + > + {t('common:prerequisiteReminder.moreDetailsLink.label')} + +
+ + + ); +}; + +export default PrerequisiteReminder; diff --git a/frontend/benefit/applicant/src/pages/index.tsx b/frontend/benefit/applicant/src/pages/index.tsx index b085994704..8d7ae86b9d 100644 --- a/frontend/benefit/applicant/src/pages/index.tsx +++ b/frontend/benefit/applicant/src/pages/index.tsx @@ -1,5 +1,6 @@ import ApplicationsList from 'benefit/applicant/components/applications/applicationList/ApplicationList'; import MainIngress from 'benefit/applicant/components/mainIngress/MainIngress'; +import PrerequisiteReminder from 'benefit/applicant/components/prerequisiteReminder/PrerequisiteReminder'; import { useTranslation } from 'benefit/applicant/i18n'; import { GetStaticProps, NextPage } from 'next'; import Head from 'next/head'; @@ -32,6 +33,7 @@ const ApplicantIndex: NextPage = () => { heading={t('common:applications.list.submitted.heading')} status={SUBMITTED_STATUSES} /> + );