Henter og viser kontoinformasjon (#1325)

* Henter og viser kontoinformasjon * Fikser riktig tekststørrelse på headingene * Justerer på luft mellom elementene * Tekst om kontonummer skal være paragrafer * Fjerner tekst vi ikke lenger bruker
navikt · Aug 21, 2024 · 5c92299 · 5c92299
1 parent ef5908c
commit 5c92299
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 2 deletions.
diff --git a/src/frontend/components/Kontoinformasjon/Kontoinformasjon.tsx b/src/frontend/components/Kontoinformasjon/Kontoinformasjon.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Alert, Heading, Label, Loader, VStack } from '@navikt/ds-react';
+import { RessursStatus } from '@navikt/familie-typer';
+
+import { useApp } from '../../context/AppContext';
+import { ESanitySteg, Typografi } from '../../typer/sanity/sanity';
+import TekstBlock from '../Felleskomponenter/Sanity/TekstBlock';
+
+const Kontoinformasjon: React.FC = () => {
+    const { kontoinformasjon, tekster, plainTekst } = useApp();
+
+    const kvitteringstekster = tekster()[ESanitySteg.KVITTERING];
+
+    return (
+        <VStack gap="6">
+            {kontoinformasjon.status === RessursStatus.SUKSESS && (
+                <>
+                    <Heading level="3" size="xsmall">
+                        {plainTekst(kvitteringstekster.kontonummerTittel)}
+                    </Heading>
+                    <Label as="p">{kontoinformasjon.data.kontonummer}</Label>
+                    <TekstBlock
+                        typografi={Typografi.BodyLong}
+                        block={kvitteringstekster.redigerKontonummerLenke}
+                    />
+                </>
+            )}
+
+            {kontoinformasjon.status === RessursStatus.HENTER && (
+                <>
+                    <Heading level="3" size="xsmall">
+                        {plainTekst(kvitteringstekster.kontonummerTittel)}
+                    </Heading>
+                    <Loader title={plainTekst(kvitteringstekster.henterKontonummer)} />
+                </>
+            )}
+
+            {kontoinformasjon.status === RessursStatus.FEILET && (
+                <>
+                    <Alert variant="warning">
+                        <TekstBlock block={kvitteringstekster.finnerIngenKontonummerAdvarsel} />
+                    </Alert>
+                    <Heading level="3" size="xsmall">
+                        {plainTekst(kvitteringstekster.manglerKontonummerTittel)}
+                    </Heading>
+                    <TekstBlock
+                        typografi={Typografi.BodyLong}
+                        block={kvitteringstekster.finnerIngenKontonummerBeskrivelse}
+                    />
+                </>
+            )}
+        </VStack>
+    );
+};
+
+export default Kontoinformasjon;
diff --git a/src/frontend/components/SøknadsSteg/Kvittering/Kvittering.tsx b/src/frontend/components/SøknadsSteg/Kvittering/Kvittering.tsx
@@ -6,6 +6,7 @@ import { Alert, BodyLong } from '@navikt/ds-react';
 import { RessursStatus } from '@navikt/familie-typer';
 
 import { useApp } from '../../../context/AppContext';
+import { useFeatureToggles } from '../../../context/FeatureToggleContext';
 import { useSteg } from '../../../context/StegContext';
 import { RouteEnum } from '../../../typer/routes';
 import { setUserProperty, UserProperty } from '../../../utils/amplitude';
@@ -15,6 +16,7 @@ import Informasjonsbolk from '../../Felleskomponenter/Informasjonsbolk/Informasj
 import KomponentGruppe from '../../Felleskomponenter/KomponentGruppe/KomponentGruppe';
 import SpråkTekst from '../../Felleskomponenter/SpråkTekst/SpråkTekst';
 import Steg from '../../Felleskomponenter/Steg/Steg';
+import Kontoinformasjon from '../../Kontoinformasjon/Kontoinformasjon';
 
 import { KontonummerInfo } from './KontonummerInfo';
 
@@ -28,6 +30,7 @@ const Kvittering: React.FC = () => {
     } = useApp();
     const { barnInkludertISøknaden, erEøs } = søknad;
     const { hentStegNummer } = useSteg();
+    const { toggles } = useFeatureToggles();
 
     const innsendtDato: Date =
         innsendingStatus.status === RessursStatus.SUKSESS
@@ -51,7 +54,7 @@ const Kvittering: React.FC = () => {
 
     return (
         <Steg tittel={<SpråkTekst id={'kvittering.sidetittel'} />}>
-            <KomponentGruppe>
+            <KomponentGruppe inline>
                 <Alert variant={'success'}>
                     <SpråkTekst
                         id={'kvittering.mottatt'}
@@ -84,7 +87,9 @@ const Kvittering: React.FC = () => {
                 </BodyLong>
             </KomponentGruppe>
 
-            {varEøsSøknad && (
+            {toggles.VIS_KONTONUMMER && <Kontoinformasjon />}
+
+            {!toggles.VIS_KONTONUMMER && varEøsSøknad && (
                 <KomponentGruppe>
                     <KontonummerInfo />
                 </KomponentGruppe>

diff --git a/src/frontend/components/SøknadsSteg/Kvittering/innholdTyper.ts b/src/frontend/components/SøknadsSteg/Kvittering/innholdTyper.ts
@@ -2,4 +2,10 @@ import { LocaleRecordBlock } from '../../../typer/sanity/sanity';
 
 export type IKvitteringTekstinnhold = {
     kvitteringTittel: LocaleRecordBlock;
+    manglerKontonummerTittel: LocaleRecordBlock;
+    kontonummerTittel: LocaleRecordBlock;
+    redigerKontonummerLenke: LocaleRecordBlock;
+    henterKontonummer: LocaleRecordBlock;
+    finnerIngenKontonummerAdvarsel: LocaleRecordBlock;
+    finnerIngenKontonummerBeskrivelse: LocaleRecordBlock;
 };
diff --git a/src/frontend/context/AppContext.ts b/src/frontend/context/AppContext.ts
@@ -5,15 +5,18 @@ import { Alpha3Code, getName } from 'i18n-iso-countries';
 import { useIntl } from 'react-intl';
 
 import {
+    byggFeiletRessurs,
     byggHenterRessurs,
     byggTomRessurs,
     hentDataFraRessurs,
+    Ressurs,
     RessursStatus,
 } from '@navikt/familie-typer';
 
 import Miljø, { basePath } from '../../shared-utils/Miljø';
 import { DinLivssituasjonSpørsmålId } from '../components/SøknadsSteg/DinLivssituasjon/spørsmål';
 import { LocaleType } from '../typer/common';
+import { IKontoinformasjon } from '../typer/kontoinformasjon';
 import { ESivilstand, ESøknadstype } from '../typer/kontrakt/generelle';
 import { IKvittering } from '../typer/kvittering';
 import { IMellomlagretBarnetrygd } from '../typer/mellomlager';
@@ -40,6 +43,7 @@ const [AppProvider, useApp] = createUseContext(() => {
     const { innloggetStatus } = useInnloggetContext();
     const [sluttbruker, settSluttbruker] = useState(byggTomRessurs<ISøkerRespons>());
     const [eøsLand, settEøsLand] = useState(byggTomRessurs<Map<Alpha3Code, string>>());
+    const [kontoinformasjon, settKontoinformasjon] = useState(byggTomRessurs<IKontoinformasjon>());
     const [søknad, settSøknad] = useState<ISøknad>(initialStateSøknad());
     const [innsendingStatus, settInnsendingStatus] = useState(byggTomRessurs<IKvittering>());
     const [sisteUtfylteStegIndex, settSisteUtfylteStegIndex] = useState<number>(-1);
@@ -87,6 +91,7 @@ const [AppProvider, useApp] = createUseContext(() => {
                 settSluttbruker(ressurs);
 
                 hentOgSettMellomlagretData();
+                hentOgSettKontoinformasjon();
                 ressurs.status === RessursStatus.SUKSESS &&
                     settSøknad({
                         ...søknad,
@@ -175,6 +180,21 @@ const [AppProvider, useApp] = createUseContext(() => {
         settMellomlagretVerdi(undefined);
     };
 
+    const hentOgSettKontoinformasjon = () => {
+        preferredAxios
+            .get(`${Miljø().soknadApiProxyUrl}/kontoregister/hent-kontonr`, {
+                withCredentials: true,
+            })
+            .then((response: { data?: Ressurs<IKontoinformasjon> }) => {
+                if (response.data) {
+                    settKontoinformasjon(response.data);
+                }
+            })
+            .catch(() => {
+                settKontoinformasjon(byggFeiletRessurs('Request mot kontoregisteret feilet'));
+            });
+    };
+
     const nullstillSøknadsobjekt = () => {
         const søker = søknad.søker;
         const initialSøknad = initialStateSøknad();
@@ -360,6 +380,7 @@ const [AppProvider, useApp] = createUseContext(() => {
         tekster,
         plainTekst,
         flettefeltTilTekst,
+        kontoinformasjon,
     };
 });
 

diff --git a/src/frontend/typer/feature-toggles.ts b/src/frontend/typer/feature-toggles.ts
@@ -6,12 +6,14 @@ export enum EFeatureToggle {
     // EKSEMPEL = 'EKSEMPEL',
     NYE_MODAL_TEKSTER = 'NYE_MODAL_TEKSTER',
     NYE_VEDLEGGSTEKSTER = 'NYE_VEDLEGGSTEKSTER',
+    VIS_KONTONUMMER = 'VIS_KONTONUMMER',
 }
 
 export const ToggleKeys: Record<EFeatureToggle, string> = {
     // [EFeatureToggle.EKSEMPEL]: 'familie-ba-soknad.eksempel',
     [EFeatureToggle.NYE_MODAL_TEKSTER]: 'familie-ba-soknad.nye-modal-tekster',
     [EFeatureToggle.NYE_VEDLEGGSTEKSTER]: 'familie-ba-soknad.nye-vedleggstekster',
+    [EFeatureToggle.VIS_KONTONUMMER]: 'familie-ba-soknad.vis-kontonummer',
 };
 
 export type EAllFeatureToggles = Record<EFeatureToggle, boolean>;

diff --git a/src/frontend/typer/kontoinformasjon.ts b/src/frontend/typer/kontoinformasjon.ts
@@ -0,0 +1,3 @@
+export interface IKontoinformasjon {
+    kontonummer: string;
+}