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

src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsstønad/InnvilgeVedtak/BeregnetInntektKalkulator.tsx

@@ -0,0 +1,89 @@
+import { CalculatorIcon } from '@navikt/aksel-icons';
+import { Dropdown, Button, HStack } 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';
+
+const StyledDropdownMenu = styled(Dropdown.Menu)`
+    width: 23rem;
+`;
+
+const BeregnetInntektKalkulator: FC<{
+    leggTilBeregnetInntektTekstIBegrunnelse: (beregnetInntekt: {
+        årsinntekt: number;
+        minusTi: number;
+        plussTi: number;
+    }) => void;
+}> = ({ leggTilBeregnetInntektTekstIBegrunnelse }) => {
+    const [årsinntekt, settÅrsinntekt] = useState<string>('');
+    const textFieldRef = useRef<HTMLInputElement>(null);
+    const [erDropdownÅpen, settErDropdownÅpen] = useState<boolean>(false);
+
+    const regnUtInntektOgLeggTilTekst = () => {
+        const årsinntektTall = parseFloat(årsinntekt);
+
+        const månedsinntekt = årsinntektTall / 12;
+        const minusTi = Math.round(månedsinntekt * 0.9);
+        const plusTi = Math.round(månedsinntekt * 1.1);
+
+        leggTilBeregnetInntektTekstIBegrunnelse({
+            årsinntekt: årsinntektTall,
+            minusTi: minusTi,
+            plussTi: plusTi,
+        });
+    };
+
+    const handleOnClick = () => {
+        settErDropdownÅpen(!erDropdownÅpen);
+    };
+
+    const handleRegnUtOgLeggTilTekst = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            regnUtInntektOgLeggTilTekst();
+        }
+    };
+
+    useEffect(() => {
+        if (textFieldRef.current) {
+            textFieldRef.current.focus();
+        }
+    }, [erDropdownÅpen]);
+
+    return (
+        <Dropdown>
+            <Button type="button" as={Dropdown.Toggle} size="small" onClick={handleOnClick}>
+                <CalculatorIcon title="åpne " fontSize="1.5rem" />
+            </Button>
+            <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={(e) => settÅrsinntekt(e.target.value)}
+                        onKeyDown={handleRegnUtOgLeggTilTekst}
+                    />
+
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        size="xsmall"
+                        onClick={() => regnUtInntektOgLeggTilTekst()}
+                    >
+                        Regn ut
+                    </Button>
+                </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,7 @@ 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';
 
 const Container = styled.div`
     padding: 1rem;
@@ -114,6 +116,11 @@ interface Props {
     skalVelgeSamordningstype: boolean;
 }
 
+export interface BeregnetInntekt {
+    minusTi: number;
+    plussTi: number;
+}
+
 const lagFeilmeldingCheckbox = (type: string) =>
     `En eller flere inntektsperioder på "${type}" ligger inne med et beløp. Skal feltet avhukes må beløp fjernes først.`;
 
@@ -189,11 +196,35 @@ const InntektsperiodeValg: React.FC<Props> = ({
         }
     };
 
+    const leggTilBeregnetInntektTekstIBegrunnelse = (beregnetInntekt: {
+        årsinntekt: number;
+        minusTi: number;
+        plussTi: number;
+    }) => {
+        const beregnetTekst = `
+Forventet årsinntekt fra [DATO]: ${beregnetInntekt.årsinntekt} kroner.
+   - 10 % ned: ${beregnetInntekt.minusTi} kroner per måned.
+   - 10 % opp: ${beregnetInntekt.plussTi} kroner per måned.
+`;
+
+        const oppdatertInntektBegrunnelse = inntektBegrunnelseState.value + beregnetTekst;
+        inntektBegrunnelseState.setValue(oppdatertInntektBegrunnelse);
+    };
+
     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 />
             ) : (