From dbb987e96988239ade900b3962bc13876da6de9a Mon Sep 17 00:00:00 2001 From: Maks Turtiainen Date: Thu, 7 Sep 2023 18:10:29 +0300 Subject: [PATCH 01/26] feat: new benefit terms modifications (handler) --- .../handler/public/locales/fi/common.json | 13 +- .../formContent/FormContent.tsx | 118 ++---------------- .../newApplication/utils/validation.ts | 37 +----- frontend/benefit/handler/src/constants.ts | 10 +- frontend/benefit/shared/src/constants.ts | 1 - 5 files changed, 24 insertions(+), 155 deletions(-) diff --git a/frontend/benefit/handler/public/locales/fi/common.json b/frontend/benefit/handler/public/locales/fi/common.json index 961abf94ca..3acb2ee331 100644 --- a/frontend/benefit/handler/public/locales/fi/common.json +++ b/frontend/benefit/handler/public/locales/fi/common.json @@ -275,8 +275,8 @@ "company5": "Työnantajan yhteystiedot", "employment1": "Työllistettävä henkilö", "employment1Short": "Palkattava henkilö", - "employment2": "Palkkatukipäätös", - "employment3": "Haettava tukimuoto", + "employment2": "Työsuhteeseen myönnetyt valtion tuet", + "employment3": "Haettu ajanjakso", "employment3Long": "Haettava tukimuoto ja ajankohta", "employment4": "Tukea haetaan ajalle", "employment5Employment": "Työsuhde", @@ -432,10 +432,11 @@ "no": "Ei", "error": "Jotta tukea voidaan myöntää, kotikunnan tulee olla Helsinki." }, - "paySubsidyGranted": { - "label": "Onko työsuhteeseen myönnetty palkkatuki?", - "yes": "Kyllä", - "no": "Ei" + "subsidyGranted": { + "label": "Onko työsuhteeseen myönnetty jokin seuraavista tuista?", + "salarySupport": "Palkkatuki", + "oldAgeSupport": "55-vuotta täyttäneiden työllistämistuki", + "no": "Työsuhteeseen ei ole myönnetty mitään edeltävää tukea" }, "paySubsidyPercent": { "label": "Päätöksessä oleva palkkatukiprosentti" diff --git a/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx b/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx index 4c9fb860a9..5084eb6705 100644 --- a/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx +++ b/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx @@ -13,16 +13,19 @@ import { BENEFIT_TYPES, ORGANIZATION_TYPES, } from 'benefit-shared/constants'; -import { ApplicationData, DeMinimisAid, TextProp } from 'benefit-shared/types/application'; +import { + ApplicationData, + DeMinimisAid, + TextProp, +} from 'benefit-shared/types/application'; import { FormikProps } from 'formik'; -import { DateInput, Select, SelectionGroup, TextInput } from 'hds-react'; +import { DateInput, SelectionGroup, TextInput } from 'hds-react'; import React from 'react'; import FieldLabel from 'shared/components/forms/fields/fieldLabel/FieldLabel'; import { $Checkbox, $RadioButton, } from 'shared/components/forms/fields/Fields.sc'; -import { Option } from 'shared/components/forms/fields/types'; import Heading from 'shared/components/forms/heading/Heading'; import FormSection from 'shared/components/forms/section/FormSection'; import { @@ -33,7 +36,6 @@ import { BenefitAttachment } from 'shared/types/attachment'; import { OptionType } from 'shared/types/common'; import { formatStringFloatValue, - phoneToLocal, stringFloatToFixed, } from 'shared/utils/string.utils'; import { useTheme } from 'styled-components'; @@ -72,8 +74,6 @@ const FormContent: React.FC = ({ minEndDate, maxEndDate, setEndDate, - getSelectValue, - subsidyOptions, deMinimisAidSet, attachments, checkedConsentArray, @@ -106,7 +106,7 @@ const FormContent: React.FC = ({ formik.values.associationHasBusinessActivities, apprenticeshipProgram: formik.values.apprenticeshipProgram, benefitType: formik.values.benefitType, - paySubsidyGranted: formik.values.paySubsidyGranted, + subsidyGranted: formik.values.subsidyGranted, startDate: formik.values.startDate, useAlternativeAddress: formik.values.useAlternativeAddress, }, @@ -123,14 +123,12 @@ const FormContent: React.FC = ({ } ); - const selectLabel = t('common:select'); - const isAbleToSelectEmploymentBenefit = application?.company?.organizationType !== ORGANIZATION_TYPES.ASSOCIATION || (application?.company?.organizationType === ORGANIZATION_TYPES.ASSOCIATION && application?.associationHasBusinessActivities); - const isAbleToSelectSalaryBenefit = formik.values.paySubsidyGranted === true; + const isAbleToSelectSalaryBenefit = formik.values.subsidyGranted === true; return (
@@ -150,7 +148,7 @@ const FormContent: React.FC = ({ withoutDivider header={t(`${translationsBase}.headings.employment1`)} > - <$GridCell $colSpan={4}> + <$GridCell $colSpan={3}> = ({ required /> - <$GridCell $colSpan={4}> + <$GridCell $colSpan={3}> = ({ required /> - <$GridCell $colStart={1} $colSpan={4}> + <$GridCell $colSpan={2}> = ({ required /> - <$GridCell $colSpan={4}> - - <$GridCell $colStart={1} $colSpan={6} @@ -283,11 +266,11 @@ const FormContent: React.FC = ({ onChange={() => { formik.setFieldValue(fields.paySubsidyGranted.name, true); }} - checked={formik.values.paySubsidyGranted === true} + checked={formik.values.subsidyGranted === true} /> - {formik.values.paySubsidyGranted && ( + {formik.values.subsidyGranted && ( <$GridCell as={$Grid} $colSpan={12} @@ -295,81 +278,6 @@ const FormContent: React.FC = ({ row-gap: ${theme.spacing.xl}; `} > - <$GridCell - $colSpan={4} - $colStart={1} - id={fields.paySubsidyPercent.name} - > - - formik.setFieldValue( - fields.additionalPaySubsidyPercent.name, - additionalPaySubsidyPercent.value - ) - } - options={[ - { - label: selectLabel, - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore TODO: remove ts-ignore when HDS is fixed - value: null, - }, - ...subsidyOptions, - ]} - id={fields.additionalPaySubsidyPercent.name} - placeholder={selectLabel} - invalid={ - !!getErrorMessage(fields.additionalPaySubsidyPercent.name) - } - aria-invalid={ - !!getErrorMessage(fields.additionalPaySubsidyPercent.name) - } - error={getErrorMessage(fields.additionalPaySubsidyPercent.name)} - css={` - label { - white-space: pre; - } - `} - /> - <$GridCell $colSpan={3} $colStart={1}> (val ? FinnishSSN.validate(val) : true), }) .required(t(VALIDATION_MESSAGE_KEYS.REQUIRED)), - [EMPLOYEE_KEYS.PHONE_NUMBER]: Yup.string() - .matches(PHONE_NUMBER_REGEX, t(VALIDATION_MESSAGE_KEYS.PHONE_INVALID)) - .min( - MIN_PHONE_NUMBER_LENGTH, - t(VALIDATION_MESSAGE_KEYS.NUMBER_MIN, { - min: MIN_PHONE_NUMBER_LENGTH, - }) - ) - .max( - MAX_PHONE_NUMBER_LENGTH, - t(VALIDATION_MESSAGE_KEYS.PHONE_NUMBER_LENGTH_MAX, { - max: MAX_PHONE_NUMBER_LENGTH, - }) - ) - .required(t(VALIDATION_MESSAGE_KEYS.REQUIRED)), [EMPLOYEE_KEYS.IS_LIVING_IN_HELSINKI]: Yup.boolean().oneOf( [true], t('common:applications.sections.fields.isLivingInHelsinki.error') diff --git a/frontend/benefit/handler/src/constants.ts b/frontend/benefit/handler/src/constants.ts index 6e426fd991..3803e67b20 100644 --- a/frontend/benefit/handler/src/constants.ts +++ b/frontend/benefit/handler/src/constants.ts @@ -122,10 +122,7 @@ export enum APPLICATION_FIELD_KEYS { DE_MINIMIS_AID_SET = 'deMinimisAidSet', CO_OPERATION_NEGOTIATIONS = 'coOperationNegotiations', CO_OPERATION_NEGOTIATIONS_DESCRIPTION = 'coOperationNegotiationsDescription', - // ORGANIZATION_TYPE = 'organizationType', - PAY_SUBSIDY_GRANTED = 'paySubsidyGranted', - PAY_SUBSIDY_PERCENT = 'paySubsidyPercent', - ADDITIONAL_PAY_SUBSIDY_PERCENT = 'additionalPaySubsidyPercent', + SUBSIDY_GRANTED = 'subsidyGranted', APPRENTICESHIP_PROGRAM = 'apprenticeshipProgram', BENEFIT_TYPE = 'benefitType', START_DATE = 'startDate', @@ -147,7 +144,6 @@ export const APPLICATION_INITIAL_VALUES = { employee: { [APPLICATION_FIELDS.employee.FIRST_NAME]: '', [APPLICATION_FIELDS.employee.LAST_NAME]: '', - [APPLICATION_FIELDS.employee.PHONE_NUMBER]: '', [APPLICATION_FIELDS.employee.SOCIAL_SECURITY_NUMBER]: '', [APPLICATION_FIELDS.employee.JOB_TITLE]: '', [APPLICATION_FIELDS.employee.WORKING_HOURS]: '' as const, @@ -173,9 +169,7 @@ export const APPLICATION_INITIAL_VALUES = { [APPLICATION_FIELD_KEYS.CO_OPERATION_NEGOTIATIONS_DESCRIPTION]: '', [APPLICATION_FIELD_KEYS.DE_MINIMIS_AID]: null, [APPLICATION_FIELD_KEYS.DE_MINIMIS_AID_SET]: [], - [APPLICATION_FIELD_KEYS.PAY_SUBSIDY_GRANTED]: null, - [APPLICATION_FIELD_KEYS.PAY_SUBSIDY_PERCENT]: null, - [APPLICATION_FIELD_KEYS.ADDITIONAL_PAY_SUBSIDY_PERCENT]: null, + [APPLICATION_FIELD_KEYS.SUBSIDY_GRANTED]: null, [APPLICATION_FIELD_KEYS.APPRENTICESHIP_PROGRAM]: null, archived: false, [APPLICATION_FIELD_KEYS.BENEFIT_TYPE]: '' as const, diff --git a/frontend/benefit/shared/src/constants.ts b/frontend/benefit/shared/src/constants.ts index 48efc6930c..14ac572edc 100644 --- a/frontend/benefit/shared/src/constants.ts +++ b/frontend/benefit/shared/src/constants.ts @@ -41,7 +41,6 @@ export const PAY_SUBSIDY_OPTIONS = [50, 70, 100] as const; export enum EMPLOYEE_KEYS { FIRST_NAME = 'firstName', LAST_NAME = 'lastName', - PHONE_NUMBER = 'phoneNumber', SOCIAL_SECURITY_NUMBER = 'socialSecurityNumber', IS_LIVING_IN_HELSINKI = 'isLivingInHelsinki', JOB_TITLE = 'jobTitle', From 715a5d36c31c9ece27fef051568d6db34c8e9d4d Mon Sep 17 00:00:00 2001 From: Maks Turtiainen Date: Fri, 8 Sep 2023 19:28:21 +0300 Subject: [PATCH 02/26] feat: new subsidy options --- .../formContent/FormContent.tsx | 48 +++++++++++++------ .../formContent/useFormContent.ts | 13 ----- .../handler/src/types/application.d.ts | 5 +- frontend/benefit/shared/src/constants.ts | 5 ++ 4 files changed, 40 insertions(+), 31 deletions(-) diff --git a/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx b/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx index 5084eb6705..a5da53903b 100644 --- a/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx +++ b/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx @@ -12,6 +12,7 @@ import { ATTACHMENT_TYPES, BENEFIT_TYPES, ORGANIZATION_TYPES, + SUBSIDY_OPTIONS, } from 'benefit-shared/constants'; import { ApplicationData, @@ -232,41 +233,58 @@ const FormContent: React.FC = ({ > <$GridCell $colSpan={8}> <$RadioButton - id={`${fields.paySubsidyGranted.name}False`} - name={fields.paySubsidyGranted.name} - value="false" + id={`${fields.subsidyGranted.name}.${SUBSIDY_OPTIONS.SALARY_SUPPORT}}`} + name={fields.subsidyGranted.name} + value={SUBSIDY_OPTIONS.SALARY_SUPPORT} label={t( - `${translationsBase}.fields.${fields.paySubsidyGranted.name}.no` + `${translationsBase}.fields.${fields.subsidyGranted.name}.salarySupport` )} onBlur={formik.handleBlur} onChange={() => { - formik.setFieldValue(fields.paySubsidyGranted.name, false); + formik.setFieldValue(fields.subsidyGranted.name, false); formik.setFieldValue( APPLICATION_FIELD_KEYS.APPRENTICESHIP_PROGRAM, null ); }} - checked={formik.values.paySubsidyGranted === false} + checked={ + formik.values.subsidyGranted === SUBSIDY_OPTIONS.SALARY_SUPPORT + } /> <$RadioButton - id={`${fields.paySubsidyGranted.name}True`} - name={fields.paySubsidyGranted.name} - value="true" + id={`${fields.subsidyGranted.name}.${SUBSIDY_OPTIONS.OLD_AGE_SUPPORT}`} + name={fields.subsidyGranted.name} + value={SUBSIDY_OPTIONS.OLD_AGE_SUPPORT} label={t( - `${translationsBase}.fields.${fields.paySubsidyGranted.name}.yes` + `${translationsBase}.fields.${fields.subsidyGranted.name}.oldAgeSupport` )} onBlur={formik.handleBlur} onChange={() => { - formik.setFieldValue(fields.paySubsidyGranted.name, true); + formik.setFieldValue(fields.subsidyGranted.name, true); }} - checked={formik.values.subsidyGranted === true} + checked={ + formik.values.subsidyGranted === SUBSIDY_OPTIONS.OLD_AGE_SUPPORT + } + /> + <$RadioButton + id={`${fields.subsidyGranted.name}.null`} + name={fields.subsidyGranted.name} + value={null} + label={t( + `${translationsBase}.fields.${fields.subsidyGranted.name}.no` + )} + onBlur={formik.handleBlur} + onChange={() => { + formik.setFieldValue(fields.subsidyGranted.name, true); + }} + checked={formik.values.subsidyGranted === null} /> diff --git a/frontend/benefit/handler/src/components/newApplication/formContent/useFormContent.ts b/frontend/benefit/handler/src/components/newApplication/formContent/useFormContent.ts index e259895c52..2ab7283631 100644 --- a/frontend/benefit/handler/src/components/newApplication/formContent/useFormContent.ts +++ b/frontend/benefit/handler/src/components/newApplication/formContent/useFormContent.ts @@ -25,7 +25,6 @@ type ExtendedComponentProps = { clearCommissionValues: () => void; clearContractValues: () => void; clearDatesValues: () => void; - clearPaySubsidyValues: () => void; clearAlternativeAddressValues: () => void; getErrorMessage: (fieldName: string) => string | undefined; }; @@ -101,17 +100,6 @@ const useFormContent = ( setFieldValue(fields.benefitType.name, null); }, [fields.benefitType.name, setFieldValue]); - const clearPaySubsidyValues = React.useCallback((): void => { - setFieldValue(fields.paySubsidyPercent.name, null); - setFieldValue(fields.additionalPaySubsidyPercent.name, null); - setFieldValue(fields.apprenticeshipProgram.name, null); - }, [ - fields.paySubsidyPercent.name, - fields.additionalPaySubsidyPercent.name, - fields.apprenticeshipProgram.name, - setFieldValue, - ]); - const language = SUPPORTED_LANGUAGES.FI; const locale = useLocale(); const textLocale = capitalize(locale); @@ -128,7 +116,6 @@ const useFormContent = ( clearCommissionValues, clearContractValues, clearDatesValues, - clearPaySubsidyValues, clearAlternativeAddressValues, getErrorMessage, }; diff --git a/frontend/benefit/handler/src/types/application.d.ts b/frontend/benefit/handler/src/types/application.d.ts index dc376b05b8..c16fbcd391 100644 --- a/frontend/benefit/handler/src/types/application.d.ts +++ b/frontend/benefit/handler/src/types/application.d.ts @@ -6,6 +6,7 @@ import { CALCULATION_SALARY_KEYS, EMPLOYEE_KEYS, ORGANIZATION_TYPES, + SUBSIDY_OPTIONS, } from 'benefit-shared/constants'; import { ApplicantTerms, @@ -151,9 +152,7 @@ export interface ApplicationForm { [APPLICATION_FIELD_KEYS.CO_OPERATION_NEGOTIATIONS_DESCRIPTION]?: string; [APPLICATION_FIELD_KEYS.DE_MINIMIS_AID]?: boolean | null; [APPLICATION_FIELD_KEYS.DE_MINIMIS_AID_SET]?: DeMinimisAid[]; - [APPLICATION_FIELD_KEYS.PAY_SUBSIDY_GRANTED]?: boolean | null; - [APPLICATION_FIELD_KEYS.PAY_SUBSIDY_PERCENT]?: PaySubsidyPercent | null; - [APPLICATION_FIELD_KEYS.ADDITIONAL_PAY_SUBSIDY_PERCENT]?: PaySubsidyPercent | null; + [APPLICATION_FIELD_KEYS.SUBSIDY_GRANTED]?: SUBSIDY_OPTIONS | null; [APPLICATION_FIELD_KEYS.APPRENTICESHIP_PROGRAM]?: boolean | null; [APPLICATION_FIELD_KEYS.BENEFIT_TYPE]?: BENEFIT_TYPES | ''; [APPLICATION_FIELD_KEYS.START_DATE]?: string | ''; diff --git a/frontend/benefit/shared/src/constants.ts b/frontend/benefit/shared/src/constants.ts index 14ac572edc..234b662348 100644 --- a/frontend/benefit/shared/src/constants.ts +++ b/frontend/benefit/shared/src/constants.ts @@ -161,3 +161,8 @@ export enum PROPOSALS_FOR_DECISION { ACCEPTED = 'accepted', REJECTED = 'rejected', } + +export enum SUBSIDY_OPTIONS { + SALARY_SUPPORT = 'salary_support', + OLD_AGE_SUPPORT = 'old_age_support', +} From 60bf182a158ae9f8916f8ec24c3c569f0d5f2a50 Mon Sep 17 00:00:00 2001 From: Maks Turtiainen Date: Fri, 8 Sep 2023 21:49:18 +0300 Subject: [PATCH 03/26] feat: continue new terms changes --- .../handler/public/locales/fi/common.json | 6 ++ .../formContent/FormContent.sc.ts | 5 + .../formContent/FormContent.tsx | 96 +++++++++---------- .../newApplication/utils/validation.ts | 30 ++---- frontend/benefit/handler/src/constants.ts | 4 +- .../handler/src/types/application.d.ts | 1 + 6 files changed, 70 insertions(+), 72 deletions(-) diff --git a/frontend/benefit/handler/public/locales/fi/common.json b/frontend/benefit/handler/public/locales/fi/common.json index 3acb2ee331..7b8f430d16 100644 --- a/frontend/benefit/handler/public/locales/fi/common.json +++ b/frontend/benefit/handler/public/locales/fi/common.json @@ -499,6 +499,10 @@ "label": "Päättyen", "placeholder": "Päättyen" }, + "paperApplicationDate": { + "label": "Saapumispäivä", + "placeholder": "Valitse" + }, "applicantAgreement": { "label": "Hakija on täyttänyt suostumukset", "yes": "Kyllä", @@ -516,6 +520,8 @@ } }, "salaryExpensesExplanation": "Bruttopalkka ja sivukulut ilmoitetaan euroina kuukaudessa, lomaraha kertasummana", + "dateExplanation": "Mille ajalle työnantaja hakee Helsinki lisää?", + "paperDateExplanation": "Milloin paperinen hakemus saapui?", "tooltips": { "heading5Employment": "Sovellettava työehtosopimus: esim. Kaupan työehtosopimus. Jos alalla ei ole velvoittavaa työehtosopimusta, merkitse viiva.", "heading5EmploymentSub1": "Bruttopalkalla tarkoitetaan tuella palkattavalle maksettavaa palkkaa ennen työntekijän lakisääteisten maksujen (työntekijän työttömyysvakuutus- ja eläkevakuutusmaksu) ja verojen pidätystä. Jos tuella palkattavalle maksetaan palkan lisiä (esim. ilta-, yö- tai vuorotyölisä), ota niiden arvioitu määrä huomioon bruttopalkassa. Työnantajan lakisääteisiin sivukuluihin luetaan sosiaaliturva-, työeläkevakuutus-, tapaturmavakuutus- ja työttömyysvakuutusmaksu sekä pakollinen ryhmähenkivakuutusmaksu. Sivukulut tarkoittavat palkasta maksettavien työnantajan lakisääteisten sivukulujen määrä kuukaudessa. Lomaraha on tuella katettava palkkauskustannus silloin, kun se maksetaan tukijakson aikana pidetystä vuosilomapalkasta. Arvioi tukijakson aikana maksettavan lomarahan määrä. Lomakorvaus ei ole Helsinki-lisällä katettava korvaus.", diff --git a/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.sc.ts b/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.sc.ts index f1100ba752..78681c95a0 100644 --- a/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.sc.ts +++ b/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.sc.ts @@ -13,3 +13,8 @@ export const $CompanyInfoField = styled.div` export const $CompanyInfoHeader = styled.div` font-weight: bold; `; + +export const $DateHeader = styled.p` + font-size: ${(props) => props.theme.fontSize.heading.s}; + font-weight: 500; +`; diff --git a/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx b/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx index a5da53903b..35e8ba4318 100644 --- a/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx +++ b/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx @@ -43,8 +43,9 @@ import { useTheme } from 'styled-components'; import AttachmentsList from './attachmentsList/AttachmentsList'; import CompanySection from './companySection/CompanySection'; -import { $Description } from './FormContent.sc'; +import { $DateHeader, $Description } from './FormContent.sc'; import { useFormContent } from './useFormContent'; +import DateInputWithSeparator from 'shared/components/forms/fields/dateInputWithSeparator/DateInputWithSeparator'; type Props = { application: Application; @@ -248,7 +249,10 @@ const FormContent: React.FC = ({ )} onBlur={formik.handleBlur} onChange={() => { - formik.setFieldValue(fields.subsidyGranted.name, false); + formik.setFieldValue( + fields.subsidyGranted.name, + SUBSIDY_OPTIONS.SALARY_SUPPORT + ); formik.setFieldValue( APPLICATION_FIELD_KEYS.APPRENTICESHIP_PROGRAM, null @@ -267,7 +271,10 @@ const FormContent: React.FC = ({ )} onBlur={formik.handleBlur} onChange={() => { - formik.setFieldValue(fields.subsidyGranted.name, true); + formik.setFieldValue( + fields.subsidyGranted.name, + SUBSIDY_OPTIONS.OLD_AGE_SUPPORT + ); }} checked={ formik.values.subsidyGranted === SUBSIDY_OPTIONS.OLD_AGE_SUPPORT @@ -282,18 +289,21 @@ const FormContent: React.FC = ({ )} onBlur={formik.handleBlur} onChange={() => { - formik.setFieldValue(fields.subsidyGranted.name, true); + formik.setFieldValue(fields.subsidyGranted.name, null); }} checked={formik.values.subsidyGranted === null} /> - {formik.values.subsidyGranted && ( + {formik.values.subsidyGranted === SUBSIDY_OPTIONS.SALARY_SUPPORT && ( <$GridCell as={$Grid} $colSpan={12} css={` row-gap: ${theme.spacing.xl}; + padding-left: ${theme.spacing.s}; + margin-top: ${theme.spacing.s}; + border-left: 10px solid ${theme.colors.silver}; `} > <$GridCell $colSpan={3} $colStart={1}> @@ -339,54 +349,21 @@ const FormContent: React.FC = ({ )} - - <$GridCell $colSpan={6}> - - <$RadioButton - id={`${fields.benefitType.name}Employment`} - name={fields.benefitType.name} - value={BENEFIT_TYPES.EMPLOYMENT} - label={t( - `${translationsBase}.fields.${fields.benefitType.name}.employment` - )} - onBlur={formik.handleBlur} - onChange={formik.handleChange} - checked={formik.values.benefitType === BENEFIT_TYPES.EMPLOYMENT} - disabled={!isAbleToSelectEmploymentBenefit} - /> - <$RadioButton - id={`${fields.benefitType.name}Salary`} - name={fields.benefitType.name} - value={BENEFIT_TYPES.SALARY} - label={t( - `${translationsBase}.fields.${fields.benefitType.name}.salary` - )} - onBlur={formik.handleBlur} - onChange={formik.handleChange} - checked={formik.values.benefitType === BENEFIT_TYPES.SALARY} - disabled={!isAbleToSelectSalaryBenefit} - /> - - - <$GridCell $colStart={1} $colSpan={4}> - {t(`${translationsBase}.dateExplanation`)} + + <$GridCell $colStart={8} $colSpan={4}> + <$DateHeader> + {t(`${translationsBase}.paperDateExplanation`)} + + + <$GridCell $colStart={1} $colSpan={2}> + = ({ required /> - <$GridCell $colSpan={4}> + <$GridCell $colSpan={2}> = ({ required /> + <$GridCell $colStart={8} $colSpan={2}> + + formik.setFieldValue(fields.paperApplicationDate.name, value) + } + value={formik.values.paperApplicationDate ?? ''} + invalid={!!getErrorMessage(fields.paperApplicationDate.name)} + aria-invalid={!!getErrorMessage(fields.paperApplicationDate.name)} + errorText={getErrorMessage(fields.paperApplicationDate.name)} + initialMonth={ + !formik.values.paperApplicationDate ? minEndDate : undefined + } + minDate={minEndDate} + maxDate={maxEndDate} + required + /> + Date: Wed, 13 Sep 2023 12:16:25 +0300 Subject: [PATCH 04/26] feat: fix date inputs --- .../formContent/FormContent.tsx | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx b/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx index 35e8ba4318..72452cd0fc 100644 --- a/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx +++ b/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx @@ -45,7 +45,6 @@ import AttachmentsList from './attachmentsList/AttachmentsList'; import CompanySection from './companySection/CompanySection'; import { $DateHeader, $Description } from './FormContent.sc'; import { useFormContent } from './useFormContent'; -import DateInputWithSeparator from 'shared/components/forms/fields/dateInputWithSeparator/DateInputWithSeparator'; type Props = { application: Application; @@ -353,17 +352,18 @@ const FormContent: React.FC = ({ - <$GridCell $colStart={1} $colSpan={4}> + <$GridCell $colStart={1} $colSpan={25}> <$DateHeader>{t(`${translationsBase}.dateExplanation`)} - <$GridCell $colStart={8} $colSpan={4}> + <$GridCell $colStart={26} $colSpan={6}> <$DateHeader> {t(`${translationsBase}.paperDateExplanation`)} - <$GridCell $colStart={1} $colSpan={2}> - + = ({ required /> - <$GridCell $colSpan={2}> + <$GridCell + $colSpan={1} + style={{ margin: 'auto auto var(--spacing-s) auto' }} + > + – + + <$GridCell $colSpan={6}> = ({ required /> - <$GridCell $colStart={8} $colSpan={2}> + <$GridCell $colStart={26} $colSpan={6}> Date: Tue, 5 Sep 2023 09:44:50 +0300 Subject: [PATCH 05/26] fix: wrong i18n import and usage of static props errored in nextjs console --- .../src/components/termsOfService/TermsOfService.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/frontend/benefit/applicant/src/components/termsOfService/TermsOfService.tsx b/frontend/benefit/applicant/src/components/termsOfService/TermsOfService.tsx index bb7cfa613b..a8d242bac7 100644 --- a/frontend/benefit/applicant/src/components/termsOfService/TermsOfService.tsx +++ b/frontend/benefit/applicant/src/components/termsOfService/TermsOfService.tsx @@ -1,11 +1,9 @@ import { $PageHeading } from 'benefit/applicant/components/applications/Applications.sc'; import { Button } from 'hds-react'; -import { GetStaticProps } from 'next'; import React from 'react'; import Container from 'shared/components/container/Container'; import FormSection from 'shared/components/forms/section/FormSection'; import { $GridCell, $Hr } from 'shared/components/forms/section/FormSection.sc'; -import getServerSideTranslations from 'shared/i18n/get-server-side-translations'; import { openFileInNewTab } from 'shared/utils/file.utils'; import useApproveTermsOfServiceMutation from '../../hooks/useApproveTermsOfServiceMutation'; @@ -93,7 +91,4 @@ const TermsOfService: React.FC = ({ ); }; -export const getStaticProps: GetStaticProps = - getServerSideTranslations('common'); - export default TermsOfService; From 662ca3533934561c0656f1062ebb7b79a9e3613e Mon Sep 17 00:00:00 2001 From: Sampo Tawast Date: Tue, 5 Sep 2023 09:47:16 +0300 Subject: [PATCH 06/26] fix: koros id SSR / client mismatch; use correct bg color for footer --- .../src/components/layout/Layout.tsx | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/frontend/benefit/applicant/src/components/layout/Layout.tsx b/frontend/benefit/applicant/src/components/layout/Layout.tsx index c078658812..89f5b76802 100644 --- a/frontend/benefit/applicant/src/components/layout/Layout.tsx +++ b/frontend/benefit/applicant/src/components/layout/Layout.tsx @@ -5,23 +5,39 @@ import dynamic from 'next/dynamic'; import { useRouter } from 'next/router'; import * as React from 'react'; import useAuth from 'shared/hooks/useAuth'; +import theme from 'shared/styles/theme'; +import { DefaultTheme } from 'styled-components'; import { ROUTES } from '../../constants'; import { $Main } from './Layout.sc'; const Footer = dynamic( () => import('benefit/applicant/components/footer/Footer'), - { ssr: true } + { ssr: false } ); type Props = { children: React.ReactNode }; +const selectBgColor = (pathname: string): keyof DefaultTheme['colors'] => { + switch (pathname) { + case ROUTES.LOGIN: + return theme.colors.silverLight as keyof DefaultTheme['colors']; + + case ROUTES.HOME: + return theme.colors.silverLight as keyof DefaultTheme['colors']; + + default: + return theme.colors.white as keyof DefaultTheme['colors']; + } +}; + const Layout: React.FC = ({ children, ...rest }) => { const { isAuthenticated } = useAuth(); const [isTermsOfServiceApproved, setIsTermsOfSerivceApproved] = React.useState(false); const router = useRouter(); - const bgColor = router.pathname === ROUTES.LOGIN ? 'silverLight' : 'white'; + + const bgColor = selectBgColor(router.pathname); const isAccessibilityStatement = router.pathname === ROUTES.ACCESSIBILITY_STATEMENT; From 4c5cc678650010ecfe4b685f16eae7a0a1b4e7ce Mon Sep 17 00:00:00 2001 From: Sampo Tawast Date: Tue, 5 Sep 2023 10:49:18 +0300 Subject: [PATCH 07/26] feat: add font weight and heading level prop to form section --- .../src/components/forms/section/FormSection.sc.ts | 9 +++++++-- .../shared/src/components/forms/section/FormSection.tsx | 5 ++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/frontend/shared/src/components/forms/section/FormSection.sc.ts b/frontend/shared/src/components/forms/section/FormSection.sc.ts index 5636eb5a59..cd86683e2e 100644 --- a/frontend/shared/src/components/forms/section/FormSection.sc.ts +++ b/frontend/shared/src/components/forms/section/FormSection.sc.ts @@ -10,6 +10,7 @@ export type FormSectionProps = { gridActions?: React.ReactNode; withoutDivider?: boolean; header?: string; + headerLevel?: 'div' | 'h1' | 'h2' | 'h3' | 'h4'; paddingBottom?: boolean; 'aria-label'?: string; } & HeadingProps & @@ -42,9 +43,13 @@ export const $Section = styled.section` position: relative; `; -export const $SubHeader = styled.h3` +type $SubHeaderProps = { + weight?: string; +}; + +export const $SubHeader = styled.h3<$SubHeaderProps>` font-size: ${(props) => props.theme.fontSize.heading.xxs}; - font-weight: 600; + font-weight: ${(props) => (props.weight ? props.weight : '600')}; `; export const $Grid = styled.div.attrs< diff --git a/frontend/shared/src/components/forms/section/FormSection.tsx b/frontend/shared/src/components/forms/section/FormSection.tsx index 9236110509..758e5f21c8 100644 --- a/frontend/shared/src/components/forms/section/FormSection.tsx +++ b/frontend/shared/src/components/forms/section/FormSection.tsx @@ -13,6 +13,7 @@ import { const FormSection: React.FC = ({ children, header, + headerLevel = 'h1', action, gridActions, withoutDivider = false, @@ -30,7 +31,9 @@ const FormSection: React.FC = ({ data-testid={dataTestId} > {action && <$Action>{action}} - {header && } + {header && ( + + )} {children && ( <$Grid role={role} columns={columns} {...rest}> <> From d2ccff24c6f9d395885fae595d9d7811ecb4e436 Mon Sep 17 00:00:00 2001 From: Sampo Tawast Date: Tue, 5 Sep 2023 10:48:27 +0300 Subject: [PATCH 08/26] feat: restructure application step 1 --- .../applicant/public/locales/en/common.json | 23 +- .../applicant/public/locales/fi/common.json | 35 +-- .../applicant/public/locales/sv/common.json | 23 +- .../forms/application/Application.sc.ts | 22 +- .../deMinimisAid/DeMinimisAidForm.tsx | 89 ++++---- .../deMinimisAid/deMinimisAid.sc.ts | 32 +++ .../deMinimisAid/list/DeMinimisAidsList.tsx | 47 ++-- .../step1/ApplicationFormStep1.tsx | 83 ++++--- .../step1/companyInfo/CompanyInfo.sc.ts | 39 +++- .../step1/companyInfo/CompanyInfo.tsx | 213 +++++++++--------- .../step1/companyInfo/useCompanyInfo.ts | 4 - .../step1/useApplicationFormStep1.ts | 16 +- .../application/step1/utils/validation.ts | 15 -- .../applications/pageContent/PageContent.tsx | 12 +- frontend/benefit/shared/src/constants.ts | 2 +- 15 files changed, 377 insertions(+), 278 deletions(-) create mode 100644 frontend/benefit/applicant/src/components/applications/forms/application/deMinimisAid/deMinimisAid.sc.ts diff --git a/frontend/benefit/applicant/public/locales/en/common.json b/frontend/benefit/applicant/public/locales/en/common.json index 4610a048fa..90da4ba9b2 100644 --- a/frontend/benefit/applicant/public/locales/en/common.json +++ b/frontend/benefit/applicant/public/locales/en/common.json @@ -29,10 +29,13 @@ "saved": "Saved", "sent": "Application number: {{applicationNumber}} | Submitted {{submittedAt}}", "new": "New application", - "edit": "Application", + "edit": "Helsinki benefit application", "helperText": "Please review the application before submitting.", "guideText": "All items marked with * are required" }, + "helpers": { + "requiredFields": "Tähdellä merkityt kentät ovat pakollisia" + }, "statuses": { "draft": "Draft", "additionalInformationNeeded": "Additional information is needed", @@ -70,18 +73,21 @@ "heading1Additional": "Postal address for delivering the decision", "heading2": "Contact person", "heading2Short": "Contact person", - "heading3": "De minimis aid of the applicant", + "heading3": "Employer's de minimis aids", "heading4": "Co-determination negotiation situation", "heading5": "Co-determination negotiation", "businessId": "Business ID: {{ businessId }}", + "companyContactPerson": { + "content": "TODO" + }, "deMinimisAidsHeading": "List here all forms of de minimis aid received by the organisation during the current year and the previous two tax years", - "deMinimisAidsAdd": "Add", + "deMinimisAidsAdd": "Save", "deMinimisAidsRemove": "Delete", "deMinimisAidsNo": "The applicant has not listed any previous de minimis aids.", "notifications": { "companyInformation": { "label": "Data retrieved from the Business Information System", - "content": "Your organisation’s basic information has been retrieved from the Business Information System. If you wish, you can change the postal address to which the Helsinki benefit decision will be sent." + "content": "TODO" }, "deMinimisAidMaxAmount": { "label": "Maximum amount exceeded", @@ -149,7 +155,7 @@ "placeholder": "The employer has a proper workspace and a manager (who has supervisory responsibility and is not pay-subsidised) for the person to be hired." }, "deMinimisAid": { - "label": "Has the applicant received de minimis aid during the current year or the previous two tax years?", + "label": "Has the employer received de minimis aid during the current year or the previous two tax years?", "yes": "Yes", "no": "No" }, @@ -158,8 +164,9 @@ "placeholder": "Issuing party" }, "deMinimisAidAmount": { - "label": "Amount of aid (EUR)", - "placeholder": "€" + "label": "Amount of aid", + "placeholder": "€", + "helperText": "euros" }, "deMinimisAidGrantedAt": { "label": "Date of issue", @@ -405,7 +412,7 @@ }, "languages": { "fi": "Suomi", - "sv": "Ruotsi", + "sv": "Svenska", "en": "English" }, "supportedLanguages": { diff --git a/frontend/benefit/applicant/public/locales/fi/common.json b/frontend/benefit/applicant/public/locales/fi/common.json index 109e59c4bb..26c28393f2 100644 --- a/frontend/benefit/applicant/public/locales/fi/common.json +++ b/frontend/benefit/applicant/public/locales/fi/common.json @@ -29,10 +29,13 @@ "saved": "Tallennettu", "sent": "Hakemusnumero: {{applicationNumber}} | Lähetetty {{submittedAt}}", "new": "Uusi hakemus", - "edit": "Hakemus", + "edit": "Helsinki-lisä -hakemus", "helperText": "Ole hyvä ja tarkista hakemus ennen lähetystä.", "guideText": "Kaikki *-merkityt kohdat ovat pakollisia" }, + "helpers": { + "requiredFields": "Tähdellä merkityt kentät ovat pakollisia" + }, "statuses": { "draft": "Luonnos", "additionalInformationNeeded": "Lisätietoja tarvitaan", @@ -68,20 +71,23 @@ "company": { "heading1": "Työnantajan tiedot", "heading1Additional": "Postiosoite päätöstä varten", - "heading2": "Yhteyshenkilö", + "heading2": "Työnantajan yhteyshenkilö", "heading2Short": "Yhteyshenkilö", - "heading3": "Hakijan de minimis -tuet", - "heading4": "YT-tilanne", + "heading3": "Työnantajan de minimis -tuet", + "heading4": "Muutosneuvottelut tai YT-tilanne", "heading5": "YT-neuvottelut", "businessId": "Y-tunnus: {{ businessId }}", - "deMinimisAidsHeading": "Listaa tähän kaikki organisaatiolle kuluvan vuoden ja kahden edellisen verovuoden aikana myönnetyt de minimis -tuet", - "deMinimisAidsAdd": "Lisää", + "companyContactPerson": { + "content": "Yhteyshenkilö kommunikoi tähän Helsinki-lisä -hakemukseen liittyvissä asioissa ja saa tiedon hakemuksen päätöksestä." + }, + "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.", "notifications": { "companyInformation": { "label": "Tiedot haetaan Yritys- ja yhteisötietojärjestelmästä", - "content": "Organisaatiosi perustiedot haetaan Yritys- ja yhteisötietojärjestelmästä. Halutessasi voit vaihtaa tilalle toisen postiosoitteen, johon Helsinki-lisä-päätös toimitetaan." + "content": "Merkityt tiedot on haettu Yritys- ja yhteisötietojärjestelmästä. Jos haluat Helsinki-lisä-päätöksen toiseen toimipisteeseen, vaihda tilalle toinen postiosoite." }, "deMinimisAidMaxAmount": { "label": "Enimmäismäärä ylitetty", @@ -113,12 +119,12 @@ "placeholder": "Postitoimipaikka" }, "companyDepartment": { - "label": "Toimipiste tai osasto (valinnainen)", + "label": "Toimipiste", "placeholder": "Toimipiste / osasto" }, "companyBankAccountNumber": { "label": "Tilinumero", - "placeholder": "IBAN muodossa" + "placeholder": "IBAN-muodossa" }, "companyContactPersonFirstName": { "label": "Etunimi", @@ -149,7 +155,7 @@ "placeholder": "Työnantajalla on asianmukaiset työtilat ja työnjohdollinen, ei-palkkatuettu esihenkilö palkattavalle henkilölle." }, "deMinimisAid": { - "label": "Onko hakijalle myönnetty kuluvan vuoden ja kahden edellisen verovuoden aikana de minimis -tukea?", + "label": "Onko työnantajalle myönnetty kuluvan vuoden ja kahden edellisen verovuoden aikana de minimis -tukea?", "yes": "Kyllä", "no": "Ei" }, @@ -158,8 +164,9 @@ "placeholder": "Myöntävä taho" }, "deMinimisAidAmount": { - "label": "Tuen määrä (euroina)", - "placeholder": "€" + "label": "Tuen määrä", + "placeholder": "€", + "helperText": "euroa" }, "deMinimisAidGrantedAt": { "label": "Myöntämispäivämäärä", @@ -167,12 +174,12 @@ "placeholder": "Valitse" }, "coOperationNegotiations": { - "label": "Onko organisaatiolla käynnissä YT-neuvottelut?", + "label": "Onko organisaatiolla käynnissä tai edeltävän 12 kuukauden aikana päättynyt muutosneuvottelut tai YT-neuvottelut?", "yes": "Kyllä", "no": "Ei" }, "coOperationNegotiationsDescription": { - "label": "Anna tarkempi selvitys YT-tilanteesta:", + "label": "Anna tarkempi selvitys muutosneuvotteluista tai YT-tilanteesta", "placeholder": "Kuvaile tilannetta" } } diff --git a/frontend/benefit/applicant/public/locales/sv/common.json b/frontend/benefit/applicant/public/locales/sv/common.json index c69435c9f5..f8c8007910 100644 --- a/frontend/benefit/applicant/public/locales/sv/common.json +++ b/frontend/benefit/applicant/public/locales/sv/common.json @@ -29,10 +29,13 @@ "saved": "Sparad", "sent": "Ansökningsnummer: {{applicationNumber}} | Skickad {{submittedAt}}", "new": "Ny ansökan", - "edit": "Ansökan", + "edit": "Helsingforstillagg ansokan", "helperText": "Vänligen kontrollera ansökan innan du skickar in den.", "guideText": "Fälten märkta med * är obligatoriska" }, + "helpers": { + "requiredFields": "Tähdellä merkityt kentät ovat pakollisia" + }, "statuses": { "draft": "Utkast", "additionalInformationNeeded": "Ytterligare uppgifter behövs", @@ -70,18 +73,21 @@ "heading1Additional": "Postadress för beslutet", "heading2": "Kontaktperson", "heading2Short": "Kontaktperson", - "heading3": "Sökandens de minimis-stöd", + "heading3": "Arbetsgivarens de minimis-stöd", "heading4": "Situation med samarbetsförhandlingar", "heading5": "Samarbetsförhandlingar", "businessId": "FO-nummer: {{ businessId }}", + "companyContactPerson": { + "content": "TODO" + }, "deMinimisAidsHeading": "Lista här samtliga de minimis-stöd som beviljats organisationen under det innevarande året eller under de två föregående skatteåren", - "deMinimisAidsAdd": "Lägg till", + "deMinimisAidsAdd": "Spara", "deMinimisAidsRemove": "Ta bort", "deMinimisAidsNo": "Sökanden har inte angett några tidigare de minimis -stöd.", "notifications": { "companyInformation": { "label": "Uppgifterna har hämtats från Företags- och organisationsdatasystemet", - "content": "De grundläggande uppgifterna om organisationen har hämtats från Företags- och organisationsdatasystemet. Om du vill kan du ange en särskild postadress dit beslutet om Helsingforstillägg skickas." + "content": "TODO" }, "deMinimisAidMaxAmount": { "label": "Maximibeloppet har överskridits", @@ -149,7 +155,7 @@ "placeholder": "Arbetsgivaren har ändamålsenliga arbetslokaler och en till arbetsledningen hörande, ej lönesubventionerad chef för personen som anställs." }, "deMinimisAid": { - "label": "Har sökanden beviljats de minimis-stöd under det innevarande året eller under de två föregående skatteåren?", + "label": "Har arbetsgivaren beviljats de minimis-stöd under det innevarande året eller under de två föregående skatteåren?", "yes": "Ja", "no": "Nej" }, @@ -158,8 +164,9 @@ "placeholder": "Beviljande instans" }, "deMinimisAidAmount": { - "label": "Stödbelopp (euro)", - "placeholder": "€" + "label": "Stödbelopp", + "placeholder": "€", + "helperText": "euro" }, "deMinimisAidGrantedAt": { "label": "Datum för beviljande", @@ -405,7 +412,7 @@ }, "languages": { "fi": "Suomi", - "sv": "Ruotsi", + "sv": "Svenska", "en": "English" }, "supportedLanguages": { diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/Application.sc.ts b/frontend/benefit/applicant/src/components/applications/forms/application/Application.sc.ts index b24e234bd9..bbb2c45724 100644 --- a/frontend/benefit/applicant/src/components/applications/forms/application/Application.sc.ts +++ b/frontend/benefit/applicant/src/components/applications/forms/application/Application.sc.ts @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { $GridCell } from 'shared/components/forms/section/FormSection.sc'; +import styled, { css } from 'styled-components'; type ViewFieldProps = { isInline?: boolean; @@ -29,3 +30,22 @@ export const $SummaryTableHeader = styled.div` export const $SummaryTableValue = styled.span` font-size: ${(props) => props.theme.fontSize.body.l}; `; + +export const $KeyValueList = styled.dl``; + +const CSSFormIndentation = css` +&:before { + margin-left: -40px; + position:absolute; + content: ''; + display:block; + background: ${(props) => props.theme.colors.black10}; + width: 8px; + height 100%; +}`; + +export const $SubFieldContainer = styled($GridCell)` + margin-left: 0; + margin-left: 50px; + ${CSSFormIndentation} +`; diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/deMinimisAid/DeMinimisAidForm.tsx b/frontend/benefit/applicant/src/components/applications/forms/application/deMinimisAid/DeMinimisAidForm.tsx index 95f1558b8a..7cfa38c563 100644 --- a/frontend/benefit/applicant/src/components/applications/forms/application/deMinimisAid/DeMinimisAidForm.tsx +++ b/frontend/benefit/applicant/src/components/applications/forms/application/deMinimisAid/DeMinimisAidForm.tsx @@ -8,17 +8,14 @@ import { DeMinimisAid } from 'benefit-shared/types/application'; import { Button, DateInput, IconPlusCircle, TextInput } from 'hds-react'; import sumBy from 'lodash/sumBy'; import React from 'react'; -import { - $Grid, - $GridCell, - $SubHeader, -} from 'shared/components/forms/section/FormSection.sc'; +import { $GridCell } from 'shared/components/forms/section/FormSection.sc'; import { formatStringFloatValue, stringFloatToFixed, } from 'shared/utils/string.utils'; import { useTheme } from 'styled-components'; +import { $DeMinimisGridPadded, $DeMinimisSubHeader } from './deMinimisAid.sc'; import { useDeminimisAid } from './useDeminimisAid'; interface DeMinimisAidFormProps { @@ -63,26 +60,13 @@ const DeMinimisAidForm: React.FC = ({ }; return ( - <$GridCell - $colStart={3} - $colSpan={10} - as={$Grid} - columns={10} - css={` - margin-bottom: ${theme.spacing.s}; - `} - > + <> <$GridCell $colSpan={10}> - <$SubHeader>{t(`${translationsBase}.deMinimisAidsHeading`)} + <$DeMinimisSubHeader> + {t(`${translationsBase}.deMinimisAidsHeading`)} + - <$GridCell - $colSpan={8} - as={$Grid} - columns={8} - bgColor - bgHorizontalPadding - bgVerticalPadding - > + <$DeMinimisGridPadded> <$GridCell $colSpan={4}> = ({ invalid={!!getErrorMessage(DE_MINIMIS_AID_KEYS.AMOUNT)} aria-invalid={!!getErrorMessage(DE_MINIMIS_AID_KEYS.AMOUNT)} errorText={getErrorMessage(DE_MINIMIS_AID_KEYS.AMOUNT)} + helperText={t( + `${translationsBase}.fields.deMinimisAidAmount.helperText` + )} required /> - <$GridCell $colSpan={2}> + <$GridCell $colSpan={3}> = ({ required /> - - <$GridCell - $colSpan={2} - css={` - padding-top: 25px; - padding-left: ${theme.spacing.s}; - `} - > - - - + + + + ); }; diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/deMinimisAid/deMinimisAid.sc.ts b/frontend/benefit/applicant/src/components/applications/forms/application/deMinimisAid/deMinimisAid.sc.ts new file mode 100644 index 0000000000..a7de3daffe --- /dev/null +++ b/frontend/benefit/applicant/src/components/applications/forms/application/deMinimisAid/deMinimisAid.sc.ts @@ -0,0 +1,32 @@ +import { + $Grid, + $SubHeader, +} from 'shared/components/forms/section/FormSection.sc'; +import styled from 'styled-components'; + +export const $DeMinimisSubHeader = styled($SubHeader)` + margin-top: ${(props) => props.theme.spacing.xs3}; + margin-bottom: ${(props) => props.theme.spacing.s}; + margin-left: ${(props) => props.theme.spacing.xs2}; + font-weight: 400; + font-size: 1.1em; +`; + +export const $DeMinimisGrid = styled($Grid)` + max-width: 1024px; + margin-left: calc(-1 * ${(props) => props.theme.spacing.s}); + padding-left: ${(props) => props.theme.spacing.m}; + padding-right: ${(props) => props.theme.spacing.m}; +`; + +type DeMinimisGridProps = { + $bgColor?: string; +}; + +export const $DeMinimisGridPadded = styled($DeMinimisGrid)` + padding: ${(props) => props.theme.spacing.m}; + margin-left: calc(-1 * ${(props) => props.theme.spacing.s}); + background: ${(props) => + props.$bgColor ? props.$bgColor : props.theme.colors.black10}; + margin-bottom: ${(props) => props.theme.spacing.s}; +`; diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/deMinimisAid/list/DeMinimisAidsList.tsx b/frontend/benefit/applicant/src/components/applications/forms/application/deMinimisAid/list/DeMinimisAidsList.tsx index 3830a2ba68..3de8e6693a 100644 --- a/frontend/benefit/applicant/src/components/applications/forms/application/deMinimisAid/list/DeMinimisAidsList.tsx +++ b/frontend/benefit/applicant/src/components/applications/forms/application/deMinimisAid/list/DeMinimisAidsList.tsx @@ -12,6 +12,7 @@ import { convertToUIDateFormat } from 'shared/utils/date.utils'; import { formatStringFloatValue } from 'shared/utils/string.utils'; import { useTheme } from 'styled-components'; +import { $DeMinimisGrid } from '../deMinimisAid.sc'; import { useDeminimisAidsList } from './useDeminimisAidsList'; const DeMinimisAidsList: React.FC = () => { @@ -21,21 +22,17 @@ const DeMinimisAidsList: React.FC = () => { return ( <> {grants?.map((grant, i) => ( - <$GridCell - $colStart={3} - $colSpan={10} - as={$Grid} - columns={10} + <$DeMinimisGrid key={`${grant[DE_MINIMIS_AID_KEYS.GRANTER] ?? ''}${ grant[DE_MINIMIS_AID_KEYS.AMOUNT] ?? '' }${grant[DE_MINIMIS_AID_KEYS.GRANTED_AT] ?? ''}`} > <$GridCell - $colSpan={8} + css="margin-left: 15px" + $colSpan={12} as={$Grid} - columns={8} + columns={12} alignItems="center" - bgColor bgHorizontalPadding > <$GridCell $colSpan={4}> @@ -47,24 +44,26 @@ const DeMinimisAidsList: React.FC = () => { <$GridCell $colSpan={2}> {convertToUIDateFormat(grant[DE_MINIMIS_AID_KEYS.GRANTED_AT])} - - <$GridCell - $colSpan={2} - css={` - padding-left: ${theme.spacing.s}; - `} - > - + + - + ))} {sumBy(grants, (grant) => Number(grant.amount)) > MAX_DEMINIMIS_AID_TOTAL_AMOUNT && ( diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/step1/ApplicationFormStep1.tsx b/frontend/benefit/applicant/src/components/applications/forms/application/step1/ApplicationFormStep1.tsx index 2a77e86bf3..f97a9acba9 100644 --- a/frontend/benefit/applicant/src/components/applications/forms/application/step1/ApplicationFormStep1.tsx +++ b/frontend/benefit/applicant/src/components/applications/forms/application/step1/ApplicationFormStep1.tsx @@ -8,9 +8,13 @@ import React from 'react'; import { $RadioButton } from 'shared/components/forms/fields/Fields.sc'; import { Option } from 'shared/components/forms/fields/types'; import FormSection from 'shared/components/forms/section/FormSection'; -import { $GridCell } from 'shared/components/forms/section/FormSection.sc'; +import { + $GridCell, + $SubHeader, +} from 'shared/components/forms/section/FormSection.sc'; import { phoneToLocal } from 'shared/utils/string.utils'; +import { $SubFieldContainer } from '../Application.sc'; import DeMinimisAidForm from '../deMinimisAid/DeMinimisAidForm'; import DeMinimisAidsList from '../deMinimisAid/list/DeMinimisAidsList'; import StepperActions from '../stepperActions/StepperActions'; @@ -30,7 +34,7 @@ const ApplicationFormStep1: React.FC = ({ handleDelete, getErrorMessage, clearDeminimisAids, - getDefaultSelectValue, + getDefaultLanguage, showDeminimisSection, languageOptions, fields, @@ -62,7 +66,12 @@ const ApplicationFormStep1: React.FC = ({ translationsBase={translationsBase} fields={fields} /> - + + <$GridCell $colSpan={12}> + <$SubHeader weight="400"> + {t(`${translationsBase}.companyContactPerson.content`)} + + <$GridCell $colSpan={3}> = ({ <$GridCell $colSpan={3}>