Bytter vedleggstekster til å ta i bruk Sanity (#1345)

* Legger til VedleggOppsummering komponent

* Endrer props og hvordan vedlegg skal vises i VedleggOppsummering

* Legger til VedleggOppsummering i steg

* Bytter fra bruk av VedleggNotis til VedleggOppsummering

* Legger til tekster for VedleggOppsummering

* Fjerner duMaaLeggeVed og lastOppSenere

* Legger til 'lastOppSenereISoknad' tekst i VedleggOppsummering

* Fjerner vedleggnotis som prop for PeriodeOppsummering

* Fjerner toggle for NYE_VEDLEGGSTEKSTER

* Legger til flettefeltVerider på VedleggOppsummering

* Bytter Informasjonsbolk til å være self-closing ettersom den ikke lengre har children

* Rettskriver Verider til Verdier

* Bytter VedleggOppsummering til å ta i bruk Sanity tekster

* Legger til støtte for å hente tekster fra Sanity for vedlegg

* Fjerner flettefeltVerider for barnetsNavn

* Fikser LastOppVedlegg tester

* Legger til tilRestLocaleRecord i useAppMock

* Fikser feil i konverteringTillSøknadnKontrakt.test.ts ved å fjerne expect output fra testene ettersom tekster nå hentes fra Sanity

* Fjerner utkommenterte tekstsammenligninger

Author: ole-kristian-rudjord

src/frontend/components/Felleskomponenter/VedleggOppsummering.tsx

@@ -3,12 +3,10 @@ import React, { FC } from 'react';
 import { Alert, List } from '@navikt/ds-react';
 
 import { useApp } from '../../context/AppContext';
-import { dokumentasjonsbehovTilSpråkId } from '../../typer/dokumentasjon';
+import { dokumentasjonsbehovTilTittelSanityApiNavn } from '../../typer/dokumentasjon';
 import { Dokumentasjonsbehov } from '../../typer/kontrakt/dokumentasjon';
 import { FlettefeltVerdier } from '../../typer/sanity/sanity';
 
-import SpråkTekst from './SpråkTekst/SpråkTekst';
-
 interface IVedleggOppsummeringProps {
     vedlegg: {
         skalVises: boolean;
@@ -32,10 +30,14 @@ export const VedleggOppsummering: FC<IVedleggOppsummeringProps> = ({ vedlegg })
                     <List>
                         {vedleggSomSkalVises.map((vedlegg, index) => (
                             <List.Item key={index}>
-                                <SpråkTekst
-                                    id={dokumentasjonsbehovTilSpråkId(vedlegg.dokumentasjonsbehov)}
-                                    values={{ barn: vedlegg.flettefeltVerdier?.barnetsNavn }}
-                                />
+                                {plainTekst(
+                                    dokumentasjonTekster[
+                                        dokumentasjonsbehovTilTittelSanityApiNavn(
+                                            vedlegg.dokumentasjonsbehov
+                                        )
+                                    ],
+                                    vedlegg.flettefeltVerdier
+                                )}
                             </List.Item>
                         ))}
                     </List>

src/frontend/components/SøknadsSteg/Dokumentasjon/LastOppVedlegg.test.tsx

@@ -25,10 +25,6 @@ const hentAnnenDokumentasjon = (): IDokumentasjon => {
     return dokumentasjon;
 };
 
-// Fra initialState generator
-const tittelSpråkId = 'dokumentasjon.annendokumentasjon.vedleggtittel';
-const beskrivelseSpråkId = 'dokumentasjon.annendokumentasjon.utvidet.informasjon';
-
 describe('LastOppVedlegg', () => {
     beforeEach(() => {
         silenceConsoleErrors();
@@ -41,7 +37,7 @@ describe('LastOppVedlegg', () => {
         const dokumentasjon = hentAnnenDokumentasjon();
         const oppdaterDokumentasjon = jest.fn();
 
-        const { getByText, queryByText } = render(
+        const { getByTestId, queryByTestId } = render(
             <TestProvidere>
                 <LastOppVedlegg
                     dokumentasjon={dokumentasjon}
@@ -51,12 +47,9 @@ describe('LastOppVedlegg', () => {
             </TestProvidere>
         );
 
-        const tittel = getByText(tittelSpråkId);
-        expect(tittel).toBeInTheDocument();
-        const infoTekst: HTMLElement | null = queryByText(beskrivelseSpråkId);
-        expect(infoTekst).toBeNull();
-        const checkBoxTitle: HTMLElement | null = queryByText('dokumentasjon.har-sendt-inn.spm');
-        expect(checkBoxTitle).toBeNull();
+        expect(queryByTestId('dokumentasjon-er-sendt-inn-checkboks')).not.toBeInTheDocument();
+        expect(queryByTestId('dokumentasjonsbeskrivelse')).not.toBeInTheDocument();
+        expect(getByTestId('dokumentopplaster')).toBeInTheDocument();
     });
 
     it('Viser info-tekst og checkbox knapp for ANNEN_DOKUMENTASJON når utvidet og skilt', () => {
@@ -76,7 +69,7 @@ describe('LastOppVedlegg', () => {
             const dokumentasjon = hentAnnenDokumentasjon();
             const oppdaterDokumentasjon = jest.fn();
 
-            const { getByText, queryByText } = render(
+            const { getByTestId, queryByTestId } = render(
                 <TestProvidere>
                     <LastOppVedlegg
                         dokumentasjon={dokumentasjon}
@@ -86,14 +79,9 @@ describe('LastOppVedlegg', () => {
                 </TestProvidere>
             );
 
-            const tittel = getByText(tittelSpråkId);
-            expect(tittel).toBeInTheDocument();
-            const infoTekst: HTMLElement | null = queryByText(beskrivelseSpråkId);
-            expect(infoTekst).not.toBeNull();
-            const checkBoxTitle: HTMLElement | null = queryByText(
-                'dokumentasjon.har-sendt-inn.spm'
-            );
-            expect(checkBoxTitle).toBeNull();
+            expect(queryByTestId('dokumentasjon-er-sendt-inn-checkboks')).not.toBeInTheDocument();
+            expect(queryByTestId('dokumentasjonsbeskrivelse')).not.toBeInTheDocument();
+            expect(getByTestId('dokumentopplaster')).toBeInTheDocument();
         });
     });
 });

src/frontend/components/SøknadsSteg/Dokumentasjon/LastOppVedlegg.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
 
-import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
 import { Checkbox, Heading } from '@navikt/ds-react';
 
 import { useApp } from '../../../context/AppContext';
-import { EFiltyper, IDokumentasjon, IVedlegg } from '../../../typer/dokumentasjon';
+import {
+    dokumentasjonsbehovTilBeskrivelseSanityApiNavn,
+    dokumentasjonsbehovTilTittelSanityApiNavn,
+    EFiltyper,
+    IDokumentasjon,
+    IVedlegg,
+} from '../../../typer/dokumentasjon';
 import { Dokumentasjonsbehov } from '../../../typer/kontrakt/dokumentasjon';
 import { ESivilstand, ESøknadstype } from '../../../typer/kontrakt/generelle';
-import EksternLenke from '../../Felleskomponenter/EksternLenke/EksternLenke';
-import SpråkTekst from '../../Felleskomponenter/SpråkTekst/SpråkTekst';
+import { Typografi } from '../../../typer/sanity/sanity';
+import { slåSammen } from '../../../utils/slåSammen';
+import TekstBlock from '../../Felleskomponenter/Sanity/TekstBlock';
 
 import Filopplaster from './filopplaster/Filopplaster';
 
@@ -29,30 +35,18 @@ const Container = styled.div`
 `;
 
 const LastOppVedlegg: React.FC<Props> = ({ dokumentasjon, vedleggNr, oppdaterDokumentasjon }) => {
-    const { søknad } = useApp();
-    const intl = useIntl();
+    const { søknad, tekster, plainTekst } = useApp();
+    const dokumentasjonstekster = tekster().DOKUMENTASJON;
     const settHarSendtInnTidligere = (event: React.ChangeEvent<HTMLInputElement>) => {
         const huketAv = event.target.checked;
         const vedlegg = huketAv ? [] : dokumentasjon.opplastedeVedlegg;
         oppdaterDokumentasjon(dokumentasjon.dokumentasjonsbehov, vedlegg, huketAv);
     };
 
-    const formatertListeMedBarn = () => {
-        const barnDokGjelderFor = søknad.barnInkludertISøknaden.filter(barn =>
-            dokumentasjon.gjelderForBarnId.find(id => id === barn.id)
-        );
-
-        return barnDokGjelderFor.map((barn, index) => {
-            const visningsNavn = barn.navn;
-            if (index === 0) {
-                return visningsNavn;
-            } else {
-                return index === barnDokGjelderFor.length - 1
-                    ? ` ${intl.formatMessage({ id: 'felles.og' })} ${visningsNavn}`
-                    : `, ${visningsNavn}`;
-            }
-        });
-    };
+    const barnDokGjelderFor = søknad.barnInkludertISøknaden.filter(barn =>
+        dokumentasjon.gjelderForBarnId.find(id => id === barn.id)
+    );
+    const barnasNavn = slåSammen(barnDokGjelderFor.map(barn => barn.navn));
 
     const antallVedlegg = () => {
         const dokSomKrevesForBarn = søknad.dokumentasjon.filter(dok => dok.gjelderForBarnId.length);
@@ -81,9 +75,10 @@ const LastOppVedlegg: React.FC<Props> = ({ dokumentasjon, vedleggNr, oppdaterDok
         return antallVedlegg;
     };
 
-    const dokTittel = (
-        <SpråkTekst id={dokumentasjon.tittelSpråkId} values={{ barn: formatertListeMedBarn() }} />
-    );
+    const tittelBlock =
+        dokumentasjonstekster[
+            dokumentasjonsbehovTilTittelSanityApiNavn(dokumentasjon.dokumentasjonsbehov)
+        ];
 
     const skalViseDokumentasjonsBeskrivelse = () => {
         return (
@@ -93,61 +88,58 @@ const LastOppVedlegg: React.FC<Props> = ({ dokumentasjon, vedleggNr, oppdaterDok
         );
     };
 
+    const dokumentasjonsbeskrivelse = dokumentasjonsbehovTilBeskrivelseSanityApiNavn(
+        dokumentasjon.dokumentasjonsbehov
+    );
+
+    const vedleggXAvY = plainTekst(dokumentasjonstekster.vedleggXavY, {
+        antall: vedleggNr.toString(),
+        totalAntall: antallVedlegg().toString(),
+    });
+    const vedleggtittel =
+        (dokumentasjon.dokumentasjonsbehov !== Dokumentasjonsbehov.ANNEN_DOKUMENTASJON
+            ? vedleggXAvY
+            : '') +
+        ' ' +
+        plainTekst(tittelBlock, { barnetsNavn: barnasNavn });
+
     return (
         <Container>
             <Heading level={'3'} size={'small'}>
-                {dokumentasjon.dokumentasjonsbehov !== Dokumentasjonsbehov.ANNEN_DOKUMENTASJON && (
-                    <>
-                        <SpråkTekst
-                            id={'dokumentasjon.vedleggsnummer'}
-                            values={{
-                                vedleggsnummer: vedleggNr,
-                                antallvedlegg: antallVedlegg(),
-                            }}
-                        />
-                        &nbsp;
-                    </>
-                )}
-                {dokTittel}
+                {vedleggtittel}
             </Heading>
-            {dokumentasjon.beskrivelseSpråkId && skalViseDokumentasjonsBeskrivelse() && (
-                <>
-                    <SpråkTekst
-                        id={dokumentasjon.beskrivelseSpråkId}
-                        values={{
-                            barn: formatertListeMedBarn(),
-                            meklingsattestLenke: (
-                                <EksternLenke
-                                    lenkeSpråkId={'dokumentasjon.meklingsattest.lenke'}
-                                    lenkeTekstSpråkId={'dokumentasjon.meklingsattest.lenketekst'}
-                                    target="_blank"
-                                />
-                            ),
-                        }}
-                    />
-                </>
+            {dokumentasjonsbeskrivelse && skalViseDokumentasjonsBeskrivelse() && (
+                <TekstBlock
+                    data-testid={'dokumentasjonsbeskrivelse'}
+                    block={dokumentasjonstekster[dokumentasjonsbeskrivelse]}
+                    flettefelter={{ barnetsNavn: barnasNavn }}
+                    typografi={Typografi.BodyLong}
+                />
             )}
             {!dokumentasjon.harSendtInn && (
-                <Filopplaster
-                    oppdaterDokumentasjon={oppdaterDokumentasjon}
-                    dokumentasjon={dokumentasjon}
-                    maxFilstørrelse={1024 * 1024 * 10}
-                    tillatteFiltyper={{
-                        'image/*': [EFiltyper.PNG, EFiltyper.JPG, EFiltyper.JPEG],
-                        'application/pdf': [EFiltyper.PDF],
-                    }}
-                />
+                <div data-testid={'dokumentopplaster'}>
+                    <Filopplaster
+                        oppdaterDokumentasjon={oppdaterDokumentasjon}
+                        dokumentasjon={dokumentasjon}
+                        maxFilstørrelse={1024 * 1024 * 10}
+                        tillatteFiltyper={{
+                            'image/*': [EFiltyper.PNG, EFiltyper.JPG, EFiltyper.JPEG],
+                            'application/pdf': [EFiltyper.PDF],
+                        }}
+                    />
+                </div>
             )}
             <br />
             {dokumentasjon.dokumentasjonsbehov !== Dokumentasjonsbehov.ANNEN_DOKUMENTASJON && (
                 <Checkbox
-                    aria-label={`${intl.formatMessage({
-                        id: 'dokumentasjon.har-sendt-inn.spm',
-                    })} (${dokTittel})`}
+                    data-testid={'dokumentasjon-er-sendt-inn-checkboks'}
+                    aria-label={`${plainTekst(
+                        dokumentasjonstekster.sendtInnTidligere
+                    )} (${plainTekst(tittelBlock, { barnetsNavn: barnasNavn })})`}
                     checked={dokumentasjon.harSendtInn}
                     onChange={settHarSendtInnTidligere}
                 >
-                    <SpråkTekst id={'dokumentasjon.har-sendt-inn.spm'} />
+                    {plainTekst(dokumentasjonstekster.sendtInnTidligere)}
                 </Checkbox>
             )}
         </Container>

src/frontend/components/SøknadsSteg/Dokumentasjon/innholdTyper.ts

@@ -1,9 +1,20 @@
-import { BeskrivelseSanityApiNavn } from '../../../typer/dokumentasjon';
+import { BeskrivelseSanityApiNavn, TittelSanityApiNavn } from '../../../typer/dokumentasjon';
 import { LocaleRecordBlock } from '../../../typer/sanity/sanity';
 
 export type IDokumentasjonTekstinnhold = {
     dokumentasjonTittel: LocaleRecordBlock;
     dokumentasjonGuide: LocaleRecordBlock;
+    sendtInnTidligere: LocaleRecordBlock;
+    vedleggXavY: LocaleRecordBlock;
+} & {
+    [TittelSanityApiNavn.bekreftelsePaaAdopsjonTittel]: LocaleRecordBlock;
+    [TittelSanityApiNavn.annenDokumentasjon]: LocaleRecordBlock;
+    [TittelSanityApiNavn.avtaleOmDeltBostedTittel]: LocaleRecordBlock;
+    [TittelSanityApiNavn.bekreftelseFraBarnevernetTittel]: LocaleRecordBlock;
+    [TittelSanityApiNavn.bekreftelsePaaAtBarnBorSammenMedDegTittel]: LocaleRecordBlock;
+    [TittelSanityApiNavn.meklingsattestTittel]: LocaleRecordBlock;
+    [TittelSanityApiNavn.dokumentasjonPaaSeparasjonSkilsmisseEllerDoedsfallTittel]: LocaleRecordBlock;
+    [TittelSanityApiNavn.vedtakOmOppholdstillatelseTittel]: LocaleRecordBlock;
 } & {
     [BeskrivelseSanityApiNavn.dokumentasjonPaaSeparasjonSkilsmisseEllerDoedsfall]: LocaleRecordBlock;
     [BeskrivelseSanityApiNavn.vedtakOmOppholdstillatelse]: LocaleRecordBlock;

src/frontend/components/SøknadsSteg/OmBarnet/OmBarnet.tsx

@@ -196,7 +196,6 @@ const OmBarnet: React.FC<{ barnetsId: BarnetsId }> = ({ barnetsId }) => {
                     {
                         skalVises: skjema.felter.skriftligAvtaleOmDeltBosted.verdi === ESvar.JA,
                         dokumentasjonsbehov: Dokumentasjonsbehov.AVTALE_DELT_BOSTED,
-                        flettefeltVerdier: { barnetsNavn: barn.navn },
                     },
                     {
                         skalVises: skjema.felter.borMedAndreForelderCheckbox.erSynlig,

src/frontend/context/AppContext.ts

@@ -17,17 +17,12 @@ 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 { ESivilstand, ESøknadstype, TilRestLocaleRecord } from '../typer/kontrakt/generelle';
 import { IKvittering } from '../typer/kvittering';
 import { IMellomlagretBarnetrygd } from '../typer/mellomlager';
 import { ISøkerRespons } from '../typer/person';
 import { RouteEnum } from '../typer/routes';
-import {
-    ESanityFlettefeltverdi,
-    ESanitySteg,
-    FlettefeltVerdier,
-    TilRestLocaleRecord,
-} from '../typer/sanity/sanity';
+import { ESanityFlettefeltverdi, ESanitySteg, FlettefeltVerdier } from '../typer/sanity/sanity';
 import { ITekstinnhold } from '../typer/sanity/tekstInnhold';
 import { initialStateSøknad, ISøknad } from '../typer/søknad';
 import { InnloggetStatus } from '../utils/autentisering';

src/frontend/hooks/useSendInnSkjema.tsx

@@ -14,10 +14,16 @@ import { sendInn } from '../utils/sendInnSkjema';
 export const useSendInnSkjema = (): {
     sendInnSkjema: () => Promise<[boolean, ISøknadKontrakt]>;
 } => {
-    const { axiosRequest, søknad, settInnsendingStatus, settSisteModellVersjon } = useApp();
+    const {
+        axiosRequest,
+        søknad,
+        settInnsendingStatus,
+        settSisteModellVersjon,
+        tekster,
+        tilRestLocaleRecord,
+    } = useApp();
     const { soknadApiProxyUrl } = Miljø();
     const { valgtLocale } = useSpråk();
-    const { tekster, tilRestLocaleRecord } = useApp();
     const { toggles } = useFeatureToggles();
 
     const sendInnSkjema = async (): Promise<[boolean, ISøknadKontrakt]> => {