feat: restrict date picker min/max year ranges (#3619)

City-of-Helsinki · Dec 3, 2024 · 42226ab · 42226ab
1 parent 1e1f71d
commit 42226ab
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 0 deletions.
diff --git a/frontend/benefit/handler/src/components/applicationForm/formContent/FormContent.tsx b/frontend/benefit/handler/src/components/applicationForm/formContent/FormContent.tsx
@@ -98,6 +98,7 @@ const FormContent: React.FC<Props> = ({
     clearAlternativeAddressValues,
     getErrorMessage,
     displayPastApplicationDatesWarning,
+    dateInputLimits,
   } = useFormContent(formik, fields);
 
   const theme = useTheme();
@@ -152,6 +153,7 @@ const FormContent: React.FC<Props> = ({
               invalid={!!getErrorMessage(fields.paperApplicationDate.name)}
               aria-invalid={!!getErrorMessage(fields.paperApplicationDate.name)}
               errorText={getErrorMessage(fields.paperApplicationDate.name)}
+              maxDate={dateInputLimits.max}
             />
           </$GridCell>
         </FormSection>
@@ -605,6 +607,7 @@ const FormContent: React.FC<Props> = ({
             aria-invalid={!!getErrorMessage(fields.startDate.name)}
             errorText={getErrorMessage(fields.startDate.name)}
             minDate={APPLICATION_START_DATE}
+            maxDate={dateInputLimits.max}
             required
           />
         </$GridCell>

diff --git a/frontend/benefit/handler/src/components/applicationForm/formContent/useFormContent.ts b/frontend/benefit/handler/src/components/applicationForm/formContent/useFormContent.ts
@@ -6,6 +6,7 @@ import {
   ApplicationFields,
 } from 'benefit/handler/types/application';
 import { getErrorText } from 'benefit-shared/utils/forms';
+import { addYears } from 'date-fns';
 import parse from 'date-fns/parse';
 import { FormikProps } from 'formik';
 import { TFunction, useTranslation } from 'next-i18next';
@@ -31,6 +32,10 @@ type ExtendedComponentProps = {
   clearAlternativeAddressValues: () => void;
   getErrorMessage: (fieldName: string) => string | undefined;
   displayPastApplicationDatesWarning: () => boolean;
+  dateInputLimits: {
+    max: Date;
+    min: Date;
+  };
 };
 
 const useFormContent = (
@@ -124,6 +129,10 @@ const useFormContent = (
   const language = SUPPORTED_LANGUAGES.FI;
   const locale = useLocale();
   const textLocale = capitalize(locale);
+  const dateInputLimits = {
+    min: addYears(new Date(), -1),
+    max: addYears(new Date(), 2),
+  };
 
   return {
     t,
@@ -140,6 +149,7 @@ const useFormContent = (
     clearAlternativeAddressValues,
     getErrorMessage,
     displayPastApplicationDatesWarning,
+    dateInputLimits,
   };
 };
 

diff --git a/.../components/applicationReview/salaryBenefitCalculatorView/SalaryBenefitCalculatorView.tsx b/.../components/applicationReview/salaryBenefitCalculatorView/SalaryBenefitCalculatorView.tsx
@@ -63,6 +63,7 @@ const SalaryBenefitCalculatorView: React.FC<
     addNewTrainingCompensation,
     removeTrainingCompensation,
     isDisabledAddTrainingCompensationButton,
+    dateInputLimits,
   } = useSalaryBenefitCalculatorData(application, setCalculationErrors);
   const {
     t,
@@ -336,6 +337,8 @@ const SalaryBenefitCalculatorView: React.FC<
                         )
                       );
                     }}
+                    minDate={dateInputLimits.min}
+                    maxDate={dateInputLimits.max}
                   />
                 </$GridCell>
 
@@ -370,6 +373,8 @@ const SalaryBenefitCalculatorView: React.FC<
                     }}
                     value={convertToUIDateFormat(item.endDate)}
                     style={{ paddingRight: `${theme.spacing.s}` }}
+                    minDate={dateInputLimits.min}
+                    maxDate={dateInputLimits.max}
                   />
                 </$GridCell>
                 <$GridCell $colSpan={11}>
@@ -510,6 +515,8 @@ const SalaryBenefitCalculatorView: React.FC<
               errorText={getErrorMessage(
                 fields.trainingCompensationStartDate.name
               )}
+              minDate={dateInputLimits.min}
+              maxDate={dateInputLimits.max}
             />
           </$GridCell>
 
@@ -540,6 +547,8 @@ const SalaryBenefitCalculatorView: React.FC<
                 fields.trainingCompensationEndDate.name
               )}
               style={{ paddingRight: `${theme.spacing.s}` }}
+              minDate={dateInputLimits.min}
+              maxDate={dateInputLimits.max}
             />
           </$GridCell>
 
@@ -608,6 +617,7 @@ const SalaryBenefitCalculatorView: React.FC<
       </$GridCell>
 
       <$GridCell $colStart={3} $colSpan={3}>
+        {/* TODO: MAX DATE */}
         <DateInput
           id={fields.endDate.name}
           name={fields.endDate.name}
@@ -621,6 +631,7 @@ const SalaryBenefitCalculatorView: React.FC<
           aria-invalid={!!getErrorMessage(fields.endDate.name)}
           errorText={getErrorMessage(fields.endDate.name)}
           style={{ paddingRight: `${theme.spacing.s}` }}
+          maxDate={dateInputLimits.max}
         />
       </$GridCell>
 

diff --git a/...omponents/applicationReview/salaryBenefitCalculatorView/useSalaryBenefitCalculatorData.ts b/...omponents/applicationReview/salaryBenefitCalculatorView/useSalaryBenefitCalculatorData.ts
@@ -10,6 +10,7 @@ import {
   Application,
   TrainingCompensation,
 } from 'benefit-shared/types/application';
+import { addYears } from 'date-fns';
 import { FormikProps, useFormik } from 'formik';
 import clone from 'lodash/clone';
 import fromPairs from 'lodash/fromPairs';
@@ -48,6 +49,10 @@ type ExtendedComponentProps = {
   addNewTrainingCompensation: () => void;
   removeTrainingCompensation: (id: string) => void;
   isDisabledAddTrainingCompensationButton: boolean;
+  dateInputLimits: {
+    min: Date;
+    max: Date;
+  };
 };
 
 const initialTrainingCompensationValues = {
@@ -209,6 +214,11 @@ const useSalaryBenefitCalculatorData = (
     [endDate, startDate]
   );
 
+  const dateInputLimits = {
+    min: addYears(new Date(), -2),
+    max: addYears(new Date(), 2),
+  };
+
   useEffect(() => {
     if (
       newTrainingCompensation.monthlyAmount &&
@@ -234,6 +244,7 @@ const useSalaryBenefitCalculatorData = (
     addNewTrainingCompensation,
     removeTrainingCompensation,
     isDisabledAddTrainingCompensationButton,
+    dateInputLimits,
   };
 };