Hent reell sats fra backend

Vi hadde fortsatt hardkodede beløp for VTAO-sats
i frontend, uten noen måte å hente oppdatert beløp
på. Innfører derfor et nytt api-endepunkt for henting
av sats, og bruker denne i BeregningVtaoTilskuddSteg.

For å unngå forvirring ved etterregistrering og lignende
merker vi tidligere tilskuddsperioder med en liten annotasjon
som sier at de har en annen sats enn den som er synlig.

package.json

@@ -32,6 +32,7 @@
         "axios": "1.7.7",
         "axios-retry": "4.5.0",
         "classnames": "^2.5.1",
+        "date-fns": "^3.6.0",
         "lodash.debounce": "^4.0.8",
         "lodash.isequal": "^4.5.0",
         "lodash.sortby": "^4.7.0",

src/AvtaleSide/steg/BeregningTilskudd/BeregningVTAOTilskuddSteg.tsx

@@ -1,27 +1,37 @@
 import { AvtaleContext } from '@/AvtaleProvider';
-import { InnloggetBrukerContext } from '@/InnloggingBoundary/InnloggingBoundary';
 import SkjemaTittel from '@/komponenter/form/SkjemaTittel';
 import Innholdsboks from '@/komponenter/Innholdsboks/Innholdsboks';
 import LagreKnapp from '@/komponenter/LagreKnapp/LagreKnapp';
 import VerticalSpacer from '@/komponenter/layout/VerticalSpacer';
 import BEMHelper from '@/utils/bem';
 import { Column, Row } from '@/komponenter/NavGrid/Grid';
-import { BodyShort, Heading, TextField } from '@navikt/ds-react';
-import { FunctionComponent, useContext } from 'react';
-import VisningTilskuddsperioder from '@/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioder';
+import { BodyShort, Heading } from '@navikt/ds-react';
+import { FunctionComponent, useContext, useEffect, useState } from 'react';
 import HenteKontonummer from '@/komponenter/form/henteKontornummer/HenteKontonummer';
 import './BeregningTilskuddSteg.less';
 import AvtaleStatus from '@/AvtaleSide/AvtaleStatus/AvtaleStatus';
 import VisueltDisabledInputFelt from '@/komponenter/VisueltDisabledInputFelt/VisueltDisabledInputFelt';
 import VisningTilskuddsperioderVtao from './visningTilskuddsperioder/VisningTilskuddsperioderVtao';
+import { hentVtaoSats } from '@/services/rest-service';
+import { formaterPenger } from '@/utils/PengeUtils';
+import { format } from 'date-fns';
 
 const cls = BEMHelper('beregningTilskuddSteg');
 
-const BeregningTilskuddSteg: FunctionComponent = () => {
-    const innloggetBruker = useContext(InnloggetBrukerContext);
-
+const BeregningVTAOTilskuddSteg: FunctionComponent = () => {
     const { avtale, lagreAvtale } = useContext(AvtaleContext);
 
+    const [sats, setSats] = useState<{ aar: number; belop: number }>({ aar: NaN, belop: NaN });
+
+    const satsBelop = isNaN(sats.belop) ? '...' : formaterPenger(sats.belop);
+    const satsAar = isNaN(sats.aar) ? '...' : sats.aar;
+
+    useEffect(() => {
+        hentVtaoSats(format(new Date(avtale.opprettetTidspunkt), 'yyyy-MM-dd')).then((data) => {
+            setSats(data);
+        });
+    }, [avtale]);
+
     return (
         <>
             <AvtaleStatus />
@@ -31,19 +41,19 @@ const BeregningTilskuddSteg: FunctionComponent = () => {
                     Hvor mye dekker tilskuddet?
                 </Heading>
                 <BodyShort size="small">
-                    Arbeidsgiveren får et tilskudd fra NAV for varig tilrettelagt arbeid. Tilskuddssatsen er 6 808
-                    kroner per måned. Satsen settes årlig av departementet og avtale- og refusjonsløsningen vil
-                    automatisk oppdateres når det kommer nye satser.
+                    Arbeidsgiveren får et tilskudd fra NAV for varig tilrettelagt arbeid. Tilskuddssatsen er {satsBelop}{' '}
+                    per måned. Satsen settes årlig av departementet og avtale- og refusjonsløsningen vil automatisk
+                    oppdateres når det kommer nye satser.
                 </BodyShort>
                 <VerticalSpacer rem={2} />
                 <div className={cls.element('rad')}>
                     <VisueltDisabledInputFelt
                         label="Månedlig tilskuddssats"
-                        description="Sats for 2024"
-                        tekst={'6808 kr'}
+                        description={`Sats for ${satsAar}`}
+                        tekst={satsBelop}
                     />
                 </div>
-                <VisningTilskuddsperioderVtao></VisningTilskuddsperioderVtao>
+                <VisningTilskuddsperioderVtao />
                 <Row className={cls.element('rad-kontonummer')}>
                     <Column md="12" className={cls.element('kontonummer')}>
                         <HenteKontonummer />
@@ -58,4 +68,4 @@ const BeregningTilskuddSteg: FunctionComponent = () => {
     );
 };
 
-export default BeregningTilskuddSteg;
+export default BeregningVTAOTilskuddSteg;

src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { BodyShort, Label } from '@navikt/ds-react';
 import { TilskuddsPeriode } from '@/types/avtale';
 import { formatterDato, NORSK_DATO_FORMAT } from '@/utils/datoUtils';
@@ -25,6 +25,10 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
     const { startIndexVisning, sluttIndexVisning } = getIndexVisningForTilskuddsperiode(avtale, visAllePerioder);
     const cls = BEMHelper(className);
     const sistePeriode = avtale.tilskuddPeriode.at(antallAktiveTilskuddsperioder(avtale) - 1);
+    const sistePeriodeAar = sistePeriode ? moment(sistePeriode?.startDato).year() : undefined;
+    const sistePeriodeErITidligereAar = sistePeriodeAar
+        ? sistePeriodeAar < moment(avtale.opprettetTidspunkt).year()
+        : false;
 
     return (
         <div className={cls.element('tabell')}>
@@ -38,13 +42,22 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
                 .filter((p: TilskuddsPeriode) => p.aktiv)
                 .slice(startIndexVisning, sluttIndexVisning)
                 .map((periode: TilskuddsPeriode, index: number) => {
+                    const periodeAar = moment(periode.startDato).year();
+                    const erITidligereAar = periodeAar < moment(avtale.opprettetTidspunkt).year();
                     return (
                         <div>
                             <div key={index} className={cls.element('tabell-innslag')}>
-                                <BodyShort size="small">
-                                    {formatterDato(periode.startDato, NORSK_DATO_FORMAT)} -{' '}
-                                    {formatterDato(periode.sluttDato, NORSK_DATO_FORMAT)}
-                                </BodyShort>
+                                <div>
+                                    <BodyShort size="small">
+                                        {formatterDato(periode.startDato, NORSK_DATO_FORMAT)} -{' '}
+                                        {formatterDato(periode.sluttDato, NORSK_DATO_FORMAT)}
+                                    </BodyShort>
+                                    {erITidligereAar && (
+                                        <BodyShort size="small" textColor="subtle">
+                                            Sats for {periodeAar}
+                                        </BodyShort>
+                                    )}
+                                </div>
                                 {innloggetBruker.erNavAnsatt && (
                                     <BodyShort>
                                         <EtikettStatus tilskuddsperiodestatus={periode.status} size="small" />
@@ -66,10 +79,17 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
                         ...
                     </div>
                     <div className={cls.element('tabell-innslag')}>
-                        <BodyShort size="small">
-                            {formatterDato(sistePeriode.startDato, NORSK_DATO_FORMAT)} -{' '}
-                            {formatterDato(sistePeriode.sluttDato, NORSK_DATO_FORMAT)}
-                        </BodyShort>
+                        <div>
+                            <BodyShort size="small">
+                                {formatterDato(sistePeriode.startDato, NORSK_DATO_FORMAT)} -{' '}
+                                {formatterDato(sistePeriode.sluttDato, NORSK_DATO_FORMAT)}
+                            </BodyShort>
+                            {sistePeriodeErITidligereAar && (
+                                <BodyShort size="small" textColor="subtle">
+                                    Sats for {sistePeriodeAar}
+                                </BodyShort>
+                            )}
+                        </div>
                         {innloggetBruker.erNavAnsatt && (
                             <BodyShort>
                                 <EtikettStatus tilskuddsperiodestatus={sistePeriode.status} size="small" />

src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderVtao.tsx

@@ -1,6 +1,6 @@
 import { AvtaleContext } from '@/AvtaleProvider';
 import BEMHelper from '@/utils/bem';
-import { BodyShort, Label } from '@navikt/ds-react';
+import { Label } from '@navikt/ds-react';
 import { FunctionComponent, useContext } from 'react';
 import './visningTilskuddsperioder.less';
 import VerticalSpacer from '@/komponenter/layout/VerticalSpacer';
@@ -15,7 +15,6 @@ const VisningTilskuddsperioderVtao: FunctionComponent = () => {
             <Label>
                 Oversikt over tilskudd fra {avtale.gjeldendeInnhold.startDato} - {avtale.gjeldendeInnhold.sluttDato}
             </Label>
-            <BodyShort size="small">(2024 - satser)</BodyShort>
             <VerticalSpacer rem={2} />
             <div className={cls.element('container')}>
                 <div className={cls.element('header')}>

src/services/rest-service.ts

@@ -579,3 +579,8 @@ export const justerArenaMigreringsdatoDryRun = async (avtale: Avtale, migrerings
     const response = await api.post(`/avtaler/${avtale.id}/juster-arena-migreringsdato/dry-run`, { migreringsdato });
     return response.data;
 };
+export const hentVtaoSats = async (forDato?: string): Promise<{ aar: number; belop: number }> => {
+    const queryParams = new URLSearchParams(removeEmpty({ forDato }));
+    const response = await api.get(`/satser/vtao?${queryParams}`);
+    return response.data;
+};