feat. støtte for desimaltall i stillingsprosent og antall dager

* La til støtte for desimaltall i input for stillingsprosent og antall dager * Fikset korrekt comma i andre tallsatser
navikt · Dec 18, 2024 · 2e4219e · 2e4219e
1 parent a3cdab3
commit 2e4219e
Show file tree

Hide file tree

Showing 30 changed files with 201 additions and 108 deletions.
diff --git 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
@@ -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
@@ -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<Beregningsgrunnlag> = (props) => {
     const cls = BEMHelper('utregningspanel');
@@ -45,7 +46,7 @@ const UtregningPanel: FunctionComponent<Beregningsgrunnlag> = (props) => {
                             labelIkon={<StillingsprosentIkon />}
                             labelTekst="Stillingsprosent"
                             verdiOperator={<ProsentTegn />}
-                            verdi={props.stillingprosent || 0}
+                            verdi={props.stillingprosent ? formaterNorskeTall(props.stillingprosent) : 0}
                             ikkePenger
                         />
                         <Utregningsrad
@@ -96,7 +97,7 @@ const UtregningPanel: FunctionComponent<Beregningsgrunnlag> = (props) => {
                         <Utregningsrad
                             labelTekst="Sum tilskudd for en måned"
                             tekstType="element"
-                            verdi={`Inntil ${formatterPenger(props.sumLonnstilskudd || 0)}`}
+                            verdi={`Inntil ${formaterPenger(props.sumLonnstilskudd || 0)}`}
                         />
                         {props.datoForRedusertProsent && (
                             <>
@@ -115,7 +116,7 @@ const UtregningPanel: FunctionComponent<Beregningsgrunnlag> = (props) => {
                                 <Utregningsrad
                                     labelTekst="Sum tilskudd for en måned"
                                     tekstType="element"
-                                    verdi={`Inntil ${formatterPenger(props.sumLønnstilskuddRedusert || 0)}`}
+                                    verdi={`Inntil ${formaterPenger(props.sumLønnstilskuddRedusert || 0)}`}
                                 />
                             </>
                         )}

diff --git 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: Props) => {
     const setLabelSats = (sats?: number) =>
         sats !== undefined && sats !== null ? (
             <BodyShort size="small" className={cls.element('label-sats')}>
-                ({visSatsMedEttDesimal(sats)}%)
+                ({formaterNorskeTall(sats * 100)}%)
             </BodyShort>
         ) : 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
@@ -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<Beregningsgrunnlag> = (props) => {
                                 </div>
                             </Column>
                             <Column md="6" sm="6" xs="6" className={cls.element('column__siste')}>
-                                {visTalletEller0(props.stillingprosent)} %
+                                {formaterNorskeTall(props.stillingprosent)} %
                             </Column>
                         </Row>
                         <Row className={cls.element('rad')}>
@@ -47,7 +47,7 @@ const VisUtregningenPanel: FunctionComponent<Beregningsgrunnlag> = (props) => {
                                 </div>
                             </Column>
                             <Column md="6" sm="6" xs="6" className={cls.element('column__siste')}>
-                                <div> {visTalletEller0(props.manedslonn)} kr</div>
+                                <div> {formaterNorskeTall(props.manedslonn)} kr</div>
                             </Column>
                         </Row>
                         <Row className={cls.element('rad')}>
@@ -58,7 +58,7 @@ const VisUtregningenPanel: FunctionComponent<Beregningsgrunnlag> = (props) => {
                                 <div>Feriepenger</div>
                             </Column>
                             <Column md="3" sm="3" xs="3">
-                                ({visSatsMedEttDesimal(props.feriepengesats)}%)
+                                ({formaterNorskeTall(props.feriepengesats)}%)
                             </Column>
                             <Column md="1" sm="1" xs="1">
                                 +
@@ -95,13 +95,13 @@ const VisUtregningenPanel: FunctionComponent<Beregningsgrunnlag> = (props) => {
                                 <div>
                                     Arbeidsgiveravgift{' '}
                                     <MediaQuery maxWidth={699}>
-                                        ({visSatsMedEttDesimal(props.arbeidsgiveravgift)}%)
+                                        ({formaterNorskeTall(props.arbeidsgiveravgift)}%)
                                     </MediaQuery>
                                 </div>
                             </Column>
                             <Column md="3" sm="3" xs="3">
                                 <MediaQuery minWidth={700}>
-                                    ({visSatsMedEttDesimal(props.arbeidsgiveravgift)}%)
+                                    ({formaterNorskeTall(props.arbeidsgiveravgift)}%)
                                 </MediaQuery>
                             </Column>
                             <Column md="1" sm="1" xs="1">

diff --git 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> = (props) => {
                                     {formatterPeriode(periode.startDato, periode.sluttDato)}
                                 </td>
                                 <td>{formatterProsent(periode.lonnstilskuddProsent)}</td>
-                                <td>{formatterPenger(periode.beløp)}</td>
+                                <td>{formaterPenger(periode.beløp)}</td>
                                 <td>
                                     <EtikettStatus tilskuddsperiodestatus={periode.status} size="small" />
                                 </td>

diff --git a/...leSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabell.tsx b/...leSide/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<Properties> = ({ className }: Pro
                                     avtale.tiltakstype === 'SOMMERJOBB') && <>{periode.lonnstilskuddProsent}%</>}
                             </BodyShort>
                             <BodyShort size="small" style={{ minWidth: '4rem' }}>
-                                {formatterPenger(periode.beløp)}
+                                {formaterPenger(periode.beløp)}
                             </BodyShort>
                         </div>
                     );

diff --git a/...de/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx b/...de/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<Properties> = ({ className }:
                                     </BodyShort>
                                 )}
                                 <BodyShort size="small" style={{ minWidth: '4rem' }}>
-                                    {periode.beløp !== null ? formatterPenger(periode.beløp) : '-'}
+                                    {periode.beløp !== null ? formaterPenger(periode.beløp) : '-'}
                                 </BodyShort>
                                 <BodyShort size="small" style={{ minWidth: '4rem' }}>
                                     {formatterDato(moment(periode.sluttDato).add(3, 'days').toString(), 'DD MMM YYYY')}
@@ -76,7 +76,7 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
                             </BodyShort>
                         )}
                         <BodyShort size="small" style={{ minWidth: '4rem' }}>
-                            {sistePeriode.beløp !== null ? formatterPenger(sistePeriode.beløp) : '-'}
+                            {sistePeriode.beløp !== null ? formaterPenger(sistePeriode.beløp) : '-'}
                         </BodyShort>
                         <BodyShort size="small" style={{ minWidth: '4rem' }}>
                             {formatterDato(moment(sistePeriode.sluttDato).add(3, 'days').toString(), 'DD MMM YYYY')}

diff --git a/...ngSteg/Oppsummering/InkluderingstilskuddOppsummering/InkluderingstilskuddOppsummering.tsx b/...ngSteg/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<InkluderingsInnhold> =
                     <div className={cls.element('kostnadsoverslag-container')}>
                         <VisueltDisabledInputFelt
                             label="Totalt kostnadsoverslag"
-                            tekst={formatterPenger(props.inkluderingstilskuddTotalBeløp)}
+                            tekst={formaterPenger(props.inkluderingstilskuddTotalBeløp)}
                         />
                     </div>
                 </div>

diff --git a/...eSide/steg/GodkjenningSteg/Oppsummering/SjekkOmVerdiEksisterer/SjekkOmVerdiEksisterer.tsx b/...eSide/steg/GodkjenningSteg/Oppsummering/SjekkOmVerdiEksisterer/SjekkOmVerdiEksisterer.tsx
@@ -1,7 +1,7 @@
 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;

diff --git 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<Varighet> = ({
 }) => {
     const avtaleContext = useContext(AvtaleContext);
 
-    const stillingProsent = stillingprosent ? stillingprosent.toString() + '%' : '';
-
     return (
         <Stegoppsummering ikon={<VarighetIkon />} tittel="Dato og arbeidstid">
             <Container fluid={true}>
@@ -43,14 +42,20 @@ const VarighetOppsummering: FunctionComponent<Varighet> = ({
                     {avtaleContext.avtale?.tiltakstype !== 'MENTOR' && (
                         <Column md="4" sm="12" xs="12">
                             <Label>Stillingsprosent</Label>
-                            <SjekkOmVerdiEksisterer verdi={stillingProsent} />
+                            <SjekkOmVerdiEksisterer
+                                verdi={stillingprosent}
+                                formatertVerdi={`${formaterNorskeTall(stillingprosent)} %`}
+                            />
                         </Column>
                     )}
                 </Row>
                 <Row className={''}>
                     <Column md="4" sm="12" xs="12">
                         <Label>Antall dager per uke</Label>
-                        <SjekkOmVerdiEksisterer verdi={antallDagerPerUke?.toString()} />
+                        <SjekkOmVerdiEksisterer
+                            verdi={antallDagerPerUke}
+                            formatertVerdi={formaterNorskeTall(antallDagerPerUke?.toString())}
+                        />
                     </Column>
                 </Row>
             </Container>

diff --git a/...enningSteg/endringAvAvtaleInnhold/EndreInkluderingsutgifter/EndreInkluderingsutgifter.tsx b/...enningSteg/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 = () => {
                     <VerticalSpacer rem={2} />
                     <div>
                         <Label>Totalt kostnadsoverslag:</Label>
-                        <Ingress>{formatterPenger(inkluderingstilskuddTotal)}</Ingress>
+                        <Ingress>{formaterPenger(inkluderingstilskuddTotal)}</Ingress>
                     </div>
                 </div>
             </BekreftelseModal>

diff --git a/...jenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.less b/...jenningSteg/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/...kjenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.tsx b/...kjenningSteg/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)}
                         />
-                        <PakrevdInput
-                            size="small"
+                        <AntallDagerInput
                             label="Antall dager per uke"
-                            type="number"
-                            max={7}
                             verdi={antallDagerPerUke}
-                            settVerdi={(eventVerdi) => {
-                                const verdi = parseInt(eventVerdi, 10);
-                                if (verdi > 0 && verdi < 8) {
-                                    setAntallDagerPerUke(verdi);
-                                } else {
-                                    setAntallDagerPerUke(undefined);
-                                }
-                            }}
+                            settVerdi={(verdi) => setAntallDagerPerUke(verdi)}
                         />
                     </div>
                 </div>

diff --git 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> = (props) => {
                             </BodyShort>
                         </td>
                         <td>
-                            <BodyShort size="small">{formatterPenger(props.tilskuddsutgift.beløp)}</BodyShort>
+                            <BodyShort size="small">{formaterPenger(props.tilskuddsutgift.beløp)}</BodyShort>
                         </td>
                         <td>
                             {kanUtgiftSlettes() && (

diff --git 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> = (props) => {
                 <BodyShort size="small">{inkluderingstilskuddtypeTekst[props.tilskuddsutgift.type]}</BodyShort>
             </td>
             <td>
-                <BodyShort size="small">{formatterPenger(props.tilskuddsutgift.beløp)}</BodyShort>
+                <BodyShort size="small">{formaterPenger(props.tilskuddsutgift.beløp)}</BodyShort>
             </td>
         </tr>
     );