From 3b75bf7e84c4c23cd6186a3b3949b668b30a2ee9 Mon Sep 17 00:00:00 2001 From: Ole Kristian Rudjord <89088327+ole-kristian-rudjord@users.noreply.github.com> Date: Thu, 1 Aug 2024 13:19:00 +0200 Subject: [PATCH] Fjerner forklaring over LeggTilKnapp (#1303) --- .../Arbeidsperiode/Arbeidsperiode.tsx | 26 ++++++------- .../Barnetrygdperiode/Barnetrygdperiode.tsx | 21 +++++----- .../LeggTilKnapp/LeggTilKnapp.tsx | 8 ++-- .../Pensjonsmodal/Pensjonsperiode.tsx | 26 ++++++------- .../UtbetalingerModal/Utbetalingsperiode.tsx | 21 +++++----- .../DinLivssituasjon/TidligereSamboere.tsx" | 23 ++++++----- ...\303\270lgningssp\303\270rsm\303\245l.tsx" | 21 +++++----- .../S\303\270knadsSteg/OmDeg/OmDeg.tsx" | 22 +++++------ src/frontend/utils/modaler.ts | 39 ------------------- 9 files changed, 91 insertions(+), 116 deletions(-) delete mode 100644 src/frontend/utils/modaler.ts diff --git a/src/frontend/components/Felleskomponenter/Arbeidsperiode/Arbeidsperiode.tsx b/src/frontend/components/Felleskomponenter/Arbeidsperiode/Arbeidsperiode.tsx index 01a397e89..975212ea5 100644 --- a/src/frontend/components/Felleskomponenter/Arbeidsperiode/Arbeidsperiode.tsx +++ b/src/frontend/components/Felleskomponenter/Arbeidsperiode/Arbeidsperiode.tsx @@ -4,16 +4,17 @@ import { Label } from '@navikt/ds-react'; import { ESvar } from '@navikt/familie-form-elements'; import { Felt, ISkjema } from '@navikt/familie-skjema'; +import { useApp } from '../../../context/AppContext'; import { useFeatureToggles } from '../../../context/FeatureToggleContext'; import { IArbeidsperiode } from '../../../typer/perioder'; import { PeriodePersonTypeMedBarnProps, PersonType } from '../../../typer/personType'; +import { IArbeidsperiodeTekstinnhold } from '../../../typer/sanity/modaler/arbeidsperiode'; import { IDinLivssituasjonFeltTyper, IEøsForBarnFeltTyper, IEøsForSøkerFeltTyper, IOmBarnetFeltTyper, } from '../../../typer/skjema'; -import { hentLeggTilPeriodeTekster } from '../../../utils/modaler'; import { genererPeriodeId } from '../../../utils/perioder'; import JaNeiSpm from '../JaNeiSpm/JaNeiSpm'; import { LeggTilKnapp } from '../LeggTilKnapp/LeggTilKnapp'; @@ -65,21 +66,16 @@ export const Arbeidsperiode: React.FC = ({ lukkModal: lukkArbeidsmodal, åpneModal: åpneArbeidsmodal, } = useModal(); + const { tekster, plainTekst } = useApp(); + const barnetsNavn = !!barn && barn.navn; const arbeidsperiodeSpørsmålId = gjelderUtlandet ? ArbeidsperiodeSpørsmålsId.arbeidsperioderUtland : ArbeidsperiodeSpørsmålsId.arbeidsperioderNorge; - const antallPerioder = registrerteArbeidsperioder.verdi.length; - const leggTilPeriodeTekster = hentLeggTilPeriodeTekster( - 'arbeidsperiode', - personType, - antallPerioder, - undefined, - { - gjelderUtland: gjelderUtlandet, - } - ); + const teksterForModal: IArbeidsperiodeTekstinnhold = + tekster().FELLES.modaler.arbeidsperiode[personType]; + const { flerePerioder, leggTilPeriodeForklaring } = teksterForModal; return ( <> @@ -122,7 +118,11 @@ export const Arbeidsperiode: React.FC = ({ 0 && + plainTekst(flerePerioder) + } id={genererPeriodeId({ personType, spørsmålsId: arbeidsperiodeSpørsmålId, @@ -144,7 +144,7 @@ export const Arbeidsperiode: React.FC = ({ gjelderUtlandet={gjelderUtlandet} personType={personType} erDød={erDød} - forklaring={leggTilPeriodeTekster?.tekstForModal} + forklaring={plainTekst(leggTilPeriodeForklaring)} /> )} diff --git a/src/frontend/components/Felleskomponenter/Barnetrygdperiode/Barnetrygdperiode.tsx b/src/frontend/components/Felleskomponenter/Barnetrygdperiode/Barnetrygdperiode.tsx index e598e5868..3100bdb13 100644 --- a/src/frontend/components/Felleskomponenter/Barnetrygdperiode/Barnetrygdperiode.tsx +++ b/src/frontend/components/Felleskomponenter/Barnetrygdperiode/Barnetrygdperiode.tsx @@ -4,13 +4,14 @@ import { Label } from '@navikt/ds-react'; import { ESvar } from '@navikt/familie-form-elements'; import { Felt, ISkjema } from '@navikt/familie-skjema'; +import { useApp } from '../../../context/AppContext'; import { useFeatureToggles } from '../../../context/FeatureToggleContext'; import { IBarnMedISøknad } from '../../../typer/barn'; import { HeadingLevel } from '../../../typer/common'; import { IEøsBarnetrygdsperiode } from '../../../typer/perioder'; import { PeriodePersonTypeProps, PersonType } from '../../../typer/personType'; +import { IBarnetrygdsperiodeTekstinnhold } from '../../../typer/sanity/modaler/barnetrygdperiode'; import { IEøsForBarnFeltTyper, IOmBarnetFeltTyper } from '../../../typer/skjema'; -import { hentLeggTilPeriodeTekster } from '../../../utils/modaler'; import { genererPeriodeId } from '../../../utils/perioder'; import JaNeiSpm from '../JaNeiSpm/JaNeiSpm'; import { LeggTilKnapp } from '../LeggTilKnapp/LeggTilKnapp'; @@ -55,13 +56,11 @@ export const Barnetrygdperiode: React.FC = ({ lukkModal: lukkBarnetrygdsmodal, åpneModal: åpneBarnetrygdsmodal, } = useModal(); + const { tekster, plainTekst } = useApp(); - const antallPerioder = registrerteEøsBarnetrygdsperioder.verdi.length; - const leggTilPeriodeTekster = hentLeggTilPeriodeTekster( - 'barnetrygdsperiode', - personType, - antallPerioder - ); + const teksterForModal: IBarnetrygdsperiodeTekstinnhold = + tekster().FELLES.modaler.barnetrygdsperiode[personType]; + const { flerePerioder, leggTilPeriodeForklaring } = teksterForModal; return ( <> @@ -104,7 +103,11 @@ export const Barnetrygdperiode: React.FC = ({ 0 && + plainTekst(flerePerioder) + } id={genererPeriodeId({ personType, spørsmålsId: BarnetrygdperiodeSpørsmålId.barnetrygdsperiodeEøs, @@ -126,7 +129,7 @@ export const Barnetrygdperiode: React.FC = ({ barn={barn} personType={personType} erDød={erDød} - forklaring={leggTilPeriodeTekster?.tekstForModal} + forklaring={plainTekst(leggTilPeriodeForklaring)} /> )} diff --git a/src/frontend/components/Felleskomponenter/LeggTilKnapp/LeggTilKnapp.tsx b/src/frontend/components/Felleskomponenter/LeggTilKnapp/LeggTilKnapp.tsx index 380a78d23..be7b93744 100644 --- a/src/frontend/components/Felleskomponenter/LeggTilKnapp/LeggTilKnapp.tsx +++ b/src/frontend/components/Felleskomponenter/LeggTilKnapp/LeggTilKnapp.tsx @@ -12,7 +12,7 @@ import SpråkTekst from '../SpråkTekst/SpråkTekst'; interface Props { onClick: () => void | Promise; språkTekst: string; - forklaring?: string; + leggTilFlereTekst?: ReactNode; feilmelding?: ReactNode; id?: string; } @@ -26,7 +26,7 @@ const StyledButton = styled(Button)` export const LeggTilKnapp: React.FC = ({ onClick, språkTekst, - forklaring, + leggTilFlereTekst, feilmelding, id, }) => { @@ -34,7 +34,9 @@ export const LeggTilKnapp: React.FC = ({ return ( <> - {toggles.NYE_MODAL_TEKSTER && forklaring && {forklaring}} + {toggles.NYE_MODAL_TEKSTER && leggTilFlereTekst && ( + {leggTilFlereTekst} + )} = ({ lukkModal: lukkPensjonsmodal, åpneModal: åpnePensjonsmodal, } = useModal(); + const { tekster, plainTekst } = useApp(); + const pensjonsperiodeSpørsmålId = gjelderUtlandet ? PensjonsperiodeSpørsmålId.pensjonsperioderUtland : PensjonsperiodeSpørsmålId.pensjonsperioderNorge; - const antallPerioder = registrertePensjonsperioder.verdi.length; - const leggTilPeriodeTekster = hentLeggTilPeriodeTekster( - 'pensjonsperiode', - personType, - antallPerioder, - undefined, - { - gjelderUtland: gjelderUtlandet, - } - ); + const teksterForModal: IPensjonsperiodeTekstinnhold = + tekster().FELLES.modaler.pensjonsperiode[personType]; + const { flerePerioder, leggTilPeriodeForklaring } = teksterForModal; return ( <> @@ -126,7 +122,11 @@ export const Pensjonsperiode: React.FC = ({ 0 && + plainTekst(flerePerioder) + } id={genererPeriodeId({ personType, spørsmålsId: pensjonsperiodeSpørsmålId, @@ -149,7 +149,7 @@ export const Pensjonsperiode: React.FC = ({ personType={personType} erDød={erDød} barn={barn} - forklaring={leggTilPeriodeTekster?.tekstForModal} + forklaring={plainTekst(leggTilPeriodeForklaring)} /> )} diff --git a/src/frontend/components/Felleskomponenter/UtbetalingerModal/Utbetalingsperiode.tsx b/src/frontend/components/Felleskomponenter/UtbetalingerModal/Utbetalingsperiode.tsx index fd2cdaf6d..11f698cde 100644 --- a/src/frontend/components/Felleskomponenter/UtbetalingerModal/Utbetalingsperiode.tsx +++ b/src/frontend/components/Felleskomponenter/UtbetalingerModal/Utbetalingsperiode.tsx @@ -4,11 +4,12 @@ import { Label } from '@navikt/ds-react'; import { ESvar } from '@navikt/familie-form-elements'; import { Felt, ISkjema } from '@navikt/familie-skjema'; +import { useApp } from '../../../context/AppContext'; import { useFeatureToggles } from '../../../context/FeatureToggleContext'; import { IUtbetalingsperiode } from '../../../typer/perioder'; import { PeriodePersonTypeMedBarnProps, PersonType } from '../../../typer/personType'; +import { IAndreUtbetalingerTekstinnhold } from '../../../typer/sanity/modaler/andreUtbetalinger'; import { IEøsForBarnFeltTyper, IEøsForSøkerFeltTyper } from '../../../typer/skjema'; -import { hentLeggTilPeriodeTekster } from '../../../utils/modaler'; import { genererPeriodeId } from '../../../utils/perioder'; import JaNeiSpm from '../JaNeiSpm/JaNeiSpm'; import { LeggTilKnapp } from '../LeggTilKnapp/LeggTilKnapp'; @@ -51,15 +52,13 @@ export const Utbetalingsperiode: React.FC = ({ lukkModal: lukkUtbetalingerModal, åpneModal: åpneUtbetalingerModal, } = useModal(); + const { tekster, plainTekst } = useApp(); const barnetsNavn = barn && barn.navn; - const antallPerioder = registrerteUtbetalingsperioder.verdi.length; - const leggTilPeriodeTekster = hentLeggTilPeriodeTekster( - 'andreUtbetalinger', - personType, - antallPerioder - ); + const teksterForModal: IAndreUtbetalingerTekstinnhold = + tekster().FELLES.modaler.andreUtbetalinger[personType]; + const { flerePerioder, leggTilPeriodeForklaring } = teksterForModal; return ( <> @@ -102,7 +101,11 @@ export const Utbetalingsperiode: React.FC = ({ 0 && + plainTekst(flerePerioder) + } id={genererPeriodeId({ personType: personType, spørsmålsId: UtbetalingerSpørsmålId.utbetalingsperioder, @@ -120,7 +123,7 @@ export const Utbetalingsperiode: React.FC = ({ personType={personType} barn={barn} erDød={erDød} - forklaring={leggTilPeriodeTekster?.tekstForModal} + forklaring={plainTekst(leggTilPeriodeForklaring)} /> )} diff --git "a/src/frontend/components/S\303\270knadsSteg/DinLivssituasjon/TidligereSamboere.tsx" "b/src/frontend/components/S\303\270knadsSteg/DinLivssituasjon/TidligereSamboere.tsx" index d61c9d2a1..a4fc181e3 100644 --- "a/src/frontend/components/S\303\270knadsSteg/DinLivssituasjon/TidligereSamboere.tsx" +++ "b/src/frontend/components/S\303\270knadsSteg/DinLivssituasjon/TidligereSamboere.tsx" @@ -3,10 +3,12 @@ import React from 'react'; import { ESvar } from '@navikt/familie-form-elements'; import { Felt, ISkjema } from '@navikt/familie-skjema'; +import { useApp } from '../../../context/AppContext'; +import { useFeatureToggles } from '../../../context/FeatureToggleContext'; import { ITidligereSamboer } from '../../../typer/person'; import { PersonType } from '../../../typer/personType'; +import { ITidligereSamoboereTekstinnhold } from '../../../typer/sanity/modaler/tidligereSamboere'; import { IDinLivssituasjonFeltTyper } from '../../../typer/skjema'; -import { hentLeggTilPeriodeTekster } from '../../../utils/modaler'; import { genererPeriodeId } from '../../../utils/perioder'; import JaNeiSpm from '../../Felleskomponenter/JaNeiSpm/JaNeiSpm'; import { LeggTilKnapp } from '../../Felleskomponenter/LeggTilKnapp/LeggTilKnapp'; @@ -33,18 +35,17 @@ const TidligereSamboere: React.FC = ({ hattAnnenSamboerForSøktPeriodeFelt, tidligereSamboere, }) => { + const { toggles } = useFeatureToggles(); const { lukkModal: lukkLeggTilSamboerModal, åpneModal: åpneLeggTilSamboerModal, erÅpen: erLeggTilSamboerModalÅpen, } = useModal(); + const { tekster, plainTekst } = useApp(); - const antallPerioder = tidligereSamboere.verdi.length; - const leggTilPeriodeTekster = hentLeggTilPeriodeTekster( - 'tidligereSamboere', - PersonType.Søker, - antallPerioder - ); + const teksterForModal: ITidligereSamoboereTekstinnhold = + tekster().FELLES.modaler.tidligereSamboere.søker; + const { flerePerioder, leggTilPeriodeForklaring } = teksterForModal; return ( <> @@ -68,7 +69,11 @@ const TidligereSamboere: React.FC = ({ ))} 0 && + plainTekst(flerePerioder) + } onClick={åpneLeggTilSamboerModal} id={genererPeriodeId({ personType: PersonType.Søker, @@ -87,7 +92,7 @@ const TidligereSamboere: React.FC = ({ leggTilTidligereSamboer={leggTilTidligereSamboer} lukkModal={lukkLeggTilSamboerModal} erÅpen={erLeggTilSamboerModalÅpen} - forklaring={leggTilPeriodeTekster?.tekstForModal} + forklaring={plainTekst(leggTilPeriodeForklaring)} /> )} diff --git "a/src/frontend/components/S\303\270knadsSteg/OmBarnet/Oppf\303\270lgningssp\303\270rsm\303\245l.tsx" "b/src/frontend/components/S\303\270knadsSteg/OmBarnet/Oppf\303\270lgningssp\303\270rsm\303\245l.tsx" index a9ca52a08..c80916e2d 100644 --- "a/src/frontend/components/S\303\270knadsSteg/OmBarnet/Oppf\303\270lgningssp\303\270rsm\303\245l.tsx" +++ "b/src/frontend/components/S\303\270knadsSteg/OmBarnet/Oppf\303\270lgningssp\303\270rsm\303\245l.tsx" @@ -9,6 +9,7 @@ import { useFeatureToggles } from '../../../context/FeatureToggleContext'; import { barnDataKeySpørsmål, IBarnMedISøknad } from '../../../typer/barn'; import { IEøsBarnetrygdsperiode, IUtenlandsperiode } from '../../../typer/perioder'; import { PersonType } from '../../../typer/personType'; +import { IUtenlandsoppholdTekstinnhold } from '../../../typer/sanity/modaler/utenlandsopphold'; import { ESanitySteg } from '../../../typer/sanity/sanity'; import { IOmBarnetFeltTyper } from '../../../typer/skjema'; import { @@ -17,7 +18,6 @@ import { morgendagensDato, stringTilDate, } from '../../../utils/dato'; -import { hentLeggTilPeriodeTekster } from '../../../utils/modaler'; import { Barnetrygdperiode } from '../../Felleskomponenter/Barnetrygdperiode/Barnetrygdperiode'; import Datovelger from '../../Felleskomponenter/Datovelger/Datovelger'; import { LandDropdown } from '../../Felleskomponenter/Dropdowns/LandDropdown'; @@ -57,7 +57,7 @@ const Oppfølgningsspørsmål: React.FC<{ fjernBarnetrygdsperiode, registrerteEøsBarnetrygdsperioder, }) => { - const { tekster } = useApp(); + const { tekster, plainTekst } = useApp(); const { toggles } = useFeatureToggles(); const { erÅpen: utenlandsmodalErÅpen, @@ -80,12 +80,9 @@ const Oppfølgningsspørsmål: React.FC<{ pågåendeSøknadFraAnnetEøsLand, } = skjema.felter; - const antallPerioder = utenlandsperioder.length; - const leggTilPeriodeTekster = hentLeggTilPeriodeTekster( - 'utenlandsopphold', - PersonType.Barn, - antallPerioder - ); + const teksterForModal: IUtenlandsoppholdTekstinnhold = + tekster().FELLES.modaler.utenlandsopphold.barn; + const { flerePerioder, leggTilPeriodeForklaring } = teksterForModal; const dokumentasjonstekster = tekster()[ESanitySteg.DOKUMENTASJON]; const { bekreftelseFraBarnevernetBarnetrygd } = dokumentasjonstekster; @@ -215,7 +212,11 @@ const Oppfølgningsspørsmål: React.FC<{ 0 && + plainTekst(flerePerioder) + } onClick={åpneUtenlandsmodal} feilmelding={ registrerteUtenlandsperioder.erSynlig && @@ -293,7 +294,7 @@ const Oppfølgningsspørsmål: React.FC<{ lukkModal={lukkUtenlandsmodal} onLeggTilUtenlandsperiode={leggTilUtenlandsperiode} barn={barn} - forklaring={leggTilPeriodeTekster?.tekstForModal} + forklaring={plainTekst(leggTilPeriodeForklaring)} /> )} diff --git "a/src/frontend/components/S\303\270knadsSteg/OmDeg/OmDeg.tsx" "b/src/frontend/components/S\303\270knadsSteg/OmDeg/OmDeg.tsx" index 738a80781..2562182f2 100644 --- "a/src/frontend/components/S\303\270knadsSteg/OmDeg/OmDeg.tsx" +++ "b/src/frontend/components/S\303\270knadsSteg/OmDeg/OmDeg.tsx" @@ -5,9 +5,8 @@ import { ESvar } from '@navikt/familie-form-elements'; import { useApp } from '../../../context/AppContext'; import { useFeatureToggles } from '../../../context/FeatureToggleContext'; -import { PersonType } from '../../../typer/personType'; +import { IUtenlandsoppholdTekstinnhold } from '../../../typer/sanity/modaler/utenlandsopphold'; import { ESanitySteg } from '../../../typer/sanity/sanity'; -import { hentLeggTilPeriodeTekster } from '../../../utils/modaler'; import JaNeiSpm from '../../Felleskomponenter/JaNeiSpm/JaNeiSpm'; import KomponentGruppe from '../../Felleskomponenter/KomponentGruppe/KomponentGruppe'; import { LeggTilKnapp } from '../../Felleskomponenter/LeggTilKnapp/LeggTilKnapp'; @@ -24,7 +23,7 @@ import { OmDegSpørsmålId, omDegSpørsmålSpråkId } from './spørsmål'; import { useOmdeg } from './useOmdeg'; const OmDeg: React.FC = () => { - const { tekster } = useApp(); + const { tekster, plainTekst } = useApp(); const { toggles } = useFeatureToggles(); @@ -44,12 +43,9 @@ const OmDeg: React.FC = () => { utenlandsperioder, } = useOmdeg(); - const antallPerioder = utenlandsperioder.length; - const leggTilPeriodeTekster = hentLeggTilPeriodeTekster( - 'utenlandsopphold', - PersonType.Søker, - antallPerioder - ); + const teksterForModal: IUtenlandsoppholdTekstinnhold = + tekster().FELLES.modaler.utenlandsopphold.søker; + const { flerePerioder, leggTilPeriodeForklaring } = teksterForModal; const stegTekster = tekster()[ESanitySteg.OM_DEG]; const { omDegGuide } = stegTekster; @@ -104,7 +100,11 @@ const OmDeg: React.FC = () => { 0 && + plainTekst(flerePerioder) + } id={UtenlandsoppholdSpørsmålId.utenlandsopphold} feilmelding={ skjema.felter.registrerteUtenlandsperioder.erSynlig && @@ -134,7 +134,7 @@ const OmDeg: React.FC = () => { erÅpen={utenlandsoppholdmodalErÅpen} lukkModal={lukkUtenlandsoppholdmodal} onLeggTilUtenlandsperiode={leggTilUtenlandsperiode} - forklaring={leggTilPeriodeTekster?.tekstForModal} + forklaring={plainTekst(leggTilPeriodeForklaring)} /> )} diff --git a/src/frontend/utils/modaler.ts b/src/frontend/utils/modaler.ts deleted file mode 100644 index bfaff99e7..000000000 --- a/src/frontend/utils/modaler.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { useApp } from '../context/AppContext'; -import { PersonType } from '../typer/personType'; -import { FlettefeltVerdier } from '../typer/sanity/sanity'; -import { IModalerTekstinnhold } from '../typer/sanity/tekstInnhold'; - -export const hentLeggTilPeriodeTekster = ( - modal: keyof IModalerTekstinnhold, - personType: PersonType, - antallPerioder: number, - flettefeltForLeggTilPeriodeForklaring?: FlettefeltVerdier | undefined, - flettefeltForFlerePerioder?: FlettefeltVerdier | undefined -): { tekstForKnapp: string; tekstForModal: string } | undefined => { - const { tekster, plainTekst } = useApp(); - - try { - const modalTekster = tekster()['FELLES'].modaler[modal][personType]; - - const tekstForKnapp = - antallPerioder === 0 - ? plainTekst( - modalTekster.leggTilPeriodeForklaring, - flettefeltForLeggTilPeriodeForklaring - ) - : plainTekst(modalTekster.flerePerioder, flettefeltForFlerePerioder); - - const tekstForModal = plainTekst( - modalTekster.leggTilPeriodeForklaring, - flettefeltForLeggTilPeriodeForklaring - ); - - return { - tekstForKnapp, - tekstForModal, - }; - } catch (error) { - console.error(`Kunne ikke hente modal-tekster for ${modal}.${personType}`, error); - return undefined; - } -};