Merge pull request #2098 from navikt/dev

[PROD][KAIZEN-0] Vis prompt når man prøver å navigere bort mens meldingen b…
navikt · Jan 12, 2024 · 41ef292 · 41ef292
2 parents 6043de0 + 3679753
commit 41ef292
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 11 deletions.
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, useMemo, useState } from 'react';
+import { FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { MeldingValidator } from './validatorer';
 import {
     Meldingstype,
@@ -21,6 +21,8 @@ import journalsakResource from '../../../../rest/resources/journalsakResource';
 import SendNyMelding, { OppgavelisteValg, SendNyMeldingState } from './SendNyMelding';
 import useFeatureToggle from '../../../../components/featureToggle/useFeatureToggle';
 import { FeatureToggles } from '../../../../components/featureToggle/toggleIDs';
+import { Prompt } from 'react-router';
+import IfFeatureToggleOn from '../../../../components/featureToggle/IfFeatureToggleOn';
 
 interface Props {
     defaultOppgaveDestinasjon: OppgavelisteValg;
@@ -66,6 +68,21 @@ function SendNyMeldingContainer(props: Props) {
     const [sendNyMeldingStatus, setSendNyMeldingStatus] = useState<SendNyMeldingPanelState>({
         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]);
+
     const lukkSendtKvittering = () => {
         setSendNyMeldingStatus({ type: SendNyMeldingStatus.UNDER_ARBEID });
         setState(initialState);
@@ -204,14 +221,24 @@ function SendNyMeldingContainer(props: Props) {
     };
 
     return (
-        <SendNyMelding
-            updateState={updateState}
-            state={state}
-            handleSubmit={handleSubmit}
-            handleAvbryt={handleAvbryt}
-            formErEndret={state !== initialState}
-            sendNyMeldingPanelState={sendNyMeldingStatus}
-        />
+        <>
+            <IfFeatureToggleOn toggleID={FeatureToggles.VisPromptMeldingSending}>
+                <Prompt
+                    when={sendNyMeldingStatus.type === SendNyMeldingStatus.POSTING}
+                    message={
+                        'Meldingen sendes. Hvis du navigerer bort er det ikke sikkert den blir sendt. Er du sikker på at du vil fortsette?'
+                    }
+                />
+            </IfFeatureToggleOn>
+            <SendNyMelding
+                updateState={updateState}
+                state={state}
+                handleSubmit={handleSubmit}
+                handleAvbryt={handleAvbryt}
+                formErEndret={state !== initialState}
+                sendNyMeldingPanelState={sendNyMeldingStatus}
+            />
+        </>
     );
 }
 

diff --git a/src/components/featureToggle/toggleIDs.ts b/src/components/featureToggle/toggleIDs.ts
@@ -1,6 +1,6 @@
 export enum FeatureToggles {
     BrukSoknadsstatus = 'modiapersonoversikt.soknadsstatus-api',
     BrukWebworkerPaaInnLogging = 'modiapersonoversikt.web-worker-paa-innlogging',
-    DebugMeldingsFunksjonalitet = 'modiapersonoversikt.ny-send-melding-container',
-    IkkeFnrIPath = 'modiapersonoversikt.ikke-fnr-i-path'
+    IkkeFnrIPath = 'modiapersonoversikt.ikke-fnr-i-path',
+    VisPromptMeldingSending = 'modiapersonoversikt.vis-promt-naar-melding-sendes'
 }