From 3ee021bc759d6932315f47c8d092227aadbe48e4 Mon Sep 17 00:00:00 2001
From: Frode Hansen <frode.hansen@bekk.no>
Date: Tue, 2 Apr 2024 14:31:03 +0200
Subject: [PATCH] =?UTF-8?q?H=C3=A5ndtere=20sak=20uten=20behandlinger=20som?=
 =?UTF-8?q?=20vises?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api-mock-server/api-mock-server.js        |  1 +
 .../mockdata/saker-feiler.json                | 19 +++++
 .../kontakt-oss/KontaktOss.stories.tsx        | 20 ------
 .../src/components/kontakt-oss/KontaktOss.tsx | 70 -------------------
 .../components/lenker/SkrivTilOssLenke.tsx    | 16 +++++
 .../components/status-i-sak/StatusISak.tsx    | 19 ++++-
 .../status-i-sak/statusISakUtils.tsx          |  4 ++
 .../components/velg-sak-page/VelgSakPage.tsx  | 47 +++++++------
 apps/dine-pleiepenger/src/i18n/nb.ts          |  3 +
 .../src/pages/sak/SakPage.tsx                 |  6 +-
 apps/dine-pleiepenger/src/utils/sakUtils.ts   | 14 ++--
 11 files changed, 96 insertions(+), 123 deletions(-)
 create mode 100644 apps/dine-pleiepenger/api-mock-server/mockdata/saker-feiler.json
 delete mode 100644 apps/dine-pleiepenger/src/components/kontakt-oss/KontaktOss.stories.tsx
 delete mode 100644 apps/dine-pleiepenger/src/components/kontakt-oss/KontaktOss.tsx
 create mode 100644 apps/dine-pleiepenger/src/components/lenker/SkrivTilOssLenke.tsx

diff --git a/apps/dine-pleiepenger/api-mock-server/api-mock-server.js b/apps/dine-pleiepenger/api-mock-server/api-mock-server.js
index f78676a6c4..290cb7a495 100644
--- a/apps/dine-pleiepenger/api-mock-server/api-mock-server.js
+++ b/apps/dine-pleiepenger/api-mock-server/api-mock-server.js
@@ -6,6 +6,7 @@ const søknader = require('./mockdata/soknader.json');
 // const saker = require('./mockdata/saker-søknad-og-endring-ubehandlet.json');
 // const saker = require('./mockdata/saker-med-to-vedtak.json');
 // const saker = require('./mockdata/saker-uten-søknad-men-behandling.json');
+// const saker = require('./mockdata/saker-feiler.json');
 const saker = require('./mockdata/saker.json');
 
 server.use(express.json());
diff --git a/apps/dine-pleiepenger/api-mock-server/mockdata/saker-feiler.json b/apps/dine-pleiepenger/api-mock-server/mockdata/saker-feiler.json
new file mode 100644
index 0000000000..314e649d87
--- /dev/null
+++ b/apps/dine-pleiepenger/api-mock-server/mockdata/saker-feiler.json
@@ -0,0 +1,19 @@
+[
+    {
+        "pleietrengende": {
+            "identitetsnummer": "11511767808",
+            "fødselsdato": "2017-11-11",
+            "fornavn": "INITIATIVRIK",
+            "mellomnavn": null,
+            "etternavn": "BRIS",
+            "aktørId": "2952714620922"
+        },
+        "sak": {
+            "saksnummer": "1DQB6Z8",
+            "saksbehandlingsFrist": null,
+            "fagsakYtelseType": { "kode": "PSB", "kodeverk": "FAGSAK_YTELSE" },
+            "ytelseType": "PSB",
+            "behandlinger": []
+        }
+    }
+]
diff --git a/apps/dine-pleiepenger/src/components/kontakt-oss/KontaktOss.stories.tsx b/apps/dine-pleiepenger/src/components/kontakt-oss/KontaktOss.stories.tsx
deleted file mode 100644
index 15887db0d3..0000000000
--- a/apps/dine-pleiepenger/src/components/kontakt-oss/KontaktOss.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { withEmptyPage } from '../../storybook/hooks/withEmptyPage';
-import { withIntl } from '../../storybook/hooks/withIntl';
-import KontaktOss from './KontaktOss';
-
-import type { Meta, StoryObj } from '@storybook/react';
-const meta: Meta<typeof KontaktOss> = {
-    component: KontaktOss,
-    title: 'Content/KontaktOss',
-    parameters: {
-        layout: 'centered',
-    },
-    decorators: [withIntl, withEmptyPage],
-};
-export default meta;
-
-type Story = StoryObj<typeof KontaktOss>;
-
-export const Default: Story = {
-    args: {},
-};
diff --git a/apps/dine-pleiepenger/src/components/kontakt-oss/KontaktOss.tsx b/apps/dine-pleiepenger/src/components/kontakt-oss/KontaktOss.tsx
deleted file mode 100644
index f0e18e827f..0000000000
--- a/apps/dine-pleiepenger/src/components/kontakt-oss/KontaktOss.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { BodyLong, Box, Heading, HGrid, HStack, Link, VStack } from '@navikt/ds-react';
-import { Dialog, DialogFilled, Send, SendFilled, Telephone, TelephoneFilled } from '@navikt/ds-icons';
-import { Msg } from '../../i18n';
-
-const KontaktOss = () => {
-    return (
-        <VStack gap="8" className="mb-10">
-            <Heading level="2" size="medium">
-                <Msg id="kontaktOss.tittel" />
-            </Heading>
-            <HGrid columns={{ md: 3 }} gap="8">
-                <Box>
-                    <Heading level="3" size="small" spacing={true}>
-                        <Link href="https://www.nav.no/kontaktoss#chat-med-oss" className="group">
-                            <HStack gap="2" align={'center'} wrap={false}>
-                                <div role="presentation">
-                                    <Dialog role="presentation" className="group-hover:hidden" />
-                                    <DialogFilled role="presentation" className="hidden group-hover:block" />
-                                </div>
-                                <Msg id="kontaktOss.chatLenke" />
-                            </HStack>
-                        </Link>
-                    </Heading>
-                    <BodyLong>
-                        <Msg id="kontaktOss.frida" />
-                    </BodyLong>
-                </Box>
-                <Box>
-                    <Heading level="3" size="small" spacing={true}>
-                        <Link href="https://www.nav.no/kontaktoss#skriv-til-oss" className="group">
-                            <HStack gap="2" align={'center'} wrap={false}>
-                                <div role="presentation">
-                                    <Send role="presentation" className="group-hover:hidden" />
-                                    <SendFilled role="presentation" className="hidden group-hover:block" />
-                                </div>
-                                <Msg id="kontaktOss.skrivTilOssLenke" />
-                            </HStack>
-                        </Link>
-                    </Heading>
-                    <Msg id="kontaktOss.skrivTilOssInfo" values={{ p: (chunk) => <BodyLong>{chunk}</BodyLong> }} />
-                </Box>
-                <Box>
-                    <Heading level="3" size="small" spacing={true}>
-                        <Link href="tel:55553333" className="group">
-                            <HStack gap="2" align={'center'} wrap={false}>
-                                <div role="presentation">
-                                    <Telephone role="presentation" className="group-hover:hidden" />
-                                    <TelephoneFilled role="presentation" className="hidden group-hover:block" />
-                                </div>
-                                <Msg id="kontaktOss.ringOssLenke" />
-                            </HStack>
-                        </Link>
-                    </Heading>
-                    <BodyLong as="div">
-                        <p className="mb-2">
-                            <Msg id="kontaktOss.ringOssInfo" />
-                        </p>
-                        <p>
-                            <Link href="https://www.nav.no/kontaktoss#ring-oss" className="nav-ds-link">
-                                <Msg id="kontaktOss.ringOssSeTelefonnummer" />
-                            </Link>
-                        </p>
-                    </BodyLong>
-                </Box>
-            </HGrid>
-        </VStack>
-    );
-};
-
-export default KontaktOss;
diff --git a/apps/dine-pleiepenger/src/components/lenker/SkrivTilOssLenke.tsx b/apps/dine-pleiepenger/src/components/lenker/SkrivTilOssLenke.tsx
new file mode 100644
index 0000000000..8cff53a4ad
--- /dev/null
+++ b/apps/dine-pleiepenger/src/components/lenker/SkrivTilOssLenke.tsx
@@ -0,0 +1,16 @@
+import { Link } from '@navikt/ds-react';
+import React from 'react';
+import { ExternalLink } from '@navikt/ds-icons';
+import { browserEnv } from '../../utils/env';
+
+interface Props {
+    tekst: string;
+}
+
+const SkrivTilOssLenke: React.FunctionComponent<Props> = ({ tekst }) => (
+    <Link href={browserEnv.NEXT_PUBLIC_SKRIV_TIL_OSS}>
+        {tekst} <ExternalLink className="ml-1" role="presentation" />
+    </Link>
+);
+
+export default SkrivTilOssLenke;
diff --git a/apps/dine-pleiepenger/src/components/status-i-sak/StatusISak.tsx b/apps/dine-pleiepenger/src/components/status-i-sak/StatusISak.tsx
index 1ae4ff1c30..93bcaf65d5 100644
--- a/apps/dine-pleiepenger/src/components/status-i-sak/StatusISak.tsx
+++ b/apps/dine-pleiepenger/src/components/status-i-sak/StatusISak.tsx
@@ -1,4 +1,4 @@
-import { BodyShort, Box, Heading, Link, Switch, VStack } from '@navikt/ds-react';
+import { Alert, BodyLong, BodyShort, Box, Heading, Link, Switch, VStack } from '@navikt/ds-react';
 import React, { useState } from 'react';
 import { ChevronRightIcon } from '@navikt/aksel-icons';
 import { default as NextLink } from 'next/link';
@@ -7,7 +7,8 @@ import { formatSøknadshendelseTidspunkt, getAlleHendelserISak } from '../../uti
 import { Process } from '../process';
 import ProcessStep from '../process/ProcessStep';
 import { getProcessStepsFraSøknadshendelser } from './statusISakUtils';
-import { useMessages } from '../../i18n';
+import { Msg, useMessages } from '../../i18n';
+import SkrivTilOssLenke from '../lenker/SkrivTilOssLenke';
 
 interface Props {
     sak: Sak;
@@ -21,6 +22,20 @@ const StatusISak: React.FunctionComponent<Props> = ({ sak, visAlleHendelser, tit
     const hendelser = getAlleHendelserISak(sak);
     const processSteps = getProcessStepsFraSøknadshendelser(text, hendelser);
 
+    if (processSteps.length === 0) {
+        return (
+            <Alert variant="info">
+                <Msg
+                    id="statusISak.ingenHendelser"
+                    values={{
+                        p: (txt) => <BodyLong>{txt}</BodyLong>,
+                        lenke: <SkrivTilOssLenke tekst={text('statusISak.ingenHendelser.skrivTilOssLenkeTekst')} />,
+                    }}
+                />
+            </Alert>
+        );
+    }
+
     if (reverseDirection) {
         processSteps.reverse();
     }
diff --git a/apps/dine-pleiepenger/src/components/status-i-sak/statusISakUtils.tsx b/apps/dine-pleiepenger/src/components/status-i-sak/statusISakUtils.tsx
index bdcdb77395..3d89699452 100644
--- a/apps/dine-pleiepenger/src/components/status-i-sak/statusISakUtils.tsx
+++ b/apps/dine-pleiepenger/src/components/status-i-sak/statusISakUtils.tsx
@@ -41,6 +41,10 @@ export const getProcessStepsFraSøknadshendelser = (text: TextFn, hendelser: Sø
     /** Aksjonspunkt skal ikke vises enda */
     const hendelserSomSkalVises = hendelser.filter((h) => h.type !== SøknadshendelseType.AKSJONSPUNKT);
 
+    if (hendelserSomSkalVises.length === 0) {
+        return [];
+    }
+
     const antall = hendelserSomSkalVises.length;
     const erFerdigBehandlet = hendelserSomSkalVises[antall - 1].type === SøknadshendelseType.FERDIG_BEHANDLET;
 
diff --git a/apps/dine-pleiepenger/src/components/velg-sak-page/VelgSakPage.tsx b/apps/dine-pleiepenger/src/components/velg-sak-page/VelgSakPage.tsx
index 0906093ff1..fd33e91805 100644
--- a/apps/dine-pleiepenger/src/components/velg-sak-page/VelgSakPage.tsx
+++ b/apps/dine-pleiepenger/src/components/velg-sak-page/VelgSakPage.tsx
@@ -28,28 +28,31 @@ const VelgSakPage: React.FunctionComponent<Props> = ({ saker }) => {
                 </Heading>
 
                 <VStack gap="5" className="max-w-2xl mb-10">
-                    {saker.map((sak) => (
-                        <LinkPanel
-                            as={Link}
-                            border={false}
-                            href={`/sak/${sak.sak.saksnummer}`}
-                            key={sak.sak.saksnummer}>
-                            <LinkPanel.Title className="w-full">
-                                <Heading as="span" size="small">
-                                    {personaliaUtils.navn(sak.pleietrengende)}
-                                </Heading>
-                            </LinkPanel.Title>
-                            <LinkPanel.Description>
-                                <p>
-                                    <Msg
-                                        id="velgSak.barn.fdato"
-                                        values={{ dato: dateFormatter.full(sak.pleietrengende.fødselsdato) }}
-                                    />
-                                </p>
-                                <StatusTag {...getBehandlingsstatusISak(sak.sak)} />
-                            </LinkPanel.Description>
-                        </LinkPanel>
-                    ))}
+                    {saker.map((sak) => {
+                        const status = getBehandlingsstatusISak(sak.sak);
+                        return (
+                            <LinkPanel
+                                as={Link}
+                                border={false}
+                                href={`/sak/${sak.sak.saksnummer}`}
+                                key={sak.sak.saksnummer}>
+                                <LinkPanel.Title className="w-full">
+                                    <Heading as="span" size="small">
+                                        {personaliaUtils.navn(sak.pleietrengende)}
+                                    </Heading>
+                                </LinkPanel.Title>
+                                <LinkPanel.Description>
+                                    <p>
+                                        <Msg
+                                            id="velgSak.barn.fdato"
+                                            values={{ dato: dateFormatter.full(sak.pleietrengende.fødselsdato) }}
+                                        />
+                                    </p>
+                                    {status ? <StatusTag {...status} /> : null}
+                                </LinkPanel.Description>
+                            </LinkPanel>
+                        );
+                    })}
                 </VStack>
             </Box>
         </DefaultPageLayout>
diff --git a/apps/dine-pleiepenger/src/i18n/nb.ts b/apps/dine-pleiepenger/src/i18n/nb.ts
index 74a4098637..ff13b84148 100644
--- a/apps/dine-pleiepenger/src/i18n/nb.ts
+++ b/apps/dine-pleiepenger/src/i18n/nb.ts
@@ -116,6 +116,9 @@ export const nb = {
     'statusISak.forventetSvar.endring.tittel': 'Endringen er ferdig behandlet',
     'statusISak.forventetSvar.endring.info':
         'Endringsmeldingen vil oppdatere saken og du vil få ett nytt vedtaksbrev når endringene er ferdig behandlet.',
+    'statusISak.ingenHendelser':
+        '<p>Hei, vi kan enn så lenge ikke vise noen detaljert informasjon om saken din enda</p><p>Hvis du lurer på noe angående saken din, kan du ta kontakt via {lenke}.</p>',
+    'statusISak.ingenHendelser.skrivTilOssLenkeTekst': 'Skriv til oss',
 
     'venteårsakMelding.legeerklæring.tittel': 'Vi mangler legeerklæring',
     'venteårsakMelding.legeerklæring.lastOppHer': 'Last opp legeerklæring her',
diff --git a/apps/dine-pleiepenger/src/pages/sak/SakPage.tsx b/apps/dine-pleiepenger/src/pages/sak/SakPage.tsx
index 227bfc9acf..daad91980c 100644
--- a/apps/dine-pleiepenger/src/pages/sak/SakPage.tsx
+++ b/apps/dine-pleiepenger/src/pages/sak/SakPage.tsx
@@ -47,20 +47,20 @@ const SakPage: React.FunctionComponent<Props> = ({ sak, pleietrengende, saksbeha
                 <SakPageHeader
                     navn={navn}
                     saksnr={sak.saksnummer}
-                    titleTag={<StatusTag {...getBehandlingsstatusISak(sak)} />}
+                    titleTag={statusISak ? <StatusTag {...statusISak} /> : null}
                 />
             }>
             <Head>
                 <title>Din pleiepengesak - {navn}</title>
             </Head>
             <VStack gap="12">
-                {statusISak.venteårsak && statusISak.status !== Behandlingsstatus.AVSLUTTET ? (
+                {statusISak?.venteårsak && statusISak.status !== Behandlingsstatus.AVSLUTTET ? (
                     <VenteårsakMelding venteårsak={statusISak.venteårsak} />
                 ) : null}
                 <Box className="md:flex md:gap-6">
                     <div className="md:grow mb-10 md:mb-0">{<StatusISak sak={sak} tittel="Dette skjer i saken" />}</div>
                     <div className="md:mb-none shrink-0 md:w-72">
-                        {statusISak.status === Behandlingsstatus.AVSLUTTET ? null : (
+                        {statusISak === undefined || statusISak.status === Behandlingsstatus.AVSLUTTET ? null : (
                             <VStack gap="5">
                                 <Saksbehandlingstid
                                     frist={sak.saksbehandlingsFrist}
diff --git a/apps/dine-pleiepenger/src/utils/sakUtils.ts b/apps/dine-pleiepenger/src/utils/sakUtils.ts
index f0389c41aa..36f29f0ad5 100644
--- a/apps/dine-pleiepenger/src/utils/sakUtils.ts
+++ b/apps/dine-pleiepenger/src/utils/sakUtils.ts
@@ -19,7 +19,7 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.locale('nb');
 
-const getSisteBehandlingISak = (sak: Sak): Behandling => {
+const getSisteBehandlingISak = (sak: Sak): Behandling | undefined => {
     return sortBy(sak.behandlinger, (b) => b.opprettetDato)[0];
 };
 
@@ -48,12 +48,14 @@ export const getBehandlingerISakSorted = (sak: Sak): Behandling[] => {
     return sortBehandlinger(sak.behandlinger);
 };
 
-export const getBehandlingsstatusISak = (sak: Sak): BehandlingsstatusISak => {
+export const getBehandlingsstatusISak = (sak: Sak): BehandlingsstatusISak | undefined => {
     const behandling = getSisteBehandlingISak(sak);
-    return {
-        status: behandling.status,
-        venteårsak: behandling.aksjonspunkter?.length > 0 ? behandling.aksjonspunkter[0]?.venteårsak : undefined,
-    };
+    return behandling
+        ? {
+              status: behandling.status,
+              venteårsak: behandling.aksjonspunkter?.length > 0 ? behandling.aksjonspunkter[0]?.venteårsak : undefined,
+          }
+        : undefined;
 };
 
 const mapSøknadTilSøknadshendelse = (søknad: Søknad): Søknadshendelse => {