Kalkulator for å beregne +/- 10 prosent månedsinntekt

src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsstønad/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<string>('');
+    const textFieldRef = useRef<HTMLInputElement>(null);
+    const [erDropdownÅpen, settErDropdownÅpen] = useState<boolean>(false);
+    const [feilmedling, settFeilmedling] = useState<string>('');
+
+    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<HTMLInputElement>) => {
+        if (event.key === TASTATURTAST_ENTER) {
+            event.preventDefault();
+            oppdaterÅrsinntekt();
+        }
+    };
+
+    const handleOnOpenChange = (erÅpen: boolean) => {
+        settErDropdownÅpen(erÅpen);
+    };
+
+    const handleTextFieldOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        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 (
+        <Dropdown open={erDropdownÅpen} onOpenChange={() => handleOnOpenChange(!erDropdownÅpen)}>
+            <Tooltip
+                content="Åpne kalkulator for beregning av forventet månedsinntekt"
+                keys={[TASTATURTAST_K]}
+            >
+                <Button type="button" as={Dropdown.Toggle} size="small">
+                    <CalculatorIcon aria-hidden fontSize="1.5rem" />
+                </Button>
+            </Tooltip>
+            <StyledDropdownMenu>
+                <BodyShortSmall>Legg inn årsinntekt for å regne ut +/- 10 prosent.</BodyShortSmall>
+
+                <HStack gap="2" justify="space-between">
+                    <ForwardedTextField
+                        ref={textFieldRef}
+                        placeholder="Årsinntekt"
+                        type="number"
+                        inputMode="numeric"
+                        label=""
+                        size="small"
+                        value={årsinntekt}
+                        onChange={handleTextFieldOnChange}
+                        onKeyDown={handleRegnUtOgLeggTilTekst}
+                    />
+
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        size="xsmall"
+                        onClick={oppdaterÅrsinntekt}
+                    >
+                        Beregn
+                    </Button>
+                    <EnsligErrorMessage>{feilmedling}</EnsligErrorMessage>
+                </HStack>
+            </StyledDropdownMenu>
+        </Dropdown>
+    );
+};
+
+export default BeregnetInntektKalkulator;

src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsstønad/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<HTMLInputElement, TextFieldProps>((props, ref) => {
+    return <TextField {...props} ref={ref} />;
+});
+
+ForwardedTextField.displayName = 'ForwardedTextField';
+export default ForwardedTextField;

src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsstønad/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<Props> = ({
         }
     };
 
+    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 (
         <Container>
-            <Heading size="small" level="5">
-                Inntekt
-            </Heading>
+            <HStack justify="space-between">
+                <Heading size="small" level="5">
+                    Inntekt
+                </Heading>
+                {behandlingErRedigerbar && (
+                    <BeregnetInntektKalkulator
+                        leggTilBeregnetInntektTekstIBegrunnelse={
+                            leggTilBeregnetInntektTekstIBegrunnelse
+                        }
+                    />
+                )}
+            </HStack>
             {!behandlingErRedigerbar && inntektBegrunnelseState.value === '' ? (
                 <IngenBegrunnelseOppgitt />
             ) : (