legg til alert for feilede varsler

server/mock/varslingStatusMock.js

@@ -0,0 +1,11 @@
+import casual from 'casual';
+
+export const mock = (app) => {
+    app.use('/min-side-arbeidsgiver/api/varslingStatus/v1', (req, res) => {
+        res.send({
+            status: casual.boolean ? 'MANGLER_KOFUVI' : 'OK',
+            varselTimestamp: '2021-01-01T00:00:00',
+            kvittertEventTimestamp: '2021-01-04T00:00:00Z',
+        });
+    });
+};

server/server.js

@@ -165,6 +165,7 @@ const main = async () => {
         (await import('./mock/innloggetMock.js')).mock(app);
         (await import('./mock/pamMock.js')).mock(app);
         (await import('./mock/userInfoMock.js')).mock(app);
+        (await import('./mock/varslingStatusMock.js')).mock(app);
         (await import('./mock/altinnMeldingsboksMock.js')).mock(app);
         (await import('./mock/altinnBeOmTilgangMock.js')).mock(app);
         (await import('./mock/enhetsRegisteretMock.js')).mock(app);

src/App/Alerts/Alerts.tsx

@@ -1,5 +1,6 @@
 import React, { FunctionComponent, useContext, useEffect, useState } from 'react';
 import { Alert } from '@navikt/ds-react';
+import { useVarslingStatus } from '../useVarslingStatus';
 
 type AlertProps = {
     content: React.ReactNode;
@@ -69,7 +70,7 @@ export const AlertsProvider: FunctionComponent = (props) => {
 
 export const Alerts = () => {
     const { alerts } = useContext(AlertContext);
-    let alertList = Array.from(alerts);
+    const alertList = Array.from(alerts);
     if (alertList.length === 0) {
         return null;
     }

src/App/Hovedside/Hovedside.tsx

@@ -1,72 +1,95 @@
-import React, {FunctionComponent, useContext, useEffect} from 'react';
-import {OrganisasjonerOgTilgangerContext} from '../OrganisasjonerOgTilgangerProvider';
+import React, { FunctionComponent, useContext, useEffect } from 'react';
+import { OrganisasjonerOgTilgangerContext } from '../OrganisasjonerOgTilgangerProvider';
 import Brodsmulesti from '../Brodsmulesti/Brodsmulesti';
 import AdvarselBannerTestversjon from './AdvarselBannerTestVersjon/AdvarselBannerTestversjon';
-import {Alerts} from '../Alerts/Alerts';
+import { Alerts } from '../Alerts/Alerts';
 import TjenesteBoksContainer from './TjenesteBoksContainer/TjenesteBoksContainer';
 import NyttigForDegContainer from './NyttigForDegContainer/NyttigForDegContainer';
-import {SkjemaveilederContainer} from './SkjemaveilederContainer/SkjemaveilederContainer';
+import { SkjemaveilederContainer } from './SkjemaveilederContainer/SkjemaveilederContainer';
 import BeOmTilgang from './BeOmTilgang/BeOmTilgang';
 import BrevFraAltinnContainer from './AltinnMeldingsboks/BrevFraAltinnContainer';
 import './Hovedside.css';
-import {GiOssTilbakemelding} from './GiOssTilbakemeldingComponent/GiOssTilbakemelding';
-import SisteSaker from "./Sak/SisteSaker/SisteSaker";
-import {UndersokelseInntektsmelding} from './UndersokelseInntektsmelding/UndersokelseInntektsmelding';
-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 { GiOssTilbakemelding } from './GiOssTilbakemeldingComponent/GiOssTilbakemelding';
+import SisteSaker from './Sak/SisteSaker/SisteSaker';
+import { UndersokelseInntektsmelding } from './UndersokelseInntektsmelding/UndersokelseInntektsmelding';
+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';
 import { ForebyggeFraværInfoBoks } from './ForebyggeFraværInfoBoks';
-
+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()
+    const { organisasjoner, visFeilmelding, tilgangTilSyfo, visSyfoFeilmelding, harTilganger } =
+        useContext(OrganisasjonerOgTilgangerContext);
+    const navigate = useNavigate();
     useEffect(() => {
-
-        const skalViseManglerTilgangBoks =
-            !harTilganger &&
-            !visFeilmelding &&
-            !visSyfoFeilmelding;
+        const skalViseManglerTilgangBoks = !harTilganger && !visFeilmelding && !visSyfoFeilmelding;
 
         if (skalViseManglerTilgangBoks) {
-            navigate({pathname: 'mangler-tilgang'}, {replace: true})
+            navigate({ pathname: 'mangler-tilgang' }, { replace: true });
         }
     }, [organisasjoner, tilgangTilSyfo, visFeilmelding, visSyfoFeilmelding, harTilganger]);
 
-    useOversiktsfilterClearing()
+    useOversiktsfilterClearing();
 
     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     return (
         <div>
-            <Brodsmulesti brodsmuler={[]}/>
-            <div className='hovedside-container'>
-                <AdvarselBannerTestversjon/>
-                <UndersokelseInntektsmelding/>
-                <Alerts/>
-                <DigiSyfoBedriftsmenyInfo/>
-                <ForebyggeFraværInfoBoks/>
-                <AktueltRubrikk/>
-                <SisteSaker/>
-                <TjenesteBoksContainer/>
-                <GiOssTilbakemelding/>
-                <SkjemaveilederContainer/>
-                <BrevFraAltinnContainer/>
-                <NyttigForDegContainer/>
-                <BeOmTilgang/>
-                <div> {/*Legger inn en ekstra div for at linken ikke skal strekkes ut av flex*/}
-                    <LenkeMedLogging href={infoOmTilgangsstyringURL}
-                                    loggLenketekst='Lær om tilganger og varsler i Altinn'>
+            <Brodsmulesti brodsmuler={[]} />
+            <div className="hovedside-container">
+                <AdvarselBannerTestversjon />
+                <UndersokelseInntektsmelding />
+                <Alerts />
+                <ManglerKofuviAlert />
+                <DigiSyfoBedriftsmenyInfo />
+                <ForebyggeFraværInfoBoks />
+                <AktueltRubrikk />
+                <SisteSaker />
+                <TjenesteBoksContainer />
+                <GiOssTilbakemelding />
+                <SkjemaveilederContainer />
+                <BrevFraAltinnContainer />
+                <NyttigForDegContainer />
+                <BeOmTilgang />
+                <div>
+                    {' '}
+                    {/*Legger inn en ekstra div for at linken ikke skal strekkes ut av flex*/}
+                    <LenkeMedLogging
+                        href={infoOmTilgangsstyringURL}
+                        loggLenketekst="Lær om tilganger og varsler i Altinn"
+                    >
                         Lær om tilganger og varsler i Altinn
                     </LenkeMedLogging>
                 </div>
             </div>
-            <KontaktFelt/>
+            <KontaktFelt />
+        </div>
+    );
+};
+
+const ManglerKofuviAlert = () => {
+    const varslingStatus = useVarslingStatus();
+
+    if (varslingStatus.status !== 'MANGLER_KOFUVI') {
+        return null;
+    }
+
+    return (
+        <div role="status">
+            <Alert variant="error" role="status">
+                <Heading spacing size="small" level="2">
+                    Virksomheten må legge inn varslingsadresse
+                </Heading>
+                Virksomheten mangler varslingsadresse (en e-post eller et mobilnummer). Legg inn det
+                slikt at NAV kan kommunisere digitalt med dere. Varslingsadressen brukes slik det
+                offentlige kan kommunisere digitalt med virksomheten. Les om varslingsadresse i
+                Altinn
+            </Alert>
         </div>
     );
 };

src/App/useVarslingStatus.ts

@@ -0,0 +1,67 @@
+import { z } from 'zod';
+import useSWR from 'swr';
+import * as Sentry from '@sentry/browser';
+import { Organisasjon } from '../altinn/organisasjon';
+import { altinntjeneste, AltinntjenesteId } from '../altinn/tjenester';
+import * as Record from '../utils/Record';
+import { Set } from 'immutable';
+import { useContext, useState } from 'react';
+import { OrganisasjonsDetaljerContext } from './OrganisasjonDetaljerProvider';
+
+const VarslingStatusRespons = z.object({
+    status: z.enum(['OK', 'MANGLER_KOFUVI', 'ANNEN_FEIL']),
+    varselTimestamp: z.string(),
+    kvittertEventTimestamp: z.string(),
+});
+type VarslingStatus = z.infer<typeof VarslingStatusRespons>;
+
+const fallbackData: VarslingStatus = {
+    status: 'OK',
+    varselTimestamp: '',
+    kvittertEventTimestamp: '',
+};
+export const useVarslingStatus = (): VarslingStatus => {
+    const { valgtOrganisasjon } = useContext(OrganisasjonsDetaljerContext);
+    const [retries, setRetries] = useState(0);
+    const { data } = useSWR(
+        valgtOrganisasjon !== undefined
+            ? {
+                  url: '/min-side-arbeidsgiver/api/varslingStatus/v1',
+                  virksomhetsnummer: valgtOrganisasjon.organisasjon.OrganizationNumber,
+              }
+            : null,
+        fetcher,
+        {
+            onSuccess: () => setRetries(0),
+            onError: (error) => {
+                console.log('error', error);
+                if (retries === 5) {
+                    Sentry.captureMessage(
+                        `hent varslingStatus fra min-side-arbeidsgiver feilet med ${
+                            error.status !== undefined
+                                ? `${error.status} ${error.statusText}`
+                                : error
+                        }`
+                    );
+                }
+                setRetries((x) => x + 1);
+            },
+            errorRetryInterval: 300,
+            fallbackData,
+        }
+    );
+    console.log('useVarslingStatus', data);
+
+    return data;
+};
+
+const fetcher = async ({ url, virksomhetsnummer }: { url: string; virksomhetsnummer: string }) => {
+    const respons = await fetch(url, {
+        method: 'POST',
+        body: JSON.stringify({ virksomhetsnummer }),
+    });
+
+    if (respons.status !== 200) throw respons;
+
+    return VarslingStatusRespons.parse(await respons.json());
+};