From 6a3c1099d1e96166d79b1abcbfe4e2336fba9b3d Mon Sep 17 00:00:00 2001
From: Jesper Paulsen <jesper.gayosso.paulsen@nav.no>
Date: Mon, 15 Jan 2024 13:30:03 +0100
Subject: [PATCH] =?UTF-8?q?[KAIZEN-0]=20Legg=20til=20prompt=20p=C3=A5=20fo?=
 =?UTF-8?q?rtsett=20dialog=20controller?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FortsettDialogContainer.tsx               | 13 +++++++
 .../sendMelding/SendNyMeldingContainer.tsx    | 38 ++++++++++---------
 .../dialogpanel/useAlertOnNavigation.ts       | 20 ++++++++++
 3 files changed, 53 insertions(+), 18 deletions(-)
 create mode 100644 src/app/personside/dialogpanel/useAlertOnNavigation.ts

diff --git a/src/app/personside/dialogpanel/fortsettDialog/FortsettDialogContainer.tsx b/src/app/personside/dialogpanel/fortsettDialog/FortsettDialogContainer.tsx
index b742db193..a1eaf2d49 100644
--- 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
index 5bd9eb3d2..4bc4af007 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, 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
new file mode 100644
index 000000000..38def9ee6
--- /dev/null
+++ 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]);
+};