Be kun om måned der vi ikke trenger nøyaktig dato

src/frontend/components/Felleskomponenter/MånedÅrVelger/MånedÅrVelger.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+
+import { MonthPicker, useMonthpicker } from '@navikt/ds-react';
+import { useSprakContext } from '@navikt/familie-sprakvelger';
+
+interface IProps {
+    tidligsteValgbareMåned?: Date;
+    senesteValgbareMåned?: Date;
+    label: React.ReactNode;
+    onChange: (date: Date) => void;
+}
+
+export const MånedÅrVelger: React.FC<IProps> = ({
+    tidligsteValgbareMåned,
+    senesteValgbareMåned,
+    label,
+    onChange,
+}) => {
+    const [valgtLocale] = useSprakContext();
+
+    const { monthpickerProps, inputProps, reset, selectedMonth } = useMonthpicker({
+        fromDate: tidligsteValgbareMåned,
+        toDate: senesteValgbareMåned,
+        locale: valgtLocale,
+        onMonthChange: (date?: Date) => date && onChange(date),
+    });
+
+    useEffect(() => {
+        if (selectedMonth) {
+            if (
+                (!!tidligsteValgbareMåned && tidligsteValgbareMåned > selectedMonth) ||
+                (!!senesteValgbareMåned && senesteValgbareMåned < selectedMonth)
+            ) {
+                reset();
+            }
+        }
+    }, [tidligsteValgbareMåned, senesteValgbareMåned]);
+
+    return (
+        <MonthPicker {...monthpickerProps}>
+            <MonthPicker.Input {...inputProps} label={label} />
+        </MonthPicker>
+    );
+};

src/frontend/components/Felleskomponenter/Pensjonsmodal/Pensjonsmodal.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 
+import { formatISO, parseISO } from 'date-fns';
+
 import { ESvar } from '@navikt/familie-form-elements';
 
+import { useFeatureToggles } from '../../../context/FeatureToggleContext';
+import { EFeatureToggle } from '../../../typer/feature-toggles';
 import { IPensjonsperiode } from '../../../typer/perioder';
 import { PersonType } from '../../../typer/personType';
 import { dagensDato, gårsdagensDato } from '../../../utils/dato';
@@ -10,6 +14,7 @@ import Datovelger from '../Datovelger/Datovelger';
 import { LandDropdown } from '../Dropdowns/LandDropdown';
 import JaNeiSpm from '../JaNeiSpm/JaNeiSpm';
 import KomponentGruppe from '../KomponentGruppe/KomponentGruppe';
+import { MånedÅrVelger } from '../MånedÅrVelger/MånedÅrVelger';
 import { SkjemaFeiloppsummering } from '../SkjemaFeiloppsummering/SkjemaFeiloppsummering';
 import SkjemaModal from '../SkjemaModal/SkjemaModal';
 import SpråkTekst from '../SpråkTekst/SpråkTekst';
@@ -42,6 +47,8 @@ export const PensjonModal: React.FC<Props> = ({
             erDød,
         });
 
+    const { toggles } = useFeatureToggles();
+
     const { mottarPensjonNå, pensjonTilDato, pensjonFraDato, pensjonsland } = skjema.felter;
 
     const onLeggTil = () => {
@@ -119,34 +126,77 @@ export const PensjonModal: React.FC<Props> = ({
                     />
                 )}
 
-                {pensjonFraDato.erSynlig && (
-                    <Datovelger
-                        felt={pensjonFraDato}
-                        label={
-                            <SpråkTekst
-                                id={hentSpørsmålTekstId(PensjonsperiodeSpørsmålId.fraDatoPensjon)}
-                                values={{ ...(barn && { barn: barn.navn }) }}
-                            />
-                        }
-                        skjema={skjema}
-                        avgrensMaxDato={periodenErAvsluttet ? gårsdagensDato() : dagensDato()}
-                    />
-                )}
-                {pensjonTilDato.erSynlig && (
-                    <Datovelger
-                        felt={pensjonTilDato}
-                        label={
-                            <SpråkTekst
-                                id={hentSpørsmålTekstId(PensjonsperiodeSpørsmålId.tilDatoPensjon)}
-                                values={{ ...(barn && { barn: barn.navn }) }}
-                            />
-                        }
-                        skjema={skjema}
-                        avgrensMaxDato={dagensDato()}
-                        tilhørendeFraOgMedFelt={pensjonFraDato}
-                        dynamisk
-                    />
-                )}
+                {pensjonFraDato.erSynlig &&
+                    (toggles[EFeatureToggle.BE_OM_MÅNED_IKKE_DATO] ? (
+                        <MånedÅrVelger
+                            label={
+                                <SpråkTekst
+                                    id={hentSpørsmålTekstId(
+                                        PensjonsperiodeSpørsmålId.fraDatoPensjon
+                                    )}
+                                    values={{ ...(barn && { barn: barn.navn }) }}
+                                />
+                            }
+                            senesteValgbareMåned={
+                                periodenErAvsluttet ? gårsdagensDato() : dagensDato()
+                            }
+                            onChange={dato =>
+                                pensjonFraDato.validerOgSettFelt(
+                                    formatISO(dato, { representation: 'date' })
+                                )
+                            }
+                        />
+                    ) : (
+                        <Datovelger
+                            felt={pensjonFraDato}
+                            label={
+                                <SpråkTekst
+                                    id={hentSpørsmålTekstId(
+                                        PensjonsperiodeSpørsmålId.fraDatoPensjon
+                                    )}
+                                    values={{ ...(barn && { barn: barn.navn }) }}
+                                />
+                            }
+                            skjema={skjema}
+                            avgrensMaxDato={periodenErAvsluttet ? gårsdagensDato() : dagensDato()}
+                        />
+                    ))}
+                {pensjonTilDato.erSynlig &&
+                    (toggles[EFeatureToggle.BE_OM_MÅNED_IKKE_DATO] ? (
+                        <MånedÅrVelger
+                            label={
+                                <SpråkTekst
+                                    id={hentSpørsmålTekstId(
+                                        PensjonsperiodeSpørsmålId.tilDatoPensjon
+                                    )}
+                                    values={{ ...(barn && { barn: barn.navn }) }}
+                                />
+                            }
+                            tidligsteValgbareMåned={parseISO(pensjonFraDato.verdi)}
+                            senesteValgbareMåned={dagensDato()}
+                            onChange={dato =>
+                                pensjonTilDato.validerOgSettFelt(
+                                    formatISO(dato, { representation: 'date' })
+                                )
+                            }
+                        />
+                    ) : (
+                        <Datovelger
+                            felt={pensjonTilDato}
+                            label={
+                                <SpråkTekst
+                                    id={hentSpørsmålTekstId(
+                                        PensjonsperiodeSpørsmålId.tilDatoPensjon
+                                    )}
+                                    values={{ ...(barn && { barn: barn.navn }) }}
+                                />
+                            }
+                            skjema={skjema}
+                            avgrensMaxDato={dagensDato()}
+                            tilhørendeFraOgMedFelt={pensjonFraDato}
+                            dynamisk
+                        />
+                    ))}
             </KomponentGruppe>
             {visFeiloppsummering(skjema) && <SkjemaFeiloppsummering skjema={skjema} />}
         </SkjemaModal>

src/frontend/components/Felleskomponenter/Pensjonsmodal/PensjonsperiodeOppsummering.tsx

@@ -3,11 +3,14 @@ import React from 'react';
 import { ESvar } from '@navikt/familie-form-elements';
 import { useSprakContext } from '@navikt/familie-sprakvelger';
 
+import { useFeatureToggles } from '../../../context/FeatureToggleContext';
 import { IBarnMedISøknad } from '../../../typer/barn';
+import { EFeatureToggle } from '../../../typer/feature-toggles';
 import { IPensjonsperiode } from '../../../typer/perioder';
 import { PersonType } from '../../../typer/personType';
-import { formaterDato } from '../../../utils/dato';
+import { formaterDato, formaterDatoKunMåned } from '../../../utils/dato';
 import { landkodeTilSpråk } from '../../../utils/språk';
+import { uppercaseFørsteBokstav } from '../../../utils/visning';
 import { OppsummeringFelt } from '../../SøknadsSteg/Oppsummering/OppsummeringFelt';
 import PeriodeOppsummering from '../PeriodeOppsummering/PeriodeOppsummering';
 import SpråkTekst from '../SpråkTekst/SpråkTekst';
@@ -42,6 +45,7 @@ export const PensjonsperiodeOppsummering: React.FC<PensjonsperiodeOppsummeringPr
     barn = undefined,
 }) => {
     const [valgtLocale] = useSprakContext();
+    const { toggles } = useFeatureToggles();
     const { mottarPensjonNå, pensjonsland, pensjonFra, pensjonTil } = pensjonsperiode;
 
     const periodenErAvsluttet =
@@ -85,13 +89,25 @@ export const PensjonsperiodeOppsummering: React.FC<PensjonsperiodeOppsummeringPr
             {pensjonFra.svar && (
                 <OppsummeringFelt
                     tittel={spørsmålSpråkTekst(PensjonsperiodeSpørsmålId.fraDatoPensjon)}
-                    søknadsvar={formaterDato(pensjonFra.svar)}
+                    søknadsvar={
+                        toggles[EFeatureToggle.BE_OM_MÅNED_IKKE_DATO]
+                            ? uppercaseFørsteBokstav(
+                                  formaterDatoKunMåned(pensjonFra.svar, valgtLocale)
+                              )
+                            : formaterDato(pensjonFra.svar)
+                    }
                 />
             )}
             {pensjonTil.svar && (
                 <OppsummeringFelt
                     tittel={spørsmålSpråkTekst(PensjonsperiodeSpørsmålId.tilDatoPensjon)}
-                    søknadsvar={formaterDato(pensjonTil.svar)}
+                    søknadsvar={
+                        toggles[EFeatureToggle.BE_OM_MÅNED_IKKE_DATO]
+                            ? uppercaseFørsteBokstav(
+                                  formaterDatoKunMåned(pensjonTil.svar, valgtLocale)
+                              )
+                            : formaterDato(pensjonTil.svar)
+                    }
                 />
             )}
         </PeriodeOppsummering>

src/frontend/hooks/useSendInnSkjema.tsx

@@ -6,6 +6,8 @@ import { RessursStatus } from '@navikt/familie-typer';
 import Miljø from '../../shared-utils/Miljø';
 import { erModellMismatchResponsRessurs } from '../../shared-utils/modellversjon';
 import { useApp } from '../context/AppContext';
+import { useFeatureToggles } from '../context/FeatureToggleContext';
+import { EFeatureToggle } from '../typer/feature-toggles';
 import { ISøknadKontraktV8 } from '../typer/kontrakt/v8';
 import { dataISøknadKontraktFormatV8 } from '../utils/mappingTilKontrakt/søknadV8';
 import { sendInn } from '../utils/sendInnSkjema';
@@ -16,10 +18,15 @@ export const useSendInnSkjema = (): {
     const { axiosRequest, søknad, settInnsendingStatus, settSisteModellVersjon } = useApp();
     const { soknadApiProxyUrl } = Miljø();
     const [valgtSpråk] = useSprakContext();
+    const { toggles } = useFeatureToggles();
     const sendInnSkjemaV8 = async (): Promise<[boolean, ISøknadKontraktV8]> => {
         settInnsendingStatus({ status: RessursStatus.HENTER });
 
-        const formatert: ISøknadKontraktV8 = dataISøknadKontraktFormatV8(valgtSpråk, søknad);
+        const formatert: ISøknadKontraktV8 = dataISøknadKontraktFormatV8(
+            valgtSpråk,
+            søknad,
+            toggles[EFeatureToggle.BE_OM_MÅNED_IKKE_DATO] === true
+        );
 
         const res = await sendInn<ISøknadKontraktV8>(
             formatert,

src/frontend/typer/feature-toggles.ts

@@ -4,10 +4,12 @@ export enum EKillSwitchToggle {
 
 export enum EFeatureToggle {
     KOMBINER_SOKNADER = 'KOMBINER_SOKNADER',
+    BE_OM_MÅNED_IKKE_DATO = 'BE_OM_MÅNED_IKKE_DATO',
 }
 
 export const ToggleKeys: Record<EFeatureToggle, string> = {
     [EFeatureToggle.KOMBINER_SOKNADER]: 'familie-ba-soknad.kombiner-soknader',
+    [EFeatureToggle.BE_OM_MÅNED_IKKE_DATO]: 'familie-ba-soknad.be-om-mnd-ikke-dato',
 };
 
 export type EAllFeatureToggles = Record<EFeatureToggle, boolean>;

src/frontend/utils/dato.tsx

@@ -8,16 +8,19 @@ import {
     isFuture,
     isToday,
     isValid,
+    Locale,
     parse,
     startOfDay,
     startOfToday,
     sub,
 } from 'date-fns';
+import { enGB, nb, nn } from 'date-fns/locale';
 
 import { feil, FeltState, ok } from '@navikt/familie-skjema';
+import { LocaleType } from '@navikt/familie-sprakvelger';
 
 import SpråkTekst from '../components/Felleskomponenter/SpråkTekst/SpråkTekst';
-import { AlternativtSvarForInput, DatoMedUkjent, ISODateString } from '../typer/common';
+import { ISODateString } from '../typer/common';
 
 export const erDatoFormatGodkjent = (dato: Date) => isValid(dato);
 
@@ -101,8 +104,16 @@ export const validerDato = (
 export const formaterDato = (datoString: ISODateString) =>
     format(new Date(datoString), 'dd.MM.yyyy');
 
-export const formaterDatoMedUkjent = (datoMedUkjent: DatoMedUkjent, tekstForUkjent): string => {
-    return datoMedUkjent === AlternativtSvarForInput.UKJENT
-        ? tekstForUkjent
-        : format(new Date(datoMedUkjent), 'dd.MM.yyyy');
+export const formaterDatoKunMåned = (datoString: ISODateString, språk: LocaleType) =>
+    format(new Date(datoString), 'MMMM yyyy', { locale: mapSpråkvalgTilDateFnsLocale(språk) });
+
+const mapSpråkvalgTilDateFnsLocale = (språkvalg: LocaleType): Locale => {
+    switch (språkvalg) {
+        case LocaleType.nb:
+            return nb;
+        case LocaleType.nn:
+            return nn;
+        case LocaleType.en:
+            return enGB;
+    }
 };

src/frontend/utils/mappingTilKontrakt/andreForelderV8.ts

@@ -30,7 +30,8 @@ import { tilIPensjonsperiodeIKontraktFormat } from './pensjonsperioder';
 export const andreForelderTilISøknadsfeltV8 = (
     andreForelder: IAndreForelder,
     barn: IBarnMedISøknad,
-    valgtSpråk: LocaleType
+    valgtSpråk: LocaleType,
+    toggleBeOmMånedIkkeDato: boolean
 ): IAndreForelderIKontraktFormatV8 => {
     const {
         navn,
@@ -211,6 +212,7 @@ export const andreForelderTilISøknadsfeltV8 = (
                 personType: PersonType.AndreForelder,
                 erDød: forelderErDød,
                 barn,
+                toggleBeOmMånedIkkeDato,
             })
         ),
         arbeidsperioderNorge: arbeidsperioderNorge.map((periode, index) =>
@@ -230,6 +232,7 @@ export const andreForelderTilISøknadsfeltV8 = (
                 personType: PersonType.AndreForelder,
                 erDød: forelderErDød,
                 barn,
+                toggleBeOmMånedIkkeDato,
             })
         ),
         andreUtbetalingsperioder: andreUtbetalingsperioder.map((periode, index) =>

src/frontend/utils/mappingTilKontrakt/barnV8.ts

@@ -32,7 +32,8 @@ import { utenlandsperiodeTilISøknadsfelt } from './utenlandsperiode';
 export const barnISøknadsFormatV8 = (
     barn: IBarnMedISøknad,
     søker: ISøker,
-    valgtSpråk: LocaleType
+    valgtSpråk: LocaleType,
+    toggleBeOmMånedIkkeDato: boolean
 ): ISøknadIKontraktBarnV8 => {
     /* eslint-disable @typescript-eslint/no-unused-vars */
     const {
@@ -119,10 +120,17 @@ export const barnISøknadsFormatV8 = (
             )
         ),
         andreForelder: andreForelder
-            ? andreForelderTilISøknadsfeltV8(andreForelder, barn, valgtSpråk)
+            ? andreForelderTilISøknadsfeltV8(
+                  andreForelder,
+                  barn,
+                  valgtSpråk,
+                  toggleBeOmMånedIkkeDato
+              )
             : null,
 
-        omsorgsperson: omsorgsperson ? omsorgspersonTilISøknadsfeltV8(omsorgsperson, barn) : null,
+        omsorgsperson: omsorgsperson
+            ? omsorgspersonTilISøknadsfeltV8(omsorgsperson, barn, toggleBeOmMånedIkkeDato)
+            : null,
         spørsmål: {
             ...spørmålISøknadsFormat(typetBarnSpørsmål, {
                 navn: navn,

src/frontend/utils/mappingTilKontrakt/omsorgspersonV8.ts

@@ -23,7 +23,8 @@ import { tilIPensjonsperiodeIKontraktFormat } from './pensjonsperioder';
 
 export const omsorgspersonTilISøknadsfeltV8 = (
     omsorgsperson: IOmsorgsperson,
-    barn: IBarnMedISøknad
+    barn: IBarnMedISøknad,
+    toggleBeOmMånedIkkeDato: boolean
 ): IOmsorgspersonIKontraktFormatV8 => {
     const {
         navn,
@@ -126,6 +127,7 @@ export const omsorgspersonTilISøknadsfeltV8 = (
                 gjelderUtlandet: true,
                 personType: PersonType.Omsorgsperson,
                 barn: barn,
+                toggleBeOmMånedIkkeDato,
             })
         ),
         pensjonNorge: søknadsfeltBarn(
@@ -140,6 +142,7 @@ export const omsorgspersonTilISøknadsfeltV8 = (
                 gjelderUtlandet: false,
                 personType: PersonType.Omsorgsperson,
                 barn: barn,
+                toggleBeOmMånedIkkeDato,
             })
         ),
         andreUtbetalinger: søknadsfeltBarn(