feat(handler): add error validation logic and toast for de minimis ai…

…d form (HL-1202) (#2933)

* fix(handler): de minimis validation as in applicant form

* chore: remove commented line

* feat: add error validation for de minimis form

* chore: add translation for de minimis error

frontend/benefit/applicant/src/components/applications/forms/application/deMinimisAid/list/useDeminimisAidsList.ts

@@ -6,7 +6,6 @@ import sumBy from 'lodash/sumBy';
 import { TFunction } from 'next-i18next';
 import React from 'react';
 import { Language } from 'shared/i18n/i18n';
-// import * as Yup from 'yup';
 
 type ExtendedComponentProps = {
   t: TFunction;

frontend/benefit/handler/public/locales/en/common.json

@@ -337,6 +337,10 @@
           "label": "Enimmäismäärä ylitetty",
           "content": "De minimis-tuen enimmäismäärä on ylitetty. Tuki voi olla enintään {{amount}} 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",
+          "content": "Täytä puuttuvat minimis -kentät ja paina 'Lisää' painiketta."
+        },
         "salaryBenefit": {
           "label": "Palkkatuettu oppisopimus",
           "content": "Palkkatuettuun oppisopimukseen voi hakea joko työllistämisen tai palkan Helsinki-lisää"

frontend/benefit/handler/public/locales/fi/common.json

@@ -337,6 +337,10 @@
           "label": "Enimmäismäärä ylitetty",
           "content": "De minimis-tuen enimmäismäärä on ylitetty. Tuki voi olla enintään {{amount}} 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",
+          "content": "Täytä puuttuvat minimis -kentät ja paina 'Lisää' painiketta."
+        },
         "salaryBenefit": {
           "label": "Palkkatuettu oppisopimus",
           "content": "Palkkatuettuun oppisopimukseen voi hakea joko työllistämisen tai palkan Helsinki-lisää"

frontend/benefit/handler/public/locales/sv/common.json

@@ -337,6 +337,10 @@
           "label": "Enimmäismäärä ylitetty",
           "content": "De minimis-tuen enimmäismäärä on ylitetty. Tuki voi olla enintään {{amount}} 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",
+          "content": "Täytä puuttuvat minimis -kentät ja paina 'Lisää' painiketta."
+        },
         "salaryBenefit": {
           "label": "Palkkatuettu oppisopimus",
           "content": "Palkkatuettuun oppisopimukseen voi hakea joko työllistämisen tai palkan Helsinki-lisää"

frontend/benefit/handler/src/components/applicationForm/formContent/companySection/deMinimisAid/DeMinimisAidForm.tsx

@@ -2,11 +2,12 @@ import {
   DE_MINIMIS_AID_GRANTED_AT_MAX_DATE,
   MAX_DEMINIMIS_AID_TOTAL_AMOUNT,
 } from 'benefit/handler/constants';
+import DeMinimisContext from 'benefit/handler/context/DeMinimisContext';
 import { DE_MINIMIS_AID_KEYS } from 'benefit-shared/constants';
 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 React, { useCallback, useEffect } from 'react';
 import {
   $Grid,
   $GridCell,
@@ -36,6 +37,36 @@ const DeMinimisAidForm: React.FC<DeMinimisAidFormProps> = ({ data }) => {
   } = useDeminimisAid(data);
   const theme = useTheme();
 
+  const { setUnfinishedDeMinimisAidRow } = React.useContext(DeMinimisContext);
+
+  const validateDeMinimisRow = (): boolean =>
+    !(
+      formik.values.granter &&
+      formik.values.amount &&
+      formik.values.grantedAt
+    ) ||
+    !formik.isValid ||
+    sumBy(grants, 'amount') > MAX_DEMINIMIS_AID_TOTAL_AMOUNT;
+
+  /**
+   * Only empty inputs are consired complete because row addition clears them.
+   */
+  const isFormInputIncomplete: () => boolean = useCallback(
+    (): boolean =>
+      formik.values.granter?.length > 0 ||
+      formik.values.amount?.length > 0 ||
+      formik.values.grantedAt?.length > 0,
+    [formik.values]
+  );
+
+  useEffect(() => {
+    if (isFormInputIncomplete()) {
+      setUnfinishedDeMinimisAidRow(true);
+    } else {
+      setUnfinishedDeMinimisAidRow(false);
+    }
+  }, [setUnfinishedDeMinimisAidRow, isFormInputIncomplete]);
+
   return (
     <$GridCell
       $colStart={1}
@@ -120,15 +151,7 @@ const DeMinimisAidForm: React.FC<DeMinimisAidFormProps> = ({ data }) => {
       >
         <Button
           theme="coat"
-          disabled={
-            !(
-              formik.values.granter &&
-              formik.values.amount &&
-              formik.values.grantedAt
-            ) ||
-            !formik.isValid ||
-            sumBy(grants, 'amount') > MAX_DEMINIMIS_AID_TOTAL_AMOUNT
-          }
+          disabled={validateDeMinimisRow()}
           onClick={(e) => handleSubmit(e)}
           iconLeft={<IconPlusCircle />}
           fullWidth

frontend/benefit/handler/src/components/applicationForm/useApplicationForm.ts

@@ -2,6 +2,7 @@ import {
   APPLICATION_FIELD_KEYS,
   APPLICATION_FIELDS,
 } from 'benefit/handler/constants';
+import DeMinimisContext from 'benefit/handler/context/DeMinimisContext';
 import { useApplicationFormContext } from 'benefit/handler/hooks/useApplicationFormContext';
 import useApplicationQueryWithState from 'benefit/handler/hooks/useApplicationQueryWithState';
 import useFormActions from 'benefit/handler/hooks/useFormActions';
@@ -105,6 +106,9 @@ export const useApplicationForm = (): ExtendedComponentProps => {
     initialApplication
   );
 
+  const { deMinimisAids, unfinishedDeMinimisAidRow } =
+    React.useContext(DeMinimisContext);
+
   React.useEffect(() => {
     if (id) {
       dispatchStep({ type: 'setActive', payload: 1 });
@@ -253,8 +257,35 @@ export const useApplicationForm = (): ExtendedComponentProps => {
     return false;
   };
 
+  /**
+   * De Minimis has it's own formik, just use context to see if there's a row that's not finished
+   * @returns true if valid false if not
+   */
+  const checkDeMinimisForm = (): boolean => {
+    if (
+      values.deMinimisAid &&
+      (unfinishedDeMinimisAidRow || deMinimisAids.length === 0)
+    ) {
+      void errorToast(
+        t(
+          'common:applications.sections.notifications.deMinimisUnfinished.label'
+        ),
+        t(
+          'common:applications.sections.notifications.deMinimisUnfinished.content'
+        )
+      );
+      focusAndScroll('deMinimisAidTrue');
+      return false;
+    }
+    return true;
+  };
+
   const handleSave = async (): Promise<void> =>
     formik.validateForm().then((errors): Promise<void> | void => {
+      if (!checkDeMinimisForm()) {
+        return null;
+      }
+
       if (!errorActions(errors)) {
         return formik.submitForm();
       }

frontend/benefit/handler/src/context/DeMinimisContext.tsx

@@ -5,11 +5,15 @@ import React, { Dispatch, SetStateAction } from 'react';
 export type DeMinimisContextType = {
   deMinimisAids: DeMinimisAid[];
   setDeMinimisAids: Dispatch<SetStateAction<DeMinimisAid[]>>;
+  unfinishedDeMinimisAidRow: boolean;
+  setUnfinishedDeMinimisAidRow: Dispatch<SetStateAction<boolean>>;
 };
 
 const DeMinimisContext = React.createContext<DeMinimisContextType>({
   deMinimisAids: [],
   setDeMinimisAids: noop,
+  unfinishedDeMinimisAidRow: false,
+  setUnfinishedDeMinimisAidRow: noop,
 });
 
 export default DeMinimisContext;

frontend/benefit/handler/src/context/DeMinimisProvider.tsx

@@ -7,12 +7,15 @@ const DeMinimisProvider = <P,>({
   children,
 }: React.PropsWithChildren<P>): JSX.Element => {
   const [deMinimisAids, setDeMinimisAids] = React.useState<DeMinimisAid[]>([]);
-
+  const [unfinishedDeMinimisAidRow, setUnfinishedDeMinimisAidRow] =
+    React.useState<boolean>(false);
   return (
     <DeMinimisContext.Provider
       value={{
         deMinimisAids,
         setDeMinimisAids,
+        unfinishedDeMinimisAidRow,
+        setUnfinishedDeMinimisAidRow,
       }}
     >
       {children}