From 196af9722c47a18e20bee696f02d1ac06f847da3 Mon Sep 17 00:00:00 2001 From: Sampo Tawast <5328394+sirtawast@users.noreply.github.com> Date: Wed, 11 Oct 2023 12:43:28 +0300 Subject: [PATCH] feat: renew application overview step (HL-945) (#2334) * fix: resolve main and footer element background issue * feat: rewrite application step 5 (overview) * fix: add ibantools to benefit/shared * chore: update translations and fill with TODO * feat: rename component and add conditions for application view * fix: start date input would not preselect the right end date * refactor: cleanup de minimis test file --- .../browser-tests/page-model/deminimis.ts | 29 +- .../applicant/public/locales/en/common.json | 17 +- .../applicant/public/locales/fi/common.json | 39 ++- .../applicant/public/locales/sv/common.json | 17 +- .../forms/application/ApplicationInfo.ts | 69 ++++ .../step1/companyInfo/CompanyInfo.sc.ts | 42 --- .../step1/companyInfo/CompanyInfo.tsx | 68 ++-- .../step2/useApplicationFormStep2.ts | 5 +- .../step5/ApplicationFormStep5.tsx | 2 +- .../AttachmentsListView.tsx | 6 +- .../step5/companyInfoView/CompanyInfoView.tsx | 237 +++++++++---- .../step5/employeeView/EmployeeView.tsx | 330 +++++++++++------- .../src/components/layout/Layout.sc.ts | 7 +- .../src/components/layout/Layout.tsx | 2 +- .../summarySection/SummarySection.sc.ts | 2 + .../employmentView/EmpoymentView.tsx | 2 +- frontend/benefit/shared/package.json | 1 + frontend/benefit/shared/src/utils/common.ts | 4 + 18 files changed, 554 insertions(+), 325 deletions(-) create mode 100644 frontend/benefit/applicant/src/components/applications/forms/application/ApplicationInfo.ts delete mode 100644 frontend/benefit/applicant/src/components/applications/forms/application/step1/companyInfo/CompanyInfo.sc.ts diff --git a/frontend/benefit/applicant/browser-tests/page-model/deminimis.ts b/frontend/benefit/applicant/browser-tests/page-model/deminimis.ts index f478e7b742..b8e1c0d506 100644 --- a/frontend/benefit/applicant/browser-tests/page-model/deminimis.ts +++ b/frontend/benefit/applicant/browser-tests/page-model/deminimis.ts @@ -1,5 +1,6 @@ import { Selector } from 'testcafe'; +import fi from '../../public/locales/fi/common.json'; import MainIngress from './MainIngress'; import Step1 from './step1'; import Step2 from './step2'; @@ -21,7 +22,15 @@ class DeMinimisAid { public t: TestController; - private deminimisRowSelector = '[data-testid="deminimis-row"]'; + private selectors = { + deMinimisRow: '[data-testid="deminimis-row"]', + applicationEditButton: '[data-testid="application-edit-button"]', + toastError: '.Toastify__toast-body[role="alert"]', + }; + + // eslint-disable-next-line class-methods-use-this + private getSelectorContinueButton = (): Selector => + Selector('button').withText(fi.applications.actions.continue); fillMandatoryFields = async (): Promise => { const mainIngress = new MainIngress(); @@ -41,7 +50,7 @@ class DeMinimisAid { }; public getRowCount = async (): Promise => - Selector(this.deminimisRowSelector).count; + Selector(this.selectors.deMinimisRow).count; private step1ToStep2 = async (): Promise => { await this.step1.clickSubmit(); @@ -57,9 +66,9 @@ class DeMinimisAid { await this.step1.clickSaveAndClose(); const mainIngress = new MainIngress(); await mainIngress.isLoaded(); - await t.click(Selector('[data-testid="application-edit-button"]')); + await t.click(Selector(this.selectors.applicationEditButton)); await this.step1.isLoaded(); - await t.scrollIntoView(Selector('button').withText('Jatka')); + await t.scrollIntoView(this.getSelectorContinueButton()); }; public actions = { @@ -83,7 +92,7 @@ class DeMinimisAid { } if (action === SAVE_ACTIONS.CONTINUE) { await this.actions.saveStep1AndReturn(); - await t.scrollIntoView(Selector('button').withText('Jatka')); + await t.scrollIntoView(this.getSelectorContinueButton()); await t.expect(await this.getRowCount()).eql(rows.length); } if (action === SAVE_ACTIONS.SAVE_AND_EXIT) { @@ -124,11 +133,11 @@ class DeMinimisAid { fillAndLeaveUnfinished: async (t: TestController): Promise => { await this.step1.fillDeminimisAid('One', '1', ''); await this.step1.clickSubmit(); - const toastError = Selector( - '.Toastify__toast-body[role="alert"]' - ).withText('Puuttuvia de minimis-tuen tietoja'); + const toastError = Selector(this.selectors.toastError).withText( + fi.applications.sections.company.notifications.deMinimisUnfinished.label + ); await t.expect(await toastError.exists).ok(); - await t.click(toastError.find('[title="Sulje ilmoitus"]')); + await t.click(toastError.find(`[title="${fi.toast.closeToast}"]`)); }, clearRowsWithSelectNo: async ( @@ -145,7 +154,7 @@ class DeMinimisAid { } await this.step1.selectYesDeMinimis(); - await t.scrollIntoView(Selector('button').withText('Jatka')); + await t.scrollIntoView(this.getSelectorContinueButton()); await t.expect(await this.getRowCount()).eql(0); }, }; diff --git a/frontend/benefit/applicant/public/locales/en/common.json b/frontend/benefit/applicant/public/locales/en/common.json index 339c94c8ba..69ec4f1399 100644 --- a/frontend/benefit/applicant/public/locales/en/common.json +++ b/frontend/benefit/applicant/public/locales/en/common.json @@ -83,6 +83,7 @@ "deMinimisAidsHeading": "Below, please fill in all the de minimis aid granted to the organisation for the current and two previous tax years.", "deMinimisAidsAdd": "Save", "deMinimisAidsRemove": "Delete", + "deMinimisAidsYes": "TODO", "deMinimisAidsNo": "The applicant has not listed any previous de minimis aids.", "notifications": { "companyInformation": { @@ -113,7 +114,8 @@ }, "alternativeCompanyStreetAddress": { "label": "Address", - "placeholder": "Address" + "placeholder": "Address", + "view": "Delivery address" }, "alternativeCompanyPostcode": { "label": "Postal code", @@ -177,12 +179,17 @@ "coOperationNegotiations": { "label": "Does the organisation have ongoing or concluded change negotiations within the last 12 months?", "tooltipText": "If change negotiations are ongoing or ended during the previous 12 months, please provide a more detailed explanation of the situation, such as for example who the negotiations concern or what outcome the negotiations led to.", + "view": { + "yes": "TODO", + "no": "TODO" + }, "yes": "Yes", "no": "No" }, "coOperationNegotiationsDescription": { "label": "Provide a more detailed account of the co-determination negotiation situation:", - "placeholder": "Describe the situation" + "placeholder": "Describe the situation", + "labelShort": "Description" } } }, @@ -195,13 +202,11 @@ "heading4": "Helsinki benefit is applied for the period?", "heading4Sub1": "You can apply for the Helsinki benefit for the duration of the employment relationship, but only up to 12 months.", "heading5Employment": "Employment relationship", - "heading5Assignment": "Commission", "heading5EmploymentSub1": "Salary costs", "salaryExpensesExplanation": "Please report gross salary, Indirect labour costs and holiday pay in euros per month", "tooltips": { "heading5Employment": "Collective agreement applied: e.g. Collective Agreement for the Commercial Sector. If there is no binding collective agreement in the sector, put in a dash.", "heading5EmploymentSub1": "Gross salary refers to total salary before deducting taxes and statutory contributions. Gross salary is stated in employment contracts. If bonuses are paid as part of salary – such as evening, night or shift work – include an estimate of the amount of bonuses in the gross salary.", - "heading5Assignment": "The gross salary is the salary paid to the subsidised employee before the deduction of the employee's statutory contributions (the employee's unemployment insurance and pension insurance contributions) and taxes. If the subsidised employee is paid remuneration bonuses (e.g. evening, night or shift work bonus), take the estimated amount into account in the gross salary. The employers' statutory indirect labour costs include social security expenses, pension insurance, accident insurance and unemployment insurance premiums as well as the mandatory group life insurance premium. Indirect labour costs refer to the amount of the employer's statutory indirect labour costs paid for the salary per month. The holiday pay is a salary cost to be covered by the subsidy when it is paid for holiday pay during the subsidy period. Estimate the amount of holiday pay to be paid during the subsidy period. Holiday compensation is not covered by the Helsinki benefit.", "heading2": "The pay subsidy and the employment subsidy for people aged 55 and above are monetary subsidies intended to promote the employment of unemployed jobseekers.", "heading3": "The Helsinki benefit for employment is intended for guidance, orientation, tools, work clothing and workspace costs when no other support is paid for these. The Helsinki benefit for salary is intended for the cost of employing a subsidised employee (= gross salary, statutory indirect labour costs and holiday pay). The Helsinki benefit for a commission is intended for the performance of an individual job or project." }, @@ -238,6 +243,9 @@ "commissionBenefitSelected": "Please provide the duration of the commission here" }, "fields": { + "prefilled": { + "companyName": "Name of the employer" + }, "firstName": { "label": "First name", "placeholder": "First name" @@ -267,6 +275,7 @@ }, "paySubsidyGranted": { "label": "Has this employment relationship received any of the following aid?", + "labelShort": "Received aid", "paySubsidyDefault": "Pay subsidy", "paySubsidyAged": "Employment aid for people aged 55 and above", "paySubsidyNone": "None of the previous subsidies have been granted for this employment relationship" diff --git a/frontend/benefit/applicant/public/locales/fi/common.json b/frontend/benefit/applicant/public/locales/fi/common.json index 98d9c16c2f..e2c4b81c21 100644 --- a/frontend/benefit/applicant/public/locales/fi/common.json +++ b/frontend/benefit/applicant/public/locales/fi/common.json @@ -83,7 +83,8 @@ "deMinimisAidsHeading": "Täytä alle kaikki organisaatiolle myönnetyt de minimis -tuet kuluvan vuoden ja kahden edellisen verovuoden ajalta.", "deMinimisAidsAdd": "Tallenna", "deMinimisAidsRemove": "Poista", - "deMinimisAidsNo": "Hakija ei ole ilmoittanut aiemmista de minimis -tuista.", + "deMinimisAidsYes": "Kyllä, työnantajalle on myönnetty de minimis -tukia kuluvan vuoden ja kahden edellisen verovuoden aikana oheisen taulukon mukaisesti.", + "deMinimisAidsNo": "Ei, työnantajalle ei ole myönnetty de minimis -tukia kuluvan vuoden ja kahden edellisen verovuoden aikana.", "notifications": { "companyInformation": { "label": "Tiedot haetaan Yritys- ja yhteisötietojärjestelmästä", @@ -91,10 +92,10 @@ }, "deMinimisAidMaxAmount": { "label": "Enimmäismäärä ylitetty", - "content": "De minimis-tuen enimmäismäärä on ylitetty. Tuki voi olla enintään 200 000 euroa, joka myönnetään yritykselle kuluvan vuoden ja kahden edellisen verovuoden kuluessa. Enimmäismäärässä huomioidaan kaikkien eri viranomaisten kyseisenä ajanjaksona de minimis -tukena myöntämä rahoitus." + "content": "De minimis -tuen enimmäismäärä on ylitetty. Tuki voi olla enintään 200 000 euroa, joka myönnetään yritykselle kuluvan vuoden ja kahden edellisen verovuoden kuluessa. Enimmäismäärässä huomioidaan kaikkien eri viranomaisten kyseisenä ajanjaksona de minimis -tukena myöntämä rahoitus." }, "deMinimisUnfinished": { - "label": "Puuttuvia de minimis-tuen tietoja", + "label": "Puuttuvia de minimis -tuen tietoja", "content": "Täytä puuttuvat minimis -kentät ja paina 'Tallenna' painiketta." } }, @@ -105,7 +106,7 @@ "fields": { "companyBusinessId": "Y-tunnus", "companyName": "Työnantajan nimi", - "companyAddress": "Katuosoite", + "companyAddress": "Osoite", "companyPostcode": "Postinumero", "companyCity": "Postitoimipaikka", "useAlternativeAddress": { @@ -113,7 +114,8 @@ }, "alternativeCompanyStreetAddress": { "label": "Osoite", - "placeholder": "Osoite" + "placeholder": "Osoite", + "view": "Toimitusosoite" }, "alternativeCompanyPostcode": { "label": "Postinumero", @@ -177,12 +179,17 @@ "coOperationNegotiations": { "label": "Onko organisaatiolla käynnissä tai edeltävän 12 kuukauden aikana päättynyt muutosneuvottelut?", "tooltipText": "Jos muutosneuvottelut ovat käynnissä tai päättyneet edeltävän 12 kuukauden aikana, niin anna tarkempi selvitys tilanteesta, kuten esimerkiksi ketä neuvottelut koskevat tai mihin lopputulokseen neuvottelut johtivat.", + "view": { + "yes": "Kyllä, organisaatiolla on käynnissä olevat, tai päättyneet muutosneuvottelut edeltävän 12 kuukauden aikana.", + "no": "Ei, organisaatiolla ei ole käynnissä tai edeltävän 12 kuukauden aikana päättyneitä muutosneuvotteluja." + }, "yes": "Kyllä", "no": "Ei" }, "coOperationNegotiationsDescription": { "label": "Anna tarkempi selvitys neuvotteluiden tilanteesta.", - "placeholder": "Kuvaile tilannetta" + "placeholder": "Kuvaile tilannetta", + "labelShort": "Kuvaus tilanteesta" } } }, @@ -195,13 +202,11 @@ "heading4": "Mille ajalle haet Helsinki-lisää?", "heading4Sub1": "Voit hakea Helsinki-lisää työsuhteen keston ajaksi, mutta enintään 12 kuukaudeksi.", "heading5Employment": "Työsuhde", - "heading5Assignment": "Toimeksianto", "heading5EmploymentSub1": "Palkkauskustannukset", "salaryExpensesExplanation": "Ilmoita bruttopalkka, sivukulut ja lomaraha euroina kuukaudessa.", "tooltips": { "heading5Employment": "Sovellettava työehtosopimus: esim. Kaupan työehtosopimus. Jos alalla ei ole velvoittavaa työehtosopimusta, merkitse viiva.", "heading5EmploymentSub1": "Bruttopalkka tarkoittaa palkkasummaa ennen verojen ja lakisääteisten maksujen vähentämistä. Bruttopalkka on merkitty työsopimukseen. Mikäli osana palkkaa maksetaan lisiä, kuten ilta-, yö- tai vuorolisiä, laske arvio lisien määristä mukaan bruttopalkkaan.", - "heading5Assignment": "Palkkauskustannukset tooltip text", "heading2": "Palkkatuki ja ja 55-vuotta täyttäneiden työllistämistuki ovat työttömän työnhakijan työllistymisen edistämiseksi tarkoitettuja rahallisia tukia.", "heading3": "Työllistämisen Helsinki-lisä on tarkoitettu ohjaus-, perehdytys-, työväline-, työvaate- ja työtilakustannuksiin silloin, kun niihin ei makseta muuta tukea. Palkan Helsinki-lisä on tarkoitettu työllistetyn henkilön palkkauskustannuksiin (=bruttopalkka, lakisääteiset sivukulut ja lomaraha). Toimeksiannon Helsinki-lisä on tarkoitettu yksittäisen työn tai projektin suorittamiseen." }, @@ -238,6 +243,9 @@ "commissionBenefitSelected": "Merkitse tähän toimeksiannon kesto" }, "fields": { + "prefilled": { + "companyName": "Työnantajan nimi" + }, "firstName": { "label": "Etunimi", "placeholder": "Etunimi" @@ -267,6 +275,7 @@ }, "paySubsidyGranted": { "label": "Onko työsuhteeseen myönnetty jokin seuraavista tuista?", + "labelShort": "Myönnetyt tuet", "paySubsidyDefault": "Palkkatuki", "paySubsidyAged": "55 vuotta täyttäneiden työllistämistuki", "paySubsidyNone": "Työsuhteeseen ei ole myönnetty mitään edeltävistä tuista" @@ -289,8 +298,8 @@ "commission": "Toimeksiannon Helsinki-lisä" }, "jobTitle": { - "label": "Tehtävänimike", - "placeholder": "Tehtävänimike" + "label": "Työnimike", + "placeholder": "Työnimike" }, "workingHours": { "label": "Työaika", @@ -333,17 +342,17 @@ "placeholder": "Palkkio" }, "startDate": { - "label": "Alkaen", - "placeholder": "Alkaen" + "label": "Aloituspäivä", + "placeholder": "Aloituspäivä" }, "endDate": { - "label": "Päättyen", - "placeholder": "Päättyen" + "label": "Päättymispäivä", + "placeholder": "Päättymispäivä" } } }, "attachments": { - "heading1": " ", + "heading1": "Liitteet", "types": { "employmentContract": { "title": "Työsopimus", diff --git a/frontend/benefit/applicant/public/locales/sv/common.json b/frontend/benefit/applicant/public/locales/sv/common.json index a76403611b..4eda5b864f 100644 --- a/frontend/benefit/applicant/public/locales/sv/common.json +++ b/frontend/benefit/applicant/public/locales/sv/common.json @@ -83,6 +83,7 @@ "deMinimisAidsHeading": "Fyll i alla de de minimis-stöd som har beviljats organisationen under innevarande år och under två föregående skatteår", "deMinimisAidsAdd": "Spara", "deMinimisAidsRemove": "Ta bort", + "deMinimisAidsYes": "TODO", "deMinimisAidsNo": "Sökanden har inte angett några tidigare de minimis -stöd.", "notifications": { "companyInformation": { @@ -113,7 +114,8 @@ }, "alternativeCompanyStreetAddress": { "label": "Adress", - "placeholder": "Adress" + "placeholder": "Adress", + "view": "Leveransadress" }, "alternativeCompanyPostcode": { "label": "Postnummer", @@ -177,12 +179,17 @@ "coOperationNegotiations": { "label": "Pågår samarbetsförhandlingar i organisationen eller har de avslutats under föregående 12 månader?", "tooltipText": "Om samarbetsförhandlingar pågår eller avslutats under de senaste 12 månaderna, vänligen ge en mer detaljerad förklaring av situationen, som till exempel vem samarbetsförhandlingarna gäller eller vilket resultat samarbetsförhandlingarna ledde till.", + "view": { + "yes": "TODO", + "no": "TODO" + }, "yes": "Ja", "no": "Nej" }, "coOperationNegotiationsDescription": { "label": "Ge en mer detaljerad beskrivning av situationen med samarbetsförhandlingar:", - "placeholder": "Beskriv situationen" + "placeholder": "Beskriv situationen", + "labelShort": "Beskrivning av situationen" } } }, @@ -195,13 +202,11 @@ "heading4": "För vilken tidperiod ansöker du om Helsingforstillägget?", "heading4Sub1": "Du kan ansöka om Helsingforstillägget för anställningsförhållandets tid men för högst 12 månader.", "heading5Employment": "Anställningsförhållande", - "heading5Assignment": "Uppdrag", "heading5EmploymentSub1": "Anställningskostnaderna", "salaryExpensesExplanation": "Ange bruttolönen, bikostnaderna och semesterpenning i euro per månad.", "tooltips": { "heading5Employment": "Kollektivavtal som tillämpas: t.ex. kollektivavtal för handeln. Sätt streck om branschen inte har ett bindande kollektivavtal.", "heading5EmploymentSub1": "Bruttolön innebär lönebeloppet innan avdraget av skatter och lagstadgade avgifter. Bruttolön anges i arbetsavtalet. Om tillägg såsom kväll-, natt- eller skiftsarbetstillägg betalas som en del av lönen, beräkna en uppskattning om beloppet på tilläggen in i bruttolönen.", - "heading5Assignment": "Med bruttolön avses lönen till den person som anställs med subventionen före innehållande av arbetsgivarens lagstadgade kostnader (arbetslöshets- och pensionsförsäkringspremier för arbetstagaren) och skatter. Om den person som anställs med subventionen får lönetillägg (t.ex. kvälls-, natt- eller skiftarbetstillägg), ska det uppskattade beloppet från dessa beaktas i bruttolönen. Till arbetsgivarens lagstadgade bikostnader räknas socialskyddsavgifterna och premierna för arbetspensionsförsäkringen, olycksfallsförsäkringen och arbetslöshetsförsäkringen samt den obligatoriska grupplivförsäkringen. Med bikostnader avses arbetsgivarens lagstadgade bikostnader per månad. Semesterpenning är en lönekostnad som kan täckas med subventionen till den del som semesterpenning betalas för semesterlön som används under subventionsperioden. Uppskatta semesterpenningen som betalas under subventionsperioden. Semesterpenning kan inte täckas med Helsingforstillägg.", "heading2": "Lönesubvention och sysselsättningsstöd för personer som fyllt 55 år är finansiella stöd som är avsedda för främjande av sysselsättning av en arbetslös arbetssökande.", "heading3": "Helsingforstillägg för sysselsättning är avsett för kostnaderna för handledning, inskolning, arbetsredskap, arbetskläder och arbetslokaler då inga andra understöd utbetalas för dessa. Helsingforstillägg för lön är avsett för lönekostnaderna för den anställda (=bruttolön, lagstadgade bikostnader och semesterpenning). Helsingforstillägg för uppdrag är avsett för utförande av ett enskilt jobb eller projekt." }, @@ -238,6 +243,9 @@ "commissionBenefitSelected": "Ange uppdragets längd här" }, "fields": { + "prefilled": { + "companyName": "Arbetsgivarens namn" + }, "firstName": { "label": "Förnamn", "placeholder": "Förnamn" @@ -267,6 +275,7 @@ }, "paySubsidyGranted": { "label": "Har något av de följande stöden beviljats för anställningsförhållandet?", + "labelShort": "Beviljat stöd", "paySubsidyDefault": "Lönesubvention", "paySubsidyAged": "Sysselsättningsstöd för personer som fyllt 55 år", "paySubsidyNone": "Inga av stöden ovan har beviljats för anställningsförhållandet" diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/ApplicationInfo.ts b/frontend/benefit/applicant/src/components/applications/forms/application/ApplicationInfo.ts new file mode 100644 index 0000000000..54d184071b --- /dev/null +++ b/frontend/benefit/applicant/src/components/applications/forms/application/ApplicationInfo.ts @@ -0,0 +1,69 @@ +import { breakpoints } from 'shared/styles/mediaQueries'; +import styled from 'styled-components'; + +type $CompanyInfoWrapperProps = { + $fontSize?: string; +}; +type $CompanyInfoRowProps = { + $forceColumn?: boolean; + $alignItems?: string; +}; +type $CompanyInfoValueProps = { + $column?: boolean; +}; + +export const $ApplicationDetailWrapper = styled.dl<$CompanyInfoWrapperProps>` + font-size: ${(props) => + props.$fontSize ? String(props.$fontSize) : props.theme.fontSize.body.m}; +`; + +export const $ApplicationDetailLabel = styled.dt` + min-width: calc(${(props) => props.theme.spacing.s} * 10); + font-weight: 500; + margin-right: ${(props) => props.theme.spacing.m}; +`; + +export const $ApplicationDetailValue = styled.dd<$CompanyInfoValueProps>` + margin-right: ${(props) => props.theme.spacing.xs}; + margin-inline-start: 0; + display: ${(props) => (props.$column ? 'flex-start' : 'inline-flex')}; + svg { + margin-left: ${(props) => props.theme.spacing.xs2}; + } +`; + +export const $ApplicationDetailRow = styled.div<$CompanyInfoRowProps>` + display: flex; + font-size: 1.1em; + line-height: ${(props) => props.theme.lineHeight.l}; + margin-bottom: calc(${(props) => props.theme.spacing.xl} / 2); + align-items: ${(props) => + props.$alignItems ? props.$alignItems : 'flex-start'}; + flex-flow: column wrap; + + // Could not figure out syntax to use respondAbove('xs') with props :( + @media screen and (min-width: ${breakpoints.xs}px) { + flex-flow: ${(props) => (props.$forceColumn ? 'column wrap' : 'row')}; + } + + ${$ApplicationDetailLabel} { + max-width: ${(props) => + props.$forceColumn ? 'none' : `calc(${props.theme.spacing.s} * 10)`}; + } + + &:last-of-type { + margin-bottom: 0; + } +`; + +export const $HintText = styled.section` + display: flex; + flex-flow: row; + font-size: 1.1em; + line-height: ${(props) => props.theme.lineHeight.l}; + margin-bottom: ${(props) => props.theme.spacing.xs}; + svg { + margin-right: ${(props) => props.theme.spacing.xs}; + min-width: ${(props) => props.theme.spacing.m}; + } +`; diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/step1/companyInfo/CompanyInfo.sc.ts b/frontend/benefit/applicant/src/components/applications/forms/application/step1/companyInfo/CompanyInfo.sc.ts deleted file mode 100644 index a78eb70181..0000000000 --- a/frontend/benefit/applicant/src/components/applications/forms/application/step1/companyInfo/CompanyInfo.sc.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { respondAbove } from 'shared/styles/mediaQueries'; -import styled from 'styled-components'; - -export const $CompanyInfoRow = styled.div` - display: flex; - font-size: 1.1em; - line-height: ${(props) => props.theme.lineHeight.l}; - margin-bottom: ${(props) => props.theme.spacing.s}; - align-items: flex-start; - flex-flow: column wrap; - ${respondAbove('xs')` - align-items: center; - flex-flow: row; - `}; -`; - -export const $CompanyInfoLabel = styled.dt` - min-width: 130px; - font-weight: 500; - margin-right: ${(props) => props.theme.spacing.m}; -`; - -export const $CompanyInfoValue = styled.dd` - margin-right: ${(props) => props.theme.spacing.xs}; - margin-inline-start: 0; - display: inline-flex; - svg { - margin-left: ${(props) => props.theme.spacing.xs2}; - } -`; - -export const $HintText = styled.section` - display: flex; - flex-flow: row; - font-size: 1.1em; - line-height: ${(props) => props.theme.lineHeight.l}; - margin-bottom: ${(props) => props.theme.spacing.xs}; - svg { - margin-right: ${(props) => props.theme.spacing.xs}; - min-width: ${(props) => props.theme.spacing.m}; - } -`; diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/step1/companyInfo/CompanyInfo.tsx b/frontend/benefit/applicant/src/components/applications/forms/application/step1/companyInfo/CompanyInfo.tsx index bcc0fc4904..93447ead36 100644 --- a/frontend/benefit/applicant/src/components/applications/forms/application/step1/companyInfo/CompanyInfo.tsx +++ b/frontend/benefit/applicant/src/components/applications/forms/application/step1/companyInfo/CompanyInfo.tsx @@ -19,11 +19,11 @@ import { import { useTheme } from 'styled-components'; import { - $CompanyInfoLabel, - $CompanyInfoRow, - $CompanyInfoValue, + $ApplicationDetailLabel, + $ApplicationDetailRow, + $ApplicationDetailValue, $HintText, -} from './CompanyInfo.sc'; +} from '../../ApplicationInfo'; import useCompanyInfo, { CompanyInfoFields } from './useCompanyInfo'; export interface CompanyInfoProps { @@ -79,71 +79,71 @@ const CompanyInfo: React.FC = ({ ) : (
- <$CompanyInfoRow> - <$CompanyInfoLabel> + <$ApplicationDetailRow> + <$ApplicationDetailLabel> {t(`${translationsBase}.fields.companyName`)} - - <$CompanyInfoValue> + + <$ApplicationDetailValue> {data.name}
)} diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/step2/useApplicationFormStep2.ts b/frontend/benefit/applicant/src/components/applications/forms/application/step2/useApplicationFormStep2.ts index d683051652..d32cea76b5 100644 --- a/frontend/benefit/applicant/src/components/applications/forms/application/step2/useApplicationFormStep2.ts +++ b/frontend/benefit/applicant/src/components/applications/forms/application/step2/useApplicationFormStep2.ts @@ -10,6 +10,7 @@ import { getErrorText } from 'benefit/applicant/utils/forms'; import { APPLICATION_FIELDS_STEP2, APPLICATION_FIELDS_STEP2_KEYS, + BENEFIT_TYPES, EMPLOYEE_KEYS, ORGANIZATION_TYPES, } from 'benefit-shared/constants'; @@ -197,9 +198,9 @@ const useApplicationFormStep2 = ( setFieldValue, ]); - const minEndDate = getMinEndDate(values.startDate, values.benefitType); + const minEndDate = getMinEndDate(values.startDate, BENEFIT_TYPES.SALARY); const minEndDateFormatted = convertToUIDateFormat(minEndDate); - const maxEndDate = getMaxEndDate(values.startDate, values.benefitType); + const maxEndDate = getMaxEndDate(values.startDate, BENEFIT_TYPES.SALARY); const endDate = parseDate(values.endDate); const isEndDateEligible = endDate && diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/step5/ApplicationFormStep5.tsx b/frontend/benefit/applicant/src/components/applications/forms/application/step5/ApplicationFormStep5.tsx index 0865fa4b31..0e3ee38c3e 100644 --- a/frontend/benefit/applicant/src/components/applications/forms/application/step5/ApplicationFormStep5.tsx +++ b/frontend/benefit/applicant/src/components/applications/forms/application/step5/ApplicationFormStep5.tsx @@ -130,7 +130,7 @@ const ApplicationFormStep5: React.FC< = ({ key={attachment.attachmentFileName} > - {attachment.attachmentFileName} + + {attachment.attachmentFileName} + ))} diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/step5/companyInfoView/CompanyInfoView.tsx b/frontend/benefit/applicant/src/components/applications/forms/application/step5/companyInfoView/CompanyInfoView.tsx index 40bb5856a0..d6a443ccb7 100644 --- a/frontend/benefit/applicant/src/components/applications/forms/application/step5/companyInfoView/CompanyInfoView.tsx +++ b/frontend/benefit/applicant/src/components/applications/forms/application/step5/companyInfoView/CompanyInfoView.tsx @@ -1,20 +1,26 @@ import SummarySection from 'benefit/applicant/components/summarySection/SummarySection'; +import { ORGANIZATION_TYPES } from 'benefit-shared/constants'; import { Application, DeMinimisAid } from 'benefit-shared/types/application'; +import { formatIBAN } from 'benefit-shared/utils/common'; import { Button, IconPen } from 'hds-react'; import { useTranslation } from 'next-i18next'; import * as React from 'react'; import { $GridCell } from 'shared/components/forms/section/FormSection.sc'; -import { getFullName } from 'shared/utils/application.utils'; import { convertToUIDateFormat } from 'shared/utils/date.utils'; -import { formatStringFloatValue } from 'shared/utils/string.utils'; +import { formatFloatToCurrency } from 'shared/utils/string.utils'; import { useTheme } from 'styled-components'; import { $SummaryTableHeader, $SummaryTableValue, $ViewField, - $ViewFieldBold, } from '../../Application.sc'; +import { + $ApplicationDetailLabel, + $ApplicationDetailRow, + $ApplicationDetailValue, + $ApplicationDetailWrapper, +} from '../../ApplicationInfo'; export interface CompanyInfoViewProps { data: Application; @@ -33,14 +39,10 @@ const CompanyInfoView: React.FC = ({ return ( <> handleStepChange(1)} variant="supplementary" iconLeft={} @@ -49,74 +51,145 @@ const CompanyInfoView: React.FC = ({ ) } + header={t(`${translationsBase}.company.heading1`)} withoutDivider > - <$GridCell $colSpan={3}> - <$ViewField>{data.company?.name} - <$ViewField>{`${t(`${translationsBase}.company.businessId`, { - businessId: data.company?.businessId, - })}`} - <$ViewField> - {t( - `${translationsBase}.company.fields.companyBankAccountNumber.label` + <$GridCell $colSpan={5}> + <$ApplicationDetailWrapper $fontSize={theme.fontSize.body.m}> + <$ApplicationDetailRow> + <$ApplicationDetailLabel> + {t(`${translationsBase}.company.fields.companyName`)} + + <$ApplicationDetailValue> + {data.company?.name} + + + + <$ApplicationDetailRow> + <$ApplicationDetailLabel> + {t(`${translationsBase}.company.fields.companyBusinessId`)} + + <$ApplicationDetailValue> + {data.company?.businessId} + + + + <$ApplicationDetailRow> + <$ApplicationDetailLabel> + {t(`${translationsBase}.company.fields.companyAddress`)} + + <$ApplicationDetailValue $column> +
{data.company?.streetAddress}
+
+ {data.company?.postcode || ''} {data.company?.city || ''} +
+ + + {data.alternativeCompanyStreetAddress && ( + <$ApplicationDetailRow> + <$ApplicationDetailLabel> + {t( + `${translationsBase}.company.fields.alternativeCompanyStreetAddress.view` + )} + + <$ApplicationDetailValue $column> +
+ {data.companyDepartment ? data.companyDepartment : ''} +
+
{data.alternativeCompanyStreetAddress}
+
+ {data.alternativeCompanyPostcode}{' '} + {data.alternativeCompanyCity} +
+ + )} - : {data?.companyBankAccountNumber} - - + <$ApplicationDetailRow> + <$ApplicationDetailLabel> + {t( + `${translationsBase}.company.fields.companyBankAccountNumber.label` + )} + + <$ApplicationDetailValue> + {formatIBAN(data?.companyBankAccountNumber)} + + - <$GridCell $colSpan={3}> - <$ViewField>{data.company?.streetAddress} - <$ViewField>{`${data.company?.postcode || ''} ${ - data.company?.city || '' - }`} + {data?.organizationType === ORGANIZATION_TYPES.ASSOCIATION && ( + <$ApplicationDetailRow $forceColumn> + <$ApplicationDetailLabel> + {t( + `${translationsBase}.company.fields.associationHasBusinessActivities.label` + )} + + <$ApplicationDetailValue> + {data?.associationHasBusinessActivities + ? t('common:utility.yes') + : t('common:utility.no ')} + + + )} + - {data.alternativeCompanyStreetAddress && ( - - <$GridCell - $colSpan={12} - css={` - font-size: ${theme.fontSize.body.m}; - margin: ${theme.spacing.xs4} 0; - `} - > - <$ViewFieldBold> - {t(`${translationsBase}.company.heading1Additional`)} - - - <$GridCell $colSpan={3}> - {data.companyDepartment && ( - <$ViewField>{data.companyDepartment} - )} - <$ViewField>{data.alternativeCompanyStreetAddress} - <$ViewField> - {[data.alternativeCompanyPostcode, data.alternativeCompanyCity] - .join(' ') - .trim()} - - - - )} + <$GridCell $colSpan={3}> - <$ViewField> - {getFullName( - data.companyContactPersonFirstName, - data.companyContactPersonLastName - )} - - <$ViewField>{data.companyContactPersonPhoneNumber} - <$ViewField>{data.companyContactPersonEmail} - <$ViewField> - {t(`${translationsBase}.company.fields.applicantLanguage.label`)} - {': '} - <$ViewFieldBold> - {t(`common:languages.${data.applicantLanguage || ''}`)} - - + <$ApplicationDetailWrapper $fontSize={theme.fontSize.body.m}> + <$ApplicationDetailRow> + <$ApplicationDetailLabel> + {t( + `${translationsBase}.company.fields.companyContactPersonFirstName.label` + )} + + <$ApplicationDetailValue> + {data.companyContactPersonFirstName} + + + <$ApplicationDetailRow> + <$ApplicationDetailLabel> + {t( + `${translationsBase}.company.fields.companyContactPersonLastName.label` + )} + + <$ApplicationDetailValue> + {data.companyContactPersonLastName} + + + <$ApplicationDetailRow> + <$ApplicationDetailLabel> + {t( + `${translationsBase}.company.fields.companyContactPersonPhoneNumber.label` + )} + + <$ApplicationDetailValue> + {data.companyContactPersonPhoneNumber} + + + <$ApplicationDetailRow> + <$ApplicationDetailLabel> + {t( + `${translationsBase}.company.fields.companyContactPersonEmail.placeholder` + )} + + <$ApplicationDetailValue> + {data.companyContactPersonEmail} + + + <$ApplicationDetailRow> + <$ApplicationDetailLabel> + {t( + `${translationsBase}.company.fields.applicantLanguage.label` + )} + + <$ApplicationDetailValue> + {t(`common:languages.${data.applicantLanguage || ''}`)} + + + = ({ <$GridCell $colSpan={2}> <$SummaryTableValue> - {formatStringFloatValue(aid.amount)} + {formatFloatToCurrency(aid.amount, 'EUR')} <$GridCell> @@ -177,20 +250,30 @@ const CompanyInfoView: React.FC = ({ )} - + <$GridCell $colStart={1} $colSpan={12}> {t( - `${translationsBase}.company.fields.coOperationNegotiations.label` - )}{' '} - <$ViewFieldBold> - {t( - `${translationsBase}.company.fields.coOperationNegotiations.${ - data.coOperationNegotiations ? 'yes' : 'no' - }` - )} - - <$ViewField>{data.coOperationNegotiationsDescription} + `${translationsBase}.company.fields.coOperationNegotiations.view.${ + data.coOperationNegotiations ? 'yes' : 'no' + }` + )} + {data.coOperationNegotiations && ( + <$GridCell $colSpan={12}> + <$ApplicationDetailWrapper> + <$ApplicationDetailRow $forceColumn> + <$ApplicationDetailLabel> + {t( + `${translationsBase}.company.fields.coOperationNegotiationsDescription.labelShort` + )} + + <$ApplicationDetailValue> + {data.coOperationNegotiationsDescription} + + + + + )} ); diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/step5/employeeView/EmployeeView.tsx b/frontend/benefit/applicant/src/components/applications/forms/application/step5/employeeView/EmployeeView.tsx index 4907da4be4..90732550c3 100644 --- a/frontend/benefit/applicant/src/components/applications/forms/application/step5/employeeView/EmployeeView.tsx +++ b/frontend/benefit/applicant/src/components/applications/forms/application/step5/employeeView/EmployeeView.tsx @@ -1,15 +1,39 @@ import SummarySection from 'benefit/applicant/components/summarySection/SummarySection'; -import { BENEFIT_TYPES } from 'benefit-shared/constants'; +import { BENEFIT_TYPES, PAY_SUBSIDY_GRANTED } from 'benefit-shared/constants'; import { Application } from 'benefit-shared/types/application'; import { Button, IconPen } from 'hds-react'; import { useTranslation } from 'next-i18next'; import * as React from 'react'; import { $GridCell } from 'shared/components/forms/section/FormSection.sc'; import { convertToUIDateFormat } from 'shared/utils/date.utils'; -import { formatStringFloatValue } from 'shared/utils/string.utils'; +import { + formatFloatToCurrency, + formatStringFloatValue, +} from 'shared/utils/string.utils'; import { useTheme } from 'styled-components'; -import { $ViewField, $ViewFieldBold } from '../../Application.sc'; +import { + $ApplicationDetailLabel, + $ApplicationDetailRow, + $ApplicationDetailValue, + $ApplicationDetailWrapper, +} from '../../ApplicationInfo'; + +const paySubsidyTranslation = (value: PAY_SUBSIDY_GRANTED): string => { + switch (value) { + case PAY_SUBSIDY_GRANTED.GRANTED: + return 'paySubsidyDefault'; + + case PAY_SUBSIDY_GRANTED.GRANTED_AGED: + return 'paySubsidyAged'; + + case PAY_SUBSIDY_GRANTED.NOT_GRANTED: + return 'paySubsidyNone'; + + default: + return 'paySubsidyNone'; + } +}; export interface EmployeeViewProps { data: Application; @@ -34,9 +58,6 @@ const EmployeeView: React.FC = ({ !isReadOnly && (