Legger til bruk av MånedÅrVelger

Author: ole-kristian-rudjord

src/frontend/components/Felleskomponenter/Arbeidsperiode/ArbeidsperiodeModal.tsx

@@ -6,15 +6,14 @@ 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 { dagensDato, gårsdagensDato, sisteDagDenneMåneden } 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 JaNeiSpmForSanity from '../JaNeiSpm/JaNeiSpmForSanity';
+import { DagIMåneden, MånedÅrVelger } from '../MånedÅrVelger/MånedÅrVelger';
 import TekstBlock from '../Sanity/TekstBlock';
-import { SkjemaCheckboxForSanity } from '../SkjemaCheckbox/SkjemaCheckboxForSanity';
 import { SkjemaFeiloppsummering } from '../SkjemaFeiloppsummering/SkjemaFeiloppsummering';
 import { SkjemaFeltInputForSanity } from '../SkjemaFeltInput/SkjemaFeltInputForSanity';
 import SkjemaModal from '../SkjemaModal/SkjemaModal';
@@ -39,7 +38,7 @@ export const ArbeidsperiodeModal: React.FC<ArbeidsperiodeModalProps> = ({
     erDød = false,
     forklaring = undefined,
 }) => {
-    const { tekster, plainTekst } = useApp();
+    const { tekster } = useApp();
     const { skjema, valideringErOk, nullstillSkjema, validerFelterOgVisFeilmelding } =
         useArbeidsperiodeSkjema(gjelderUtlandet, personType, erDød);
 
@@ -137,15 +136,25 @@ export const ArbeidsperiodeModal: React.FC<ArbeidsperiodeModalProps> = ({
                     label={<TekstBlock block={teksterForModal.arbeidsgiver.sporsmal} />}
                 />
             )}
-            {fraDatoArbeidsperiode.erSynlig && (
+            {/* {fraDatoArbeidsperiode.erSynlig && (
                 <Datovelger
                     felt={skjema.felter.fraDatoArbeidsperiode}
                     skjema={skjema}
                     label={<TekstBlock block={teksterForModal.startdato.sporsmal} />}
                     avgrensMaxDato={periodenErAvsluttet ? gårsdagensDato() : dagensDato()}
                 />
+            )} */}
+            {fraDatoArbeidsperiode.erSynlig && (
+                <MånedÅrVelger
+                    label={<TekstBlock block={teksterForModal.startdato.sporsmal} />}
+                    senesteValgbareMåned={periodenErAvsluttet ? gårsdagensDato() : dagensDato()}
+                    felt={skjema.felter.fraDatoArbeidsperiode}
+                    visFeilmeldinger={skjema.visFeilmeldinger}
+                    dagIMåneden={DagIMåneden.FØRSTE_DAG}
+                    kanIkkeVæreFremtid={true}
+                />
             )}
-            {tilDatoArbeidsperiode.erSynlig && (
+            {/* {tilDatoArbeidsperiode.erSynlig && (
                 <div>
                     <Datovelger
                         felt={skjema.felter.tilDatoArbeidsperiode}
@@ -171,6 +180,29 @@ export const ArbeidsperiodeModal: React.FC<ArbeidsperiodeModalProps> = ({
                         label={plainTekst(teksterForModal.sluttdatoFremtid.checkboxLabel)}
                     />
                 </div>
+            )} */}
+            {tilDatoArbeidsperiode.erSynlig && (
+                <MånedÅrVelger
+                    label={
+                        <TekstBlock
+                            block={
+                                periodenErAvsluttet
+                                    ? teksterForModal.sluttdatoFortid.sporsmal
+                                    : teksterForModal.sluttdatoFremtid.sporsmal
+                            }
+                        />
+                    }
+                    tidligsteValgbareMåned={minTilDatoForUtbetalingEllerArbeidsperiode(
+                        periodenErAvsluttet,
+                        skjema.felter.fraDatoArbeidsperiode.verdi
+                    )}
+                    senesteValgbareMåned={periodenErAvsluttet ? sisteDagDenneMåneden() : undefined}
+                    felt={skjema.felter.tilDatoArbeidsperiode}
+                    visFeilmeldinger={skjema.visFeilmeldinger}
+                    dagIMåneden={DagIMåneden.SISTE_DAG}
+                    kanIkkeVæreFremtid={periodenErAvsluttet}
+                    kanIkkeVæreFortid={!periodenErAvsluttet}
+                />
             )}
             {visFeiloppsummering(skjema) && <SkjemaFeiloppsummering skjema={skjema} />}
         </SkjemaModal>

src/frontend/utils/dato.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {
     add,
+    endOfMonth,
     format,
     isAfter,
     isBefore,
@@ -13,11 +14,13 @@ import {
     startOfToday,
     sub,
 } from 'date-fns';
+import type { Locale } from 'date-fns/locale';
+import { enGB, nb, nn } from 'date-fns/locale';
 
 import { feil, type FeltState, ok } from '@navikt/familie-skjema';
 
 import SpråkTekst from '../components/Felleskomponenter/SpråkTekst/SpråkTekst';
-import { AlternativtSvarForInput, DatoMedUkjent, ISODateString } from '../typer/common';
+import { AlternativtSvarForInput, DatoMedUkjent, ISODateString, LocaleType } from '../typer/common';
 import { LocaleRecordBlock, PlainTekst } from '../typer/sanity/sanity';
 import { IFormateringsfeilmeldingerTekstinnhold } from '../typer/sanity/tekstInnhold';
 
@@ -47,6 +50,8 @@ export const tidenesMorgen = () => startOfDay(new Date(1000, 0));
 
 export const tidenesEnde = () => startOfDay(new Date(3000, 0));
 
+export const sisteDagDenneMåneden = () => endOfMonth(new Date());
+
 export const stringTilDate = (dato: string) => startOfDay(new Date(dato));
 
 export const parseTilGyldigDato = (dateString: string, format: string): Date | undefined => {
@@ -140,11 +145,28 @@ export const validerDatoForSanity = (
     return ok(feltState);
 };
 
+export const formaterDatostringKunMåned = (datoString: ISODateString, språk: LocaleType) =>
+    format(new Date(datoString), 'MMMM yyyy', { locale: mapSpråkvalgTilDateFnsLocale(språk) });
+
 export const formaterDato = (datoString: ISODateString) =>
     format(new Date(datoString), 'dd.MM.yyyy');
 
+export const formaterDatoKunMåned = (dato: Date, språk: LocaleType) =>
+    format(dato, 'MMMM yyyy', { locale: mapSpråkvalgTilDateFnsLocale(språk) });
+
 export const formaterDatoMedUkjent = (datoMedUkjent: DatoMedUkjent, tekstForUkjent): string => {
     return datoMedUkjent === AlternativtSvarForInput.UKJENT
         ? tekstForUkjent
         : format(new Date(datoMedUkjent), 'dd.MM.yyyy');
 };
+
+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/visning.ts

@@ -1,6 +1,6 @@
-import { AlternativtSvarForInput, DatoMedUkjent } from '../typer/common';
+import { AlternativtSvarForInput, DatoMedUkjent, LocaleType } from '../typer/common';
 
-import { formaterDato } from './dato';
+import { formaterDato, formaterDatostringKunMåned } from './dato';
 
 export const formaterFnr = (fødselsnummer: string) => {
     return fødselsnummer.substring(0, 6) + ' ' + fødselsnummer.substring(6, 11);
@@ -12,6 +12,21 @@ export const formaterDatoMedUkjent = (datoMedUkjent: DatoMedUkjent, tekstForUkje
         : formaterDato(datoMedUkjent);
 };
 
+export const formaterMånedMedUkjent = (
+    svar: string,
+    vetIkkeTekst,
+    toggle: boolean,
+    valgtLocale: LocaleType
+) => {
+    if (svar === AlternativtSvarForInput.UKJENT) {
+        return vetIkkeTekst;
+    } else if (toggle) {
+        return uppercaseFørsteBokstav(formaterDatostringKunMåned(svar, valgtLocale));
+    } else {
+        return formaterDato(svar);
+    }
+};
+
 export const uppercaseFørsteBokstav = text => {
     if (typeof text !== 'string') return '';
     return text.charAt(0).toUpperCase() + text.slice(1);