Reword error messages to suggest corrections instead of saying what's…

… wrong

frontend/src/components/date-picker/date-picker.tsx

@@ -2,6 +2,7 @@ import { DatePicker as DatePickerInternal } from '@navikt/ds-react';
 import { addYears, format, isAfter, isBefore, isValid, parse, subDays, subYears } from 'date-fns';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { isoDateToPretty } from '@app/domain/date/date';
+import { useTranslation } from '@app/language/use-translation';
 import { FORMAT, PRETTY_FORMAT } from './constants';
 
 interface Props {
@@ -31,6 +32,7 @@ export const DatePicker = ({
 }: Props) => {
   const [inputError, setInputError] = useState<string>();
   const [input, setInput] = useState<string>(value === null ? '' : isoDateToPretty(value) ?? '');
+  const { error_messages } = useTranslation();
 
   useEffect(() => {
     setInput(value === null ? '' : isoDateToPretty(value) ?? '');
@@ -58,21 +60,21 @@ export const DatePicker = ({
       const validRange = isAfter(date, subDays(fromDate, 1)) && isBefore(date, toDate);
 
       if (!validFormat) {
-        setInputError('Ugyldig dato');
+        setInputError(error_messages.date.invalid_format);
 
         return;
       }
 
       if (!validRange) {
-        setInputError(`Dato må være mellom ${format(fromDate, PRETTY_FORMAT)} og ${format(toDate, PRETTY_FORMAT)}`);
+        setInputError(error_messages.date.invalid_range(fromDate, toDate));
 
         return;
       }
 
       setInputError(undefined);
       onChange(format(date, FORMAT));
     },
-    [fromDate, onChange, toDate],
+    [error_messages.date, fromDate, onChange, toDate],
   );
 
   const onInputChange = useCallback(() => {

frontend/src/language/en.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable max-lines */
 import { BodyShort, Link } from '@navikt/ds-react';
+import { format } from 'date-fns';
 import React from 'react';
+import { PRETTY_FORMAT } from '@app/components/date-picker/constants';
 import { ExternalLink } from '@app/components/link/link';
 import { ErrorMessageKeys } from '@app/language/error-messages';
 import { Utfall } from '@app/redux-api/case/anke/types';
@@ -391,14 +393,19 @@ export const en: Language = {
       'You have tried to include an attachment with a format we do not support. Attachments are limited to til PNG, JPEG, and PDF.',
     skjema: {
       title: 'Form is not complete',
-      fnr_dnr_or_npid: 'Invalid national identity numbe, D number or NPID.',
-      vedtak_date: 'Decision date must be a valid date that is not in the future, or empty.',
-      vedtak_date_required: 'Decision date must be a valid date that is not in the future.',
-      fornavn: 'First and middle name can not be empty.',
-      etternavn: 'Surname can not be empty.',
+      fnr_dnr_or_npid: 'You must input a valid national identity number, D number or NPID.',
+      vedtak_date: 'You must either leave the field empty, or input a valid date that is not in the future.',
+      vedtak_date_required: 'You must input a valid date that is not in the future.',
+      fornavn: 'You must input a first and middle name.',
+      etternavn: 'You must input a surname.',
       begrunnelse: 'You must state a reason before continuing.',
       enhet: 'You must select a unit.',
     },
+    date: {
+      invalid_format: 'You must input a valid date.',
+      invalid_range: (from: Date, to: Date) =>
+        `You must input a date that is between ${format(from, PRETTY_FORMAT)} and ${format(to, PRETTY_FORMAT)}.`,
+    },
   },
   common: {
     loading: 'Loading...',

frontend/src/language/nb.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable max-lines */
 import { BodyShort, Link } from '@navikt/ds-react';
+import { format } from 'date-fns';
 import React from 'react';
+import { PRETTY_FORMAT } from '@app/components/date-picker/constants';
 import { ExternalLink } from '@app/components/link/link';
 import { ErrorMessageKeys } from '@app/language/error-messages';
 import { Utfall } from '@app/redux-api/case/anke/types';
@@ -400,14 +402,20 @@ export const nb = {
       'Du har prøvd å legge til et vedlegg med et format vi ikke støtter. Vedlegg er begrenset til PNG, JPEG, og PDF.',
     skjema: {
       title: 'Feil i skjema',
-      fnr_dnr_or_npid: 'Ugyldig fødselsnummer, D-nummer eller NPID.',
-      vedtak_date: 'Vedtaksdato må være en gyldig dato som ikke er i fremtiden, eller tom.',
-      vedtak_date_required: 'Vedtaksdato må være en gyldig dato som ikke er i fremtiden.',
+      fnr_dnr_or_npid: 'Du må fylle inn et gyldig fødselsnummer, D-nummer eller NPID.',
+      vedtak_date:
+        'Du må enten la feltet stå tomt, eller fylle inn en dato som er en gyldig dato, og som ikke er i fremtiden.',
+      vedtak_date_required: 'Du må fylle inn en dato som er en gyldig dato og som ikke er i fremtiden.',
       fornavn: 'Du må fylle inn fornavn og mellomnavn.',
       etternavn: 'Du må fylle inn etternavn.',
       begrunnelse: 'Du må skrive en begrunnelse før du går videre.',
       enhet: 'Du må velge en enhet.',
     },
+    date: {
+      invalid_format: 'Du må velge en gyldig dato.',
+      invalid_range: (from: Date, to: Date) =>
+        `Du må velge en dato som er mellom ${format(from, PRETTY_FORMAT)} og ${format(to, PRETTY_FORMAT)}`,
+    },
   },
   common: {
     loading: 'Laster...',