Fjern mangler tilgang page

src/App/App.tsx

@@ -7,7 +7,7 @@ import { AlertsProvider } from './Alerts/Alerts';
 import { OrganisasjonerOgTilgangerProvider } from './OrganisasjonerOgTilgangerProvider';
 import { OrganisasjonsDetaljerProvider } from './OrganisasjonDetaljerProvider';
 import InformasjonOmBedrift from './InformasjonOmBedrift/InformasjonOmBedrift';
-import { ManglerTilgangContainer } from './Hovedside/ManglerTilgangContainer/ManglerTilgangContainer';
+import { ManglerTilganger } from './ManglerTilganger/ManglerTilganger';
 import { loggSidevisning } from '../utils/funksjonerForAmplitudeLogging';
 import './App.css';
 import { NotifikasjonWidgetProvider } from '@navikt/arbeidsgiver-notifikasjon-widget';
@@ -92,17 +92,6 @@ const App: FunctionComponent = () => {
                                                         </SideTittelWrapper>
                                                     }
                                                 />
-                                                <Route
-                                                    path="/mangler-tilgang"
-                                                    element={
-                                                        <SideTittelWrapper
-                                                            tittel={'Min side – arbeidsgiver'}
-                                                            setTittel={setSidetittel}
-                                                        >
-                                                            <ManglerTilgangContainer />
-                                                        </SideTittelWrapper>
-                                                    }
-                                                />
                                                 <Route
                                                     path="/saksoversikt"
                                                     element={

src/App/HovedBanner/HovedBanner.tsx

@@ -1,28 +1,41 @@
-import React, {FunctionComponent, useContext, useEffect} from 'react';
+import React, { FunctionComponent, useContext, useEffect } from 'react';
 import Bedriftsmeny from '@navikt/bedriftsmeny';
 import '@navikt/bedriftsmeny/lib/bedriftsmeny.css';
-import {OrganisasjonsDetaljerContext} from '../OrganisasjonDetaljerProvider';
-import {OrganisasjonerOgTilgangerContext} from '../OrganisasjonerOgTilgangerProvider';
+import { OrganisasjonsDetaljerContext } from '../OrganisasjonDetaljerProvider';
+import { OrganisasjonerOgTilgangerContext } from '../OrganisasjonerOgTilgangerProvider';
 import * as Record from '../../utils/Record';
-import {NotifikasjonWidget} from "@navikt/arbeidsgiver-notifikasjon-widget";
-import amplitude from "../../utils/amplitude";
-import {useLocation} from "react-router-dom";
+import { NotifikasjonWidget } from '@navikt/arbeidsgiver-notifikasjon-widget';
+import amplitude from '../../utils/amplitude';
+import { useLocation } from 'react-router-dom';
 
 interface OwnProps {
-    sidetittel: string;
+    sidetittel?: string;
 }
 
-const Banner: FunctionComponent<OwnProps> = ({sidetittel}) => {
-    const {organisasjoner} = useContext(OrganisasjonerOgTilgangerContext);
-    const {endreOrganisasjon} = useContext(OrganisasjonsDetaljerContext);
-    const {pathname} = useLocation()
+export const SimpleBanner: FunctionComponent<OwnProps> = ({
+    sidetittel = 'Min side – arbeidsgiver',
+}) => {
+    return (
+        <Bedriftsmeny
+            sidetittel={sidetittel}
+            undertittel={'INNLOGGEDE TJENESTER for arbeidsgiver'}
+        />
+    );
+};
+
+const Banner: FunctionComponent<OwnProps> = ({ sidetittel }) => {
+    const { organisasjoner } = useContext(OrganisasjonerOgTilgangerContext);
+    const { endreOrganisasjon } = useContext(OrganisasjonsDetaljerContext);
+    const { pathname } = useLocation();
     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-    const orgs = organisasjoner ? Record.mapToArray(organisasjoner, (orgnr, {organisasjon}) => organisasjon) : [];
+    const orgs = organisasjoner
+        ? Record.mapToArray(organisasjoner, (orgnr, { organisasjon }) => organisasjon)
+        : [];
 
     return (
         <Bedriftsmeny
             sidetittel={sidetittel}
-            undertittel={"INNLOGGEDE TJENESTER for arbeidsgiver"}
+            undertittel={'INNLOGGEDE TJENESTER for arbeidsgiver'}
             organisasjoner={pathname === '/saksoversikt' ? [] : orgs}
             onOrganisasjonChange={endreOrganisasjon}
             amplitudeClient={amplitude}

src/App/Hovedside/Hovedside.tsx

@@ -1,5 +1,4 @@
-import React, { FunctionComponent, useContext, useEffect } from 'react';
-import { OrganisasjonerOgTilgangerContext } from '../OrganisasjonerOgTilgangerProvider';
+import React, { FunctionComponent } from 'react';
 import Brodsmulesti from '../Brodsmulesti/Brodsmulesti';
 import AdvarselBannerTestversjon from './AdvarselBannerTestVersjon/AdvarselBannerTestversjon';
 import { Alerts } from '../Alerts/Alerts';
@@ -15,7 +14,6 @@ import { UndersokelseInntektsmelding } from './UndersokelseInntektsmelding/Under
 import { KontaktFelt } from './KontaktFelt/KontaktFelt';
 import { useOversiktsfilterClearing } from './Sak/Saksoversikt/useOversiktSessionStorage';
 import { DigiSyfoBedriftsmenyInfo } from './DigiSyfoBedriftsmenyInfo';
-import { useNavigate } from 'react-router-dom';
 import { AktueltRubrikk } from './Aktuelt/AktueltRubrikk';
 import { LenkeMedLogging } from '../../GeneriskeElementer/LenkeMedLogging';
 import { infoOmTilgangsstyringURL } from '../../lenker';
@@ -24,17 +22,6 @@ import { Alert, Heading } from '@navikt/ds-react';
 import { useVarslingStatus } from '../useVarslingStatus';
 
 const Hovedside: FunctionComponent = () => {
-    const { organisasjoner, visFeilmelding, tilgangTilSyfo, visSyfoFeilmelding, harTilganger } =
-        useContext(OrganisasjonerOgTilgangerContext);
-    const navigate = useNavigate();
-    useEffect(() => {
-        const skalViseManglerTilgangBoks = !harTilganger && !visFeilmelding && !visSyfoFeilmelding;
-
-        if (skalViseManglerTilgangBoks) {
-            navigate({ pathname: 'mangler-tilgang' }, { replace: true });
-        }
-    }, [organisasjoner, tilgangTilSyfo, visFeilmelding, visSyfoFeilmelding, harTilganger]);
-
     useOversiktsfilterClearing();
 
     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions

src/App/LoginBoundary.tsx

@@ -4,6 +4,7 @@ import { sjekkInnlogget } from '../api/dnaApi';
 import Bedriftsmeny from '@navikt/bedriftsmeny';
 import { setBreadcrumbs } from '@navikt/nav-dekoratoren-moduler';
 import { Alert } from '@navikt/ds-react';
+import { SimpleBanner } from './HovedBanner/HovedBanner';
 
 export const LoginBoundary: FunctionComponent = (props) => {
     const [innlogget, setInnlogget] = useState(Innlogget.LASTER);
@@ -30,10 +31,7 @@ export const LoginBoundary: FunctionComponent = (props) => {
         ]).then(() => {});
         return (
             <>
-                <Bedriftsmeny
-                    sidetittel="Min side – arbeidsgiver"
-                    undertittel={'INNLOGGEDE TJENESTER for arbeidsgiver'}
-                />
+                <SimpleBanner />
                 <Spinner />
             </>
         );
@@ -46,10 +44,7 @@ export const LoginBoundary: FunctionComponent = (props) => {
         ]).then(() => {});
         return (
             <>
-                <Bedriftsmeny
-                    sidetittel="Min side – arbeidsgiver"
-                    undertittel={'INNLOGGEDE TJENESTER for arbeidsgiver'}
-                />
+                <SimpleBanner />
                 <Alert variant="error">Uventet feil. Prøv å last siden på nytt.</Alert>
             </>
         );

src/App/ManglerTilganger/ManglerTilganger.css

@@ -0,0 +1,24 @@
+.ingen-tilgang-bakgrunn {
+    width: 100%;
+    max-width: 60rem;
+    margin: 40px auto;
+
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+@media (max-width: 1000px) {
+    .ingen-tilgang-bakgrunn {
+        padding: 0 16px;
+    }
+}
+
+.ingen-tilgang-container {
+    display: grid;
+
+    /* 200px er litt tilfeldig valgt. */
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+
+    gap: 16px;
+}

src/App/ManglerTilganger/ManglerTilganger.tsx

@@ -0,0 +1,44 @@
+import React, { FunctionComponent } from 'react';
+import { infoOmTilgangsstyringURL, lenkeTilDittNavPerson } from '../../lenker';
+import Brodsmulesti from '../Brodsmulesti/Brodsmulesti';
+import './ManglerTilganger.css';
+import { Heading, LinkPanel } from '@navikt/ds-react';
+import { LenkepanelMedLogging } from '../../GeneriskeElementer/LenkepanelMedLogging';
+import { SimpleBanner } from '../HovedBanner/HovedBanner';
+import { Alerts } from '../Alerts/Alerts';
+
+export const ManglerTilganger: FunctionComponent = () => {
+    return (
+        <>
+            <SimpleBanner />
+            <Brodsmulesti brodsmuler={[]} />
+            <div className="ingen-tilgang-bakgrunn">
+                <Alerts />
+
+                <Heading size="large" level="1">
+                    Du mangler tilganger som arbeidsgiver
+                </Heading>
+
+                <span className="ingen-tilgang-container">
+                    <LenkepanelMedLogging
+                        loggLenketekst="Se tjenester som privatperson"
+                        href={lenkeTilDittNavPerson}
+                    >
+                        <LinkPanel.Title>Se tjenester som privatperson</LinkPanel.Title>
+                        <LinkPanel.Description>Gå til din innloggede side</LinkPanel.Description>
+                    </LenkepanelMedLogging>
+
+                    <LenkepanelMedLogging
+                        loggLenketekst="Hvordan får jeg tilgang?"
+                        href={infoOmTilgangsstyringURL}
+                    >
+                        <LinkPanel.Title>Hvordan får jeg tilgang?</LinkPanel.Title>
+                        <LinkPanel.Description>
+                            Lær om roller og tilganger i Altinn
+                        </LinkPanel.Description>
+                    </LenkepanelMedLogging>
+                </span>
+            </div>
+        </>
+    );
+};