Skip to content

Commit 900f254

Browse files
frodehansen2frodehansen2
committed
Forenkle inntektsskjema
1 parent ea9faa8 commit 900f254

File tree

6 files changed

+43
-78
lines changed

6 files changed

+43
-78
lines changed

‎apps/ungdomsytelse-deltaker/src/apps/innsyn/components/inntekt-form/InntektForm.tsx

+7-64
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
import { Alert, BodyShort, Box, Button, Heading, ReadMore, Switch, VStack } from '@navikt/ds-react';
2-
import { useState } from 'react';
1+
import { Alert, Box, Button, VStack } from '@navikt/ds-react';
32
import { getIntlFormErrorHandler, YesOrNo } from '@navikt/sif-common-formik-ds';
4-
import { DateRange, dateRangeFormatter, dateToISODate } from '@navikt/sif-common-utils';
3+
import { DateRange, dateToISODate } from '@navikt/sif-common-utils';
54
import { Inntekt } from '@navikt/ung-common';
65
import { useAppIntl } from '../../../../i18n';
76
import { useRapporterInntekt } from '../../hooks/useRapporterInntekt';
87
import { getInntektFromFormValues, inntektFormComponents } from './inntektFormUtils';
98
import { InntektFormValues } from './types';
109
import InntektDefaultForm from './varianter/InntektDefaultForm';
11-
import InntektTableForm from './varianter/InntektTableForm';
1210
import {
1311
UngdomsytelseInntektsrapportering,
1412
zUngdomsytelseInntektsrapportering,
@@ -17,27 +15,16 @@ import {
1715
interface Props {
1816
inntekt?: Inntekt;
1917
periode: DateRange;
20-
gjelderEndring?: boolean;
21-
variant?: 'kompakt' | 'vanlig';
22-
kanEndreVariant?: boolean;
2318
onCancel: () => void;
2419
}
2520

26-
const InntektForm = ({
27-
periode,
28-
inntekt,
29-
gjelderEndring,
30-
variant = 'vanlig',
31-
kanEndreVariant = true,
32-
onCancel,
33-
}: Props) => {
21+
const InntektForm = ({ periode, inntekt, onCancel }: Props) => {
3422
const { intl } = useAppIntl();
3523
const { error, inntektSendt, pending, rapporterInntekt } = useRapporterInntekt();
36-
const [kompakt, setKompakt] = useState(variant === 'kompakt');
3724
const { FormikWrapper, Form } = inntektFormComponents;
3825

3926
const handleSubmit = (values: InntektFormValues) => {
40-
const inntekt = getInntektFromFormValues(values, kompakt);
27+
const inntekt = getInntektFromFormValues(values, false);
4128
const data: UngdomsytelseInntektsrapportering = zUngdomsytelseInntektsrapportering.parse({
4229
oppgittInntektForPeriode: {
4330
periodeForInntekt: {
@@ -63,25 +50,6 @@ const InntektForm = ({
6350

6451
return (
6552
<VStack gap="6">
66-
<VStack gap="2">
67-
{/* {kompakt ? null : ( */}
68-
<Heading level="2" size="small">
69-
Inntektskjema {gjelderEndring ? '(endring)' : null}
70-
</Heading>
71-
{/* )} */}
72-
73-
{kanEndreVariant ? (
74-
<Switch
75-
size="small"
76-
value="kompakt"
77-
onChange={(evt) => {
78-
setKompakt(evt.target.checked);
79-
}}
80-
checked={kompakt}>
81-
Vis kompakt skjema
82-
</Switch>
83-
) : null}
84-
</VStack>
8553
{inntektSendt ? (
8654
<VStack gap="8">
8755
<Alert variant="success">Inntekt for perioden er sendt</Alert>
@@ -93,46 +61,21 @@ const InntektForm = ({
9361
</VStack>
9462
) : (
9563
<VStack gap="8">
96-
{!kompakt ? (
97-
<VStack gap="2">
98-
<BodyShort>
99-
Spørsmålene nedenfor gjelder for perioden{' '}
100-
{dateRangeFormatter.getDateRangeText(periode, intl.locale)}.
101-
</BodyShort>
102-
<ReadMore header="Les mer om inntekt">
103-
Inntekten du skal oppgi er hva du har tjent i perioden. Dette er ikke det samme som hva
104-
du har fått utbetalt. Hvis du er usikker på hva du skal oppgi, kan du se på lønnsslippen
105-
din eller kontakte arbeidsgiveren din.
106-
</ReadMore>
107-
</VStack>
108-
) : null}
109-
11064
<FormikWrapper
11165
initialValues={initialValues}
11266
onSubmit={handleSubmit}
11367
renderForm={({ values }) => {
11468
return (
11569
<Form
116-
submitButtonLabel="Send inn inntekt"
70+
submitButtonLabel="Send inn"
71+
showButtonArrows={true}
11772
onCancel={onCancel}
11873
cancelButtonLabel="Avbryt"
11974
includeValidationSummary={true}
12075
submitPending={pending}
12176
formErrorHandler={getIntlFormErrorHandler(intl, 'inntektForm.validation')}>
12277
<VStack gap="4">
123-
{kompakt ? (
124-
<InntektTableForm inntekt={getInntektFromFormValues(values, true)} />
125-
) : (
126-
<InntektDefaultForm values={values} periode={periode} />
127-
)}
128-
129-
{inntekt ? (
130-
<Alert variant="info" inline={true}>
131-
Når du endrer inntekt på tidligere perioder, vil Lorem ipsum dolor sit
132-
amet consectetur adipisicing elit. Voluptas cumque quo sunt.
133-
</Alert>
134-
) : null}
135-
78+
<InntektDefaultForm values={values} periode={periode} />
13679
{error ? <Alert variant="error">{error}</Alert> : null}
13780
</VStack>
13881
</Form>

‎apps/ungdomsytelse-deltaker/src/apps/innsyn/components/inntekt-form/InntektFormKompakt.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,11 @@ import {
1616

1717
interface Props {
1818
periode: DateRange;
19-
gjelderEndring?: boolean;
2019
variant?: 'kompakt' | 'vanlig';
2120
onCancel: () => void;
2221
}
2322

24-
const InntektFormKompakt = ({ periode, gjelderEndring, variant = 'kompakt', onCancel }: Props) => {
23+
const InntektFormKompakt = ({ periode, variant = 'kompakt', onCancel }: Props) => {
2524
const { intl } = useAppIntl();
2625
const { error, inntektSendt, pending, rapporterInntekt } = useRapporterInntekt();
2726
const [kompakt, setKompakt] = useState(variant === 'kompakt');
@@ -48,7 +47,7 @@ const InntektFormKompakt = ({ periode, gjelderEndring, variant = 'kompakt', onCa
4847
<VStack gap="4" className="rounded-md bg-white p-8 shadow-small">
4948
<VStack gap="2">
5049
<Heading level="2" size="medium">
51-
Inntektskjema {gjelderEndring ? '(endring)' : null}
50+
Inntektskjema
5251
</Heading>
5352
<Switch
5453
size="small"

‎apps/ungdomsytelse-deltaker/src/apps/innsyn/components/inntekt-form/spørsmål/YtelseSpørsmål.tsx

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, ReadMore } from '@navikt/ds-react';
1+
import { Box, List, ReadMore } from '@navikt/ds-react';
22
import { getNumberValidator, getYesOrNoValidator } from '@navikt/sif-validation';
33
import { FormLayout } from '@navikt/sif-common-ui';
44
import { inntektFormComponents } from '../inntektFormUtils';
@@ -16,11 +16,17 @@ const YtelseSpørsmål = ({ harInntektFraYtelse }: Props) => {
1616
name={InntektFormFields.harInntektFraYtelse}
1717
legend="Har du hatt mottatt ytelser fra Nav i denne perioden?"
1818
description={
19-
<ReadMore header="Om Nav-ytelser som inntekt og hvilke ytelser som skal tas med">
20-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nam quisquam eum enim cum.
21-
Consequuntur aspernatur itaque quasi porro! Optio tempora a, id ipsa incidunt aliquid sequi aut
22-
non deserunt?
23-
</ReadMore>
19+
<>
20+
<ReadMore header="Hvilke ytelser skal regnes med?">
21+
<List>
22+
<List.Item>sykepenger</List.Item>
23+
<List.Item>omsorgspenger</List.Item>
24+
<List.Item>pleiepenger sykt barn</List.Item>
25+
<List.Item>pleiepenger i livets sluttfase</List.Item>
26+
<List.Item>opplæringspenger</List.Item>
27+
</List>
28+
</ReadMore>
29+
</>
2430
}
2531
validate={getYesOrNoValidator()}
2632
/>

‎apps/ungdomsytelse-deltaker/src/apps/innsyn/components/inntekt-form/types.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { YesOrNo } from '@navikt/sif-common-formik-ds';
22

33
export enum InntektFormFields {
4+
harHattInntekt = 'harHattInntekt',
45
harArbeidstakerOgFrilansInntekt = 'harArbeidstakerOgFrilansInntekt',
56
harInntektFraYtelse = 'harInntektFraYtelse',
67
ansattInntekt = 'ansattInntekt',
@@ -9,6 +10,7 @@ export enum InntektFormFields {
910
}
1011

1112
export interface InntektFormValues {
13+
[InntektFormFields.harHattInntekt]?: YesOrNo;
1214
[InntektFormFields.harArbeidstakerOgFrilansInntekt]?: YesOrNo;
1315
[InntektFormFields.harInntektFraYtelse]?: YesOrNo;
1416
[InntektFormFields.ansattInntekt]?: string;

‎apps/ungdomsytelse-deltaker/src/apps/innsyn/components/inntekt-form/varianter/InntektDefaultForm.tsx

+20-4
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,44 @@ import {
77
getInntektFromFormValues,
88
inntektFormComponents,
99
} from '../inntektFormUtils';
10-
import { getCheckedValidator } from '@navikt/sif-validation';
10+
import { getCheckedValidator, getYesOrNoValidator } from '@navikt/sif-validation';
1111
import InntektOppsummering from '../../inntekt-oppsummering/InntektOppsummering';
12-
import { DateRange } from '@navikt/sif-common-utils';
12+
import { DateRange, dateRangeFormatter } from '@navikt/sif-common-utils';
1313
import { YesOrNo } from '@navikt/sif-common-formik-ds';
14+
import { useAppIntl } from '../../../../../i18n';
1415

1516
interface Props {
1617
periode: DateRange;
1718
values: InntektFormValues;
1819
}
1920

21+
const { YesOrNoQuestion } = inntektFormComponents;
22+
2023
const InntektDefaultForm = ({ periode, values }: Props) => {
24+
const { intl } = useAppIntl();
2125
const { ConfirmationCheckbox } = inntektFormComponents;
2226
const harArbeidstakerOgFrilansInntekt = values[InntektFormFields.harArbeidstakerOgFrilansInntekt] === YesOrNo.YES;
2327
const harInntektFraYtelse = values[InntektFormFields.harInntektFraYtelse] === YesOrNo.YES;
2428

2529
const inntekt = erAlleInntektSpørsmålBesvartOgGyldig(values) ? getInntektFromFormValues(values) : undefined;
2630

31+
const harHattInntekt = values[InntektFormFields.harHattInntekt] === YesOrNo.YES;
32+
const periodetekst = dateRangeFormatter.getDateRangeText(periode, intl.locale);
33+
2734
return (
2835
<FormLayout.Questions>
29-
<ArbeidstakerFrilanserSpørsmål harArbeidstakerOgFrilansInntekt={harArbeidstakerOgFrilansInntekt} />
36+
<YesOrNoQuestion
37+
name={InntektFormFields.harHattInntekt}
38+
legend={`Har du hatt inntekt eller mottatt ytelser fra Nav i perioden ${periodetekst}?`}
39+
validate={getYesOrNoValidator()}
40+
/>
41+
{harHattInntekt ? (
42+
<>
43+
<ArbeidstakerFrilanserSpørsmål harArbeidstakerOgFrilansInntekt={harArbeidstakerOgFrilansInntekt} />
3044

31-
<YtelseSpørsmål harInntektFraYtelse={harInntektFraYtelse} />
45+
<YtelseSpørsmål harInntektFraYtelse={harInntektFraYtelse} />
46+
</>
47+
) : null}
3248

3349
{inntekt ? (
3450
<ConfirmationCheckbox

‎apps/ungdomsytelse-deltaker/src/apps/innsyn/components/rapporter-inntekt/RapporterInntekt.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ const FremhevetInntektsperiode = ({ rapporteringsperiode }: Props) => {
4949
</ExpansionCard.Header>
5050
<ExpansionCard.Content>
5151
<InntektForm
52-
gjelderEndring={harRapportert}
5352
periode={periode}
5453
onCancel={() => {
5554
setVisSkjema(false);

0 commit comments

Comments
 (0)