Oppdateringer - ung (#2873)

* Korrigere date-parsing i oppgaver

* Oppdatert struktur for inntekt fra areg

* KorrigerInntekt update

* Storybook

* Layout

* Utløpt status

* Fjerne inntektsperioder

* OppgaveContext

* Cleanup

* Fix import

* Mer cleanup

* Scroll-fix

Author: frodehansen2

apps/ungdomsytelse-deltaker/mock/msw/mocks/soker1/deltakelser/harSøkt.ts

@@ -18,7 +18,7 @@ export const deltakelserHarSøkt: DeltakelsePeriodInfo[] = [
                 },
                 status: OppgaveStatus.ULØST,
                 opprettetDato: '2025-02-22T11:43:29.048157Z',
-                løstDato: undefined,
+                løstDato: '2025-02-23T05:00:12.048157Z',
             },
             {
                 id: 'fc2c6f01-8746-4ca0-b77a-40cc48bba216',
@@ -29,22 +29,35 @@ export const deltakelserHarSøkt: DeltakelsePeriodInfo[] = [
                     veilederRef: 'Pål Hønesen, Andeby',
                     meldingFraVeileder: 'Jeg endrer sluttdatoen som vi avtalte på møtet forrige uke.',
                 },
-                status: OppgaveStatus.LØST,
+                status: OppgaveStatus.UTLØPT,
                 opprettetDato: '2025-02-22T11:43:29.048157Z',
                 løstDato: '2025-02-23T05:00:12.048157Z',
             },
             {
                 id: 'fc2c6f01-8746-4ca0-b77a-40cc48bba216',
                 oppgavetype: Oppgavetype.BEKREFT_KORRIGERT_INNTEKT,
                 oppgavetypeData: {
-                    type: 'BEKREFT_KORRIGERT_INNTEKT',
                     periodeForInntekt: {
                         fraOgMed: '2026-01-01',
                         tilOgMed: '2026-01-31',
                     },
                     inntektFraAinntekt: {
-                        arbeidstakerOgFrilansInntekt: 7500,
-                        inntektFraYtelse: 1500,
+                        arbeidsgivere: [
+                            {
+                                navn: 'Flåklypa barteservice',
+                                beløp: 1232,
+                            },
+                            {
+                                navn: 'Hopen klyp og klem',
+                                beløp: 50,
+                            },
+                        ],
+                        ytelser: [
+                            {
+                                navn: 'Sykepenger',
+                                beløp: 4200,
+                            },
+                        ],
                     },
                     inntektFraDeltaker: {
                         arbeidstakerOgFrilansInntekt: undefined,
@@ -53,27 +66,44 @@ export const deltakelserHarSøkt: DeltakelsePeriodInfo[] = [
                 },
                 status: OppgaveStatus.ULØST,
                 opprettetDato: '2025-02-22T11:43:29.048157Z',
-                løstDato: undefined,
+                løstDato: '2025-02-23T05:00:12.048157Z',
             },
         ],
         rapporteringsPerioder: [
             {
                 fraOgMed: '2024-12-02',
                 tilOgMed: '2024-12-31',
                 harRapportert: false,
-                inntekt: undefined,
+                arbeidstakerOgFrilansInntekt: undefined,
+                inntektFraYtelse: undefined,
             },
             {
                 fraOgMed: '2025-01-01',
                 tilOgMed: '2025-01-31',
                 harRapportert: false,
-                inntekt: undefined,
+                arbeidstakerOgFrilansInntekt: undefined,
+                inntektFraYtelse: undefined,
             },
             {
                 fraOgMed: '2025-02-01',
                 tilOgMed: '2025-02-26',
                 harRapportert: false,
-                inntekt: undefined,
+                arbeidstakerOgFrilansInntekt: undefined,
+                inntektFraYtelse: undefined,
+            },
+            {
+                fraOgMed: '2025-03-01',
+                tilOgMed: '2025-03-31',
+                harRapportert: false,
+                arbeidstakerOgFrilansInntekt: undefined,
+                inntektFraYtelse: undefined,
+            },
+            {
+                fraOgMed: '2025-04-01',
+                tilOgMed: '2025-04-30',
+                harRapportert: false,
+                arbeidstakerOgFrilansInntekt: undefined,
+                inntektFraYtelse: undefined,
             },
         ],
     },

apps/ungdomsytelse-deltaker/src/apps/innsyn/InnsynApp.tsx

@@ -11,11 +11,7 @@ const InnsynApp = () => {
     return (
         <Page title="Din ungdomsytelse">
             <VStack gap="8">
-                <VStack gap="8">
-                    <VStack gap="2">
-                        <DeltakelseHeader deltakelse={deltakelse} />
-                    </VStack>
-                </VStack>
+                <DeltakelseHeader deltakelse={deltakelse} />
 
                 <DeltakelseContent deltakelse={deltakelse} />
 

apps/ungdomsytelse-deltaker/src/apps/innsyn/components/DeltakelseContent.tsx

@@ -1,35 +1,31 @@
 import { Box, Heading, VStack } from '@navikt/ds-react';
 import { Deltakelse as DeltakelseContent, OppgaveStatus } from '@navikt/ung-common';
-import { getGjeldendeRapporteringsperiode, getTidligereRapporteringsperioder } from '../utils/deltakelseUtils';
-import FremhevetInntektsperiode from './fremhevet-inntektsperiode/FremhevetInntektsperiode';
+import { getPeriodeÅpenForInntektsrapportering } from '../utils/deltakelseUtils';
 import OppgavePanel from './oppgaver/OppgavePanel';
-import Periodeliste from './Periodeliste';
 import LøsteOppgaver from './løste-oppgaver/LøsteOppgaver';
 import { DeltakelsePeriode } from '@navikt/ung-common/src/types/DeltakelsePeriode';
+import RapporterInntekt from './rapporter-inntekt/RapporterInntekt';
 
 interface Props {
     deltakelse: DeltakelsePeriode;
 }
 
 const DeltakelseContent = ({ deltakelse }: Props) => {
     const { rapporteringsPerioder, oppgaver, programPeriode, id } = deltakelse;
-    const gjeldendePeriode = getGjeldendeRapporteringsperiode(rapporteringsPerioder || []);
-    const tidligerePerioder = getTidligereRapporteringsperioder(rapporteringsPerioder || []);
+    // const tidligerePerioder = getTidligereRapporteringsperioder(rapporteringsPerioder || []);
+    const rapporterInntektPeriode = getPeriodeÅpenForInntektsrapportering(rapporteringsPerioder || []);
 
-    const uløsteOppgaver = oppgaver.filter(
-        (oppgave) => oppgave.løstDato === undefined && oppgave.status === OppgaveStatus.ULØST,
-    );
-    const løsteOppgaver = oppgaver.filter(
-        (oppgave) => oppgave.løstDato !== undefined && oppgave.status !== OppgaveStatus.ULØST,
-    );
+    const uløsteOppgaver = oppgaver.filter((oppgave) => oppgave.status === OppgaveStatus.ULØST);
+    const løsteOppgaver = oppgaver.filter((oppgave) => oppgave.status !== OppgaveStatus.ULØST);
 
     return (
         <VStack gap="8">
             {uløsteOppgaver.map((oppgave, index) => (
                 <OppgavePanel key={index} oppgave={oppgave} deltakelseId={id} programPeriode={programPeriode} />
             ))}
-            {gjeldendePeriode ? <FremhevetInntektsperiode rapporteringsperiode={gjeldendePeriode} /> : null}
-            <Box>
+            {rapporterInntektPeriode ? <RapporterInntekt rapporteringsperiode={rapporterInntektPeriode} /> : null}
+
+            {/* <Box>
                 <Heading level="2" size="medium" spacing={true}>
                     Perioder og inntekt
                 </Heading>
@@ -38,11 +34,11 @@ const DeltakelseContent = ({ deltakelse }: Props) => {
                     perioder={tidligerePerioder || []}
                     programperiodeStartDato={deltakelse.programPeriode.from}
                 />
-            </Box>
+            </Box> */}
             {løsteOppgaver.length > 0 ? (
                 <Box>
                     <Heading level="2" size="medium" spacing={true}>
-                        Tidligere oppgaver
+                        Historikk
                     </Heading>
                     <LøsteOppgaver oppgaver={løsteOppgaver} />
                 </Box>

apps/ungdomsytelse-deltaker/src/apps/innsyn/components/inntekt-tabell/InntektTabell.tsx

@@ -1,38 +1,36 @@
-import { Table } from '@navikt/ds-react';
+import { BodyShort, Table } from '@navikt/ds-react';
 import { FormattedNumber } from 'react-intl';
 
-interface Props {}
+export interface InntektTabellRad {
+    navn: string;
+    beløp: number;
+}
 
-const InntektTabell = ({}: Props) => {
-    const data = [
-        {
-            navn: 'Godlia video og persienner',
-            inntekt: 213,
-        },
-        {
-            navn: 'Mix kiosk',
-            inntekt: 3500,
-        },
-        {
-            navn: 'Sykepenger',
-            inntekt: 500,
-        },
-    ];
+interface Props {
+    header: string;
+    inntekt: InntektTabellRad[];
+}
+
+const InntektTabell = ({ header, inntekt }: Props) => {
     return (
         <Table zebraStripes>
             <Table.Header>
                 <Table.Row>
-                    <Table.HeaderCell scope="col">Arbeidsgiver/ytelse</Table.HeaderCell>
-                    <Table.HeaderCell scope="col">Inntekt</Table.HeaderCell>
+                    <Table.HeaderCell scope="col">{header}</Table.HeaderCell>
+                    <Table.HeaderCell scope="col" className="w-16 text-right text-nowrap">
+                        Inntekt
+                    </Table.HeaderCell>
                 </Table.Row>
             </Table.Header>
             <Table.Body>
-                {data.map(({ navn, inntekt }, i) => {
+                {inntekt.map(({ navn, beløp }, i) => {
                     return (
                         <Table.Row key={i + navn}>
-                            <Table.HeaderCell scope="row">{navn}</Table.HeaderCell>
-                            <Table.DataCell>
-                                <FormattedNumber value={inntekt} />
+                            <Table.HeaderCell scope="row">
+                                <BodyShort weight="regular">{navn}</BodyShort>
+                            </Table.HeaderCell>
+                            <Table.DataCell className="w-16 text-right text-nowrap">
+                                <FormattedNumber value={beløp} />
                             </Table.DataCell>
                         </Table.Row>
                     );

apps/ungdomsytelse-deltaker/src/apps/innsyn/components/oppgave/Oppgave.tsx

@@ -0,0 +1,11 @@
+import { OppgaveProvider } from './OppgaveContext';
+
+interface Props {
+    children: React.ReactNode;
+}
+
+const Oppgave = ({ children }: Props) => {
+    return <OppgaveProvider>{children}</OppgaveProvider>;
+};
+
+export default Oppgave;

apps/ungdomsytelse-deltaker/src/apps/innsyn/components/oppgave/OppgaveContext.tsx

@@ -0,0 +1,52 @@
+import { ReactNode, useContext, useState, createContext } from 'react';
+import { UngdomsytelseOppgavebekreftelse } from '@navikt/k9-brukerdialog-prosessering-api';
+import { deltakerApiService } from '../../../../api/deltakerApiService';
+
+interface OppgaveContextProps {
+    visSkjema?: boolean;
+    erBesvart?: boolean;
+    pending?: boolean;
+    error?: string | null;
+    setErBesvart: (visSkjema: boolean) => void;
+    setVisSkjema: (visSkjema: boolean) => void;
+    sendSvar: (svar: UngdomsytelseOppgavebekreftelse) => Promise<void>;
+}
+
+const OppgaveContext = createContext<OppgaveContextProps | undefined>(undefined);
+
+export const OppgaveProvider = ({ children }: { children: ReactNode }) => {
+    const [visSkjema, setVisSkjema] = useState<boolean>(false);
+    const [erBesvart, setErBesvart] = useState<boolean>(false);
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const sendSvar = (svar: UngdomsytelseOppgavebekreftelse) => {
+        setPending(true);
+        return deltakerApiService
+            .sendOppgavebekreftelse(svar)
+            .then(() => {
+                setErBesvart(true);
+            })
+            .catch((error) => {
+                setError('Besvar endret oppgave feiler');
+                console.log(error);
+            })
+            .finally(() => {
+                setPending(false);
+            });
+    };
+
+    return (
+        <OppgaveContext.Provider value={{ visSkjema, setVisSkjema, erBesvart, setErBesvart, pending, error, sendSvar }}>
+            {children}
+        </OppgaveContext.Provider>
+    );
+};
+
+export const useOppgaveContext = () => {
+    const context = useContext(OppgaveContext);
+    if (!context) {
+        throw new Error('useOppgaveContext must be used within an OppgaveProvider');
+    }
+    return context;
+};

apps/ungdomsytelse-deltaker/src/apps/innsyn/components/oppgaver/EndretSluttdatoOppgaveForm.tsx

@@ -13,8 +13,8 @@ import {
 import { useAppIntl } from '../../../../i18n';
 import { getDateValidator, getStringValidator, getYesOrNoValidator } from '@navikt/sif-validation';
 import { UngdomsytelseOppgavebekreftelse } from '@navikt/k9-brukerdialog-prosessering-api';
-import { useBesvarOppgave } from '../../hooks/useBesvarOppgave';
 import { CalendarIcon } from '@navikt/aksel-icons';
+import { useOppgaveContext } from '../oppgave/OppgaveContext';
 
 interface Props {
     deltakelseId: string;
@@ -44,7 +44,7 @@ const { FormikWrapper, Form, YesOrNoQuestion, Textarea, DatePicker } = getTypedF
 
 const EndretSluttdatoOppgaveForm = ({ deltakelseId, oppgave, opprinneligSluttdato }: Props) => {
     const { intl } = useAppIntl();
-    const { sendSvar, error, pending, besvart } = useBesvarOppgave();
+    const { sendSvar, error, pending, setVisSkjema } = useOppgaveContext();
     const nySluttdatoTekst = dateFormatter.dayDateMonthYear(oppgave.oppgavetypeData.nySluttdato);
 
     const handleSubmit = async (values: FormValues) => {
@@ -77,7 +77,7 @@ const EndretSluttdatoOppgaveForm = ({ deltakelseId, oppgave, opprinneligSluttdat
                 </HStack>
             }
             tittel="Din deltakerperiode blir endret"
-            besvart={besvart}
+            svarfrist={oppgave.svarfrist}
             beskrivelse={
                 <>
                     <BodyShort>
@@ -118,11 +118,15 @@ const EndretSluttdatoOppgaveForm = ({ deltakelseId, oppgave, opprinneligSluttdat
                 <FormikWrapper
                     initialValues={{}}
                     onSubmit={handleSubmit}
-                    renderForm={({ values }) => {
+                    renderForm={({ values, resetForm }) => {
                         return (
                             <Form
-                                submitButtonLabel="Send inn svar"
+                                submitButtonLabel="Send"
                                 cancelButtonLabel="Avbryt"
+                                onCancel={() => {
+                                    resetForm();
+                                    setVisSkjema(false);
+                                }}
                                 submitPending={pending}
                                 includeValidationSummary={true}
                                 formErrorHandler={getIntlFormErrorHandler(intl, 'inntektForm.validation')}>

apps/ungdomsytelse-deltaker/src/apps/innsyn/components/oppgaver/EndretStartdatoOppgaveForm.tsx

@@ -13,8 +13,8 @@ import {
 import { useAppIntl } from '../../../../i18n';
 import { getDateValidator, getStringValidator, getYesOrNoValidator } from '@navikt/sif-validation';
 import { UngdomsytelseOppgavebekreftelse } from '@navikt/k9-brukerdialog-prosessering-api';
-import { useBesvarOppgave } from '../../hooks/useBesvarOppgave';
 import { CalendarIcon } from '@navikt/aksel-icons';
+import { useOppgaveContext } from '../oppgave/OppgaveContext';
 
 interface Props {
     deltakelseId: string;
@@ -44,7 +44,7 @@ const { FormikWrapper, Form, YesOrNoQuestion, Textarea, DatePicker } = getTypedF
 
 const EndretStartdatoOppgaveForm = ({ deltakelseId, oppgave }: Props) => {
     const { intl } = useAppIntl();
-    const { sendSvar, error, pending, besvart } = useBesvarOppgave();
+    const { sendSvar, error, pending, setVisSkjema } = useOppgaveContext();
     const nyStartdatoTekst = dateFormatter.dayDateMonthYear(oppgave.oppgavetypeData.nyStartdato);
 
     const handleSubmit = async (values: FormValues) => {
@@ -76,8 +76,8 @@ const EndretStartdatoOppgaveForm = ({ deltakelseId, oppgave }: Props) => {
                     Endret deltakerperiode
                 </HStack>
             }
+            svarfrist={oppgave.svarfrist}
             tittel="Din deltakerperiode blir endret"
-            besvart={besvart}
             beskrivelse={
                 <>
                     <BodyShort>
@@ -106,11 +106,15 @@ const EndretStartdatoOppgaveForm = ({ deltakelseId, oppgave }: Props) => {
                 <FormikWrapper
                     initialValues={{}}
                     onSubmit={handleSubmit}
-                    renderForm={({ values }) => {
+                    renderForm={({ values, resetForm }) => {
                         return (
                             <Form
-                                submitButtonLabel="Send inn svar"
+                                submitButtonLabel="Send"
                                 cancelButtonLabel="Avbryt"
+                                onCancel={() => {
+                                    resetForm();
+                                    setVisSkjema(false);
+                                }}
                                 submitPending={pending}
                                 includeValidationSummary={true}
                                 formErrorHandler={getIntlFormErrorHandler(intl, 'inntektForm.validation')}>