lag saksvarsel og flytt kravgrunnlagvarsel til sak

src/components/oppsummering/kravgrunnlag/OppsummeringAvKravgrunnlag.module.less

@@ -11,13 +11,43 @@
     margin-bottom: @spacing;
 }
 
-.grunnlagsbeløperContainer {
-    list-style-type: none;
-    margin-bottom: @spacing-s;
+.kravgrunnlagOppsummeringContainer_kompakt {
+    display: grid;
+    grid-template-columns: repeat(4, auto);
+    gap: @spacing-xs;
+    margin-bottom: @spacing;
+}
+
+.grunnlagsbeløpContainer {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    margin-bottom: @spacing-xxs;
+
+    .periodeMedBeløpContainer {
+        grid-column-start: 1;
+        grid-column-end: 3;
+
+        > :first-child {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+
+    > :last-child {
+        grid-column-start: 1;
+        grid-column-end: 3;
+    }
+}
+
+.grunnlagsbeløpContainer_kompakt {
+    display: grid;
+    grid-template: 1fr / 1fr 1fr;
+    gap: @spacing-xxs;
 
-    .grunnlagsbeløpContainer {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        margin-bottom: @spacing-xxs;
+    > :first-child,
+    :nth-child(2),
+    :last-child {
+        grid-column-start: 1;
+        grid-column-end: 3;
     }
 }

src/components/oppsummeringspanel/Oppsummeringspanel.tsx

@@ -75,13 +75,17 @@ const Oppsummeringspanel = (props: {
     children: React.ReactNode;
     className?: string;
     classNameChildren?: string;
+    kompakt?: boolean;
 }) => (
     <div className={classNames(styles.container, props.className)}>
-        <div className={classNames(styles.tittel, fargeklassenavn(props.farge))}>
+        <div
+            className={classNames(
+                { [styles.tittel_kompakt]: props.kompakt, [styles.tittel]: !props.kompakt },
+                fargeklassenavn(props.farge),
+            )}
+        >
             <Ikon className={styles.ikon} ikon={props.ikon} />
-            <Heading level="2" size="medium">
-                {props.tittel}
-            </Heading>
+            <Heading size={props.kompakt ? 'xsmall' : 'medium'}>{props.tittel}</Heading>
         </div>
         <div className={classNames(styles.content, props.classNameChildren)}>{props.children}</div>
     </div>

src/components/oppsummeringspanel/oppsummeringspanel.module.less

@@ -4,6 +4,7 @@
     border: 1px solid @navBorder;
     border-radius: @border-radius-base;
     background-color: @navBakgrunn;
+    height: max-content;
 }
 
 .lilla {
@@ -29,6 +30,16 @@
     }
 }
 
+.tittel_kompakt {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0.5rem;
+
+    .ikon {
+        margin-right: @spacing-xxs;
+    }
+}
+
 .content {
     padding: @spacing;
 }

src/components/personlinje/personlinje.module.less

@@ -1,7 +1,6 @@
 @import '~/src/styles/variables.less';
 
 .container {
-    width: 100%;
     display: flex;
     justify-content: space-between;
     padding: @spacing-xs @spacing;

src/pages/saksbehandling/Saksoversikt.tsx

@@ -13,6 +13,7 @@ import { Languages } from '~src/lib/i18n';
 import * as routes from '~src/lib/routes';
 import { useAppDispatch, useAppSelector } from '~src/redux/Store';
 
+import Saksvarsler from './sakintro/saksvarsler/Saksvarsler';
 import messages from './saksoversikt-nb';
 import * as styles from './saksoversikt.module.less';
 
@@ -53,12 +54,13 @@ const Saksoversikt = () => {
                             RemoteData.isFailure(sak) && <ApiErrorAlert error={sak.error} />
                         ),
                     ([søker, sak]) => (
-                        <>
+                        <div className={styles.saksoversiktContainer}>
                             <Personlinje søker={søker} sakInfo={{ sakId: sak.id, saksnummer: sak.saksnummer }} />
+                            <Saksvarsler sak={sak} søker={søker} />
                             <div className={styles.container}>
                                 <Outlet context={{ sak, søker }} />
                             </div>
-                        </>
+                        </div>
                     ),
                 ),
             )}

src/pages/saksbehandling/sakintro/Sakintro.tsx

@@ -1,18 +1,14 @@
-import * as RemoteData from '@devexperts/remote-data-ts';
 import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
-import { Alert, Button, LinkPanel, Modal, Popover } from '@navikt/ds-react';
+import { Alert, Button, LinkPanel, Popover } from '@navikt/ds-react';
 import { isEmpty } from 'fp-ts/lib/Array';
 import React, { useState } from 'react';
 import { useOutletContext } from 'react-router-dom';
 
 import { ÅpentBrev } from '~src/assets/Illustrations';
-import ApiErrorAlert from '~src/components/apiErrorAlert/ApiErrorAlert';
 import LinkAsButton from '~src/components/linkAsButton/LinkAsButton';
-import { OppsummeringPar } from '~src/components/oppsummering/oppsummeringpar/OppsummeringPar';
 import Vedtakstidslinje from '~src/components/vedtakstidslinje/VedtaksTidslinje';
 import { SaksoversiktContext } from '~src/context/SaksoversiktContext';
-import { bekreftFnrEndring } from '~src/features/saksoversikt/sak.slice';
-import { useAsyncActionCreator, useNotificationFromLocation } from '~src/lib/hooks';
+import { useNotificationFromLocation } from '~src/lib/hooks';
 import { useI18n } from '~src/lib/i18n';
 import * as Routes from '~src/lib/routes';
 import { Nullable } from '~src/lib/types';
@@ -46,52 +42,6 @@ enum NyBehandling {
     TILBAKEKREVING = 'TILBAKEKREVING',
 }
 
-const BekreftFnrEndringModal = (props: {
-    open: boolean;
-    onClose: () => void;
-    sakId: string;
-    nyttFnr: string;
-    forrigeFnr: string;
-}) => {
-    const { formatMessage } = useI18n({ messages });
-    const [bekreftStatus, bekreft] = useAsyncActionCreator(bekreftFnrEndring);
-
-    return (
-        <Modal
-            className={styles.fnrEndringsModal}
-            open={props.open}
-            onClose={props.onClose}
-            header={{ heading: 'Bekreft fødselsnummerendring' }}
-        >
-            <Modal.Body>
-                <OppsummeringPar label={'Nytt fødselsnummer'} verdi={props.nyttFnr} />
-                <OppsummeringPar label={'Forrige fødselsnummer'} verdi={props.forrigeFnr} />
-            </Modal.Body>
-            <Modal.Footer className={styles.modalFooter}>
-                <div className={styles.modalFooterButtonsContainer}>
-                    <Button variant="secondary" onClick={props.onClose}>
-                        {formatMessage('fnrEndring.bekreftSenere')}
-                    </Button>
-                    <Button
-                        variant="primary"
-                        onClick={() =>
-                            bekreft({ sakId: props.sakId, nyttFnr: props.nyttFnr, forrigeFnr: props.forrigeFnr })
-                        }
-                        loading={RemoteData.isPending(bekreftStatus)}
-                    >
-                        {formatMessage('fnrEndring.bekreft')}
-                    </Button>
-                </div>
-
-                {RemoteData.isFailure(bekreftStatus) && <ApiErrorAlert error={bekreftStatus.error} />}
-                {RemoteData.isSuccess(bekreftStatus) && (
-                    <Alert variant="success">{formatMessage('fnrEndring.fnrBekreftet')}</Alert>
-                )}
-            </Modal.Footer>
-        </Modal>
-    );
-};
-
 const Sakintro = () => {
     const props = useOutletContext<SaksoversiktContext>();
     const { formatMessage } = useI18n({ messages });
@@ -142,27 +92,8 @@ const Sakintro = () => {
         ...åpneTilbakekrevingsbehandlinger,
     ];
 
-    const [bekrefterFnrEndring, setBekrefterFnrEndring] = useState(false);
-
     return (
         <div className={styles.sakintroContainer}>
-            {props.sak.fnr !== props.søker.fnr && (
-                <Alert variant={'warning'} className={styles.fnrEndringsAlert}>
-                    {formatMessage('fnrEndring.registrertAnnetFnr')}
-                    <Button variant="tertiary" className={styles.button} onClick={() => setBekrefterFnrEndring(true)}>
-                        {formatMessage('fnrEndring.klikkForBekrefte')}
-                    </Button>
-                </Alert>
-            )}
-
-            <BekreftFnrEndringModal
-                open={bekrefterFnrEndring}
-                onClose={() => setBekrefterFnrEndring(false)}
-                sakId={props.sak.id}
-                nyttFnr={props.søker.fnr}
-                forrigeFnr={props.sak.fnr}
-            />
-
             <SuksessStatuser locationState={locationState} />
             <div className={styles.pageHeader}>
                 <div className={styles.headerKnapper}>

src/pages/saksbehandling/sakintro/sakintro-nb.ts

@@ -114,11 +114,5 @@ export default {
     'datacell.resultat.AVVIST_KLAGE': 'Avvist',
     'datacell.resultat.OVERSENDT': 'Oversendt',
 
-    'fnrEndring.registrertAnnetFnr': 'Det er registrert en fødselsnummersendring.',
-    'fnrEndring.klikkForBekrefte': 'Klikk meg for å bekrefte endringen',
-    'fnrEndring.bekreftSenere': 'Bekreft senere',
-    'fnrEndring.bekreft': 'Bekreft',
-    'fnrEndring.fnrBekreftet': 'Fødselsnummeret er bekreftet',
-
     ...lukketSøknadBegrunnelser,
 };

src/pages/saksbehandling/sakintro/sakintro.module.less

@@ -32,38 +32,6 @@
     }
 }
 
-.fnrEndringsModal {
-    width: 500px;
-}
-
-.fnrEndringsAlert {
-    display: flex;
-
-    .button {
-        padding: @spacing-xxs;
-    }
-
-    svg {
-        display: flex;
-        align-self: center !important;
-    }
-}
-
-.modalFooterButtonsContainer {
-    display: flex;
-    gap: @spacing;
-    justify-content: flex-end;
-
-    button {
-        margin: 0 !important;
-    }
-}
-
-.modalFooter {
-    display: flex;
-    flex-direction: column;
-}
-
 .contentContainer {
     display: flex;
     flex-direction: column;

src/pages/saksbehandling/sakintro/saksvarsler/Saksvarsler.module.less

@@ -0,0 +1,7 @@
+@import '~/src/styles/variables.less';
+
+.alert {
+    > :last-child {
+        max-width: 100%;
+    }
+}

src/pages/saksbehandling/sakintro/saksvarsler/Saksvarsler.tsx

@@ -0,0 +1,72 @@
+import { Alert, BodyShort } from '@navikt/ds-react';
+import React from 'react';
+
+import { Person } from '~src/types/Person';
+import { Sak, SakvarselType } from '~src/types/Sak';
+import { getSakvarsler, SakvarseltypeMedContext } from '~src/utils/SakUtils';
+
+import FnrEndringsvarsel from './fnrEndringsvarsel/FnrEndringsvarsel';
+import NyttKravgrunnlagsvarsel from './nyttKravgrunnlagsvarsel/NyttKravgrunnlagsvarsel';
+import styles from './Saksvarsler.module.less';
+
+const Saksvarsler = (props: { sak: Sak; søker: Person }) => {
+    const varsler = getSakvarsler({ sak: props.sak, søker: props.søker });
+
+    if (varsler.length === 0) {
+        return null;
+    }
+
+    return (
+        <Alert variant={'warning'} className={styles.alert}>
+            <ul>
+                {varsler.map((v, i) => (
+                    <li key={i}>{saksvarseltypeToComponent({ sak: props.sak, søker: props.søker, varsel: v })}</li>
+                ))}
+            </ul>
+        </Alert>
+    );
+};
+
+const saksvarseltypeToComponent = (arg: { sak: Sak; søker: Person; varsel: SakvarseltypeMedContext }) => {
+    switch (arg.varsel.type) {
+        case SakvarselType.FNR_ENDRING:
+            return <FnrEndringsvarsel sak={arg.sak} søker={arg.søker} />;
+        case SakvarselType.NYTT_KRAVGRUNNLAG_MED_ÅPEN_TILBAKEKREVING: {
+            if (!arg.varsel.context?.behandlingId) {
+                return (
+                    <BodyShort>
+                        Har identifisert et nytt kravgrunnlag på sak, men mangler behandlingscontext - Behov for å sende
+                        en melding til utviklerne fordi vi er så primitive
+                    </BodyShort>
+                );
+            }
+            if (!arg.sak.uteståendeKravgrunnlag) {
+                return (
+                    <BodyShort>
+                        Har identifisert et nytt kravgrunnlag på sak, men mangler det utestående kravgrunnlaget på sak -
+                        Behov for å sende en melding til utviklerne fordi vi er så primitive
+                    </BodyShort>
+                );
+            }
+            const behandling = arg.sak.tilbakekrevinger.find((t) => t.id === arg.varsel.context!.behandlingId);
+
+            if (!behandling) {
+                return (
+                    <BodyShort>
+                        Har identifisert et nytt kravgrunnlag på sak, men fant ikke behandlingen på sak - Behov for å
+                        sende en melding til utviklerne fordi vi er så primitive
+                    </BodyShort>
+                );
+            }
+            return (
+                <NyttKravgrunnlagsvarsel
+                    saksversjon={arg.sak.versjon}
+                    uteståendeKravgrunnlag={arg.sak.uteståendeKravgrunnlag}
+                    behandling={behandling}
+                />
+            );
+        }
+    }
+};
+
+export default Saksvarsler;

src/pages/saksbehandling/sakintro/saksvarsler/fnrEndringsvarsel/FnrEndringsvarsel.module.less

@@ -0,0 +1,24 @@
+@import '~/src/styles/variables.less';
+
+.fnrEndringsModal {
+    width: 500px;
+}
+
+.merInfoButton {
+    padding: 0.2rem 0.5rem;
+}
+
+.modalFooter {
+    display: flex;
+    flex-direction: column;
+}
+
+.modalFooterButtonsContainer {
+    display: flex;
+    gap: @spacing;
+    justify-content: flex-end;
+
+    button {
+        margin: 0 !important;
+    }
+}