diff --git a/src/AvtaleSide/steg/BeregningTilskudd/Arbeidsgiveravgift.tsx b/src/AvtaleSide/steg/BeregningTilskudd/Arbeidsgiveravgift.tsx index 8b58a722c..41510ff2c 100644 --- a/src/AvtaleSide/steg/BeregningTilskudd/Arbeidsgiveravgift.tsx +++ b/src/AvtaleSide/steg/BeregningTilskudd/Arbeidsgiveravgift.tsx @@ -1,7 +1,7 @@ import React, { useContext } from 'react'; import { Column, Row } from '@/komponenter/NavGrid/Grid'; import SelectInput from '@/komponenter/form/SelectInput'; -import { parseFloatIfFloatable } from '@/utils/lonnstilskuddUtregningUtils'; +import { parseFloatIfFloatable } from '@/utils'; import { BEMWrapper } from '@/utils/bem'; import { AvtaleContext } from '@/AvtaleProvider'; diff --git a/src/AvtaleSide/steg/BeregningTilskudd/Feriepenger.tsx b/src/AvtaleSide/steg/BeregningTilskudd/Feriepenger.tsx index a91462a59..e3cd9cd31 100644 --- a/src/AvtaleSide/steg/BeregningTilskudd/Feriepenger.tsx +++ b/src/AvtaleSide/steg/BeregningTilskudd/Feriepenger.tsx @@ -3,7 +3,7 @@ import { Column, Row } from '@/komponenter/NavGrid/Grid'; import { BEMWrapper } from '@/utils/bem'; import { AvtaleContext } from '@/AvtaleProvider'; import SelectInput from '@/komponenter/form/SelectInput'; -import { parseFloatIfFloatable } from '@/utils/lonnstilskuddUtregningUtils'; +import { parseFloatIfFloatable } from '@/utils'; interface Props { cls: BEMWrapper; diff --git a/src/AvtaleSide/steg/BeregningTilskudd/UtregningPanel.tsx b/src/AvtaleSide/steg/BeregningTilskudd/UtregningPanel.tsx index 66fcd4955..494cd8d80 100644 --- a/src/AvtaleSide/steg/BeregningTilskudd/UtregningPanel.tsx +++ b/src/AvtaleSide/steg/BeregningTilskudd/UtregningPanel.tsx @@ -12,11 +12,12 @@ import VerticalSpacer from '@/komponenter/layout/VerticalSpacer'; import { Beregningsgrunnlag } from '@/types/avtale'; import BEMHelper from '@/utils/bem'; import { formatterDato, NORSK_DATO_FORMAT } from '@/utils/datoUtils'; -import { formatterPenger } from '@/utils/PengeUtils'; +import { formaterPenger } from '@/utils/PengeUtils'; import { Accordion, Label } from '@navikt/ds-react'; import { FunctionComponent, useContext } from 'react'; import './UtregningPanel.less'; import Utregningsrad from './Utregningsrad'; +import { formaterNorskeTall } from '@/utils'; const UtregningPanel: FunctionComponent = (props) => { const cls = BEMHelper('utregningspanel'); @@ -45,7 +46,7 @@ const UtregningPanel: FunctionComponent = (props) => { labelIkon={} labelTekst="Stillingsprosent" verdiOperator={} - verdi={props.stillingprosent || 0} + verdi={props.stillingprosent ? formaterNorskeTall(props.stillingprosent) : 0} ikkePenger /> = (props) => { {props.datoForRedusertProsent && ( <> @@ -115,7 +116,7 @@ const UtregningPanel: FunctionComponent = (props) => { )} diff --git a/src/AvtaleSide/steg/BeregningTilskudd/Utregningsrad.tsx b/src/AvtaleSide/steg/BeregningTilskudd/Utregningsrad.tsx index 986d683e6..67320dac2 100644 --- a/src/AvtaleSide/steg/BeregningTilskudd/Utregningsrad.tsx +++ b/src/AvtaleSide/steg/BeregningTilskudd/Utregningsrad.tsx @@ -1,8 +1,7 @@ -import { visSatsMedEttDesimal } from '@/utils/lonnstilskuddUtregningUtils'; +import { formaterNorskeTall, formaterPenger } from '@/utils'; import { BodyShort, Label, Heading } from '@navikt/ds-react'; import React, { FunctionComponent, ReactNode } from 'react'; import BEMHelper from '../../../utils/bem'; -import { formatterPenger } from '../../../utils/PengeUtils'; import './UtregningPanel.less'; interface Props { @@ -32,13 +31,13 @@ const Utregningsrad: FunctionComponent = (props: Props) => { const setLabelSats = (sats?: number) => sats !== undefined && sats !== null ? ( - ({visSatsMedEttDesimal(sats)}%) + ({formaterNorskeTall(sats * 100)}%) ) : null; const parseVerdi = (verdi: string | number) => { const verdiSomNumber = parseInt(verdi.toString(), 10); - return !isNaN(verdiSomNumber) && !props.ikkePenger ? formatterPenger(verdiSomNumber) : verdi; + return !isNaN(verdiSomNumber) && !props.ikkePenger ? formaterPenger(verdiSomNumber) : verdi; }; return ( diff --git a/src/AvtaleSide/steg/BeregningTilskudd/VisUtregningenPanel.tsx b/src/AvtaleSide/steg/BeregningTilskudd/VisUtregningenPanel.tsx index 8d554d3cd..b1ca949b8 100644 --- a/src/AvtaleSide/steg/BeregningTilskudd/VisUtregningenPanel.tsx +++ b/src/AvtaleSide/steg/BeregningTilskudd/VisUtregningenPanel.tsx @@ -6,7 +6,7 @@ import ObligTjenestepensjonIkon from '@/assets/ikoner/obligTjenestepensjon.svg?r import StillingProsentIkon from '@/assets/ikoner/stillingsprosent.svg?react'; import { Beregningsgrunnlag } from '@/types/avtale'; import BEMHelper from '@/utils/bem'; -import { visSatsMedEttDesimal, visTalletEller0 } from '@/utils/lonnstilskuddUtregningUtils'; +import { formaterNorskeTall, visTalletEller0 } from '@/utils'; import classNames from 'classnames'; import { Accordion, Label } from '@navikt/ds-react'; import { Column, Container, Row } from '@/komponenter/NavGrid/Grid'; @@ -33,7 +33,7 @@ const VisUtregningenPanel: FunctionComponent = (props) => { - {visTalletEller0(props.stillingprosent)} % + {formaterNorskeTall(props.stillingprosent)} % @@ -47,7 +47,7 @@ const VisUtregningenPanel: FunctionComponent = (props) => { -
{visTalletEller0(props.manedslonn)} kr
+
{formaterNorskeTall(props.manedslonn)} kr
 @@ -58,7 +58,7 @@ const VisUtregningenPanel: FunctionComponent = (props) => {
Feriepenger
- ({visSatsMedEttDesimal(props.feriepengesats)}%) + ({formaterNorskeTall(props.feriepengesats)}%) + @@ -95,13 +95,13 @@ const VisUtregningenPanel: FunctionComponent = (props) => {
Arbeidsgiveravgift{' '} - ({visSatsMedEttDesimal(props.arbeidsgiveravgift)}%) + ({formaterNorskeTall(props.arbeidsgiveravgift)}%)
- ({visSatsMedEttDesimal(props.arbeidsgiveravgift)}%) + ({formaterNorskeTall(props.arbeidsgiveravgift)}%) diff --git a/src/AvtaleSide/steg/BeregningTilskudd/tilskuddsPerioder/TilskuddsPerioderVeileder.tsx b/src/AvtaleSide/steg/BeregningTilskudd/tilskuddsPerioder/TilskuddsPerioderVeileder.tsx index 6324031f5..717fdd4bf 100644 --- a/src/AvtaleSide/steg/BeregningTilskudd/tilskuddsPerioder/TilskuddsPerioderVeileder.tsx +++ b/src/AvtaleSide/steg/BeregningTilskudd/tilskuddsPerioder/TilskuddsPerioderVeileder.tsx @@ -3,7 +3,7 @@ import { TilskuddsPeriode } from '@/types/avtale'; import BEMHelper from '@/utils/bem'; import { formatterPeriode } from '@/utils/datoUtils'; import { formatterProsent } from '@/utils/formatterProsent'; -import { formatterPenger } from '@/utils/PengeUtils'; +import { formaterPenger } from '@/utils/PengeUtils'; import { FunctionComponent } from 'react'; import './tilskuddsPerioder.less'; @@ -37,7 +37,7 @@ const TilskuddsPerioderVeileder: FunctionComponent = (props) => { {formatterPeriode(periode.startDato, periode.sluttDato)} {formatterProsent(periode.lonnstilskuddProsent)} - {formatterPenger(periode.beløp)} + {formaterPenger(periode.beløp)} diff --git a/src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabell.tsx b/src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabell.tsx index 0c8238495..44512d7eb 100644 --- a/src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabell.tsx +++ b/src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabell.tsx @@ -3,7 +3,7 @@ import { BodyShort, Label } from '@navikt/ds-react'; import { TilskuddsPeriode } from '@/types/avtale'; import { formatterDato, NORSK_DATO_FORMAT } from '@/utils/datoUtils'; import EtikettStatus from '@/BeslutterSide/EtikettStatus'; -import { formatterPenger } from '@/utils/PengeUtils'; +import { formaterPenger } from '@/utils/PengeUtils'; import InfoRundtTilskuddsperioder from '@/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/InfoRundtTilskuddsperioder'; import BEMHelper from '@/utils/bem'; import { InnloggetBrukerContext } from '@/InnloggingBoundary/InnloggingBoundary'; @@ -71,7 +71,7 @@ const VisningTilskuddsperioderTabell: React.FC = ({ className }: Pro avtale.tiltakstype === 'SOMMERJOBB') && <>{periode.lonnstilskuddProsent}%} - {formatterPenger(periode.beløp)} + {formaterPenger(periode.beløp)} ); diff --git a/src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx b/src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx index e502d3e0d..c00f6d368 100644 --- a/src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx +++ b/src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx @@ -3,7 +3,7 @@ import { BodyShort, Label } from '@navikt/ds-react'; import { TilskuddsPeriode } from '@/types/avtale'; import { formatterDato, NORSK_DATO_FORMAT } from '@/utils/datoUtils'; import EtikettStatus from '@/BeslutterSide/EtikettStatus'; -import { formatterPenger } from '@/utils/PengeUtils'; +import { formaterPenger } from '@/utils/PengeUtils'; import InfoRundtTilskuddsperioder from '@/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/InfoRundtTilskuddsperioder'; import BEMHelper from '@/utils/bem'; import { InnloggetBrukerContext } from '@/InnloggingBoundary/InnloggingBoundary'; @@ -51,7 +51,7 @@ const VisningTilskuddsperioderTabellVtao: React.FC = ({ className }: )} - {periode.beløp !== null ? formatterPenger(periode.beløp) : '-'} + {periode.beløp !== null ? formaterPenger(periode.beløp) : '-'} {formatterDato(moment(periode.sluttDato).add(3, 'days').toString(), 'DD MMM YYYY')} @@ -76,7 +76,7 @@ const VisningTilskuddsperioderTabellVtao: React.FC = ({ className }: )} - {sistePeriode.beløp !== null ? formatterPenger(sistePeriode.beløp) : '-'} + {sistePeriode.beløp !== null ? formaterPenger(sistePeriode.beløp) : '-'} {formatterDato(moment(sistePeriode.sluttDato).add(3, 'days').toString(), 'DD MMM YYYY')} diff --git a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/InkluderingstilskuddOppsummering/InkluderingstilskuddOppsummering.tsx b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/InkluderingstilskuddOppsummering/InkluderingstilskuddOppsummering.tsx index 94f4936ce..edb5c1c9c 100644 --- a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/InkluderingstilskuddOppsummering/InkluderingstilskuddOppsummering.tsx +++ b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/InkluderingstilskuddOppsummering/InkluderingstilskuddOppsummering.tsx @@ -5,7 +5,7 @@ import TilskuddsutgiftTabell from '@/AvtaleSide/steg/InkluderingstilskuddSteg/Ti import VerticalSpacer from '@/komponenter/layout/VerticalSpacer'; import { InkluderingsInnhold } from '@/types/avtale'; import BEMHelper from '@/utils/bem'; -import { formatterPenger } from '@/utils/PengeUtils'; +import { formaterPenger } from '@/utils/PengeUtils'; import { FunctionComponent } from 'react'; import SjekkOmVerdiEksisterer from '../SjekkOmVerdiEksisterer/SjekkOmVerdiEksisterer'; import Stegoppsummering from '../Stegoppsummering/Stegoppsummering'; @@ -32,7 +32,7 @@ const InkluderingstilskuddOppsummering: FunctionComponent =
diff --git a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/SjekkOmVerdiEksisterer/SjekkOmVerdiEksisterer.tsx b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/SjekkOmVerdiEksisterer/SjekkOmVerdiEksisterer.tsx index 0dd891d32..623a6f2a5 100644 --- a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/SjekkOmVerdiEksisterer/SjekkOmVerdiEksisterer.tsx +++ b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/SjekkOmVerdiEksisterer/SjekkOmVerdiEksisterer.tsx @@ -1,13 +1,13 @@ import React, { FunctionComponent } from 'react'; import { BodyShort, Tag } from '@navikt/ds-react'; const SjekkOmVerdiEksisterer: FunctionComponent<{ - verdi?: string; + verdi?: string | number; formatertVerdi?: JSX.Element | string; clsName?: string; label?: string; ariaLabel?: string; }> = (props) => { - if (props.verdi) { + if (props.verdi || props.verdi === 0) { return ( {props.label} {props.formatertVerdi ? props.formatertVerdi : props.verdi} diff --git a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/varighet/VarighetOppsummering.tsx b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/varighet/VarighetOppsummering.tsx index 7d74f2e70..4d68737dc 100644 --- a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/varighet/VarighetOppsummering.tsx +++ b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/varighet/VarighetOppsummering.tsx @@ -8,6 +8,7 @@ import React, { FunctionComponent, useContext } from 'react'; import SjekkOmVerdiEksisterer from '../SjekkOmVerdiEksisterer/SjekkOmVerdiEksisterer'; import Stegoppsummering from '../Stegoppsummering/Stegoppsummering'; import VarighetIkon from './VarighetIkon'; +import { formaterNorskeTall } from '@/utils'; const formaterDato = (dato: string): string => { return moment(dato).format('DD.MM.YYYY'); @@ -25,8 +26,6 @@ const VarighetOppsummering: FunctionComponent = ({ }) => { const avtaleContext = useContext(AvtaleContext); - const stillingProsent = stillingprosent ? stillingprosent.toString() + '%' : ''; - return ( } tittel="Dato og arbeidstid"> @@ -43,14 +42,20 @@ const VarighetOppsummering: FunctionComponent = ({ {avtaleContext.avtale?.tiltakstype !== 'MENTOR' && ( - + )} - + diff --git a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/EndreInkluderingsutgifter/EndreInkluderingsutgifter.tsx b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/EndreInkluderingsutgifter/EndreInkluderingsutgifter.tsx index 324b5b274..9a48247ed 100644 --- a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/EndreInkluderingsutgifter/EndreInkluderingsutgifter.tsx +++ b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/EndreInkluderingsutgifter/EndreInkluderingsutgifter.tsx @@ -6,7 +6,7 @@ import VerticalSpacer from '@/komponenter/layout/VerticalSpacer'; import BekreftelseModal from '@/komponenter/modal/BekreftelseModal'; import { endreInkluderingstilskudd } from '@/services/rest-service'; import { InkluderingstilskuddsutgiftType } from '@/types/avtale'; -import { formatterPenger } from '@/utils/PengeUtils'; +import { formaterPenger } from '@/utils/PengeUtils'; import { Task } from '@navikt/ds-icons/cjs'; import { Ingress, Label, Link } from '@navikt/ds-react'; import React, { FunctionComponent, useContext, useState } from 'react'; @@ -104,7 +104,7 @@ const EndreInkluderingsutgifter: FunctionComponent = () => {
- {formatterPenger(inkluderingstilskuddTotal)} + {formaterPenger(inkluderingstilskuddTotal)}
diff --git a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.less b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.less index 65a233757..271710853 100644 --- a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.less +++ b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.less @@ -22,6 +22,7 @@ &__stilling-input-wrapper { display: flex; + align-items: flex-start; justify-content: center; .navds-form-field { diff --git a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.tsx b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.tsx index e5a7c012a..d18ba1362 100644 --- a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.tsx +++ b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.tsx @@ -11,6 +11,7 @@ import { DialogDots } from '@navikt/ds-icons/cjs'; import { Link } from '@navikt/ds-react'; import React, { FunctionComponent, useContext, useState } from 'react'; import './EndreStillingbeskrivelse.less'; +import AntallDagerInput from '@/AvtaleSide/steg/VarighetSteg/AntallDagerInput'; const EndreStillingbeskrivelse: FunctionComponent = () => { const cls = BEMHelper('endreStillingbeskrivelse'); @@ -98,20 +99,10 @@ const EndreStillingbeskrivelse: FunctionComponent = () => { verdi={stillingsprosent} settVerdi={(verdi) => setStillingsprosent(verdi)} /> - { - const verdi = parseInt(eventVerdi, 10); - if (verdi > 0 && verdi < 8) { - setAntallDagerPerUke(verdi); - } else { - setAntallDagerPerUke(undefined); - } - }} + settVerdi={(verdi) => setAntallDagerPerUke(verdi)} /> diff --git a/src/AvtaleSide/steg/InkluderingstilskuddSteg/EnTilskuddsutgift.tsx b/src/AvtaleSide/steg/InkluderingstilskuddSteg/EnTilskuddsutgift.tsx index 1301ef5fe..764f88582 100644 --- a/src/AvtaleSide/steg/InkluderingstilskuddSteg/EnTilskuddsutgift.tsx +++ b/src/AvtaleSide/steg/InkluderingstilskuddSteg/EnTilskuddsutgift.tsx @@ -3,7 +3,7 @@ import KnappMedIkon from '@/komponenter/KnappMedIkon/KnappMedIkon'; import VerticalSpacer from '@/komponenter/layout/VerticalSpacer'; import { inkluderingstilskuddtypeTekst } from '@/messages'; import { Inkluderingstilskuddsutgift, InkluderingstilskuddsutgiftType } from '@/types/avtale'; -import { formatterPenger } from '@/utils/PengeUtils'; +import { formaterPenger } from '@/utils/PengeUtils'; import { BodyShort, Button, Select } from '@navikt/ds-react'; import { FunctionComponent, useState } from 'react'; @@ -91,7 +91,7 @@ const EnTilskuddsutgift: FunctionComponent = (props) => { - {formatterPenger(props.tilskuddsutgift.beløp)} + {formaterPenger(props.tilskuddsutgift.beløp)} {kanUtgiftSlettes() && ( diff --git a/src/AvtaleSide/steg/InkluderingstilskuddSteg/EnTilskuddsutgiftOppsummering.tsx b/src/AvtaleSide/steg/InkluderingstilskuddSteg/EnTilskuddsutgiftOppsummering.tsx index 632685419..2cc86e789 100644 --- a/src/AvtaleSide/steg/InkluderingstilskuddSteg/EnTilskuddsutgiftOppsummering.tsx +++ b/src/AvtaleSide/steg/InkluderingstilskuddSteg/EnTilskuddsutgiftOppsummering.tsx @@ -1,6 +1,6 @@ import { inkluderingstilskuddtypeTekst } from '@/messages'; import { Inkluderingstilskuddsutgift } from '@/types/avtale'; -import { formatterPenger } from '@/utils/PengeUtils'; +import { formaterPenger } from '@/utils/PengeUtils'; import { BodyShort } from '@navikt/ds-react'; import React, { FunctionComponent } from 'react'; @@ -15,7 +15,7 @@ const EnTilskuddsutgiftOppsummering: FunctionComponent = (props) => { {inkluderingstilskuddtypeTekst[props.tilskuddsutgift.type]} - {formatterPenger(props.tilskuddsutgift.beløp)} + {formaterPenger(props.tilskuddsutgift.beløp)} ); diff --git a/src/AvtaleSide/steg/InkluderingstilskuddSteg/InkluderingstilskuddSteg.tsx b/src/AvtaleSide/steg/InkluderingstilskuddSteg/InkluderingstilskuddSteg.tsx index e1e2d5d3a..ff632e437 100644 --- a/src/AvtaleSide/steg/InkluderingstilskuddSteg/InkluderingstilskuddSteg.tsx +++ b/src/AvtaleSide/steg/InkluderingstilskuddSteg/InkluderingstilskuddSteg.tsx @@ -5,7 +5,7 @@ import VerticalSpacer from '@/komponenter/layout/VerticalSpacer'; import PakrevdTextarea from '@/komponenter/PakrevdTextarea/PakrevdTextarea'; import { InkluderingstilskuddsutgiftType } from '@/types/avtale'; import BEMHelper from '@/utils/bem'; -import { formatterPenger } from '@/utils/PengeUtils'; +import { formaterPenger } from '@/utils/PengeUtils'; import { Column, Row } from '@/komponenter/NavGrid/Grid'; import { BodyShort, Heading, Ingress } from '@navikt/ds-react'; import React, { FunctionComponent, useContext, useState } from 'react'; @@ -117,7 +117,7 @@ const InkluderingstilskuddSteg: FunctionComponent = () => {
diff --git a/src/AvtaleSide/steg/InkluderingstilskuddSteg/OpprettEnTilskuddsutgift.tsx b/src/AvtaleSide/steg/InkluderingstilskuddSteg/OpprettEnTilskuddsutgift.tsx index 6a0415dea..86a6922bb 100644 --- a/src/AvtaleSide/steg/InkluderingstilskuddSteg/OpprettEnTilskuddsutgift.tsx +++ b/src/AvtaleSide/steg/InkluderingstilskuddSteg/OpprettEnTilskuddsutgift.tsx @@ -3,7 +3,7 @@ import LagreKnapp from '@/komponenter/LagreKnapp/LagreKnapp'; import VerticalSpacer from '@/komponenter/layout/VerticalSpacer'; import { inkluderingstilskuddtypeTekst } from '@/messages'; import { Inkluderingstilskuddsutgift, InkluderingstilskuddsutgiftType } from '@/types/avtale'; -import { formatterPenger } from '@/utils/PengeUtils'; +import { formaterPenger } from '@/utils/PengeUtils'; import { Button, Heading, Select } from '@navikt/ds-react'; import { ChangeEvent, FunctionComponent, useState } from 'react'; @@ -50,7 +50,7 @@ const OpprettEnTilskuddsutgift: FunctionComponent = (props) => { } if (beløp > gjenståendeMaxBeløp) { setBeløpFeil( - `Det totale beløpet overskrider det maksimale beløpet på ${formatterPenger(inkluderingstilskuddSats)}`, + `Det totale beløpet overskrider det maksimale beløpet på ${formaterPenger(inkluderingstilskuddSats)}`, ); return; } else { diff --git a/src/AvtaleSide/steg/VarighetSteg/AntallDagerInput/AntallDagerInput.tsx b/src/AvtaleSide/steg/VarighetSteg/AntallDagerInput/AntallDagerInput.tsx new file mode 100644 index 000000000..3a9055c89 --- /dev/null +++ b/src/AvtaleSide/steg/VarighetSteg/AntallDagerInput/AntallDagerInput.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import * as z from 'zod'; +import { TextField } from '@navikt/ds-react'; +import { useController, useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; + +import { formaterNorskeTallFraInput, parseNorskeTallFraInput } from '@/utils'; + +interface Props { + label: string; + verdi?: number; + settVerdi: (verdi?: number) => void; + size?: 'medium' | 'small'; +} + +const schema = z.object({ + antallDagerPerUke: z.preprocess( + parseNorskeTallFraInput, + z + .number({ + invalid_type_error: 'Antall dager være et tall', + required_error: 'Antall dager er påkrevd', + }) + .min(0.1, 'Antall dager må være større enn 0') + .max(7, 'Antall dager må være mindre enn eller lik 7'), + ), +}); + +type Schema = { antallDagerPerUke: string }; + +function AntallDagerInput(props: Props) { + const { settVerdi, verdi } = props; + + const { formState, control } = useForm({ + mode: 'onBlur', + resolver: zodResolver(schema), + }); + + const { field } = useController({ + control, + name: 'antallDagerPerUke', + defaultValue: formaterNorskeTallFraInput(verdi?.toString() ?? ''), + }); + + const onChange: React.ChangeEventHandler = (e) => { + const antallDagerPerUke = e.target.value; + field.onChange(antallDagerPerUke); + + const { success, data } = schema.safeParse({ antallDagerPerUke }); + settVerdi(success ? data?.antallDagerPerUke : undefined); + }; + + return ( + + ); +} + +export default AntallDagerInput; diff --git a/src/AvtaleSide/steg/VarighetSteg/AntallDagerInput/index.ts b/src/AvtaleSide/steg/VarighetSteg/AntallDagerInput/index.ts new file mode 100644 index 000000000..25c3dc865 --- /dev/null +++ b/src/AvtaleSide/steg/VarighetSteg/AntallDagerInput/index.ts @@ -0,0 +1,3 @@ +import AntallDagerInput from './AntallDagerInput'; + +export default AntallDagerInput; diff --git a/src/AvtaleSide/steg/VarighetSteg/InfoBoks/InfoBoks.tsx b/src/AvtaleSide/steg/VarighetSteg/InfoBoks/InfoBoks.tsx index ff5b530c6..6ca1ab119 100644 --- a/src/AvtaleSide/steg/VarighetSteg/InfoBoks/InfoBoks.tsx +++ b/src/AvtaleSide/steg/VarighetSteg/InfoBoks/InfoBoks.tsx @@ -3,6 +3,7 @@ import KalkulatorIkon from '@/assets/ikoner/kalkulator.svg?react'; import VerticalSpacer from '@/komponenter/layout/VerticalSpacer'; import { BodyShort, Label } from '@navikt/ds-react'; import './InfoBoks.less'; +import { formaterNorskeTall } from '@/utils'; interface InfoBoksProps { timerIUka: number; @@ -17,9 +18,9 @@ const InfoBoks = (props: InfoBoksProps) => ( - {props.timerIUka ? props.timerIUka : 0} + {props.timerIUka ? formaterNorskeTall(props.timerIUka) : 0}   timer eller   - {props.dagerIUka ? props.dagerIUka : 0} + {props.dagerIUka ? formaterNorskeTall(props.dagerIUka) : 0}   {props.dagerIUka <= 1 ? 'arbeidsdag' : 'arbeidsdager'} per uke diff --git a/src/AvtaleSide/steg/VarighetSteg/StillingsprosentInput/StillingsprosentInput.tsx b/src/AvtaleSide/steg/VarighetSteg/StillingsprosentInput/StillingsprosentInput.tsx index 4bd249bee..cbf101000 100644 --- a/src/AvtaleSide/steg/VarighetSteg/StillingsprosentInput/StillingsprosentInput.tsx +++ b/src/AvtaleSide/steg/VarighetSteg/StillingsprosentInput/StillingsprosentInput.tsx @@ -1,43 +1,66 @@ -import useValidering from '@/komponenter/useValidering'; +import React from 'react'; +import * as z from 'zod'; import { TextField } from '@navikt/ds-react'; +import { useController, useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; + +import { formaterNorskeTallFraInput, parseNorskeTallFraInput } from '@/utils'; interface Props { label: string; verdi?: number; - settVerdi: (verdi: number) => void; + settVerdi: (verdi?: number) => void; size?: 'medium' | 'small'; } -const StillingsprosentInput = (props: Props) => { - const [feil, setFeil, validerStillingsprosent] = useValidering(props.verdi, [ - (verdi) => { - if (!verdi) { - return 'Stillingsprosent er påkrevd'; - } - }, - (verdi) => { - if (verdi! <= 0 || verdi! > 100) { - return 'Stillingsprosent må være mellom 1 og 100'; - } - }, - ]); +const schema = z.object({ + stillingsprosent: z.preprocess( + parseNorskeTallFraInput, + z + .number({ + invalid_type_error: 'Stillingsprosent være et tall', + required_error: 'Stillingsprosent er påkrevd', + }) + .min(0.1, 'Stillingsprosent må være større enn 0') + .max(100, 'Stillingsprosent må være mindre enn eller lik 100'), + ), +}); + +type Schema = { stillingsprosent: string }; + +function StillingsprosentInput(props: Props) { + const { settVerdi, verdi } = props; + + const { formState, control } = useForm({ + mode: 'onBlur', + resolver: zodResolver(schema), + }); + + const { field } = useController({ + control, + name: 'stillingsprosent', + defaultValue: formaterNorskeTallFraInput(verdi?.toString() ?? ''), + }); + + const onChange: React.ChangeEventHandler = (e) => { + const stillingsprosent = e.target.value; + field.onChange(stillingsprosent); + + const { success, data } = schema.safeParse({ stillingsprosent }); + settVerdi(success ? data?.stillingsprosent : undefined); + }; return ( { - const verdi = event.target.value; - if (/^\d{0,3}$/.test(verdi)) { - props.settVerdi(Number(verdi)); - setFeil(undefined); - } - }} - onBlur={validerStillingsprosent} + onChange={onChange} size={props.size} + type="tel" + value={formaterNorskeTallFraInput(field.value)} /> ); -}; +} export default StillingsprosentInput; diff --git a/src/AvtaleSide/steg/VarighetSteg/StillingsprosentInput/index.ts b/src/AvtaleSide/steg/VarighetSteg/StillingsprosentInput/index.ts new file mode 100644 index 000000000..6450ee36e --- /dev/null +++ b/src/AvtaleSide/steg/VarighetSteg/StillingsprosentInput/index.ts @@ -0,0 +1,3 @@ +import StillingsprosentInput from './StillingsprosentInput'; + +export default StillingsprosentInput; diff --git a/src/AvtaleSide/steg/VarighetSteg/VarighetInputfelt.tsx b/src/AvtaleSide/steg/VarighetSteg/VarighetInputfelt.tsx index 8608b2b02..dcd20d4cb 100644 --- a/src/AvtaleSide/steg/VarighetSteg/VarighetInputfelt.tsx +++ b/src/AvtaleSide/steg/VarighetSteg/VarighetInputfelt.tsx @@ -1,12 +1,12 @@ import { AvtaleContext } from '@/AvtaleProvider'; import InfoBoks from '@/AvtaleSide/steg/VarighetSteg/InfoBoks/InfoBoks'; -import StillingsprosentInput from '@/AvtaleSide/steg/VarighetSteg/StillingsprosentInput/StillingsprosentInput'; +import StillingsprosentInput from '@/AvtaleSide/steg/VarighetSteg/StillingsprosentInput'; import { Column, Row } from '@/komponenter/NavGrid/Grid'; -import PakrevdInput from '@/komponenter/PakrevdInput/PakrevdInput'; import BEMHelper from '@/utils/bem'; import { accurateHumanize } from '@/utils/datoUtils'; import moment from 'moment'; import React, { useContext } from 'react'; +import AntallDagerInput from '@/AvtaleSide/steg/VarighetSteg/AntallDagerInput'; interface Props { className: string; @@ -40,20 +40,11 @@ const VarighetInputfelt: React.FC = ({ className }: Props) => { - { - const verdi = parseInt(eventVerdi, 10); - if (verdi > 0 && verdi < 8) { - settAvtaleInnholdVerdi('antallDagerPerUke', verdi); - } else { - settAvtaleInnholdVerdi('antallDagerPerUke', undefined); - } - }} + size="medium" + settVerdi={(verdi) => settAvtaleInnholdVerdi('antallDagerPerUke', verdi)} /> diff --git a/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx b/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx index 8ebba6038..7983052ad 100644 --- a/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx +++ b/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx @@ -1,7 +1,7 @@ import { AvtaleContext, Context } from '@/AvtaleProvider'; import { formatterDato, formatterPeriode, NORSK_DATO_FORMAT } from '@/utils/datoUtils'; import { formatterProsent } from '@/utils/formatterProsent'; -import { formatterPenger } from '@/utils/PengeUtils'; +import { formaterPenger } from '@/utils/PengeUtils'; import React, { FunctionComponent, useContext, useRef, useState, useEffect } from 'react'; import EtikettStatus from '../EtikettStatus'; import BEMHelper from '@/utils/bem'; @@ -99,7 +99,7 @@ const BeslutterTilskuddsPerioder: FunctionComponent = (props) => { > {formatterPeriode(periode.startDato, periode.sluttDato, 'DD.MM.YY')} - {formatterPenger(periode.beløp)} + {formaterPenger(periode.beløp)} {formatterProsent(periode.lonnstilskuddProsent)} {formatterDato(periode.kanBesluttesFom, NORSK_DATO_FORMAT)} {periode.status === 'GODKJENT' ? periode.enhet : enhet} diff --git a/src/komponenter/form/ValutaInput.tsx b/src/komponenter/form/ValutaInput.tsx index 9904a0311..0736064f5 100644 --- a/src/komponenter/form/ValutaInput.tsx +++ b/src/komponenter/form/ValutaInput.tsx @@ -1,5 +1,5 @@ import FormattedNumberInput from '@/komponenter/form/FormattedNumberInput'; -import { parseFloatIfFloatable } from '@/utils/lonnstilskuddUtregningUtils'; +import { parseFloatIfFloatable } from '@/utils'; import { TextFieldProps } from '@navikt/ds-react'; import React, { PropsWithChildren } from 'react'; diff --git a/src/utils/PengeUtils.ts b/src/utils/PengeUtils.ts index 6558d37cb..a709a8c37 100644 --- a/src/utils/PengeUtils.ts +++ b/src/utils/PengeUtils.ts @@ -1,4 +1,4 @@ -export const formatterPenger = (penger: number) => +export const formaterPenger = (penger: number) => `${new Intl.NumberFormat('nb-NO', { style: 'decimal', maximumFractionDigits: 2, diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 000000000..53eb814e3 --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,2 @@ +export * from './tallUtils'; +export * from './PengeUtils'; diff --git a/src/utils/lonnstilskuddUtregningUtils.ts b/src/utils/lonnstilskuddUtregningUtils.ts deleted file mode 100644 index e292a9414..000000000 --- a/src/utils/lonnstilskuddUtregningUtils.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const visTalletEller0 = (tallet?: number) => (tallet === 0 || tallet ? tallet : 0); -export const visSatsMedEttDesimal = (sats?: number) => (sats ? sats * 100 : 0).toFixed(1); -export const parseFloatIfFloatable = (verdi: string) => { - const floatedValue = parseFloat(verdi); - if (!isNaN(floatedValue)) { - return parseFloat(verdi); - } else { - return undefined; - } -}; diff --git a/src/utils/tallUtils.ts b/src/utils/tallUtils.ts new file mode 100644 index 000000000..d865e59d1 --- /dev/null +++ b/src/utils/tallUtils.ts @@ -0,0 +1,19 @@ +const numberFormat = new Intl.NumberFormat('nb-NO', { style: 'decimal', maximumFractionDigits: 2 }); + +export const formaterNorskeTall = (value: T): string | T => + typeof value === 'number' && !Number.isNaN(value) ? numberFormat.format(Number(value)) : value; + +export const formaterNorskeTallFraInput = (value: T): string | T => + typeof value === 'string' ? String(value).replace('.', ',') : value; + +export const parseNorskeTallFraInput = (value: T): number | undefined => + typeof value === 'string' && value !== '' + ? Number(String(value).replaceAll(/\s/g, '').replace(',', '.')) + : undefined; + +export const visTalletEller0 = (tallet?: number) => (tallet === 0 || tallet ? tallet : 0); + +export const parseFloatIfFloatable = (verdi: string) => { + const floatedValue = parseFloat(verdi); + return !isNaN(floatedValue) ? floatedValue : undefined; +};