fix: various bug fixes (HL-1001, HL-1004) (#2326)

* fix: de minimis values would be overriden by initial values on steps 2+ * feat: stylize de minimis aids list * fix: require co-operation negotiantions description * fix: wrong translation key for street address * feat: add missing co-operation negotiation helper text * fix: use correct variable to check for deminimis length
City-of-Helsinki · Oct 5, 2023 · ea54019 · ea54019
1 parent 8ae3522
commit ea54019
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 24 deletions.
diff --git a/frontend/benefit/applicant/package.json b/frontend/benefit/applicant/package.json
@@ -11,7 +11,7 @@
     "test": "jest --passWithNoTests",
     "test:staged": "yarn test --watchAll=false --findRelatedTests",
     "test:coverage": "yarn test --verbose --coverage",
-    "browser-test": "testcafe 'chrome --allow-insecure-localhost --ignore-certificate-errors --ignore-urlfetcher-cert-requests --window-size=\"1249,720\"' browser-tests/testruns/deminimis.testcafe.ts",
+    "browser-test": "testcafe 'chrome --allow-insecure-localhost --ignore-certificate-errors --ignore-urlfetcher-cert-requests --window-size=\"1249,1249\"' browser-tests/testruns/deminimis.testcafe.ts",
     "browser-test:ci": "testcafe 'chrome:headless --disable-gpu --window-size=\"1249,720\"  --ignore-certificate-errors-spki-list=\"8sg/cl7YabrOFqSqH+Bu0e+P27Av33gWgi8Lq28DW1I=,gJt+wt/T3afCRkxtMMSjXcl/99sgzWc2kk1c1PC9tG0=,zrQI2/1q8i2SRPmMZ1sMntIkG+lMW0legPFokDo3nrY=\"' --screenshots path=report --video report --reporter spec,custom,html:report/index.html browser-tests/testruns/*.ts --experimental-proxyless"
   },
   "dependencies": {

diff --git a/frontend/benefit/applicant/public/locales/en/common.json b/frontend/benefit/applicant/public/locales/en/common.json
@@ -176,6 +176,7 @@
           },
           "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.",
             "yes": "Yes",
             "no": "No"
           },

diff --git a/frontend/benefit/applicant/public/locales/fi/common.json b/frontend/benefit/applicant/public/locales/fi/common.json
@@ -176,6 +176,7 @@
           },
           "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.",
             "yes": "Kyllä",
             "no": "Ei"
           },

diff --git a/frontend/benefit/applicant/public/locales/sv/common.json b/frontend/benefit/applicant/public/locales/sv/common.json
@@ -176,6 +176,7 @@
           },
           "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.",
             "yes": "Ja",
             "no": "Nej"
           },

diff --git a/...applicant/src/components/applications/forms/application/deMinimisAid/DeMinimisAidForm.tsx b/...applicant/src/components/applications/forms/application/deMinimisAid/DeMinimisAidForm.tsx
@@ -16,7 +16,7 @@ import {
 } from 'shared/utils/string.utils';
 import { useTheme } from 'styled-components';
 
-import { $DeMinimisGridPadded, $DeMinimisSubHeader } from './deMinimisAid.sc';
+import { $DeMinimisGridForm, $DeMinimisSubHeader } from './deMinimisAid.sc';
 import { useDeminimisAid } from './useDeminimisAid';
 
 interface DeMinimisAidFormProps {
@@ -68,7 +68,7 @@ const DeMinimisAidForm: React.FC<DeMinimisAidFormProps> = ({
           {t(`${translationsBase}.deMinimisAidsHeading`)}
         </$DeMinimisSubHeader>
       </$GridCell>
-      <$DeMinimisGridPadded>
+      <$DeMinimisGridForm>
         <$GridCell $colSpan={4}>
           <TextInput
             id={fields.granter.name}
@@ -154,7 +154,7 @@ const DeMinimisAidForm: React.FC<DeMinimisAidFormProps> = ({
             {t(`${translationsBase}.deMinimisAidsAdd`)}
           </Button>
         </$GridCell>
-      </$DeMinimisGridPadded>
+      </$DeMinimisGridForm>
     </>
   );
 };

diff --git a/...t/applicant/src/components/applications/forms/application/deMinimisAid/deMinimisAid.sc.ts b/...t/applicant/src/components/applications/forms/application/deMinimisAid/deMinimisAid.sc.ts
@@ -4,6 +4,10 @@ import {
 } from 'shared/components/forms/section/FormSection.sc';
 import styled from 'styled-components';
 
+type DeMinimisGridProps = {
+  $bgColor?: string;
+};
+
 export const $DeMinimisSubHeader = styled($SubHeader)`
   margin-top: ${(props) => props.theme.spacing.xs3};
   margin-bottom: ${(props) => props.theme.spacing.s};
@@ -12,21 +16,30 @@ export const $DeMinimisSubHeader = styled($SubHeader)`
   font-size: 1.1em;
 `;
 
-export const $DeMinimisGrid = styled($Grid)`
+export const $DeMinimisGrid = styled($Grid)<DeMinimisGridProps>`
   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};
-`;
+  padding: ${(props) => props.theme.spacing.xs2}
+    ${(props) => props.theme.spacing.m};
+  margin-bottom: ${(props) => props.theme.spacing.xs2};
+  background: ${(props) =>
+    props.$bgColor ? props.$bgColor : props.theme.colors.black10};
 
-type DeMinimisGridProps = {
-  $bgColor?: string;
-};
+  justify-content: space-between;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 
-export const $DeMinimisGridPadded = styled($DeMinimisGrid)<DeMinimisGridProps>`
+  > * {
+    justify-content: space-between;
+    flex-flow: row wrap;
+  }
+`;
+
+export const $DeMinimisGridForm = styled($DeMinimisGrid)<DeMinimisGridProps>`
   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/...ant/src/components/applications/forms/application/deMinimisAid/list/DeMinimisAidsList.tsx b/...ant/src/components/applications/forms/application/deMinimisAid/list/DeMinimisAidsList.tsx
@@ -1,7 +1,7 @@
 import { $Notification } from 'benefit/applicant/components/Notification/Notification.sc';
 import { MAX_DEMINIMIS_AID_TOTAL_AMOUNT } from 'benefit/applicant/constants';
 import { DE_MINIMIS_AID_KEYS } from 'benefit-shared/constants';
-import { Button, IconMinusCircle } from 'hds-react';
+import { Button, IconTrash } from 'hds-react';
 import React from 'react';
 import {
   $Grid,
@@ -53,16 +53,17 @@ const DeMinimisAidsList: React.FC = () => {
               $colSpan={4}
               css={`
                 margin-left: auto;
-                margin-bottom: ${theme.spacing.s};
+                margin-bottom: 0;
                 padding-left: ${theme.spacing.s};
               `}
             >
               <Button
+                size="small"
                 data-testid={`deminimis-remove-${i}`}
                 onClick={() => handleRemove(i)}
-                variant="secondary"
+                variant="supplementary"
                 theme="black"
-                iconLeft={<IconMinusCircle />}
+                iconLeft={<IconTrash />}
                 fullWidth
               >
                 {t(`${translationsBase}.deMinimisAidsRemove`)}

diff --git a/...it/applicant/src/components/applications/forms/application/step1/ApplicationFormStep1.tsx b/...it/applicant/src/components/applications/forms/application/step1/ApplicationFormStep1.tsx
@@ -244,6 +244,7 @@ const ApplicationFormStep1: React.FC<DynamicFormStepComponentProps> = ({
             direction="vertical"
             required
             errorText={getErrorMessage(fields.coOperationNegotiations.name)}
+            tooltipText={`${translationsBase}.fields.${APPLICATION_FIELDS_STEP1_KEYS.CO_OPERATION_NEGOTIATIONS}.tooltipText`}
           >
             <$RadioButton
               id={`${fields.coOperationNegotiations.name}False`}

diff --git a/...applicant/src/components/applications/forms/application/step1/companyInfo/CompanyInfo.tsx b/...applicant/src/components/applications/forms/application/step1/companyInfo/CompanyInfo.tsx
@@ -107,7 +107,7 @@ const CompanyInfo: React.FC<CompanyInfoProps> = ({
                 </$CompanyInfoRow>
                 <$CompanyInfoRow>
                   <$CompanyInfoLabel>
-                    {t(`${translationsBase}.fields.companyName`)}
+                    {t(`${translationsBase}.fields.companyAddress`)}
                   </$CompanyInfoLabel>
                   <$CompanyInfoValue>
                     {data.streetAddress}

diff --git a/...benefit/applicant/src/components/applications/forms/application/step1/utils/validation.ts b/...benefit/applicant/src/components/applications/forms/application/step1/utils/validation.ts
@@ -143,5 +143,13 @@ export const getValidationSchema = (
       .nullable()
       .required(t(VALIDATION_MESSAGE_KEYS.REQUIRED)),
     [APPLICATION_FIELDS_STEP1_KEYS.CO_OPERATION_NEGOTIATIONS_DESCRIPTION]:
-      Yup.string(),
+      Yup.string().when(
+        APPLICATION_FIELDS_STEP1_KEYS.CO_OPERATION_NEGOTIATIONS,
+        {
+          is: (checked: boolean): boolean => checked,
+          then: Yup.string()
+            .nullable()
+            .required(t(VALIDATION_MESSAGE_KEYS.REQUIRED)),
+        }
+      ),
   });
diff --git a/frontend/benefit/applicant/src/hooks/useFormActions.tsx b/frontend/benefit/applicant/src/hooks/useFormActions.tsx
@@ -98,8 +98,13 @@ const useFormActions = (application: Partial<Application>): FormActions => {
   // eslint-disable-next-line sonarjs/cognitive-complexity
   const getModifiedValues = (currentValues: Application): Application => {
     const employee: Employee | undefined = currentValues?.employee ?? undefined;
-    const { paySubsidyGranted, startDate, endDate, apprenticeshipProgram } =
-      currentValues;
+    const {
+      paySubsidyGranted,
+      startDate,
+      endDate,
+      apprenticeshipProgram,
+      deMinimisAidSet,
+    } = currentValues;
     const paySubsidyPercent =
       paySubsidyGranted === PAY_SUBSIDY_GRANTED.NOT_GRANTED
         ? null
@@ -136,14 +141,16 @@ const useFormActions = (application: Partial<Application>): FormActions => {
       apprenticeshipProgram,
     };
 
-    const deMinimisAidSet = deMinimisAids;
+    // Use context on first step, otherwise pass data from backend
+    const deMinimisAidData =
+      currentStep === 1 ? deMinimisAids : deMinimisAidSet;
 
     return {
       ...application,
       ...normalizedValues,
-      deMinimisAidSet,
+      deMinimisAidSet: deMinimisAidData,
       benefitType: BENEFIT_TYPES.SALARY,
-      deMinimisAid: deMinimisAidSet.length > 0,
+      deMinimisAid: deMinimisAidData.length > 0,
     };
   };