Legger til Sanity tekster i modal (#1407)

* Bytter til bruk av Sanity-tekster i modal (wip) * Endrer bruk av PersonType * Fjerner console.log * Fikser modal-tester * Update src/frontend/components/SøknadsSteg/VelgBarn/LeggTilBarn/LeggTilBarnModal.tsx Co-authored-by: Thomas Alm <[email protected]> * Legger til leggTilKnapp i teksterForModal deconstructor --------- Co-authored-by: Thomas Alm <[email protected]>
navikt · Nov 19, 2024 · b679f74 · b679f74
1 parent ec7ecb4
commit b679f74
Show file tree

Hide file tree

Showing 21 changed files with 100 additions and 42 deletions.
diff --git a/src/frontend/components/Felleskomponenter/Arbeidsperiode/ArbeidsperiodeModal.tsx b/src/frontend/components/Felleskomponenter/Arbeidsperiode/ArbeidsperiodeModal.tsx
@@ -2,15 +2,18 @@ import React from 'react';
 
 import { ESvar } from '@navikt/familie-form-elements';
 
+import { useApp } from '../../../context/AppContext';
 import { IArbeidsperiode } from '../../../typer/perioder';
 import { PersonType } from '../../../typer/personType';
+import { IArbeidsperiodeTekstinnhold } from '../../../typer/sanity/modaler/arbeidsperiode';
 import { dagensDato, gårsdagensDato } from '../../../utils/dato';
 import { trimWhiteSpace, visFeiloppsummering } from '../../../utils/hjelpefunksjoner';
 import { minTilDatoForUtbetalingEllerArbeidsperiode } from '../../../utils/perioder';
 import { svarForSpørsmålMedUkjent } from '../../../utils/spørsmål';
 import Datovelger from '../Datovelger/Datovelger';
 import { LandDropdown } from '../Dropdowns/LandDropdown';
 import JaNeiSpm from '../JaNeiSpm/JaNeiSpm';
+import TekstBlock from '../Sanity/TekstBlock';
 import { SkjemaCheckbox } from '../SkjemaCheckbox/SkjemaCheckbox';
 import { SkjemaFeiloppsummering } from '../SkjemaFeiloppsummering/SkjemaFeiloppsummering';
 import { SkjemaFeltInput } from '../SkjemaFeltInput/SkjemaFeltInput';
@@ -38,9 +41,13 @@ export const ArbeidsperiodeModal: React.FC<ArbeidsperiodeModalProps> = ({
     erDød = false,
     forklaring = undefined,
 }) => {
+    const { tekster } = useApp();
     const { skjema, valideringErOk, nullstillSkjema, validerFelterOgVisFeilmelding } =
         useArbeidsperiodeSkjema(gjelderUtlandet, personType, erDød);
 
+    const teksterForModal: IArbeidsperiodeTekstinnhold =
+        tekster().FELLES.modaler.arbeidsperiode[personType];
+
     const {
         arbeidsperiodeAvsluttet,
         arbeidsperiodeLand,
@@ -85,10 +92,6 @@ export const ArbeidsperiodeModal: React.FC<ArbeidsperiodeModalProps> = ({
         nullstillSkjema();
     };
 
-    const modalTittel = gjelderUtlandet
-        ? 'felles.flerearbeidsperioderutland.tittel'
-        : 'felles.flerearbeidsperiodernorge.tittel';
-
     const periodenErAvsluttet =
         arbeidsperiodeAvsluttet.verdi === ESvar.JA ||
         (personType === PersonType.AndreForelder && erDød);
@@ -98,10 +101,11 @@ export const ArbeidsperiodeModal: React.FC<ArbeidsperiodeModalProps> = ({
     return (
         <SkjemaModal
             erÅpen={erÅpen}
-            modalTittelSpråkId={modalTittel}
+            tittel={teksterForModal.tittel}
+            flettefelter={{ gjelderUtland: gjelderUtlandet }}
             forklaring={forklaring}
             onSubmitCallback={onLeggTil}
-            submitKnappSpråkId={'felles.leggtilarbeidsperiode.knapp'}
+            submitKnappTekst={<TekstBlock block={teksterForModal.leggTilKnapp} />}
             lukkModal={lukkModal}
             valideringErOk={valideringErOk}
             onAvbrytCallback={nullstillSkjema}

diff --git a/src/frontend/components/Felleskomponenter/Barnetrygdperiode/BarnetrygdperiodeModal.tsx b/src/frontend/components/Felleskomponenter/Barnetrygdperiode/BarnetrygdperiodeModal.tsx
@@ -3,13 +3,16 @@ import React from 'react';
 import { Alert } from '@navikt/ds-react';
 import { ESvar } from '@navikt/familie-form-elements';
 
+import { useApp } from '../../../context/AppContext';
 import { IEøsBarnetrygdsperiode } from '../../../typer/perioder';
 import { PersonType } from '../../../typer/personType';
+import { IBarnetrygdsperiodeTekstinnhold } from '../../../typer/sanity/modaler/barnetrygdperiode';
 import { dagenEtterDato, dagensDato, gårsdagensDato, stringTilDate } from '../../../utils/dato';
 import { trimWhiteSpace, visFeiloppsummering } from '../../../utils/hjelpefunksjoner';
 import Datovelger from '../Datovelger/Datovelger';
 import { LandDropdown } from '../Dropdowns/LandDropdown';
 import JaNeiSpm from '../JaNeiSpm/JaNeiSpm';
+import TekstBlock from '../Sanity/TekstBlock';
 import { SkjemaFeiloppsummering } from '../SkjemaFeiloppsummering/SkjemaFeiloppsummering';
 import { SkjemaFeltInput } from '../SkjemaFeltInput/SkjemaFeltInput';
 import SkjemaModal from '../SkjemaModal/SkjemaModal';
@@ -38,9 +41,13 @@ export const BarnetrygdperiodeModal: React.FC<Props> = ({
     erDød = false,
     forklaring = undefined,
 }) => {
+    const { tekster } = useApp();
     const { skjema, valideringErOk, nullstillSkjema, validerFelterOgVisFeilmelding } =
         useBarnetrygdperiodeSkjema(personType, barn, erDød);
 
+    const teksterForModal: IBarnetrygdsperiodeTekstinnhold =
+        tekster().FELLES.modaler.barnetrygdsperiode[personType];
+
     const {
         mottarEøsBarnetrygdNå,
         barnetrygdsland,
@@ -96,10 +103,10 @@ export const BarnetrygdperiodeModal: React.FC<Props> = ({
     return (
         <SkjemaModal
             erÅpen={erÅpen}
-            modalTittelSpråkId={'modal.trygdandreperioder.tittel'}
+            tittel={teksterForModal.tittel}
             forklaring={forklaring}
             onSubmitCallback={onLeggTil}
-            submitKnappSpråkId={'modal.trygdandreperioder.tittel'}
+            submitKnappTekst={<TekstBlock block={teksterForModal.leggTilKnapp} />}
             lukkModal={lukkModal}
             valideringErOk={valideringErOk}
             onAvbrytCallback={nullstillSkjema}

diff --git a/src/frontend/components/Felleskomponenter/Pensjonsmodal/Pensjonsmodal.tsx b/src/frontend/components/Felleskomponenter/Pensjonsmodal/Pensjonsmodal.tsx
@@ -2,13 +2,16 @@ import React from 'react';
 
 import { ESvar } from '@navikt/familie-form-elements';
 
+import { useApp } from '../../../context/AppContext';
 import { IPensjonsperiode } from '../../../typer/perioder';
 import { PersonType } from '../../../typer/personType';
+import { IPensjonsperiodeTekstinnhold } from '../../../typer/sanity/modaler/pensjonsperiode';
 import { dagensDato, gårsdagensDato } from '../../../utils/dato';
 import { visFeiloppsummering } from '../../../utils/hjelpefunksjoner';
 import Datovelger from '../Datovelger/Datovelger';
 import { LandDropdown } from '../Dropdowns/LandDropdown';
 import JaNeiSpm from '../JaNeiSpm/JaNeiSpm';
+import TekstBlock from '../Sanity/TekstBlock';
 import { SkjemaFeiloppsummering } from '../SkjemaFeiloppsummering/SkjemaFeiloppsummering';
 import SkjemaModal from '../SkjemaModal/SkjemaModal';
 import SpråkTekst from '../SpråkTekst/SpråkTekst';
@@ -35,6 +38,7 @@ export const PensjonModal: React.FC<Props> = ({
     erDød,
     forklaring = undefined,
 }) => {
+    const { tekster } = useApp();
     const { skjema, valideringErOk, nullstillSkjema, validerFelterOgVisFeilmelding } =
         usePensjonSkjema({
             gjelderUtland,
@@ -43,6 +47,9 @@ export const PensjonModal: React.FC<Props> = ({
             erDød,
         });
 
+    const teksterForModal: IPensjonsperiodeTekstinnhold =
+        tekster().FELLES.modaler.pensjonsperiode[personType];
+
     const { mottarPensjonNå, pensjonTilDato, pensjonFraDato, pensjonsland } = skjema.felter;
 
     const onLeggTil = () => {
@@ -72,9 +79,6 @@ export const PensjonModal: React.FC<Props> = ({
         lukkModal();
         nullstillSkjema();
     };
-    const modalTittel = gjelderUtland
-        ? 'felles.leggtilpensjon.utland.modal.tittel'
-        : 'felles.leggtilpensjon.norge.modal.tittel';
 
     const periodenErAvsluttet =
         mottarPensjonNå.verdi === ESvar.NEI || (personType === PersonType.AndreForelder && !!erDød);
@@ -87,10 +91,10 @@ export const PensjonModal: React.FC<Props> = ({
     return (
         <SkjemaModal
             erÅpen={erÅpen}
-            modalTittelSpråkId={modalTittel}
+            tittel={teksterForModal.tittel}
             forklaring={forklaring}
             onSubmitCallback={onLeggTil}
-            submitKnappSpråkId={'felles.leggtilpensjon.knapp'}
+            submitKnappTekst={<TekstBlock block={teksterForModal.leggTilKnapp} />}
             lukkModal={lukkModal}
             valideringErOk={valideringErOk}
             onAvbrytCallback={nullstillSkjema}

diff --git a/src/frontend/components/Felleskomponenter/SkjemaModal/SkjemaModal.tsx b/src/frontend/components/Felleskomponenter/SkjemaModal/SkjemaModal.tsx
@@ -1,37 +1,38 @@
 import React, { ReactNode } from 'react';
 
-import { useIntl } from 'react-intl';
-
 import { BodyShort, Button, Modal, VStack } from '@navikt/ds-react';
 
+import { useApp } from '../../../context/AppContext';
 import { useFeatureToggles } from '../../../context/FeatureToggleContext';
+import { FlettefeltVerdier, LocaleRecordBlock } from '../../../typer/sanity/sanity';
 import ModalContent from '../ModalContent';
-import SpråkTekst from '../SpråkTekst/SpråkTekst';
 
 const SkjemaModal: React.FC<{
     erÅpen: boolean;
     lukkModal: () => void;
-    modalTittelSpråkId: string;
-    forklaring?: string;
     submitSpinner?: boolean;
     valideringErOk: () => boolean;
     onAvbrytCallback?: () => void;
-    submitKnappSpråkId: string;
     onSubmitCallback: () => void;
+    tittel: LocaleRecordBlock;
+    forklaring?: ReactNode;
+    submitKnappTekst: ReactNode;
+    flettefelter?: FlettefeltVerdier;
     children?: ReactNode;
 }> = ({
     erÅpen,
     lukkModal,
-    modalTittelSpråkId,
-    forklaring = undefined,
     submitSpinner = false,
     valideringErOk,
     onAvbrytCallback,
-    submitKnappSpråkId,
     onSubmitCallback,
+    tittel,
+    forklaring = undefined,
+    submitKnappTekst,
+    flettefelter,
     children,
 }) => {
-    const { formatMessage } = useIntl();
+    const { plainTekst } = useApp();
     const { toggles } = useFeatureToggles();
 
     return (
@@ -44,7 +45,7 @@ const SkjemaModal: React.FC<{
             width={'medium'}
             portal={true}
             header={{
-                heading: formatMessage({ id: modalTittelSpråkId }),
+                heading: plainTekst(tittel, flettefelter),
                 size: 'medium',
             }}
         >
@@ -58,16 +59,16 @@ const SkjemaModal: React.FC<{
             </ModalContent>
             <Modal.Footer>
                 <Button
-                    data-testid={submitKnappSpråkId}
                     form="skjema"
                     variant={valideringErOk() ? 'primary' : 'secondary'}
+                    data-testid="submit-knapp-i-modal"
                     loading={submitSpinner}
                     onClick={event => {
                         event.preventDefault();
                         onSubmitCallback();
                     }}
                 >
-                    <SpråkTekst id={submitKnappSpråkId} />
+                    {submitKnappTekst}
                 </Button>
             </Modal.Footer>
         </Modal>

diff --git a/src/frontend/components/Felleskomponenter/UtbetalingerModal/UtbetalingerModal.tsx b/src/frontend/components/Felleskomponenter/UtbetalingerModal/UtbetalingerModal.tsx
@@ -3,15 +3,18 @@ import React from 'react';
 import { ESvar } from '@navikt/familie-form-elements';
 import { Valideringsstatus } from '@navikt/familie-skjema';
 
+import { useApp } from '../../../context/AppContext';
 import { IUtbetalingsperiode } from '../../../typer/perioder';
 import { PersonType } from '../../../typer/personType';
+import { IAndreUtbetalingerTekstinnhold } from '../../../typer/sanity/modaler/andreUtbetalinger';
 import { dagensDato, gårsdagensDato } from '../../../utils/dato';
 import { visFeiloppsummering } from '../../../utils/hjelpefunksjoner';
 import { minTilDatoForUtbetalingEllerArbeidsperiode } from '../../../utils/perioder';
 import { svarForSpørsmålMedUkjent } from '../../../utils/spørsmål';
 import Datovelger from '../Datovelger/Datovelger';
 import { LandDropdown } from '../Dropdowns/LandDropdown';
 import JaNeiSpm from '../JaNeiSpm/JaNeiSpm';
+import TekstBlock from '../Sanity/TekstBlock';
 import { SkjemaCheckbox } from '../SkjemaCheckbox/SkjemaCheckbox';
 import { SkjemaFeiloppsummering } from '../SkjemaFeiloppsummering/SkjemaFeiloppsummering';
 import SkjemaModal from '../SkjemaModal/SkjemaModal';
@@ -37,9 +40,13 @@ export const UtbetalingerModal: React.FC<UtbetalingerModalProps> = ({
     erDød,
     forklaring = undefined,
 }) => {
+    const { tekster } = useApp();
     const { skjema, valideringErOk, nullstillSkjema, validerFelterOgVisFeilmelding } =
         useUtbetalingerSkjema(personType, barn, erDød);
 
+    const teksterForModal: IAndreUtbetalingerTekstinnhold =
+        tekster().FELLES.modaler.andreUtbetalinger[personType];
+
     const andreForelderErDød: boolean = personType === PersonType.AndreForelder && !!erDød;
     const periodenErAvsluttet: boolean =
         skjema.felter.fårUtbetalingNå.verdi === ESvar.NEI || andreForelderErDød;
@@ -87,10 +94,10 @@ export const UtbetalingerModal: React.FC<UtbetalingerModalProps> = ({
     return (
         <SkjemaModal
             erÅpen={erÅpen}
-            modalTittelSpråkId={'felles.flereytelser.knapp'}
+            tittel={teksterForModal.tittel}
             forklaring={forklaring}
             onSubmitCallback={onLeggTil}
-            submitKnappSpråkId={'felles.flereytelser.knapp'}
+            submitKnappTekst={<TekstBlock block={teksterForModal.leggTilKnapp} />}
             lukkModal={lukkModal}
             valideringErOk={valideringErOk}
             onAvbrytCallback={nullstillSkjema}

diff --git a/src/frontend/components/Felleskomponenter/UtenlandsoppholdModal/UtenlandsoppholdModal.tsx b/src/frontend/components/Felleskomponenter/UtenlandsoppholdModal/UtenlandsoppholdModal.tsx
@@ -4,8 +4,10 @@ import { useIntl } from 'react-intl';
 
 import { ESvar } from '@navikt/familie-form-elements';
 
+import { useApp } from '../../../context/AppContext';
 import { IBarnMedISøknad } from '../../../typer/barn';
 import { IUtenlandsperiode } from '../../../typer/perioder';
+import { ESanitySteg } from '../../../typer/sanity/sanity';
 import { EUtenlandsoppholdÅrsak } from '../../../typer/utenlandsopphold';
 import { visFeiloppsummering } from '../../../utils/hjelpefunksjoner';
 import { svarForSpørsmålMedUkjent } from '../../../utils/spørsmål';
@@ -18,6 +20,7 @@ import {
 import Datovelger from '../Datovelger/Datovelger';
 import { LandDropdown } from '../Dropdowns/LandDropdown';
 import StyledDropdown from '../Dropdowns/StyledDropdown';
+import TekstBlock from '../Sanity/TekstBlock';
 import { SkjemaCheckbox } from '../SkjemaCheckbox/SkjemaCheckbox';
 import { SkjemaFeiloppsummering } from '../SkjemaFeiloppsummering/SkjemaFeiloppsummering';
 import SkjemaModal from '../SkjemaModal/SkjemaModal';
@@ -48,14 +51,19 @@ export const UtenlandsoppholdModal: React.FC<Props> = ({
     erÅpen,
     lukkModal,
     onLeggTilUtenlandsperiode,
+    personType,
     barn,
     forklaring = undefined,
 }) => {
+    const { tekster } = useApp();
     const { skjema, valideringErOk, nullstillSkjema, validerFelterOgVisFeilmelding } =
         useUtenlandsoppholdSkjema({
+            personType,
             barn,
         });
 
+    const teksterForPersonType = tekster()[ESanitySteg.FELLES].modaler.utenlandsopphold[personType];
+
     const { formatMessage } = useIntl();
 
     const onLeggTil = () => {
@@ -95,10 +103,11 @@ export const UtenlandsoppholdModal: React.FC<Props> = ({
     return (
         <SkjemaModal
             erÅpen={erÅpen}
-            modalTittelSpråkId={'modal.utenlandsopphold.tittel'}
+            tittel={teksterForPersonType.tittel}
+            flettefelter={{ barnetsNavn: barn?.navn }}
             forklaring={forklaring}
             onSubmitCallback={onLeggTil}
-            submitKnappSpråkId={'felles.leggtilutenlands.knapp'}
+            submitKnappTekst={<TekstBlock block={teksterForPersonType.leggTilKnapp} />}
             lukkModal={lukkModal}
             valideringErOk={valideringErOk}
             onAvbrytCallback={nullstillSkjema}

diff --git a/...frontend/components/Felleskomponenter/UtenlandsoppholdModal/useUtenlandsoppholdSkjema.tsx b/...frontend/components/Felleskomponenter/UtenlandsoppholdModal/useUtenlandsoppholdSkjema.tsx
@@ -7,6 +7,7 @@ import useDatovelgerFelt from '../../../hooks/useDatovelgerFelt';
 import useDatovelgerFeltMedUkjent from '../../../hooks/useDatovelgerFeltMedUkjent';
 import useLanddropdownFelt from '../../../hooks/useLanddropdownFelt';
 import { IBarnMedISøknad } from '../../../typer/barn';
+import { PersonType } from '../../../typer/personType';
 import { IUtenlandsoppholdFeltTyper } from '../../../typer/skjema';
 import { EUtenlandsoppholdÅrsak } from '../../../typer/utenlandsopphold';
 import { dagenEtterDato, stringTilDate } from '../../../utils/dato';
@@ -27,6 +28,7 @@ import {
 } from './utenlandsoppholdSpråkUtils';
 
 export interface IUseUtenlandsoppholdSkjemaParams {
+    personType: PersonType;
     barn?: IBarnMedISøknad;
 }
 

diff --git a/src/frontend/components/SøknadsSteg/DinLivssituasjon/LeggTilSamboerModal.test.tsx b/src/frontend/components/SøknadsSteg/DinLivssituasjon/LeggTilSamboerModal.test.tsx
@@ -49,7 +49,7 @@ describe('LeggTilSamboerModal', () => {
     it('Viser riktige feilmeldinger ved ingen utfylte felt av tidligere samboer', async () => {
         spyOnUseApp(søknad);
 
-        const { getByText, getAllByText, getByTestId, findByTestId } = render(
+        const { getByText, getByTestId, findByTestId } = render(
             <TestProvidereMedEkteTekster mocketNettleserHistorikk={['/din-livssituasjon']}>
                 <DinLivssituasjon />
             </TestProvidereMedEkteTekster>
@@ -66,8 +66,8 @@ describe('LeggTilSamboerModal', () => {
         const leggTilSamboerKnapp: HTMLElement = getByText('Legg til samboer');
         act(() => leggTilSamboerKnapp.click());
 
-        const leggTilSamboerKnappIModal = getAllByText('Legg til samboer');
-        act(() => leggTilSamboerKnappIModal[2].click());
+        const gåVidereKnapp = getByTestId('submit-knapp-i-modal');
+        act(() => gåVidereKnapp.click());
 
         const feiloppsummering = getByTestId('skjema-feiloppsummering');
         expect(feiloppsummering).toBeInTheDocument();