diff --git a/src/app/personside/dialogpanel/fortsettDialog/FortsettDialogContainer.tsx b/src/app/personside/dialogpanel/fortsettDialog/FortsettDialogContainer.tsx index b742db1932..a1eaf2d491 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 ; } @@ -227,6 +232,14 @@ function FortsettDialogContainer(props: Props) { {traadTittel(props.traad.traadType)} + + + { - 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 ( - cancelAndKeepDraft(sendNyMeldingStatus.fritekst)} - /> + <> + + + + cancelAndKeepDraft(sendNyMeldingStatus.fritekst)} + /> + ); } diff --git a/src/app/personside/dialogpanel/useAlertOnNavigation.ts b/src/app/personside/dialogpanel/useAlertOnNavigation.ts new file mode 100644 index 0000000000..6c8cde02f6 --- /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]); +};