Fjern moment.js

navikt · Jan 21, 2025 · 322e6cb · 322e6cb
1 parent d22ee9b
commit 322e6cb
Show file tree

Hide file tree

Showing 49 changed files with 238 additions and 478 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,6 @@
         "lodash.debounce": "^4.0.8",
         "lodash.isequal": "^4.5.0",
         "lodash.sortby": "^4.7.0",
-        "moment": "^2.30.1",
         "prop-types": "^15.7.2",
         "react": "18.3.1",
         "react-collapse": "^5.1.1",

diff --git a/src/AvtaleOversikt/AvtalekortMobil.tsx b/src/AvtaleOversikt/AvtalekortMobil.tsx
@@ -1,7 +1,6 @@
 import { Fragment, FunctionComponent, useState } from 'react';
 import { useNavigate, generatePath } from 'react-router-dom';
 import { LinkPanel, Heading, Ingress, BodyShort } from '@navikt/ds-react';
-import moment from 'moment';
 
 import './AvtalekortMobil.less';
 import BEMHelper from '@/utils/bem';
@@ -13,6 +12,7 @@ import { InnloggetBruker } from '@/types/innlogget-bruker';
 import { Path } from '@/Router';
 import { Varsel } from '@/types/varsel';
 import { avtaleStatusTekst } from '@/messages';
+import { formaterDatoHvisDefinert } from '@/utils/datoUtils';
 
 const cls = BEMHelper('avtalekortMobil');
 
@@ -64,7 +64,8 @@ const AvtalekortMobil: FunctionComponent<{
                                         <Ingress>{avtale.bedriftNavn}</Ingress>
                                         <VerticalSpacer rem={0.5} />
                                         <BodyShort size="small">
-                                            Opprettet {moment(avtale.opprettetTidspunkt).format('DD.MM.YYYY')}
+                                            Startdato {formaterDatoHvisDefinert(avtale.startDato)}, sluttdato{' '}
+                                            {formaterDatoHvisDefinert(avtale.sluttDato)}
                                         </BodyShort>
                                         <div className={cls.element('status')}>
                                             <StatusIkon status={avtale.status} />

diff --git a/src/AvtaleSide/AvtaleStatus/ArbeidsgiverAvtaleStatus.tsx b/src/AvtaleSide/AvtaleStatus/ArbeidsgiverAvtaleStatus.tsx
@@ -4,7 +4,7 @@ import KlarForOppstart from '@/AvtaleSide/AvtaleStatus/KlarForOppstart';
 import StatusPanel from '@/AvtaleSide/AvtaleStatus/StatusPanel';
 import VerticalSpacer from '@/komponenter/layout/VerticalSpacer';
 import { Avtale } from '@/types/avtale';
-import { formatterDatoHvisDefinert } from '@/utils/datoUtils';
+import { formaterDato, NORSK_DATO_OG_TID_FORMAT_FULL } from '@/utils/datoUtils';
 import { BodyShort } from '@navikt/ds-react';
 import React, { FunctionComponent } from 'react';
 import { useFeatureToggles } from '@/FeatureToggleProvider';
@@ -48,7 +48,8 @@ const ArbeidsgiverAvtaleStatus: FunctionComponent<Props> = ({ avtale }) => {
                     header={'Avtalen er annullert'}
                     body={
                         <BodyShort size="small">
-                            Veileder har annullert avtalen {formatterDatoHvisDefinert(avtale.annullertTidspunkt!)}.
+                            Veileder har annullert avtalen{' '}
+                            {formaterDato(avtale.annullertTidspunkt!, NORSK_DATO_OG_TID_FORMAT_FULL)}.
                         </BodyShort>
                     }
                 />
@@ -94,9 +95,7 @@ const ArbeidsgiverAvtaleStatus: FunctionComponent<Props> = ({ avtale }) => {
             );
         }
         case 'KLAR_FOR_OPPSTART':
-            return (
-                <KlarForOppstart avtaleInngått={avtale.avtaleInngått} startDato={avtale.gjeldendeInnhold.startDato} />
-            );
+            return <KlarForOppstart startDato={avtale.gjeldendeInnhold.startDato!} />;
         case 'GJENNOMFØRES':
             return <Gjennomføres avtaleInngått={avtale.avtaleInngått} startDato={avtale.gjeldendeInnhold.startDato} />;
         case 'AVSLUTTET':

diff --git a/src/AvtaleSide/AvtaleStatus/Avsluttet.tsx b/src/AvtaleSide/AvtaleStatus/Avsluttet.tsx
@@ -1,7 +1,7 @@
 import StatusPanel from '@/AvtaleSide/AvtaleStatus/StatusPanel';
-import { formatterDato, NORSK_DATO_FORMAT } from '@/utils/datoUtils';
+import { formaterDato, NORSK_DATO_FORMAT_FULL } from '@/utils/datoUtils';
 import { BodyShort } from '@navikt/ds-react';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 interface Props {
     startDato?: string;
@@ -14,8 +14,8 @@ const Avsluttet: FunctionComponent<Props> = ({ startDato, sluttDato }) => {
             header="Tiltaket er avsluttet"
             body={
                 <BodyShort size="small">
-                    Tiltaket varte fra {formatterDato(startDato!, NORSK_DATO_FORMAT)} til{' '}
-                    {formatterDato(sluttDato!, NORSK_DATO_FORMAT)}.
+                    Tiltaket varte fra {formaterDato(startDato!, NORSK_DATO_FORMAT_FULL)} til{' '}
+                    {formaterDato(sluttDato!, NORSK_DATO_FORMAT_FULL)}.
                 </BodyShort>
             }
         />

diff --git a/src/AvtaleSide/AvtaleStatus/DeltakerAvtaleStatus.tsx b/src/AvtaleSide/AvtaleStatus/DeltakerAvtaleStatus.tsx
@@ -4,9 +4,9 @@ import KlarForOppstart from '@/AvtaleSide/AvtaleStatus/KlarForOppstart';
 import StatusPanel from '@/AvtaleSide/AvtaleStatus/StatusPanel';
 import VerticalSpacer from '@/komponenter/layout/VerticalSpacer';
 import { Avtale, Avtaleinnhold } from '@/types/avtale';
-import { formatterDato } from '@/utils/datoUtils';
+import { formaterDato, NORSK_DATO_OG_TID_FORMAT_FULL } from '@/utils/datoUtils';
 import { BodyShort } from '@navikt/ds-react';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 interface Props {
     avtale: Pick<
@@ -31,7 +31,8 @@ const DeltakerAvtaleStatus: FunctionComponent<Props> = ({ avtale }) => {
                     header="Avtalen er annullert"
                     body={
                         <BodyShort size="small">
-                            Veileder har annullert avtalen {formatterDato(avtale.annullertTidspunkt!)}. Årsak:{' '}
+                            Veileder har annullert avtalen{' '}
+                            {formaterDato(avtale.annullertTidspunkt!, NORSK_DATO_OG_TID_FORMAT_FULL)}. Årsak:{' '}
                             {avtale.annullertGrunn}.
                         </BodyShort>
                     }
@@ -43,7 +44,8 @@ const DeltakerAvtaleStatus: FunctionComponent<Props> = ({ avtale }) => {
                     header="Avtalen er avbrutt"
                     body={
                         <BodyShort size="small">
-                            Veileder har avbrutt avtalen {formatterDato(avtale.avbruttDato!)}. Årsak:{' '}
+                            Veileder har avbrutt avtalen{' '}
+                            {formaterDato(avtale.avbruttDato!, NORSK_DATO_OG_TID_FORMAT_FULL)}. Årsak:{' '}
                             {avtale.avbruttGrunn}.
                         </BodyShort>
                     }
@@ -92,9 +94,7 @@ const DeltakerAvtaleStatus: FunctionComponent<Props> = ({ avtale }) => {
                 />
             );
         case 'KLAR_FOR_OPPSTART':
-            return (
-                <KlarForOppstart avtaleInngått={avtale.avtaleInngått} startDato={avtale.gjeldendeInnhold.startDato} />
-            );
+            return <KlarForOppstart startDato={avtale.gjeldendeInnhold.startDato!} />;
         case 'GJENNOMFØRES':
             return <Gjennomføres avtaleInngått={avtale.avtaleInngått} startDato={avtale.gjeldendeInnhold.startDato} />;
         case 'AVSLUTTET':

diff --git a/src/AvtaleSide/AvtaleStatus/Gjennomføres.tsx b/src/AvtaleSide/AvtaleStatus/Gjennomføres.tsx
@@ -1,7 +1,7 @@
 import StatusPanel from '@/AvtaleSide/AvtaleStatus/StatusPanel';
-import { formatterDato, NORSK_DATO_FORMAT } from '@/utils/datoUtils';
+import { formaterDato, NORSK_DATO_FORMAT_FULL } from '@/utils/datoUtils';
 import { BodyShort } from '@navikt/ds-react';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 interface Props {
     avtaleInngått?: string;
@@ -14,8 +14,8 @@ const Gjennomføres: FunctionComponent<Props> = ({ avtaleInngått, startDato })
             header="Tiltaket gjennomføres"
             body={
                 <BodyShort size="small">
-                    Avtale ble inngått {formatterDato(avtaleInngått!, NORSK_DATO_FORMAT)}. Tiltaket startet{' '}
-                    {formatterDato(startDato!, NORSK_DATO_FORMAT)}.
+                    Avtale ble inngått {formaterDato(avtaleInngått!, NORSK_DATO_FORMAT_FULL)}. Tiltaket startet{' '}
+                    {formaterDato(startDato!, NORSK_DATO_FORMAT_FULL)}.
                 </BodyShort>
             }
         />

diff --git a/src/AvtaleSide/AvtaleStatus/HvemHarGodkjentModal.tsx b/src/AvtaleSide/AvtaleStatus/HvemHarGodkjentModal.tsx
@@ -2,8 +2,8 @@ import CheckIkon from '@/assets/ikoner/check.svg?react';
 import VarselIkon from '@/assets/ikoner/varsel.svg?react';
 import { AvtaleContext } from '@/AvtaleProvider';
 import { TiltaksType } from '@/types/avtale';
-import { formatterDato } from '@/utils/datoUtils';
-import { BodyLong, BodyShort, Button, Label, Modal } from '@navikt/ds-react';
+import { formaterDato, NORSK_DATO_FORMAT_FULL } from '@/utils/datoUtils';
+import { BodyShort, Button, Label, Modal } from '@navikt/ds-react';
 import { FunctionComponent, useContext, useState } from 'react';
 import './HvemHarGodkjentModal.less';
 
@@ -70,7 +70,7 @@ const GodkjenningRad: React.FunctionComponent<GodkjenningRadProps> = (props: God
     const måGodkjenneTekst = props.tiltakstype === 'MENTOR' ? 'Må signere' : 'Må godkjenne';
 
     const godkjentStatus: string = props.godkjentAvtale
-        ? harGodkjentTekst + ' ' + formatterDato(props.godkjentAvtale)
+        ? harGodkjentTekst + ' ' + formaterDato(props.godkjentAvtale, NORSK_DATO_FORMAT_FULL)
         : måGodkjenneTekst;
 
     const navn = props.navn;

diff --git a/src/AvtaleSide/AvtaleStatus/KlarForOppstart.tsx b/src/AvtaleSide/AvtaleStatus/KlarForOppstart.tsx
@@ -1,18 +1,19 @@
 import StatusPanel from '@/AvtaleSide/AvtaleStatus/StatusPanel';
-import { formatterDato, NORSK_DATO_FORMAT } from '@/utils/datoUtils';
+import { formaterDato, NORSK_DATO_FORMAT_FULL } from '@/utils/datoUtils';
 import { BodyShort } from '@navikt/ds-react';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 interface Props {
-    avtaleInngått?: string;
-    startDato?: string;
+    startDato: string;
 }
 
-const KlarForOppstart: FunctionComponent<Props> = ({ avtaleInngått, startDato }) => {
+const KlarForOppstart: FunctionComponent<Props> = ({ startDato }) => {
     return (
         <StatusPanel
             header="Avtalen er ferdig utfylt og godkjent av NAV"
-            body={<BodyShort size="small">Tiltaket starter {formatterDato(startDato!, NORSK_DATO_FORMAT)}.</BodyShort>}
+            body={
+                <BodyShort size="small">Tiltaket starter {formaterDato(startDato, NORSK_DATO_FORMAT_FULL)}.</BodyShort>
+            }
         />
     );
 };

diff --git a/src/AvtaleSide/AvtaleStatus/MentorAvtaleStatus.tsx b/src/AvtaleSide/AvtaleStatus/MentorAvtaleStatus.tsx
@@ -2,11 +2,10 @@ import Avsluttet from '@/AvtaleSide/AvtaleStatus/Avsluttet';
 import Gjennomføres from '@/AvtaleSide/AvtaleStatus/Gjennomføres';
 import KlarForOppstart from '@/AvtaleSide/AvtaleStatus/KlarForOppstart';
 import StatusPanel from '@/AvtaleSide/AvtaleStatus/StatusPanel';
-import VerticalSpacer from '@/komponenter/layout/VerticalSpacer';
 import { Avtale, Avtaleinnhold } from '@/types/avtale';
-import { formatterDato } from '@/utils/datoUtils';
+import { formaterDato, NORSK_DATO_OG_TID_FORMAT_FULL } from '@/utils/datoUtils';
 import { BodyShort } from '@navikt/ds-react';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 interface Props {
     avtale: Pick<Avtale, 'status' | 'annullertTidspunkt' | 'avtaleInngått' | 'annullertGrunn' | 'avbruttGrunn'> & {
@@ -22,7 +21,8 @@ const MentorAvtaleStatus: FunctionComponent<Props> = ({ avtale }) => {
                     header="Avtalen er annullert"
                     body={
                         <BodyShort size="small">
-                            Veileder har annullert avtalen {formatterDato(avtale.annullertTidspunkt!)}.
+                            Veileder har annullert avtalen{' '}
+                            {formaterDato(avtale.annullertTidspunkt!, NORSK_DATO_OG_TID_FORMAT_FULL)}.
                         </BodyShort>
                     }
                 />
@@ -59,9 +59,7 @@ const MentorAvtaleStatus: FunctionComponent<Props> = ({ avtale }) => {
                 />
             );
         case 'KLAR_FOR_OPPSTART':
-            return (
-                <KlarForOppstart avtaleInngått={avtale.avtaleInngått} startDato={avtale.gjeldendeInnhold.startDato} />
-            );
+            return <KlarForOppstart startDato={avtale.gjeldendeInnhold.startDato!} />;
         case 'GJENNOMFØRES':
             return <Gjennomføres avtaleInngått={avtale.avtaleInngått} startDato={avtale.gjeldendeInnhold.startDato} />;
         case 'AVSLUTTET':

diff --git a/src/AvtaleSide/AvtaleStatus/VeilederAvtaleStatus.tsx b/src/AvtaleSide/AvtaleStatus/VeilederAvtaleStatus.tsx
@@ -1,5 +1,4 @@
 import { BodyShort } from '@navikt/ds-react';
-import moment from 'moment';
 import React, { useContext } from 'react';
 
 import { AvtaleContext } from '@/AvtaleProvider';
@@ -9,7 +8,7 @@ import StatusPanel from '@/AvtaleSide/AvtaleStatus/StatusPanel';
 import TilskuddsperioderReturnert from '@/AvtaleSide/steg/GodkjenningSteg/TilskuddsperioderReturnert';
 import LagreKnapp from '@/komponenter/LagreKnapp/LagreKnapp';
 import VerticalSpacer from '@/komponenter/layout/VerticalSpacer';
-import { formaterTid, formatterDato, NORSK_DATO_FORMAT } from '@/utils/datoUtils';
+import { tidSidenTidspunkt, formaterDato, NORSK_DATO_FORMAT_FULL } from '@/utils/datoUtils';
 import { Avtale } from '@/types/avtale';
 import { useFeatureToggles } from '@/FeatureToggleProvider';
 
@@ -77,15 +76,6 @@ function VeilederAvtaleStatus(props: Props) {
     const { overtaAvtale } = useContext(AvtaleContext);
     const { arbeidstreningReadonly } = useFeatureToggles();
 
-    const tidSidenDeltakerFikkVarsling = () => {
-        if (avtale.godkjentAvArbeidsgiver !== undefined) {
-            if (moment(avtale.godkjentAvArbeidsgiver).diff(moment().toString(), 'days') > 0) {
-                return `${moment(avtale.godkjentAvArbeidsgiver).diff(moment().toString(), 'days')} dager siden.`;
-            }
-            return `${formaterTid(avtale.godkjentAvArbeidsgiver)}`;
-        }
-    };
-
     if (avtale.tiltakstype === 'ARBEIDSTRENING' && arbeidstreningReadonly) {
         return (
             <StatusPanel
@@ -150,10 +140,13 @@ function VeilederAvtaleStatus(props: Props) {
                 <StatusPanel
                     header="Avtalen er annullert"
                     body={
-                        <BodyShort size="small">
-                            Du eller en annen veileder har annullert avtalen {formatterDato(avtale.annullertTidspunkt!)}
-                            . Årsak: {avtale.annullertGrunn}.
-                        </BodyShort>
+                        <>
+                            <BodyShort size="small">
+                                Du eller en annen veileder har annullert avtalen{' '}
+                                {formaterDato(avtale.annullertTidspunkt!)}.
+                            </BodyShort>
+                            <BodyShort size="small">Årsak: {avtale.annullertGrunn}.</BodyShort>
+                        </>
                     }
                 />
             );
@@ -289,9 +282,14 @@ function VeilederAvtaleStatus(props: Props) {
                             header="Venter på godkjenning av avtalen fra deltaker og signering av mentor"
                             body={
                                 <BodyShort size="small">
-                                    Avtalen må godkjennes av deltaker Deltaker fikk en varsling på min side Personbruker
-                                    om å godkjenne avtalen for {tidSidenDeltakerFikkVarsling()} Mentor må signere
-                                    taushetserklæringen før du kan godkjenne avtalen.
+                                    Avtalen må godkjennes av deltaker.{' '}
+                                    {avtale.godkjentAvArbeidsgiver && (
+                                        <>
+                                            Deltaker fikk en varsling på min side Personbruker om å godkjenne avtalen
+                                            for {tidSidenTidspunkt(avtale.godkjentAvArbeidsgiver)} siden.
+                                        </>
+                                    )}{' '}
+                                    Mentor må signere taushetserklæringen før du kan godkjenne avtalen.
                                 </BodyShort>
                             }
                         />
@@ -317,8 +315,13 @@ function VeilederAvtaleStatus(props: Props) {
                             header="Venter på godkjenning av avtalen fra deltaker"
                             body={
                                 <BodyShort size="small">
-                                    Avtalen må godkjennes av deltaker. Deltaker fikk en varsling på min side på NAV.no
-                                    om å godkjenne avtalen for {tidSidenDeltakerFikkVarsling()}
+                                    Avtalen må godkjennes av deltaker.
+                                    {avtale.godkjentAvArbeidsgiver && (
+                                        <>
+                                            Deltaker fikk en varsling på min side på NAV.no om å godkjenne avtalen for{' '}
+                                            {tidSidenTidspunkt(avtale.godkjentAvArbeidsgiver)} siden
+                                        </>
+                                    )}
                                 </BodyShort>
                             }
                         />
@@ -374,8 +377,9 @@ function VeilederAvtaleStatus(props: Props) {
                     body={
                         <>
                             <BodyShort size="small">
-                                Avtale ble inngått {formatterDato(avtale.avtaleInngått!, NORSK_DATO_FORMAT)}. Tiltaket
-                                starter {formatterDato(avtale.gjeldendeInnhold.startDato!, NORSK_DATO_FORMAT)}.
+                                Avtale ble inngått {formaterDato(avtale.avtaleInngått!, NORSK_DATO_FORMAT_FULL)}.
+                                Tiltaket starter{' '}
+                                {formaterDato(avtale.gjeldendeInnhold.startDato!, NORSK_DATO_FORMAT_FULL)}.
                             </BodyShort>
                             <VerticalSpacer rem={1} />
                             <BodyShort size="small">
@@ -393,8 +397,9 @@ function VeilederAvtaleStatus(props: Props) {
                     body={
                         <>
                             <BodyShort size="small">
-                                Avtale ble inngått {formatterDato(avtale.avtaleInngått!, NORSK_DATO_FORMAT)}. Tiltaket
-                                starter {formatterDato(avtale.gjeldendeInnhold.startDato!, NORSK_DATO_FORMAT)}.
+                                Avtale ble inngått {formaterDato(avtale.avtaleInngått!, NORSK_DATO_FORMAT_FULL)}.{' '}
+                                Tiltaket starter{' '}
+                                {formaterDato(avtale.gjeldendeInnhold.startDato!, NORSK_DATO_FORMAT_FULL)}.
                             </BodyShort>
                             <VerticalSpacer rem={1} />
                             <BodyShort size="small">

diff --git a/src/AvtaleSide/VarselModal/VarselModal.less b/src/AvtaleSide/VarselModal/VarselModal.less
@@ -14,7 +14,7 @@
         // Desktop only
         &__modal {
             max-width: 60rem;
-            width: 50rem;
+            width: 60rem;
         }
     }
     @media (max-width: @screen-sm-min) {