Vis krav paa dagpenger i både behandling og kontroll

navikt · Dec 12, 2024 · dd00d53 · dd00d53
1 parent 1617eeb
commit dd00d53
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 63 deletions.
diff --git a/app/components/krav-paa-dagpenger/KravPaaDagpenger.module.css b/app/components/krav-paa-dagpenger/KravPaaDagpenger.module.css
@@ -0,0 +1,21 @@
+.kravPaaDagpenger {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  padding: var(--a-spacing-2);
+  box-shadow: inset 0 -1px 0 0 var(--a-border-divider);
+}
+
+.kravPaaDagpenger svg {
+  margin-right: var(--a-spacing-1);
+}
+
+.kravPaaDagpengerSuccess {
+  background-color: var(--a-green-100);
+}
+
+.kravPaaDagpengerError {
+  background-color: var(--a-red-100);
+}
diff --git a/app/components/krav-paa-dagpenger/KravPaaDagpenger.tsx b/app/components/krav-paa-dagpenger/KravPaaDagpenger.tsx
@@ -0,0 +1,42 @@
+import { CheckmarkCircleFillIcon, XMarkOctagonFillIcon } from "@navikt/aksel-icons";
+import classnames from "classnames";
+
+import { useTypedRouteLoaderData } from "~/hooks/useTypedRouteLoaderData";
+import type { IOpplysning } from "~/models/behandling.server";
+
+import styles from "./KravPaaDagpenger.module.css";
+
+export function KravPaaDagpenger() {
+  const { behandling } = useTypedRouteLoaderData("routes/oppgave.$oppgaveId");
+  const harKravDagpengerOpplysning = finnOpplysningMedNavn(
+    "Krav på dagpenger",
+    behandling.opplysning,
+  );
+  return (
+    <div
+      className={classnames(styles.kravPaaDagpenger, {
+        [styles.kravPaaDagpengerSuccess]: harKravDagpengerOpplysning?.verdi === "true",
+        [styles.kravPaaDagpengerError]:
+          !harKravDagpengerOpplysning || harKravDagpengerOpplysning?.verdi === "false",
+      })}
+    >
+      {harKravDagpengerOpplysning?.verdi === "true" && (
+        <>
+          <CheckmarkCircleFillIcon color={"var(--a-green-500)"} />
+          Bruker har rett til dagpenger
+        </>
+      )}
+
+      {(!harKravDagpengerOpplysning || harKravDagpengerOpplysning.verdi === "false") && (
+        <>
+          <XMarkOctagonFillIcon color={"var(--a-red-500)"} />
+          Bruker har ikke rett til dagpenger
+        </>
+      )}
+    </div>
+  );
+}
+
+function finnOpplysningMedNavn(navn: string, opplysninger: IOpplysning[]) {
+  return opplysninger.find((opplysning) => opplysning.navn === navn);
+}
diff --git a/app/route-styles/oppgave.module.css b/app/route-styles/oppgave.module.css
@@ -1,25 +1,3 @@
-.kravPaaDagpenger {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: auto;
-  padding: var(--a-spacing-2);
-  box-shadow: inset 0 -1px 0 0 var(--a-border-divider);
-}
-
-.kravPaaDagpenger svg {
-  margin-right: var(--a-spacing-1);
-}
-
-.kravPaaDagpengerSuccess {
-  background-color: var(--a-green-100);
-}
-
-.kravPaaDagpengerError {
-  background-color: var(--a-red-100);
-}
-
 .oppgaveContainer {
   display: grid;
   gap: var(--a-spacing-2);

diff --git a/app/routes/oppgave.$oppgaveId.behandle.tsx b/app/routes/oppgave.$oppgaveId.behandle.tsx
@@ -1,23 +1,17 @@
-import {
-  CheckmarkCircleFillIcon,
-  DocPencilIcon,
-  TasklistSendIcon,
-  XMarkOctagonFillIcon,
-} from "@navikt/aksel-icons";
+import { DocPencilIcon, TasklistSendIcon } from "@navikt/aksel-icons";
 import { Alert, Tabs } from "@navikt/ds-react";
 import type { ActionFunctionArgs } from "@remix-run/node";
 import { Outlet, useActionData } from "@remix-run/react";
-import classnames from "classnames";
 import { useState } from "react";
 
+import { KravPaaDagpenger } from "~/components/krav-paa-dagpenger/KravPaaDagpenger";
 import { MeldingOmVedtak } from "~/components/melding-om-vedtak/MeldingOmVedtak";
 import { OppgaveHandlinger } from "~/components/oppgave-handlinger/OppgaveHandlinger";
 import { OppgaveInformasjon } from "~/components/oppgave-informasjon/OppgaveInformasjon";
 import { Vilkaar } from "~/components/vilkaar/Vilkaar";
 import { MeldingOmVedtakProvider } from "~/context/melding-om-vedtak-context";
 import { useHandleAlertMessages } from "~/hooks/useHandleAlertMessages";
 import { useTypedRouteLoaderData } from "~/hooks/useTypedRouteLoaderData";
-import type { IOpplysning } from "~/models/behandling.server";
 import styles from "~/route-styles/oppgave.module.css";
 import { handleActions } from "~/server-side-actions/handle-actions";
 import { isAlert } from "~/utils/type-guards";
@@ -29,14 +23,8 @@ export async function action({ request, params }: ActionFunctionArgs) {
 export default function Oppgave() {
   const actionData = useActionData<typeof action>();
   const [aktivTab, setAktivTab] = useState("behandling");
-  const { oppgave, behandling, meldingOmVedtak } = useTypedRouteLoaderData(
-    "routes/oppgave.$oppgaveId",
-  );
+  const { oppgave, meldingOmVedtak } = useTypedRouteLoaderData("routes/oppgave.$oppgaveId");
   useHandleAlertMessages(isAlert(actionData) ? actionData : undefined);
-  const harKravDagpengerOpplysning = finnOpplysningMedNavn(
-    "Krav på dagpenger",
-    behandling.opplysning,
-  );
 
   if (!meldingOmVedtak) {
     return (
@@ -62,28 +50,7 @@ export default function Oppgave() {
                   label="Melding om vedtak"
                   icon={<TasklistSendIcon />}
                 />
-                <div
-                  className={classnames(styles.kravPaaDagpenger, {
-                    [styles.kravPaaDagpengerSuccess]: harKravDagpengerOpplysning?.verdi === "true",
-                    [styles.kravPaaDagpengerError]:
-                      !harKravDagpengerOpplysning || harKravDagpengerOpplysning?.verdi === "false",
-                  })}
-                >
-                  {harKravDagpengerOpplysning?.verdi === "true" && (
-                    <>
-                      <CheckmarkCircleFillIcon color={"var(--a-green-500)"} />
-                      Bruker har rett til dagpenger
-                    </>
-                  )}
-
-                  {(!harKravDagpengerOpplysning ||
-                    harKravDagpengerOpplysning.verdi === "false") && (
-                    <>
-                      <XMarkOctagonFillIcon color={"var(--a-red-500)"} />
-                      Bruker har ikke rett til dagpenger
-                    </>
-                  )}
-                </div>
+                <KravPaaDagpenger />
               </Tabs.List>
             </div>
 
@@ -106,7 +73,3 @@ export default function Oppgave() {
     </MeldingOmVedtakProvider>
   );
 }
-
-function finnOpplysningMedNavn(navn: string, opplysninger: IOpplysning[]) {
-  return opplysninger.find((opplysning) => opplysning.navn === navn);
-}
diff --git a/app/routes/oppgave.$oppgaveId.kontroll.tsx b/app/routes/oppgave.$oppgaveId.kontroll.tsx
@@ -3,6 +3,7 @@ import { Alert, Tabs } from "@navikt/ds-react";
 import type { ActionFunctionArgs } from "@remix-run/node";
 import { Outlet, useActionData } from "@remix-run/react";
 
+import { KravPaaDagpenger } from "~/components/krav-paa-dagpenger/KravPaaDagpenger";
 import { MeldingOmVedtak } from "~/components/melding-om-vedtak/MeldingOmVedtak";
 import { OppgaveHandlinger } from "~/components/oppgave-handlinger/OppgaveHandlinger";
 import { OppgaveInformasjon } from "~/components/oppgave-informasjon/OppgaveInformasjon";
@@ -52,6 +53,7 @@ export default function Oppgave() {
                     label="Melding om vedtak"
                     icon={<TasklistSendIcon />}
                   />
+                  <KravPaaDagpenger />
                 </Tabs.List>
               </div>