IS: Preparatory refactor of sykmelding side (#1558)

Author: vetlesolgaard

src/components/speiling/Statuspanel.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode } from "react";
-import cn from "classnames";
 import SykmeldingNokkelOpplysning from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/SykmeldingNokkelOpplysning";
 
 interface StatusNokkelopplysningProps {
@@ -41,11 +40,12 @@ interface StatuspanelProps {
 
 const Statuspanel = (statuspanelProps: StatuspanelProps) => {
   const { children, enKolonne = false } = statuspanelProps;
-  const classNames = cn("blokk statuspanel", {
-    "statuspanel--toKol": !enKolonne,
-    "statuspanel--enKol": enKolonne,
-  });
-  return <div className={classNames}>{children}</div>;
+  const kolonneStyle = enKolonne ? "statuspanel--enKol" : "statuspanel--toKol";
+  return (
+    <div className={`empty:hidden blokk statuspanel ${kolonneStyle}`}>
+      {children}
+    </div>
+  );
 };
 
 export default Statuspanel;

src/sider/sykmeldinger/sykmelding/DinAvbrutteSykmelding.tsx

@@ -3,7 +3,7 @@ import SykmeldingStatuspanel from "../sykmeldingstatuspanel/SykmeldingStatuspane
 import { SykmeldingOldFormat } from "@/data/sykmelding/types/SykmeldingOldFormat";
 import { SpeilingEkspanderbartPanelTittel } from "@/components/speiling/ekspanderbar/SpeilingEkspanderbartPanelTittel";
 import { SpeilingEkspanderbartPanel } from "@/components/speiling/ekspanderbar/SpeilingEkspanderbartPanel";
-import { DineSykmeldingOpplysninger } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/DineSykmeldingOpplysninger";
+import { SykmeldingOpplysninger } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/SykmeldingOpplysninger";
 
 const texts = {
   dineOpplysninger: "Dine opplysninger",
@@ -26,7 +26,7 @@ const DinAvbrutteSykmelding = ({ sykmelding }: DinAvbrutteSykmeldingProps) => {
           </SpeilingEkspanderbartPanelTittel>
         }
       >
-        <DineSykmeldingOpplysninger sykmelding={sykmelding} />
+        <SykmeldingOpplysninger sykmelding={sykmelding} />
       </SpeilingEkspanderbartPanel>
     </div>
   );

src/sider/sykmeldinger/sykmelding/DinBekreftedeSykmelding.tsx

@@ -4,7 +4,7 @@ import ArbeidsgiversSykmelding from "./ArbeidsgiversSykmelding";
 import BekreftetSykmeldingStatuspanel from "../sykmeldingstatuspanel/BekreftetSykmeldingStatuspanel";
 import { SpeilingEkspanderbartPanel } from "@/components/speiling/ekspanderbar/SpeilingEkspanderbartPanel";
 import { SpeilingEkspanderbartPanelTittel } from "@/components/speiling/ekspanderbar/SpeilingEkspanderbartPanelTittel";
-import { DineSykmeldingOpplysninger } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/DineSykmeldingOpplysninger";
+import { SykmeldingOpplysninger } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/SykmeldingOpplysninger";
 
 const texts = {
   tittel: "Dine opplysinger",
@@ -31,7 +31,7 @@ const DinBekreftedeSykmelding = ({
           </SpeilingEkspanderbartPanelTittel>
         }
       >
-        <DineSykmeldingOpplysninger sykmelding={dinSykmelding} />
+        <SykmeldingOpplysninger sykmelding={dinSykmelding} />
       </SpeilingEkspanderbartPanel>
       {dinSykmelding.valgtArbeidssituasjon === "ARBEIDSTAKER" && (
         <div className="blokk">

src/sider/sykmeldinger/sykmelding/DinSendteSykmelding.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { SykmeldingOldFormat } from "@/data/sykmelding/types/SykmeldingOldFormat";
 import ArbeidsgiversSykmelding from "./ArbeidsgiversSykmelding";
-import { DineSykmeldingOpplysninger } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/DineSykmeldingOpplysninger";
+import { SykmeldingOpplysninger } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/SykmeldingOpplysninger";
 import SykmeldingStatuspanel from "../sykmeldingstatuspanel/SykmeldingStatuspanel";
 import { SpeilingEkspanderbartPanel } from "@/components/speiling/ekspanderbar/SpeilingEkspanderbartPanel";
 import { SpeilingEkspanderbartPanelTittel } from "@/components/speiling/ekspanderbar/SpeilingEkspanderbartPanelTittel";
@@ -31,7 +31,7 @@ export function DinSendteSykmelding({
           </SpeilingEkspanderbartPanelTittel>
         }
       >
-        <DineSykmeldingOpplysninger sykmelding={dinSykmelding} />
+        <SykmeldingOpplysninger sykmelding={dinSykmelding} />
       </SpeilingEkspanderbartPanel>
       <div className="blokk--l">
         <ArbeidsgiversSykmelding sykmelding={arbeidsgiversSykmelding} />

src/sider/sykmeldinger/sykmelding/DinSykmelding.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import Alertstripe from "nav-frontend-alertstriper";
 import { SykmeldingOldFormat } from "@/data/sykmelding/types/SykmeldingOldFormat";
-import { DineSykmeldingOpplysninger } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/DineSykmeldingOpplysninger";
+import { SykmeldingOpplysninger } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/SykmeldingOpplysninger";
 
 const texts = {
   eldreSykmeldinger: "Du har eldre sykmeldinger som du bør behandle før denne.",
@@ -32,7 +32,7 @@ export function DinSykmelding(dinSykmeldingProps: Props) {
           </p>
         </Alertstripe>
       )}
-      <DineSykmeldingOpplysninger sykmelding={sykmelding} />
+      <SykmeldingOpplysninger sykmelding={sykmelding} />
     </>
   );
 }

src/sider/sykmeldinger/sykmelding/DinUtgaatteSykmelding.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import SykmeldingStatuspanel from "../sykmeldingstatuspanel/SykmeldingStatuspanel";
-import { DineSykmeldingOpplysninger } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/DineSykmeldingOpplysninger";
+import { SykmeldingOpplysninger } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/SykmeldingOpplysninger";
 import { SykmeldingOldFormat } from "@/data/sykmelding/types/SykmeldingOldFormat";
 import { SpeilingEkspanderbartPanel } from "@/components/speiling/ekspanderbar/SpeilingEkspanderbartPanel";
 import { SpeilingEkspanderbartPanelTittel } from "@/components/speiling/ekspanderbar/SpeilingEkspanderbartPanelTittel";
@@ -26,7 +26,7 @@ const DinUtgatteSykmelding = ({ sykmelding }: DinUtgaatteSykmeldingProps) => {
           </SpeilingEkspanderbartPanelTittel>
         }
       >
-        <DineSykmeldingOpplysninger sykmelding={sykmelding} />
+        <SykmeldingOpplysninger sykmelding={sykmelding} />
       </SpeilingEkspanderbartPanel>
     </div>
   );

src/sider/sykmeldinger/sykmelding/EgenmeldtKoronaSykmelding.tsx

@@ -0,0 +1,41 @@
+import DineKoronaSykmeldingOpplysninger from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/DineKoronaSykmeldingOpplysninger";
+import React from "react";
+import {
+  SykmeldingOldFormat,
+  SykmeldingStatus,
+} from "@/data/sykmelding/types/SykmeldingOldFormat";
+import BekreftetSykmeldingStatuspanel from "@/sider/sykmeldinger/sykmeldingstatuspanel/BekreftetSykmeldingStatuspanel";
+import SykmeldingStatuspanel from "@/sider/sykmeldinger/sykmeldingstatuspanel/SykmeldingStatuspanel";
+import Feilmelding from "@/components/Feilmelding";
+import { Heading } from "@navikt/ds-react";
+
+const texts = {
+  pageSubtitle: "For selvstendig næringsdrivende og frilansere",
+};
+
+interface Props {
+  sykmelding: SykmeldingOldFormat;
+}
+
+/**
+ * Dette vil bare gjelde historiske sykmeldinger fra når det var korona.
+ */
+export default function EgenmeldtKoronaSykmelding({ sykmelding }: Props) {
+  const isBekreftet = sykmelding.status === SykmeldingStatus.BEKREFTET;
+  const isAvbrutt = sykmelding.status === SykmeldingStatus.AVBRUTT;
+  const isNy = sykmelding.status === SykmeldingStatus.NY;
+  return isNy || isBekreftet || isAvbrutt ? (
+    <>
+      <Heading size="small" level="2">
+        {texts.pageSubtitle}
+      </Heading>
+      {isBekreftet && (
+        <BekreftetSykmeldingStatuspanel sykmelding={sykmelding} />
+      )}
+      {isAvbrutt && <SykmeldingStatuspanel sykmelding={sykmelding} />}
+      <DineKoronaSykmeldingOpplysninger sykmelding={sykmelding} />
+    </>
+  ) : (
+    <Feilmelding tittel="Egenmeldingen har ukjent status" />
+  );
+}

src/sider/sykmeldinger/sykmelding/SykmeldingSide.tsx

@@ -8,12 +8,10 @@ import DinAvbrutteSykmelding from "./DinAvbrutteSykmelding";
 import DinUtgaatteSykmelding from "./DinUtgaatteSykmelding";
 import Feilmelding from "../../../components/Feilmelding";
 import AvvistSykmelding from "./avvisteSykmeldinger/AvvistSykmelding";
-import KoronaSykmeldingBekreftet from "./koronasykmeldinger/KoronaSykmelding-Bekreftet";
-import KoronaSykmeldingNy from "./koronasykmeldinger/KoronaSykmelding-Ny";
-import KoronaSykmeldingAvbrutt from "./koronasykmeldinger/KoronaSykmelding-Avbrutt";
 import { BehandlingsutfallStatusDTO } from "@/data/sykmelding/types/BehandlingsutfallStatusDTO";
 import { DinSendteSykmelding } from "@/sider/sykmeldinger/sykmelding/DinSendteSykmelding";
 import { DinSykmelding } from "@/sider/sykmeldinger/sykmelding/DinSykmelding";
+import EgenmeldtKoronaSykmelding from "@/sider/sykmeldinger/sykmelding/EgenmeldtKoronaSykmelding";
 
 interface Props {
   dinSykmelding?: SykmeldingOldFormat;
@@ -33,21 +31,9 @@ export function SykmeldingSide({
   ) {
     return <AvvistSykmelding sykmelding={dinSykmelding} />;
   }
+
   if (dinSykmelding.egenmeldt) {
-    switch (dinSykmelding.status) {
-      case SykmeldingStatus.BEKREFTET: {
-        return <KoronaSykmeldingBekreftet dinSykmelding={dinSykmelding} />;
-      }
-      case SykmeldingStatus.NY: {
-        return <KoronaSykmeldingNy sykmelding={dinSykmelding} />;
-      }
-      case SykmeldingStatus.AVBRUTT: {
-        return <KoronaSykmeldingAvbrutt sykmelding={dinSykmelding} />;
-      }
-      default: {
-        return <Feilmelding tittel="Egenmeldingen har ukjent status" />;
-      }
-    }
+    return <EgenmeldtKoronaSykmelding sykmelding={dinSykmelding} />;
   } else if (
     dinSykmelding.status === SykmeldingStatus.SENDT &&
     arbeidsgiversSykmelding

src/sider/sykmeldinger/sykmelding/avvisteSykmeldinger/AvvistSykmelding.tsx

@@ -6,7 +6,7 @@ import {
 import AvvistSykmeldingStatuspanel from "./AvvistSykmeldingStatuspanel";
 import { AvvistSykmeldingPanel } from "./AvvistSykmeldingPanel";
 import BekreftAvvistSykmelding from "./BekreftAvvistSykmelding";
-import { DineSykmeldingOpplysninger } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/DineSykmeldingOpplysninger";
+import { SykmeldingOpplysninger } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/SykmeldingOpplysninger";
 
 interface AvvistSykmeldingProps {
   sykmelding: SykmeldingOldFormat;
@@ -22,7 +22,7 @@ const AvvistSykmelding = ({
       )}
       <AvvistSykmeldingPanel sykmelding={sykmelding} />
       <div className="blokk">
-        <DineSykmeldingOpplysninger sykmelding={sykmelding} />
+        <SykmeldingOpplysninger sykmelding={sykmelding} />
       </div>
       {sykmelding.status === SykmeldingStatus.NY && <BekreftAvvistSykmelding />}
     </>

src/sider/sykmeldinger/sykmelding/koronasykmeldinger/KoronaSykmelding-Avbrutt.tsx

@@ -3,25 +3,25 @@ import { SykmeldingOldFormat } from "@/data/sykmelding/types/SykmeldingOldFormat
 import SykmeldingNokkelOpplysning from "./SykmeldingNokkelOpplysning";
 import SykmeldingPerioder from "./SykmeldingPerioder";
 import { Egenmeldingsdager } from "./Egenmeldingsdager";
+import { Heading } from "@navikt/ds-react";
 
 const texts = {
   diagnose: "Diagnose",
   diagnosekode: "Diagnosekode",
 };
 
-interface DineKoronaSykmeldingOpplysningerProps {
+interface Props {
   sykmelding: SykmeldingOldFormat;
 }
-const DineKoronaSykmeldingOpplysninger = (
-  dineKoronaSykmeldingOpplysningerProps: DineKoronaSykmeldingOpplysningerProps
-) => {
-  const { sykmelding } = dineKoronaSykmeldingOpplysningerProps;
 
+export default function DineKoronaSykmeldingOpplysninger({
+  sykmelding,
+}: Props) {
   return (
     <div className="dine-opplysninger">
-      <h2 className="js-din-sykmelding-tittel typo-innholdstittel blokk-l">
-        Dine opplysninger
-      </h2>
+      <Heading size="medium" className="mb-6">
+        Opplysninger
+      </Heading>
       <div className="blokk-l side-innhold fjern-margin-bottom">
         <SykmeldingPerioder perioder={sykmelding.mulighetForArbeid.perioder} />
         {sykmelding.sporsmal.egenmeldingsdager &&
@@ -65,6 +65,4 @@ const DineKoronaSykmeldingOpplysninger = (
       </div>
     </div>
   );
-};
-
-export default DineKoronaSykmeldingOpplysninger;
+}