Legg til personalia på person view. Rydd i gammel mock. Oppgrader Aksel

app/components/aktivitet-modal/AktivitetModal.tsx

@@ -6,7 +6,6 @@ import { validatorAktivitet } from "~/utils/validering.util";
 import { AktivitetRadio } from "../aktivitet-radio/AktivitetRadio";
 import { type IRapporteringsperiode } from "~/models/rapporteringsperiode.server";
 import { FormattedDate } from "../FormattedDate";
-import { useEffect } from "react";
 import { type TAktivitetType } from "~/models/aktivitet.server";
 import { hentAktivitetITimer } from "~/utils/aktivitet.utils";
 import { AktivitetTekstfelt } from "../aktivitet-tekstfelt/AktivitetTekstfelt";
@@ -41,10 +40,6 @@ export function AktivitetModal(props: IProps) {
     return `${aktivitet?.type}`;
   }
 
-  useEffect(() => {
-    Modal.setAppElement("#dp-saksbehandling-frontend");
-  }, []);
-
   return (
     <Modal
       className={styles.modal}
@@ -53,7 +48,7 @@ export function AktivitetModal(props: IProps) {
       open={modalAapen}
       onClose={() => lukkModal()}
     >
-      <Modal.Content>
+      <Modal.Body>
         {dag && (
           <Heading
             spacing
@@ -111,7 +106,7 @@ export function AktivitetModal(props: IProps) {
             </div>
           </ValidatedForm>
         )}
-      </Modal.Content>
+      </Modal.Body>
     </Modal>
   );
 }

app/components/brodsmuler/Brodsmuler.module.css → app/components/brodsmuler/Navnestripe.module.css

@@ -1,6 +1,6 @@
 .container {
-  background-color: var(--a-gray-100);
-  border-bottom: 1px solid var(--a-border-divider);
+  background-color: var(--a-gray-50);
+  box-shadow: var(--a-shadow-xsmall);
   position: sticky;
   top: 48px;
   z-index: 90;

app/components/brodsmuler/Navnestripe.tsx

@@ -1,4 +1,4 @@
-import styles from "./Brodsmuler.module.css";
+import styles from "./Navnestripe.module.css";
 import { CopyButton } from "@navikt/ds-react";
 
 interface IProps {

app/components/personalia/Personalia.module.css

@@ -0,0 +1,9 @@
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(auto, 200px));
+  column-gap: var(--a-spacing-4);
+  row-gap: var(--a-spacing-4);
+
+  padding: var(--a-spacing-4) var(--a-spacing-6);
+  background-color: var(--a-gray-50);
+}

app/components/personalia/Personalia.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import styles from "./Personalia.module.css";
+import { BodyShort } from "@navikt/ds-react";
+import type { IPerson } from "~/models/pdl.server";
+
+export function Personalia(person: IPerson) {
+  return (
+    <div className={styles.container}>
+      <div>
+        <BodyShort size={"small"} textColor={"subtle"}>
+          Telefon
+        </BodyShort>
+        <BodyShort>{person.telefon}</BodyShort>
+      </div>
+
+      <div>
+        <BodyShort size={"small"} textColor={"subtle"}>
+          Kontaktadresse
+        </BodyShort>
+        <BodyShort>{`${person.kontaktadresse.adressenavn} ${person.kontaktadresse.husnummer} ${person.kontaktadresse.postnummer}`}</BodyShort>
+      </div>
+
+      <div>
+        <BodyShort size={"small"} textColor={"subtle"}>
+          Statsborgerskap
+        </BodyShort>
+        <BodyShort>{person.statsborgerskap}</BodyShort>
+      </div>
+
+      <div>
+        <BodyShort size={"small"} textColor={"subtle"}>
+          Utflytting fra Norge
+        </BodyShort>
+        <BodyShort>
+          {person.utflyttingFraNorge ? person.utflyttingFraNorge.toDateString() : "-"}
+        </BodyShort>
+      </div>
+
+      <div>
+        <BodyShort size={"small"} textColor={"subtle"}>
+          Antall barn
+        </BodyShort>
+        <BodyShort>{person.antallBarn}</BodyShort>
+      </div>
+    </div>
+  );
+}

app/models/SAF.server.ts

@@ -1,7 +1,7 @@
 import { logger } from "../../server/logger";
 import { v4 as uuidv4 } from "uuid";
 import { gql, GraphQLClient } from "graphql-request";
-import { authorizeUser, getSession } from "./auth.server";
+import { getSaksbehandler, getSession } from "./auth.server";
 import { getEnv } from "~/utils/env.utils";
 import { mockJournalpost } from "../../mock-data/mock-journalpost";
 
@@ -34,7 +34,7 @@ export async function hentJournalpost(
   }
 
   const session = await getSession(request);
-  const saksbehandler = await authorizeUser(session);
+  const saksbehandler = await getSaksbehandler(session);
   const token = await session.apiToken("api://dev-fss.teamdokumenthandtering.saf-q1/.default");
 
   if (!token || !saksbehandler) {

app/models/auth.server.ts

@@ -4,7 +4,7 @@ import { mockSaksbehandler } from "../../mock-data/mock-saksbehandler";
 import type { ISaksbehandler } from "~/models/saksbehandler.server";
 import type { SessionWithOboProvider } from "@navikt/dp-auth";
 
-export async function authorizeUser(session: SessionWithOboProvider): Promise<ISaksbehandler> {
+export async function getSaksbehandler(session: SessionWithOboProvider): Promise<ISaksbehandler> {
   // Wonderwall tar seg av session, hvis vi ikke har en session kjører vi uten sidecar og skal være i dev
   if (!session || session.expiresIn === 0) {
     logger.debug("no session, mocker saksbehandler");

app/models/pdl.server.ts

@@ -1,7 +1,23 @@
 import { gql, GraphQLClient } from "graphql-request";
 import { logger } from "server/logger";
 import { v4 as uuidv4 } from "uuid";
-import { authorizeUser, getSession } from "./auth.server";
+import { getSaksbehandler } from "./auth.server";
+import type { SessionWithOboProvider } from "@navikt/dp-auth";
+import { getPDLOboToken } from "~/utils/auth.utils.server";
+import { mockPerson } from "../../mock-data/mock-person";
+
+export interface IPerson {
+  ident: string;
+  forNavn: string;
+  mellomNavn: string | null;
+  etterNavn: string;
+  telefon: string;
+  kontaktadresse: VegadresseDetails;
+  bostedadresse: VegadresseDetails;
+  statsborgerskap: string;
+  utflyttingFraNorge?: Date;
+  antallBarn: number;
+}
 
 export type HentPersonResponsData = {
   hentPerson: {
@@ -61,17 +77,15 @@ export type VegadresseDetails = {
   postnummer: string;
 };
 
-export async function hentPDL(request: Request, ident: string) {
-  const session = await getSession(request);
-  const pdlAdresse = "https://pdl-api.dev-fss-pub.nais.io/graphql";
-  const saksbehandler = await authorizeUser(session);
+export async function mockHentPerson(): Promise<IPerson> {
+  return Promise.resolve(mockPerson);
+}
 
-  //todo: spør om tilgang for audience i prod
-  const token = await session.apiToken("api://dev-fss.pdl.pdl-api/.default");
+export async function hentPersonalia(session: SessionWithOboProvider, ident: string) {
+  const saksbehandler = await getSaksbehandler(session);
+  const onBehalfOfToken = await getPDLOboToken(session);
+  const pdlAdresse = "https://pdl-api.dev-fss-pub.nais.io/graphql";
 
-  if (!token || !saksbehandler) {
-    throw new Response("Unauthorized", { status: 401 });
-  }
   const personSpoerring = gql`
     query ($ident: ID!) {
       hentPerson(ident: $ident) {
@@ -119,7 +133,7 @@ export async function hentPDL(request: Request, ident: string) {
   const callId = uuidv4();
   const client = new GraphQLClient(pdlAdresse, {
     headers: {
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${onBehalfOfToken}`,
       "Nav-User-Id": saksbehandler.onPremisesSamAccountName,
       "Nav-Callid": callId,
       "Nav-Consumer-Id": "dp-saksbehandling-frontend",

app/root.tsx

@@ -14,7 +14,7 @@ import {
 import { createClient } from "@sanity/client";
 import { getEnv } from "~/utils/env.utils";
 import { RootErrorBoundaryView } from "./components/error-boundary/RootErrorBoundaryView";
-import { authorizeUser, getSession } from "./models/auth.server";
+import { getSaksbehandler, getSession } from "./models/auth.server";
 import { sanityConfig } from "./sanity/sanity.config";
 import { allTextsQuery } from "./sanity/sanity.query";
 import type { ISanityTexts } from "./sanity/sanity.types";
@@ -89,7 +89,7 @@ export interface IRootLoader {
 
 export async function loader({ request }: LoaderArgs) {
   const session = await getSession(request);
-  const saksbehandler = await authorizeUser(session);
+  const saksbehandler = await getSaksbehandler(session);
 
   const sanityTexts = await sanityClient.fetch<ISanityTexts>(allTextsQuery, {
     baseLang: "nb",

app/routes/saksbehandling.person.$oppgaveId.rediger-periode.$periodeId.tsx

@@ -176,7 +176,7 @@ export default function RedigerPeriode() {
                         type="button"
                         onClick={() => aapneModal(dag)}
                       >
-                        Rediger
+                        TRYK HER Rediger
                       </Button>
                     </Table.DataCell>
                   </Table.Row>

app/routes/saksbehandling.person.$oppgaveId.tsx

@@ -1,52 +1,63 @@
-import { json, type LoaderArgs } from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
 import invariant from "tiny-invariant";
 import { Navnestripe } from "~/components/brodsmuler/Navnestripe";
 import { hentOppgave } from "~/models/oppgave.server";
-import { hentPDL } from "~/models/pdl.server";
-import { type IPerson, mockHentPerson } from "~/models/person.server";
-import { logger, sikkerLogger } from "../../server/logger";
+import type { IPerson } from "~/models/pdl.server";
+import { hentPersonalia, mockHentPerson } from "~/models/pdl.server";
 import { getSession } from "~/models/auth.server";
+import { getEnv } from "~/utils/env.utils";
+import { Personalia } from "~/components/personalia/Personalia";
 
 export const shouldRevalidate = () => false;
+
 export async function loader({ request, params }: LoaderArgs) {
   invariant(params.oppgaveId, "Fant ikke oppgaveId");
   const session = await getSession(request);
   const oppgave = await hentOppgave(params.oppgaveId, session);
 
-  if (process.env.IS_LOCALHOST === "true") {
-    const person: IPerson = await mockHentPerson(oppgave.person);
-
-    return json({
-      fulltNavn: `${person.forNavn} ${person.etterNavn}`,
-      FNR: oppgave.person,
-    });
-  } else {
-    let data;
-    try {
-      const response = await hentPDL(request, oppgave.person);
-      data = {
-        fulltNavn: `${response.hentPerson?.navn[0].fornavn} ${response.hentPerson?.navn[0].etternavn}`,
-      };
-      sikkerLogger.info(`Sikkerlogg debug PDL kall: ${JSON.stringify(response)}`);
-    } catch (error: unknown) {
-      logger.warn(`Feil fra PDL, sjekk sikkerlogg`);
-      sikkerLogger.warn(`PDL kall feilet, error: ${error}`);
-      data = { errors: [`Feil ved henting av pdl.`], fulltNavn: `` };
-      if (error instanceof Error) {
-        data = { errors: [`Feil ved henting av pdl, debug: ${error.message}`], fulltNavn: `` };
-      }
+  if (getEnv("IS_LOCALHOST") === "true") {
+    const mockPerson = await mockHentPerson();
+    return json({ error: null, person: mockPerson });
+  }
+
+  try {
+    const { hentPerson } = await hentPersonalia(session, oppgave.person);
+    if (!hentPerson) {
+      return json({ error: "Klarte ikke hente personalia", person: null });
     }
-    return json({ ...data, FNR: oppgave.person });
+
+    const person: IPerson = {
+      ident: oppgave.person,
+      forNavn: hentPerson.navn[0].fornavn,
+      mellomNavn: hentPerson.navn[0].mellomnavn,
+      etterNavn: hentPerson.navn[0].etternavn,
+      telefon: hentPerson.telefonnummer[0].nummer,
+      kontaktadresse: hentPerson.kontaktadresse[0].vegadresse,
+      bostedadresse: hentPerson.bostedsadresse[0].vegadresse,
+      statsborgerskap: hentPerson.statsborgerskap[0].statsborgerskap,
+      utflyttingFraNorge: hentPerson.utflyttingFraNorge[0].utflyttingsdato,
+      antallBarn: 0,
+    };
+
+    return json({ person, error: null });
+  } catch (error: unknown) {
+    return json({ person: null, error: `Feil ved henting av personalia fra PDL` });
   }
 }
 
 export default function Person() {
-  const loaderData = useLoaderData<typeof loader>();
+  const { person, error } = useLoaderData<typeof loader>();
+  const fulltNavn = `${person?.forNavn} ${person?.mellomNavn ?? ""} ${person?.etterNavn}`;
 
   return (
     <>
-      {loaderData.fulltNavn && <Navnestripe navn={loaderData.fulltNavn} ident={loaderData.FNR} />}
+      {error && <div>{error}</div>}
+      {person && <Navnestripe navn={fulltNavn} ident={person.ident} />}
+
+      {/*TODO Finn ut av typefeil mellom typeof loader og IPerson */}
+      {person && <Personalia {...(person as IPerson)} />}
       <main>
         <Outlet />
       </main>

app/utils/auth.utils.server.ts

@@ -25,8 +25,7 @@ export async function getRapporteringOboToken(session: SessionWithOboProvider) {
     return process.env.DP_RAPPORTERING_TOKEN || fallbackToken;
   } else {
     const audience = `api://${process.env.NAIS_CLUSTER_NAME}.teamdagpenger.dp-rapportering/.default`;
-    const oboToken = await session.apiToken(audience);
-    return oboToken;
+    return await session.apiToken(audience);
   }
 }
 
@@ -35,8 +34,7 @@ export async function getBehandlingOboToken(session: SessionWithOboProvider) {
     return process.env.DP_BEHANDLING_TOKEN || fallbackToken;
   } else {
     const audience = `api://${process.env.NAIS_CLUSTER_NAME}.teamdagpenger.dp-behandling/.default`;
-    const oboToken = await session.apiToken(audience);
-    return oboToken;
+    return await session.apiToken(audience);
   }
 }
 
@@ -45,7 +43,12 @@ export async function getVedtakOboToken(session: SessionWithOboProvider) {
     return process.env.DP_VEDTAK_TOKEN || fallbackToken;
   } else {
     const audience = `api://${process.env.NAIS_CLUSTER_NAME}.teamdagpenger.dp-vedtak/.default`;
-    const oboToken = await session.apiToken(audience);
-    return oboToken;
+    return await session.apiToken(audience);
   }
 }
+
+export async function getPDLOboToken(session: SessionWithOboProvider) {
+  // TODO Bytt ut dev-fss med NAIS_CLUSTER_NAME?
+  const audience = `api://dev-fss.pdl.pdl-api/.default`;
+  return await session.apiToken(audience);
+}