[KAIZEN-0] Legg til prompt på fortsett dialog controller

navikt · Jan 15, 2024 · 6a3c109 · 6a3c109
1 parent 3679753
commit 6a3c109
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 18 deletions.
diff --git a/src/app/personside/dialogpanel/fortsettDialog/FortsettDialogContainer.tsx b/src/app/personside/dialogpanel/fortsettDialog/FortsettDialogContainer.tsx
@@ -34,6 +34,9 @@ import journalsakResource from '../../../../rest/resources/journalsakResource';
 import FortsettDialog from './FortsettDialog';
 import useFeatureToggle from '../../../../components/featureToggle/useFeatureToggle';
 import { FeatureToggles } from '../../../../components/featureToggle/toggleIDs';
+import { Prompt } from 'react-router';
+import IfFeatureToggleOn from '../../../../components/featureToggle/IfFeatureToggleOn';
+import { useAlertOnNavigation } from '../useAlertOnNavigation';
 
 interface Props {
     traad: Traad;
@@ -104,6 +107,8 @@ function FortsettDialogContainer(props: Props) {
 
     const opprettHenvendelse = useOpprettHenvendelse(props.traad);
 
+    useAlertOnNavigation(!!state.errors?.length);
+
     if (dialogStatus.type === DialogPanelStatus.SVAR_SENDT) {
         return <SvarSendtKvittering kvitteringsData={dialogStatus.kvitteringsData} />;
     }
@@ -227,6 +232,14 @@ function FortsettDialogContainer(props: Props) {
         <StyledArticle aria-labelledby={tittelId.current}>
             <ReflowBoundry>
                 <Undertittel id={tittelId.current}>{traadTittel(props.traad.traadType)}</Undertittel>
+                <IfFeatureToggleOn toggleID={FeatureToggles.VisPromptMeldingSending}>
+                    <Prompt
+                        when={!!state.errors?.length}
+                        message={
+                            'Det skjedde en feil ved sending av meldingen. Hvis du trykker avbryt kan du prøve å sende den igjen.'
+                        }
+                    />
+                </IfFeatureToggleOn>
                 <FortsettDialog
                     handleAvbryt={handleAvbryt}
                     state={state}

diff --git a/src/app/personside/dialogpanel/sendMelding/SendNyMeldingContainer.tsx b/src/app/personside/dialogpanel/sendMelding/SendNyMeldingContainer.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import { FormEvent, useCallback, useMemo, useState } from 'react';
 import { MeldingValidator } from './validatorer';
 import {
     Meldingstype,
@@ -23,6 +23,7 @@ import useFeatureToggle from '../../../../components/featureToggle/useFeatureTog
 import { FeatureToggles } from '../../../../components/featureToggle/toggleIDs';
 import { Prompt } from 'react-router';
 import IfFeatureToggleOn from '../../../../components/featureToggle/IfFeatureToggleOn';
+import { useAlertOnNavigation } from '../useAlertOnNavigation';
 
 interface Props {
     defaultOppgaveDestinasjon: OppgavelisteValg;
@@ -69,19 +70,10 @@ function SendNyMeldingContainer(props: Props) {
         type: SendNyMeldingStatus.UNDER_ARBEID
     });
 
-    useEffect(() => {
-        const promptUser = (e: BeforeUnloadEvent) => {
-            if (sendNyMeldingStatus.type !== SendNyMeldingStatus.POSTING) {
-                return;
-            }
-
-            e.preventDefault();
-            e.returnValue = true;
-        };
-
-        window.addEventListener('beforeunload', promptUser);
-        return () => window.removeEventListener('beforeunload', promptUser);
-    }, [sendNyMeldingStatus.type]);
+    useAlertOnNavigation(
+        sendNyMeldingStatus.type === SendNyMeldingStatus.POSTING ||
+            sendNyMeldingStatus.type === SendNyMeldingStatus.ERROR
+    );
 
     const lukkSendtKvittering = () => {
         setSendNyMeldingStatus({ type: SendNyMeldingStatus.UNDER_ARBEID });
@@ -113,10 +105,20 @@ function SendNyMeldingContainer(props: Props) {
 
     if (sendNyMeldingStatus.type === SendNyMeldingStatus.ERROR) {
         return (
-            <MeldingSendtFeilet
-                fritekst={sendNyMeldingStatus.fritekst}
-                lukk={() => cancelAndKeepDraft(sendNyMeldingStatus.fritekst)}
-            />
+            <>
+                <IfFeatureToggleOn toggleID={FeatureToggles.VisPromptMeldingSending}>
+                    <Prompt
+                        when={sendNyMeldingStatus.type === SendNyMeldingStatus.ERROR}
+                        message={
+                            'Det skjedde en feil ved sending av meldingen. Hvis du trykker avbryt kan du prøve å sende den igjen.'
+                        }
+                    />
+                </IfFeatureToggleOn>
+                <MeldingSendtFeilet
+                    fritekst={sendNyMeldingStatus.fritekst}
+                    lukk={() => cancelAndKeepDraft(sendNyMeldingStatus.fritekst)}
+                />
+            </>
         );
     }
 

diff --git a/src/app/personside/dialogpanel/useAlertOnNavigation.ts b/src/app/personside/dialogpanel/useAlertOnNavigation.ts
@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import useFeatureToggle from '../../../components/featureToggle/useFeatureToggle';
+import { FeatureToggles } from '../../../components/featureToggle/toggleIDs';
+
+export const useAlertOnNavigation = (shouldShowAlert: boolean) => {
+    const { isOn } = useFeatureToggle(FeatureToggles.VisPromptMeldingSending);
+    useEffect(() => {
+        const promptUser = (e: BeforeUnloadEvent) => {
+            if (!shouldShowAlert || !isOn) {
+                return;
+            }
+
+            e.preventDefault();
+            e.returnValue = true;
+        };
+
+        window.addEventListener('beforeunload', promptUser);
+        return () => window.removeEventListener('beforeunload', promptUser);
+    }, [shouldShowAlert, isOn]);
+};