MVP - Støtte for VTA-O-avtaler

Legge til støtte for VTA-O-avtaler. Foreløpig vil
tiltaket være skjult bak feature-toggle.

Disse avtalene skiller seg ut ved at de har nye
påkrevde felter (kontaktinfo for fadder), og at
tilskuddsberegningen er fast.

I tillegg oppstår en ny utfordring vedrørende navn
på VTA-O-tiltaket i at det har en kort og lang versjon.

Til sist er det også en del tekstlige endringer for
dette tiltaket. Dette er ikke ferdigstilt og vil jobbes
videre på.

Co-authored-by: Magnus Skalleberg Rom <magnus.skalleberg.rom@nav.no>
Co-authored-by: d142796 <millad.dagdoni@nav.no>

src/AvtaleOversikt/AvtaleTabell.tsx

@@ -1,19 +1,19 @@
 import AvtaleTabellRadHeader from '@/AvtaleOversikt/AvtaleTabellRadHeader';
 import StatusIkon from '@/komponenter/StatusIkon/StatusIkon';
-import { avtaleStatusTekst, tiltakstypeTekst } from '@/messages';
+import { avtaleStatusTekst, tiltakstypeTekstKort } from '@/messages';
 import { pathTilAvtaleNy } from '@/paths';
 import { AvtaleMinimalListeVisning } from '@/types/avtale';
 import { InnloggetBruker } from '@/types/innlogget-bruker';
 import { Varsel } from '@/types/varsel';
 import BEMHelper from '@/utils/bem';
 import { BodyShort, Table } from '@navikt/ds-react';
-import React, { Fragment, FunctionComponent, useState } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 import MediaQuery from 'react-responsive';
 import { useNavigate } from 'react-router-dom';
 import TaushetserklæringModal from './Taushetserklæring/Taushetserklæring';
 import './AvtaleTabell.less';
 import { ChevronRightIcon } from '@navikt/aksel-icons';
-import { storForbokstav } from '@/utils/stringUtils';
+import { kunStorForbokstav } from '@/utils/stringUtils';
 
 const cls = BEMHelper('avtaletabell');
 
@@ -89,7 +89,7 @@ const AvtaleTabell: FunctionComponent<{
                                 <Table.DataCell>
                                     {ulestVarsel && <span aria-hidden={!ulestVarsel} className="ulest-varsel-ikon" />}
                                     <BodyShort size="small">
-                                        {storForbokstav(tiltakstypeTekst[avtale.tiltakstype])}
+                                        {kunStorForbokstav(tiltakstypeTekstKort[avtale.tiltakstype])}
                                     </BodyShort>
                                 </Table.DataCell>
                                 <Table.DataCell>

src/AvtaleOversikt/Filtrering/BeslutterFiltrering.tsx

@@ -3,7 +3,7 @@ import TilskuddPeriodeStatusFilter from '@/AvtaleOversikt/Filtrering/TilskuddPer
 import BEMHelper from '@/utils/bem';
 import { FunctionComponent } from 'react';
 import { DeltakerOgBedriftFilterGammel } from './GammelFiltrering/DeltakerOgBedriftFilterGammel';
-import TiltakstypeFilterGammel from './GammelFiltrering/TiltakstypeFilterGamel';
+import TiltakstypeFilterGammel from './GammelFiltrering/TiltakstypeFilterGammel';
 
 const cls = BEMHelper('filtrering');
 const BeslutterFiltrering: FunctionComponent = () => {

src/AvtaleOversikt/Filtrering/GammelFiltrering/TiltakstypeFilterGamel.tsx → src/AvtaleOversikt/Filtrering/GammelFiltrering/TiltakstypeFilterGammel.tsx

@@ -4,17 +4,20 @@ import { TiltaksType } from '@/types/avtale';
 import { Radio, RadioGroup } from '@navikt/ds-react';
 import { FunctionComponent } from 'react';
 import { useFilterGammel } from './useFilterGammel';
+import { useFeatureToggles } from '@/FeatureToggleProvider';
 
 export type FiltreringMedBeslutterProps = { erBeslutter: boolean };
 const TiltakstypeFilterGammel: FunctionComponent<FiltreringMedBeslutterProps> = (props) => {
     const { endreFilter, filtre } = useFilterGammel();
+    const { vtaoTiltakToggle } = useFeatureToggles();
 
     const alleTiltakstyperBeslutter: OptionProps[] = [
         { value: '', label: 'Alle' },
         { value: 'MIDLERTIDIG_LONNSTILSKUDD', label: 'Midlertidig lønnstilskudd' },
         { value: 'VARIG_LONNSTILSKUDD', label: 'Varig lønnstilskudd' },
         { value: 'SOMMERJOBB', label: 'Sommerjobb' },
-    ];
+        vtaoTiltakToggle ? { value: 'VTAO', label: 'Varig tilrettelagt arbeid i ordinær virksomhet (VTA-O)' } : null,
+    ].filter((x) => x !== null) as OptionProps[];
 
     const alleTiltakstyper: OptionProps[] = [
         { value: '', label: 'Alle' },
@@ -24,7 +27,8 @@ const TiltakstypeFilterGammel: FunctionComponent<FiltreringMedBeslutterProps> =
         { value: 'SOMMERJOBB', label: 'Sommerjobb' },
         { value: 'MENTOR', label: 'Mentor' },
         { value: 'INKLUDERINGSTILSKUDD', label: 'Inkluderingstilskudd' },
-    ];
+        vtaoTiltakToggle ? { value: 'VTAO', label: 'Varig tilrettelagt arbeid i ordinær virksomhet (VTA-O)' } : null,
+    ].filter((x) => x !== null) as OptionProps[];
 
     const tiltakstyper = props.erBeslutter ? alleTiltakstyperBeslutter : alleTiltakstyper;
 

src/AvtaleOversikt/Filtrering/TiltakstypeFilter.tsx

@@ -4,7 +4,7 @@ import { useFeatureToggles } from '@/FeatureToggleProvider';
 import { OptionProps } from '@/komponenter/form/SelectInput';
 import { TiltaksType } from '@/types/avtale';
 import { Radio, RadioGroup } from '@navikt/ds-react';
-import React, { FunctionComponent, useContext } from 'react';
+import React, { FunctionComponent } from 'react';
 
 export type FiltreringMedBeslutterProps = { erBeslutter: boolean };
 const TiltakstypeFilter: FunctionComponent<FiltreringMedBeslutterProps> = (props) => {
@@ -16,7 +16,8 @@ const TiltakstypeFilter: FunctionComponent<FiltreringMedBeslutterProps> = (props
         { value: 'MIDLERTIDIG_LONNSTILSKUDD', label: 'Midlertidig lønnstilskudd' },
         { value: 'VARIG_LONNSTILSKUDD', label: 'Varig lønnstilskudd' },
         { value: 'SOMMERJOBB', label: 'Sommerjobb' },
-    ];
+        vtaoTiltakToggle ? { value: 'VTAO', label: 'Varig tilrettelagt arbeid i ordinær virksomhet (VTA-O)' } : null,
+    ].filter((x) => x !== null) as OptionProps[];
 
     const alleTiltakstyper: OptionProps[] = [
         { value: '', label: 'Alle' },
@@ -26,7 +27,7 @@ const TiltakstypeFilter: FunctionComponent<FiltreringMedBeslutterProps> = (props
         { value: 'SOMMERJOBB', label: 'Sommerjobb' },
         { value: 'MENTOR', label: 'Mentor' },
         { value: 'INKLUDERINGSTILSKUDD', label: 'Inkluderingstilskudd' },
-        vtaoTiltakToggle ? { value: 'VTAO', label: 'VTA-oppfølging' } : null,
+        vtaoTiltakToggle ? { value: 'VTAO', label: 'Varig tilrettelagt arbeid i ordinær virksomhet (VTA-O)' } : null,
     ].filter((x) => x !== null) as OptionProps[];
 
     const tiltakstyper = props.erBeslutter ? alleTiltakstyperBeslutter : alleTiltakstyper;

src/AvtaleSide/Varsellogg/VarselTabell.tsx

@@ -3,7 +3,6 @@ import { Varsel } from '@/types/varsel';
 import { formaterTid, formatterDato } from '@/utils/datoUtils';
 import { storForbokstav } from '@/utils/stringUtils';
 import { Table } from '@navikt/ds-react';
-import moment from 'moment';
 import { Checkbox, CheckboxGroup } from '@navikt/ds-react';
 
 import { FunctionComponent, PropsWithChildren, useState } from 'react';

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

@@ -2,8 +2,6 @@ import React from 'react';
 import { formatterDato, NORSK_DATO_FORMAT } from '@/utils/datoUtils';
 import { Button } from '@navikt/ds-react';
 import BEMHelper from '@/utils/bem';
-import moment from 'moment';
-import { formatterPenger } from '@/utils/PengeUtils';
 
 interface Props {
     className: string;
@@ -12,7 +10,6 @@ interface Props {
     antallAktiveTilskuddsperioder: number;
     setVisAllePerioder: (value: React.SetStateAction<boolean>) => void;
     visAllePerioder: boolean;
-    tiltakstype: string;
 }
 
 const InfoRundtTilskuddsperioder: React.FC<Props> = ({
@@ -22,29 +19,16 @@ const InfoRundtTilskuddsperioder: React.FC<Props> = ({
     antallAktiveTilskuddsperioder,
     setVisAllePerioder,
     visAllePerioder,
-    tiltakstype,
 }: Props) => {
     if (!(gjeldendeInnholdStartdato && gjeldendeInnholdSluttdato)) return null;
 
     const cls = BEMHelper(className);
     return (
         <>
             <div className={cls.element('tabell-innslag')}>
-                {tiltakstype === 'VTAO' ? (
-                    <>
-                        Avtalen varer i {moment(gjeldendeInnholdSluttdato).diff(gjeldendeInnholdStartdato, 'years')}{' '}
-                        {'år.'}
-                        <br />
-                        Det tilsvarer en refusjon til arbeisgiver på ca {formatterPenger(6808 * 12)} i året og totalt{' '}
-                        {formatterPenger(antallAktiveTilskuddsperioder * 6808)} kr for hele perioden .
-                    </>
-                ) : (
-                    <>
-                        Avtalen varer fra {formatterDato(gjeldendeInnholdStartdato, NORSK_DATO_FORMAT)} til{' '}
-                        {formatterDato(gjeldendeInnholdSluttdato, NORSK_DATO_FORMAT)}. Det tilsvarer{' '}
-                        {antallAktiveTilskuddsperioder} tilskuddsperioder.
-                    </>
-                )}
+                Avtalen varer fra {formatterDato(gjeldendeInnholdStartdato, NORSK_DATO_FORMAT)} til{' '}
+                {formatterDato(gjeldendeInnholdSluttdato, NORSK_DATO_FORMAT)}. Det tilsvarer{' '}
+                {antallAktiveTilskuddsperioder} tilskuddsperioder.
             </div>
             {!visAllePerioder && (
                 <Button size="small" onClick={() => setVisAllePerioder(true)}>

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

@@ -3,15 +3,22 @@ import { BodyShort, Heading, Label } from '@navikt/ds-react';
 import { formatterDato, NORSK_DATO_FORMAT } from '@/utils/datoUtils';
 import BEMHelper from '@/utils/bem';
 import { InnloggetBrukerContext } from '@/InnloggingBoundary/InnloggingBoundary';
+import { Avtale } from '@/types/avtale';
 
 interface Props {
     className: string;
-    sluttdato: string;
+    avtale: Avtale;
 }
 
-const MeldingArbeidsgiverSokRefusjon: React.FC<Props> = ({ className, sluttdato }: Props) => {
+const erAutomatiskUtbetalingAvRefusjon = (avtale: Avtale) => {
+    return avtale.tiltakstype === 'VTAO';
+};
+
+const MeldingArbeidsgiverSokRefusjon: React.FC<Props> = ({ className, avtale }: Props) => {
     const { rolle } = useContext(InnloggetBrukerContext);
+    const sluttdato = avtale.tilskuddPeriode[0].sluttDato;
     if (rolle !== 'ARBEIDSGIVER') return null;
+    if (erAutomatiskUtbetalingAvRefusjon(avtale)) return null;
 
     const cls = BEMHelper(className);
 

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

@@ -25,23 +25,26 @@ const VisningTilskuddsperioder: FunctionComponent = () => {
                         <div className={cls.element('container')}>
                             <div className={cls.element('header')}>
                                 <Label>Utregning</Label>
-                                <BodyShort size="small">
-                                    Utregningen baserer seg på lønn for en måned. Dagsatsen får du ved å dele "sum
-                                    tilskudd for en måned" på snitt antall dager i en måned (365,25 / 12 = 30,4375) og
-                                    ganger med antall dager i perioden.
-                                </BodyShort>
+                                {avtale.tiltakstype === 'VTAO' ? (
+                                    <BodyShort size="small">
+                                        Dagsatsen får du ved å dele "sum tilskudd for en måned" på snitt antall dager i
+                                        en måned (365,25 / 12 = 30,4375) og ganger med antall dager i perioden.
+                                    </BodyShort>
+                                ) : (
+                                    <BodyShort size="small">
+                                        Utregningen baserer seg på lønn for en måned. Dagsatsen får du ved å dele "sum
+                                        tilskudd for en måned" på snitt antall dager i en måned (365,25 / 12 = 30,4375)
+                                        og ganger med antall dager i perioden.
+                                    </BodyShort>
+                                )}
                                 <InfoRundtRedusertProsentsats className={cls.className} />
                             </div>
                             {avtale.tiltakstype == 'VTAO' ? (
                                 <VisningTilskuddsperioderTabellVtao className={cls.className} />
                             ) : (
                                 <VisningTilskuddsperioderTabell className={cls.className} />
                             )}
-
-                            <MeldingArbeidsgiverSokRefusjon
-                                className={cls.className}
-                                sluttdato={avtale.tilskuddPeriode[0].sluttDato}
-                            />
+                            <MeldingArbeidsgiverSokRefusjon className={cls.className} avtale={avtale} />
                         </div>
                     </Accordion.Content>
                 </Accordion.Item>

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

@@ -83,7 +83,6 @@ const VisningTilskuddsperioderTabell: React.FC<Properties> = ({ className }: Pro
                 antallAktiveTilskuddsperioder={antallAktiveTilskuddsperioder(avtale)}
                 setVisAllePerioder={setVisAllePerioder}
                 visAllePerioder={visAllePerioder}
-                tiltakstype={avtale.tiltakstype}
             />
         </div>
     );

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

@@ -32,11 +32,7 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
                 <Label>Tilskudd for perioder</Label>
                 {innloggetBruker.erNavAnsatt && <Label>Status</Label>}
                 <Label>Inntil</Label>
-                <Label>
-                    Ubetalt
-                    <br />
-                    refusjon
-                </Label>
+                <Label>Utbetales</Label>
             </div>
             {avtale.tilskuddPeriode
                 .filter((p: TilskuddsPeriode) => p.aktiv)
@@ -55,10 +51,10 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
                                     </BodyShort>
                                 )}
                                 <BodyShort size="small" style={{ minWidth: '4rem' }}>
-                                    {formatterPenger(periode.beløp)}
+                                    {periode.beløp !== null ? formatterPenger(periode.beløp) : '-'}
                                 </BodyShort>
                                 <BodyShort size="small" style={{ minWidth: '4rem' }}>
-                                    {formatterDato(periode.sluttDato, 'MMM YYYY')}
+                                    {formatterDato(moment(periode.sluttDato).add(3, 'days').toString(), 'DD MMM YYYY')}
                                 </BodyShort>
                             </div>
                         </div>
@@ -80,10 +76,10 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
                             </BodyShort>
                         )}
                         <BodyShort size="small" style={{ minWidth: '4rem' }}>
-                            {formatterPenger(sistePeriode.beløp)}
+                            {sistePeriode.beløp !== null ? formatterPenger(sistePeriode.beløp) : '-'}
                         </BodyShort>
                         <BodyShort size="small" style={{ minWidth: '4rem' }}>
-                            {formatterDato(sistePeriode.sluttDato, 'MMM YYYY')}
+                            {formatterDato(moment(sistePeriode.sluttDato).add(3, 'days').toString(), 'DD MMM YYYY')}
                         </BodyShort>
                     </div>
                 </div>
@@ -95,7 +91,6 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
                 antallAktiveTilskuddsperioder={antallAktiveTilskuddsperioder(avtale)}
                 setVisAllePerioder={setVisAllePerioder}
                 visAllePerioder={visAllePerioder}
-                tiltakstype={avtale.tiltakstype}
             />
         </div>
     );

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

@@ -1,6 +1,6 @@
 import { AvtaleContext } from '@/AvtaleProvider';
 import BEMHelper from '@/utils/bem';
-import { Accordion, BodyShort, Label } from '@navikt/ds-react';
+import { BodyShort, Label } from '@navikt/ds-react';
 import { FunctionComponent, useContext } from 'react';
 import './visningTilskuddsperioder.less';
 import VerticalSpacer from '@/komponenter/layout/VerticalSpacer';