From d4d48ae4d5ee3181e1bbc783a527b65c76fb703f Mon Sep 17 00:00:00 2001
From: Jesper Paulsen <jesper.gayosso.paulsen@nav.no>
Date: Wed, 10 Jan 2024 14:54:03 +0100
Subject: [PATCH 1/2] =?UTF-8?q?[KAIZEN-0]=20Vis=20prompt=20n=C3=A5r=20man?=
 =?UTF-8?q?=20pr=C3=B8ver=20=C3=A5=20navigere=20bort=20mens=20meldingen=20?=
 =?UTF-8?q?blir=20sendt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sendMelding/SendNyMeldingContainer.tsx    | 28 +++++++++++++------
 src/components/featureToggle/toggleIDs.ts     |  4 +--
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/app/personside/dialogpanel/sendMelding/SendNyMeldingContainer.tsx b/src/app/personside/dialogpanel/sendMelding/SendNyMeldingContainer.tsx
index f72a55e9c..3e468db06 100644
--- a/src/app/personside/dialogpanel/sendMelding/SendNyMeldingContainer.tsx
+++ b/src/app/personside/dialogpanel/sendMelding/SendNyMeldingContainer.tsx
@@ -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;
@@ -204,14 +206,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
index 49aa2b0b6..104fe9b26 100644
--- 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'
 }

From 36797532956851a9385a8cd7c3b1369671be62c2 Mon Sep 17 00:00:00 2001
From: Jesper Paulsen <jesper.gayosso.paulsen@nav.no>
Date: Thu, 11 Jan 2024 12:59:20 +0100
Subject: [PATCH 2/2] =?UTF-8?q?[KAIZEN-0]=20Legge=20til=20prompt=20om=20ma?=
 =?UTF-8?q?n=20pr=C3=B8ver=20=C3=A5=20lukke=20siden=20mens=20en=20melding?=
 =?UTF-8?q?=20sendes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sendMelding/SendNyMeldingContainer.tsx      | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/app/personside/dialogpanel/sendMelding/SendNyMeldingContainer.tsx b/src/app/personside/dialogpanel/sendMelding/SendNyMeldingContainer.tsx
index 3e468db06..5bd9eb3d2 100644
--- 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,
@@ -68,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);