Make UX more intuitive when fritekst save has failed

Author: eriksson-daniel

frontend/src/components/case/innlogget/begrunnelse/begrunnelse-page.tsx

@@ -138,6 +138,7 @@ const RenderCasebegrunnelsePage = ({ data }: Props) => {
       <BegrunnelseText
         caseId={data.id}
         value={data.fritekst}
+        type={data.type}
         description={skjema.begrunnelse.begrunnelse_text.description[data.type]}
         placeholder={skjema.begrunnelse.begrunnelse_text.placeholder[data.type]}
         label={skjema.begrunnelse.begrunnelse_text.title[data.type]}

frontend/src/components/case/innlogget/begrunnelse/begrunnelse-text.tsx

@@ -4,22 +4,25 @@ import { isError } from '@app/functions/is-api-error';
 import { useOnUnmount } from '@app/hooks/use-on-unmount';
 import { useTranslation } from '@app/language/use-translation';
 import { useUpdateCaseMutation } from '@app/redux-api/case/api';
+import type { CaseType } from '@app/redux-api/case/types';
 import { Textarea, type TextareaProps } from '@navikt/ds-react';
-import { useCallback, useEffect, useState } from 'react';
+import type { SerializedError } from '@reduxjs/toolkit';
+import type { FetchBaseQueryError } from '@reduxjs/toolkit/query';
+import { type ReactNode, useCallback, useEffect, useState } from 'react';
 
 interface Props extends Omit<TextareaProps, 'label' | 'onError' | 'onChange'> {
   caseId: string;
   value: string;
   label: string;
   modified: string;
+  type: CaseType;
 }
 
-export const BegrunnelseText = ({ caseId, value, modified, error, ...props }: Props) => {
+export const BegrunnelseText = ({ caseId, value, modified, error, type, ...props }: Props) => {
   const [localValue, setLocalValue] = useState(value);
-  const [updateCase, status] = useUpdateCaseMutation({ fixedCacheKey: caseId });
+  const [updateCase, { reset, ...status }] = useUpdateCaseMutation({ fixedCacheKey: caseId });
   const [lastSaved, setLastSaved] = useState<string>(modified);
-  const { skjema } = useTranslation();
-  const { failed } = skjema.begrunnelse.autosave;
+  const errorMessage = useErrorMessage(type, status.error, error);
 
   const updateFritekst = useCallback(
     async (newValue: string) => {
@@ -29,17 +32,15 @@ export const BegrunnelseText = ({ caseId, value, modified, error, ...props }: Pr
     [caseId, updateCase],
   );
 
-  const unauthorized = isError(status.error) && status.error.status === 401;
-
   useEffect(() => {
-    if (value === localValue || unauthorized) {
+    if (value === localValue || status.isError) {
       return;
     }
 
     const timeout = setTimeout(() => updateFritekst(localValue), 1000);
 
     return () => clearTimeout(timeout);
-  }, [value, localValue, updateFritekst, unauthorized]);
+  }, [value, localValue, updateFritekst, status.isError]);
 
   useOnUnmount(() => {
     if (value !== localValue) {
@@ -54,13 +55,31 @@ export const BegrunnelseText = ({ caseId, value, modified, error, ...props }: Pr
         maxLength={0}
         minLength={1}
         minRows={10}
-        onChange={({ target }) => setLocalValue(target.value)}
+        onChange={({ target }) => {
+          reset(); // Reset (error) status for every change, so the user can see if the next save attempt fails or succeeds
+          setLocalValue(target.value);
+        }}
         value={localValue}
         placeholder="Skriv her"
-        error={status.isError ? failed : error}
+        error={errorMessage}
         {...props}
       />
       <AutosaveProgressIndicator {...status} lastSaved={lastSaved} />
     </div>
   );
 };
+
+const useErrorMessage = (
+  type: CaseType,
+  rtkqError: FetchBaseQueryError | SerializedError | undefined,
+  validationError: ReactNode,
+) => {
+  const { skjema } = useTranslation();
+  const { failed } = skjema.begrunnelse.autosave;
+
+  if (isError(rtkqError) && rtkqError.status === 409) {
+    return skjema.begrunnelse.errors.finished[type];
+  }
+
+  return rtkqError === undefined ? validationError : failed;
+};

frontend/src/language/en.tsx

@@ -129,6 +129,14 @@ export const en: Translations = {
         [CaseType.ETTERSENDELSE_KLAGE]: 'Delete additional documentation and return to start page',
         [CaseType.ETTERSENDELSE_ANKE]: 'Delete additional documentation and return to start page',
       },
+      errors: {
+        finished: {
+          [CaseType.KLAGE]: 'The complaint has already been submitted',
+          [CaseType.ANKE]: 'The appeal has already been submitted',
+          [CaseType.ETTERSENDELSE_KLAGE]: 'The additional documentation has already been submitted',
+          [CaseType.ETTERSENDELSE_ANKE]: 'The additional documentation has already been submitted',
+        },
+      },
     },
     summary: {
       title: {

frontend/src/language/nb.tsx

@@ -133,6 +133,14 @@ export const nb = {
         [CaseType.ETTERSENDELSE_KLAGE]: 'Slett ettersendelsen og returner til hovedsiden',
         [CaseType.ETTERSENDELSE_ANKE]: 'Slett ettersendelsen og returner til hovedsiden',
       },
+      errors: {
+        finished: {
+          [CaseType.KLAGE]: 'Klagen er allerede sendt inn',
+          [CaseType.ANKE]: 'Anken er allerede sendt inn',
+          [CaseType.ETTERSENDELSE_KLAGE]: 'Ettersendelsen er allerede sendt inn',
+          [CaseType.ETTERSENDELSE_ANKE]: 'Ettersendelsen er allerede sendt inn',
+        },
+      },
     },
     summary: {
       title: {

frontend/src/language/nn.tsx

@@ -132,6 +132,14 @@ export const nn: Translations = {
         [CaseType.ETTERSENDELSE_KLAGE]: 'Slett ettersendinga og gå tilbake til hovudsida',
         [CaseType.ETTERSENDELSE_ANKE]: 'Slett ettersendinga og gå tilbake til hovudsida',
       },
+      errors: {
+        finished: {
+          [CaseType.KLAGE]: 'Klaga er allereie sendt inn',
+          [CaseType.ANKE]: 'Anka er allereie sendt inn',
+          [CaseType.ETTERSENDELSE_KLAGE]: 'Ettersendinga er allereie sendt inn',
+          [CaseType.ETTERSENDELSE_ANKE]: 'Ettersendinga er allereie sendt inn',
+        },
+      },
     },
     summary: {
       title: {