diff --git a/frontend/benefit/handler/src/components/applicationForm/formContent/FormContent.tsx b/frontend/benefit/handler/src/components/applicationForm/formContent/FormContent.tsx index 8ef296b51f..96dd30cfeb 100644 --- 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 = ({ clearAlternativeAddressValues, getErrorMessage, displayPastApplicationDatesWarning, + dateInputLimits, } = useFormContent(formik, fields); const theme = useTheme(); @@ -152,6 +153,7 @@ const FormContent: React.FC = ({ invalid={!!getErrorMessage(fields.paperApplicationDate.name)} aria-invalid={!!getErrorMessage(fields.paperApplicationDate.name)} errorText={getErrorMessage(fields.paperApplicationDate.name)} + maxDate={dateInputLimits.max} /> @@ -605,6 +607,7 @@ const FormContent: React.FC = ({ aria-invalid={!!getErrorMessage(fields.startDate.name)} errorText={getErrorMessage(fields.startDate.name)} minDate={APPLICATION_START_DATE} + maxDate={dateInputLimits.max} required /> diff --git a/frontend/benefit/handler/src/components/applicationForm/formContent/useFormContent.ts b/frontend/benefit/handler/src/components/applicationForm/formContent/useFormContent.ts index 0f65c4af56..e27ff7b837 100644 --- 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/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/SalaryBenefitCalculatorView.tsx b/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/SalaryBenefitCalculatorView.tsx index b7a52b8f26..b81532dc23 100644 --- a/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/SalaryBenefitCalculatorView.tsx +++ b/frontend/benefit/handler/src/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} /> @@ -370,6 +373,8 @@ const SalaryBenefitCalculatorView: React.FC< }} value={convertToUIDateFormat(item.endDate)} style={{ paddingRight: `${theme.spacing.s}` }} + minDate={dateInputLimits.min} + maxDate={dateInputLimits.max} /> <$GridCell $colSpan={11}> @@ -510,6 +515,8 @@ const SalaryBenefitCalculatorView: React.FC< errorText={getErrorMessage( fields.trainingCompensationStartDate.name )} + minDate={dateInputLimits.min} + maxDate={dateInputLimits.max} /> @@ -540,6 +547,8 @@ const SalaryBenefitCalculatorView: React.FC< fields.trainingCompensationEndDate.name )} style={{ paddingRight: `${theme.spacing.s}` }} + minDate={dateInputLimits.min} + maxDate={dateInputLimits.max} /> @@ -608,6 +617,7 @@ const SalaryBenefitCalculatorView: React.FC< <$GridCell $colStart={3} $colSpan={3}> + {/* TODO: MAX DATE */} diff --git a/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/useSalaryBenefitCalculatorData.ts b/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/useSalaryBenefitCalculatorData.ts index a0fc39165e..9d85921443 100644 --- a/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/useSalaryBenefitCalculatorData.ts +++ b/frontend/benefit/handler/src/components/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, }; };