diff --git "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/BeregnetInntektKalkulator.tsx" "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/BeregnetInntektKalkulator.tsx" new file mode 100644 index 000000000..c8cdde49e --- /dev/null +++ "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/BeregnetInntektKalkulator.tsx" @@ -0,0 +1,124 @@ +import { CalculatorIcon } from '@navikt/aksel-icons'; +import { Dropdown, Button, HStack, Tooltip } from '@navikt/ds-react'; +import React, { FC, useEffect, useRef, useState } from 'react'; +import { BodyShortSmall } from '../../../../../Felles/Visningskomponenter/Tekster'; +import styled from 'styled-components'; +import ForwardedTextField from './ForwardedTextField'; +import { EnsligErrorMessage } from '../../../../../Felles/ErrorMessage/EnsligErrorMessage'; + +const StyledDropdownMenu = styled(Dropdown.Menu)` + width: 23rem; +`; + +const TASTATURTAST_K = 'k'; +const TASTATURTAST_ENTER = 'Enter'; + +const BeregnetInntektKalkulator: FC<{ + leggTilBeregnetInntektTekstIBegrunnelse: (årsinntekt: number) => void; +}> = ({ leggTilBeregnetInntektTekstIBegrunnelse }) => { + const [årsinntekt, settÅrsinntekt] = useState(''); + const textFieldRef = useRef(null); + const [erDropdownÅpen, settErDropdownÅpen] = useState(false); + const [feilmedling, settFeilmedling] = useState(''); + + const oppdaterÅrsinntekt = () => { + settFeilmedling(''); + const årsinntektTall = parseFloat(årsinntekt); + + if (isNaN(årsinntektTall)) { + settFeilmedling('Årsinntekt må være et tall'); + return; + } + + leggTilBeregnetInntektTekstIBegrunnelse(årsinntektTall); + settÅrsinntekt(''); + settErDropdownÅpen(false); + }; + + const handleRegnUtOgLeggTilTekst = (event: React.KeyboardEvent) => { + if (event.key === TASTATURTAST_ENTER) { + event.preventDefault(); + oppdaterÅrsinntekt(); + } + }; + + const handleOnOpenChange = (erÅpen: boolean) => { + settErDropdownÅpen(erÅpen); + }; + + const handleTextFieldOnChange = (event: React.ChangeEvent) => { + const value = event.target.value; + settÅrsinntekt(value); + + if (!isNaN(parseFloat(value))) { + settFeilmedling(''); + } + }; + + useEffect(() => { + if (textFieldRef.current) { + textFieldRef.current.focus(); + } + }, [erDropdownÅpen]); + + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if ( + document.activeElement === document.body && + !(event.target instanceof HTMLInputElement) && + event.key === TASTATURTAST_K + ) { + event.preventDefault(); + settErDropdownÅpen((prev) => !prev); + } + }; + + window.addEventListener('keydown', handleKeyDown); + + return () => { + window.removeEventListener('keydown', handleKeyDown); + }; + }, []); + + return ( + handleOnOpenChange(!erDropdownÅpen)}> + + + + + Legg inn årsinntekt for å regne ut +/- 10 prosent. + + + + + + {feilmedling} + + + + ); +}; + +export default BeregnetInntektKalkulator; diff --git "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/ForwardedTextField.tsx" "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/ForwardedTextField.tsx" new file mode 100644 index 000000000..8fd0f336a --- /dev/null +++ "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/ForwardedTextField.tsx" @@ -0,0 +1,9 @@ +import React, { forwardRef } from 'react'; +import { TextField, TextFieldProps } from '@navikt/ds-react'; // Adjust the import path as needed + +const ForwardedTextField = forwardRef((props, ref) => { + return ; +}); + +ForwardedTextField.displayName = 'ForwardedTextField'; +export default ForwardedTextField; diff --git "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/InntektsperiodeValg.tsx" "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/InntektsperiodeValg.tsx" index 2bafa5d80..de158f8df 100644 --- "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/InntektsperiodeValg.tsx" +++ "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/InntektsperiodeValg.tsx" @@ -23,6 +23,7 @@ import { Checkbox, CheckboxGroup, Heading, + HStack, ReadMore, Tooltip, } from '@navikt/ds-react'; @@ -37,6 +38,8 @@ import { EInntektstype, inntektsTypeTilKey, inntektsTypeTilTekst } from '../Fell import { ABorderDivider, AGray50 } from '@navikt/ds-tokens/dist/tokens'; import { IngenBegrunnelseOppgitt } from './IngenBegrunnelseOppgitt'; import { EnsligTextArea } from '../../../../../Felles/Input/TekstInput/EnsligTextArea'; +import BeregnetInntektKalkulator from './BeregnetInntektKalkulator'; +import { formaterTallMedTusenSkille } from '../../../../../App/utils/formatter'; const Container = styled.div` padding: 1rem; @@ -189,11 +192,34 @@ const InntektsperiodeValg: React.FC = ({ } }; + const leggTilBeregnetInntektTekstIBegrunnelse = (årsinntekt: number) => { + const månedsinntekt = årsinntekt / 12; + const minusTi = formaterTallMedTusenSkille(Math.round(månedsinntekt * 0.9)); + const plusTi = formaterTallMedTusenSkille(Math.round(månedsinntekt * 1.1)); + + const beregnetInntektTekst = ` +Forventet årsinntekt fra [DATO]: ${formaterTallMedTusenSkille(årsinntekt)} kroner. + - 10 % ned: ${minusTi} kroner per måned. + - 10 % opp: ${plusTi} kroner per måned. +`; + + inntektBegrunnelseState.setValue((prevState) => prevState + beregnetInntektTekst); + }; + return ( - - Inntekt - + + + Inntekt + + {behandlingErRedigerbar && ( + + )} + {!behandlingErRedigerbar && inntektBegrunnelseState.value === '' ? ( ) : (