Lag optimistic response på bostøtte-spørring

Forhindrer forhåpentligvis at folk spammer en radioknapp?
navikt · Feb 7, 2025 · 5e86836 · 5e86836
1 parent bfc6cd5
commit 5e86836
Show file tree

Hide file tree

Showing 8 changed files with 1,384 additions and 724 deletions.
diff --git a/soknad-api-new.json b/soknad-api-new.json
diff --git a/soknad-api-old.json b/soknad-api-old.json
diff --git a/src/lib/hooks/data/useInntekterBostotte.tsx b/src/lib/hooks/data/useInntekterBostotte.tsx
@@ -1,46 +1,54 @@
+import {useGetBostotte, useUpdateBostotte} from "../../../generated/new/bostotte-controller/bostotte-controller";
 import {useBehandlingsId} from "../common/useBehandlingsId";
-import {updateBostotte, updateSamtykke1, useHentBostotte} from "../../../generated/bostotte-ressurs/bostotte-ressurs";
 import {useQueryClient} from "@tanstack/react-query";
 
-export const useInntekterBostotte = (skipFirstStep?: boolean) => {
+export const useInntekterBostotte = () => {
     const behandlingsId = useBehandlingsId();
     const queryClient = useQueryClient();
-    const {data: bostotte, queryKey} = useHentBostotte(behandlingsId);
+    const {data: bostotte, queryKey, isPending} = useGetBostotte(behandlingsId);
+    const {
+        mutate,
+        isPending: isUpdatePending,
+        variables,
+    } = useUpdateBostotte({
+        mutation: {
+            onSettled: () => queryClient.invalidateQueries({queryKey}),
+        },
+    });
 
-    const isLoading = false;
     const setSamtykke = async (nyttHarSamtykke: boolean) => {
         if (!bostotte) return;
         // FIXME: Replace with contentful PUT
-        await updateSamtykke1(behandlingsId, nyttHarSamtykke);
+        mutate({soknadId: behandlingsId, data: {hasSamtykke: nyttHarSamtykke}});
         await queryClient.invalidateQueries({queryKey});
     };
 
     const setBekreftelse = async (harInntektHusbanken: boolean) => {
-        if (!bostotte) return;
-
-        const samtykke = skipFirstStep ? undefined : harInntektHusbanken ? bostotte.samtykke : false;
-        const oppdatert = {
-            ...bostotte,
-            bekreftelse: harInntektHusbanken,
-            samtykke,
-        };
-
-        if (!harInntektHusbanken) await updateSamtykke1(behandlingsId, false);
+        mutate({soknadId: behandlingsId, data: {hasBostotte: harInntektHusbanken}});
+    };
 
-        await updateBostotte(behandlingsId, oppdatert);
-        await queryClient.invalidateQueries({queryKey});
+    const setBostotte = async (harBekreftelse: boolean, harSamtykke?: boolean) => {
+        mutate({soknadId: behandlingsId, data: {hasBostotte: harBekreftelse, hasSamtykke: harSamtykke}});
     };
-    if (skipFirstStep) {
-        setBekreftelse(true);
-    }
 
-    const bekreftelse = bostotte?.bekreftelse;
+    const bekreftelse = bostotte?.hasBostotte;
 
     // Tidspunkt for mottatt samtykke ellers false
     const tidSamtykkeMottatt =
-        !!bostotte?.samtykke && !!bostotte?.samtykkeTidspunkt && new Date(bostotte.samtykkeTidspunkt);
-
-    const dataHentet = !!bostotte?.samtykke; //&& !bostotte?.stotteFraHusbankenFeilet;
-
-    return {bostotte, bekreftelse, tidSamtykkeMottatt, dataHentet, setSamtykke, setBekreftelse, isLoading};
+        !!bostotte?.hasSamtykke && !!bostotte?.samtykkeTidspunkt && new Date(bostotte.samtykkeTidspunkt);
+
+    const dataHentet = !!bostotte?.hasSamtykke; //&& !bostotte?.stotteFraHusbankenFeilet;
+
+    return {
+        bostotte,
+        bekreftelse,
+        tidSamtykkeMottatt,
+        dataHentet,
+        setSamtykke,
+        setBekreftelse,
+        isUpdatePending,
+        isQueryPending: isPending,
+        setBostotte,
+        variables,
+    };
 };
diff --git a/src/sider/06-inntektFormue/bostotte/Bostotte.tsx b/src/sider/06-inntektFormue/bostotte/Bostotte.tsx
@@ -27,7 +27,8 @@ interface Props {
 
 export const Bostotte = ({hideHeading, skipFirstStep, hideSamtykkeDescription}: Props) => {
     const {t} = useTranslation("skjema");
-    const {bekreftelse, dataHentet, bostotte, setBekreftelse, setSamtykke} = useInntekterBostotte(skipFirstStep);
+    const {bekreftelse, dataHentet, bostotte, setBekreftelse, setSamtykke, setBostotte, variables, isUpdatePending} =
+        useInntekterBostotte();
 
     return (
         <div className={"space-y-4"}>
@@ -40,20 +41,26 @@ export const Bostotte = ({hideHeading, skipFirstStep, hideSamtykkeDescription}:
                 <YesNoInput
                     name={"bostotte-bekreftelse"}
                     legend={t("inntekt.bostotte.sporsmal.sporsmal")}
-                    value={bekreftelse}
+                    value={isUpdatePending ? variables?.data.hasBostotte : bekreftelse}
                     onChange={(checked) => setBekreftelse(checked)}
                     trueLabel={t("avbryt.ja")}
                     falseLabel={t("avbryt.nei")}
                 />
             )}
-            {bekreftelse && (
+            {(bekreftelse || skipFirstStep) && (
                 <>
                     <YesNoInput
                         name={"bostotte-samtykke"}
                         legend={t("inntekt.bostotte.gi_samtykke.overskrift")}
                         description={!hideSamtykkeDescription && t("inntekt.bostotte.gi_samtykke.tekst")}
-                        onChange={setSamtykke}
-                        value={bostotte?.samtykke}
+                        onChange={(value) => {
+                            if (skipFirstStep) {
+                                setBostotte(true, value);
+                            } else {
+                                setSamtykke(value);
+                            }
+                        }}
+                        value={isUpdatePending ? variables?.data.hasSamtykke : bostotte?.hasSamtykke}
                         trueLabel={t("inntekt.bostotte.gi_samtykke.ja")}
                         falseLabel={t("inntekt.bostotte.gi_samtykke.nei")}
                     />

diff --git a/src/sider/06-inntektFormue/bostotte/BostotteDataVisning.tsx b/src/sider/06-inntektFormue/bostotte/BostotteDataVisning.tsx
@@ -1,13 +1,13 @@
-import {BostotteFrontend} from "../../../generated/model";
 import {useTranslation} from "react-i18next";
 import {HusbankenUtbetalinger} from "./HusbankenUtbetalinger";
 import {Heading, Link} from "@navikt/ds-react";
 import {HusbankenSaker, MonkeypatchedJsonBostotteSak} from "./HusbankenSaker";
 import * as React from "react";
+import {BostotteDto} from "../../../generated/new/model";
 
-export const BostotteDataVisning = ({bostotte}: {bostotte: BostotteFrontend}) => {
+export const BostotteDataVisning = ({bostotte}: {bostotte: BostotteDto}) => {
     const {t} = useTranslation("skjema");
-    if (bostotte.samtykkeTidspunkt && bostotte.stotteFraHusbankenFeilet) throw new Error("Feil ved nedlasting av data");
+    if (bostotte.samtykkeTidspunkt && bostotte.fetchHusbankenFeilet) throw new Error("Feil ved nedlasting av data");
 
     return (
         <div className={"bg-lightblue-50 border-l-[var(--a-surface-info)] p-4 space-y-4 rounded-md"}>

diff --git a/src/sider/06-inntektFormue/bostotte/HusbankenUtbetalinger.tsx b/src/sider/06-inntektFormue/bostotte/HusbankenUtbetalinger.tsx
@@ -3,18 +3,18 @@ import {BodyShort, Table} from "@navikt/ds-react";
 import {LocalizedDate} from "../../../lib/components/LocalizedDate";
 import {LocalizedCurrency} from "../../../lib/components/LocalizedCurrency";
 import * as React from "react";
-import {JsonOkonomiOpplysningUtbetaling} from "../../../generated/model";
+import {UtbetalingBostotteDto, UtbetalingBostotteDtoMottaker} from "../../../generated/new/model";
 
 // FIXME: Should not initialize with empty list; empty list should be returned from API
-export const HusbankenUtbetalinger = ({utbetalinger}: {utbetalinger?: JsonOkonomiOpplysningUtbetaling[]}) => {
+export const HusbankenUtbetalinger = ({utbetalinger}: {utbetalinger?: UtbetalingBostotteDto[]}) => {
     const {t} = useTranslation("skjema");
 
     if (!utbetalinger) return null;
     if (!utbetalinger.length) return <BodyShort>{t("inntekt.bostotte.husbanken.ingenutbetalingerfunnet")}</BodyShort>;
 
-    const getMottakerText = (mottaker: JsonOkonomiOpplysningUtbetaling["mottaker"]) => {
-        if (mottaker === "Husstand") return "inntekt.bostotte.husbanken.mottaker.husstand";
-        if (mottaker === "Kommune") return "inntekt.bostotte.husbanken.mottaker.kommune";
+    const getMottakerText = (mottaker: UtbetalingBostotteDto["mottaker"]) => {
+        if (mottaker === UtbetalingBostotteDtoMottaker.HUSSTAND) return "inntekt.bostotte.husbanken.mottaker.husstand";
+        if (mottaker === UtbetalingBostotteDtoMottaker.KOMMUNE) return "inntekt.bostotte.husbanken.mottaker.kommune";
         throw new Error(`Ukjent mottaker: ${mottaker}`);
     };
 

diff --git a/src/sider/07-utgifterGjeld/Boutgifter.tsx b/src/sider/07-utgifterGjeld/Boutgifter.tsx
@@ -22,8 +22,8 @@ export const Boutgifter = () => {
         );
         const leieBosituasjon = bosituasjon?.botype === "leier" || bosituasjon?.botype === "kommunal";
 
-        const bostotteIkkeBesvart = !bostotte?.bekreftelse && !bostotte?.samtykke;
-        const bostotteBesvartJaDeretterNei = bostotte?.bekreftelse && !bostotte?.samtykke;
+        const bostotteIkkeBesvart = !bostotte?.hasBostotte && !bostotte?.hasSamtykke;
+        const bostotteBesvartJaDeretterNei = bostotte?.hasBostotte && !bostotte?.hasSamtykke;
 
         const harUtgiftHusleie = Object.values(filteredBoutgifter).some((value) => value === true);
 

diff --git a/src/sider/09-oppsummering/question/FormattedText.tsx b/src/sider/09-oppsummering/question/FormattedText.tsx
@@ -1,4 +1,3 @@
-import {BodyShort} from "@navikt/ds-react";
 import {formatTidspunkt} from "../../../lib/utils";
 import {SvarType} from "../../../generated/model";
 import {LocalizedDate} from "../../../lib/components/LocalizedDate";
@@ -39,9 +38,9 @@ export const FormattedText = ({
     const {tBackend} = useBackendTranslation();
 
     return (
-        <BodyShort>
+        <div>
             {labelBackendKey && <span className={"pr-1 after:content-[':']"}>{tBackend(labelBackendKey)}</span>}
             <FormatAsType type={type}>{value}</FormatAsType>
-        </BodyShort>
+        </div>
     );
 };