Merge pull request #2103 from navikt/dev

[PROD][KAIZEN-0] Prompt på fortsett dialog container, fnr i route params
navikt · Jan 16, 2024 · 5723817 · 5723817
2 parents f217ba4 + 10b9007
commit 5723817
Show file tree

Hide file tree

Showing 6 changed files with 248 additions and 181 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/Routing.tsx b/src/app/Routing.tsx
@@ -23,7 +23,10 @@ function Routing() {
                     path={`${paths.saksdokumentEgetVindu}/:fodselsnummer/`}
                     render={(routeProps) => <SaksDokumentEgetVindu fnr={routeProps.match.params.fodselsnummer} />}
                 />
-                <SentryRoute path={`${paths.personUri}/:fodselsnummer`} component={Personoversikt} />
+                <SentryRoute
+                    path={`${paths.personUri}/:fodselsnummer`}
+                    render={(routeProps) => <Personoversikt fnr={routeProps.match.params.fodselsnummer} />}
+                />
                 <SentryRoute component={Startbilde} />
             </Switch>
         </Suspense>

diff --git a/src/app/personside/Personoversikt.tsx b/src/app/personside/Personoversikt.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import LyttPåNyttFnrIReduxOgHentAllPersoninfo from '../PersonOppslagHandler/LyttPåNyttFnrIReduxOgHentAllPersoninfo';
 import MainLayout from './MainLayout';
-import { useFodselsnummer, useOnMount } from '../../utils/customHooks';
+import { useOnMount } from '../../utils/customHooks';
 import { erGyldigishFnr } from '../../utils/fnr-utils';
 import { useHistory } from 'react-router';
 import { paths } from '../routes/routing';
@@ -11,14 +11,13 @@ import tilgangskontroll from '../../rest/resources/tilgangskontrollResource';
 import { DialogpanelStateProvider } from '../../context/dialogpanel-state';
 import NyIdentModal from './NyIdentModal';
 
-function Personoversikt() {
-    const fnr = useFodselsnummer();
+function Personoversikt({ fnr }: { fnr: string }) {
     const history = useHistory();
 
     useOnMount(() => {
         if (!erGyldigishFnr(fnr)) {
             loggInfo('Ugyldig fnr, redirecter til startside');
-            history.push(`${paths.basePath}?sokFnr=${fnr}`);
+            history.push(`${paths.basePath}`);
         }
     });
 

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]);
+};