diff --git a/src/app/personside/infotabs/varsel/VarslerNy.tsx b/src/app/personside/infotabs/varsel/VarslerNy.tsx
new file mode 100644
index 000000000..a832e0efe
--- /dev/null
+++ b/src/app/personside/infotabs/varsel/VarslerNy.tsx
@@ -0,0 +1,216 @@
+import { VStack, Alert } from '@navikt/ds-react';
+import { AlertStripeFeil } from 'nav-frontend-alertstriper';
+import varselResource from 'src/rest/resources/varselResource';
+import { Pagination, Table } from '@navikt/ds-react';
+import {
+ DittNavEvent,
+ FeiletVarsling,
+ isDittNavEvent,
+ UnifiedVarsel as UnifiedVarselModell,
+ UnifiedVarsel,
+ Varsel as VarselModell,
+ VarslerResult
+} from 'src/models/varsel';
+import * as React from 'react';
+import { datoSynkende } from 'src/utils/date-utils';
+import { ReactNode, useState } from 'react';
+import { ENDASH, formaterDato } from 'src/utils/string-utils';
+import { emptyReplacement, getVarselTekst } from 'src/app/personside/infotabs/varsel/varsel-utils';
+import WarningIcon from '../../../../svg/WarningIcon';
+import CompletedIcon from '../../../../svg/CompletedIcon';
+import VarselMeldinger from './varselDetaljer/VarselMeldinger';
+
+function VarslerNy() {
+ const [page, setPage] = useState(1);
+ const rowsPerPage = 22;
+
+ const varslerResponse = varselResource.useFetch();
+ const varslerResult: VarslerResult = varslerResponse.data || { feil: [], varsler: [] };
+ const datoExtractor = (varsel: UnifiedVarsel) => {
+ if (isDittNavEvent(varsel)) {
+ return varsel.forstBehandlet;
+ }
+ return varsel.mottattTidspunkt;
+ };
+
+ const varselElementer = varslerResult.varsler.sort(datoSynkende(datoExtractor));
+ const varselPagniated = varselElementer.slice((page - 1) * rowsPerPage, page * rowsPerPage);
+
+ const DittNavInformasjonsLinje = ({ tittel, tekst }: { tittel: string; tekst: string }) => {
+ return (
+
+
{tittel}
+ {tekst}
+
+ );
+ };
+
+ const DittNavInformasjonsLinjer = (varsel: { produsent: string; tekst: string; link: string }) => {
+ return (
+
+
+
+
+
+ );
+ };
+
+ const FeilteVarslingerListe = ({
+ tittel,
+ feilteVarslinger
+ }: { tittel: string; feilteVarslinger: FeiletVarsling[] }) => {
+ return (
+
+
{tittel}
+
+ {feilteVarslinger.map((varsling) => (
+
+ {formaterDato(varsling.tidspunkt)} - {varsling.kanal}: {varsling.feilmelding}
+
+ ))}
+
+
+
+
+ )}
+ {varslingsTidspunkt.harFeilteRevarslinger && (
+ <>
+
+
+
+ )}
+
+ );
+ };
+
+ const dataExtractor = (
+ varsel: UnifiedVarselModell
+ ): { datoer: string[]; tittel: string; kanaler: string[]; harFeilteVarsel?: boolean; detaljer?: ReactNode } => {
+ if (isDittNavEvent(varsel)) {
+ const varslingsTidspunkt = varsel.varslingsTidspunkt;
+ const aktiv = varsel.aktiv ? '' : ' (Ferdigstilt)';
+ const tittel = `Notifikasjon${aktiv}: ${varsel.tekst}`;
+
+ if (!varslingsTidspunkt || !varslingsTidspunkt.tidspunkt) {
+ const datoer = [formaterDato(varsel.forstBehandlet)];
+ const kanaler = ['DITT_NAV', ...varsel.eksternVarslingKanaler];
+
+ const detaljer = (
+
+ );
+
+ return { datoer, tittel, kanaler, detaljer };
+ }
+
+ const datoer = [formaterDato(varslingsTidspunkt.tidspunkt)];
+ if (varslingsTidspunkt.renotifikasjonTidspunkt) {
+ datoer.push(formaterDato(varslingsTidspunkt.renotifikasjonTidspunkt));
+ }
+
+ const kanaler = [
+ 'DITT_NAV',
+ ...varsel.eksternVarslingKanaler,
+ ...varslingsTidspunkt.renotifikasjonsKanaler
+ ].unique();
+
+ const harFeilteVarsel = varslingsTidspunkt.harFeilteVarslinger || varslingsTidspunkt.harFeilteRevarslinger;
+ const detaljer = ;
+
+ return { datoer, tittel, kanaler, detaljer, harFeilteVarsel };
+ } else {
+ const meldingsliste = item.meldingListe?.sort(datoSynkende((melding) => melding.utsendingsTidspunkt)) || [];
+ const datoer = meldingsliste.map((melding) => formaterDato(melding.utsendingsTidspunkt)).unique();
+ const tittel = getVarselTekst(item);
+ const kanaler = meldingsliste.map((melding) => melding.kanal).unique();
+ const detaljer = ;
+ return { datoer, tittel, kanaler, detaljer };
+ }
+ };
+
+ return (
+
+
+ Varsler vises kun ett år tilbake i tid. Dersom man trenger å se informasjon om eldre varsler kan man
+ lage en sak i porten for manuell uthenting.
+
+ {varslerResult.feil.length > 0 && (
+
{varsler.feil.join('. ')}
+ )}
+
+
+
+
+ Dato
+ Status
+ Type
+ Kanal
+
+
+
+ {varselPagniated.map((item: VarselModell) => {
+ const data = dataExtractor(item);
+ return (
+ <>
+
+
+ {data.datoer}
+
+
+ {data.harFeilteVarsel ? : }
+
+
+ {data.tittel}
+
+
+ {data.kanaler.join(', ')}
+
+
+
+ );
+ })}
+
+
+
+
Hello "/new/person/varsler"!
;
-}