From 089d94fe3c75616395971dc5c7fa916f9a6f2d38 Mon Sep 17 00:00:00 2001 From: Hallvard Andreas Stark <57254397+hallvardastark@users.noreply.github.com> Date: Tue, 20 Aug 2024 12:26:30 +0200 Subject: [PATCH] Refaktor prosess-vilkar overstyring (#6468) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * prosess-vilkar overstyring Skriver bort redux-form * Rydding * La til manglende prop * Fiksing av tester * Legger tilbake ugyldige datoer i kalender * Fjerner unødige valideringsfunksjoner * Retter opp etter endring i prop --- packages/fakta-inntektsmelding/package.json | 2 +- packages/fakta-medlemskap/package.json | 2 +- packages/prosess-felles/index.ts | 6 +- .../vilkar/VilkarResultPickerPeriodisert.tsx | 36 ++- .../VilkarResultPickerPeriodisertRHF.tsx | 284 ++++++++++++++++++ .../src/vilkar/VilkarResultPickerRHF.tsx | 148 +++++++++ packages/prosess-uttak/package.json | 2 +- .../vurderDato/VurderDatoAksjonspunkt.tsx | 6 +- packages/prosess-vilkar-alder/package.json | 2 +- ...ltatMedOverstyringProsessIndex.stories.tsx | 89 +++--- ...lkarresultatMedOverstyringProsessIndex.tsx | 8 +- .../OverstyrBekreftKnappPanel.spec.tsx | 20 -- .../OverstyrBekreftKnappPanel.tsx | 22 -- .../src/components-old/VilkarBegrunnelse.tsx | 43 --- .../VilkarresultatMedBegrunnelse.tsx | 95 ------ .../VilkarresultatMedOverstyringForm.tsx | 274 ----------------- ...ilkarresultatMedOverstyringHeader.spec.tsx | 34 --- .../VilkarresultatMedOverstyringHeader.tsx | 126 -------- .../vilkarBegrunnelse.module.css | 3 - .../src/components-periodisert/FormState.ts | 11 + .../OverstyrBekreftKnappPanel.tsx | 4 +- .../VilkarBegrunnelse.tsx | 47 +-- .../VilkarresultatMedBegrunnelse.tsx | 38 ++- .../VilkarresultatMedOverstyringForm.spec.tsx | 54 ---- ...tatMedOverstyringFormPeriodisert.spec.tsx} | 21 +- ...resultatMedOverstyringFormPeriodisert.tsx} | 209 +++++-------- ...ilkarresultatMedOverstyringHeader.spec.tsx | 34 --- .../VilkarresultatMedOverstyringHeader.tsx | 126 -------- ...ilkarresultatMedOverstyringForm.module.css | 24 -- ...tMedOverstyringFormPeriodisert.module.css} | 0 .../src/components/FormState.ts | 11 + .../src/components/VilkarBegrunnelse.tsx | 47 +-- .../VilkarresultatMedBegrunnelse.tsx | 38 ++- .../VilkarresultatMedOverstyringForm.spec.tsx | 9 +- .../VilkarresultatMedOverstyringForm.tsx | 193 +++++------- ...ilkarresultatMedOverstyringHeader.spec.tsx | 3 +- .../VilkarresultatMedOverstyringHeader.tsx | 46 ++- packages/sak-app/package.json | 2 +- packages/sak-notat/package.json | 2 +- packages/types/src/aksjonspunktTsType.ts | 1 + yarn.lock | 47 ++- 41 files changed, 860 insertions(+), 1309 deletions(-) create mode 100644 packages/prosess-felles/src/vilkar/VilkarResultPickerPeriodisertRHF.tsx create mode 100644 packages/prosess-felles/src/vilkar/VilkarResultPickerRHF.tsx delete mode 100644 packages/prosess-vilkar-overstyring/src/components-old/OverstyrBekreftKnappPanel.spec.tsx delete mode 100644 packages/prosess-vilkar-overstyring/src/components-old/OverstyrBekreftKnappPanel.tsx delete mode 100644 packages/prosess-vilkar-overstyring/src/components-old/VilkarBegrunnelse.tsx delete mode 100644 packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedBegrunnelse.tsx delete mode 100644 packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringForm.tsx delete mode 100644 packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.spec.tsx delete mode 100644 packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.tsx delete mode 100644 packages/prosess-vilkar-overstyring/src/components-old/vilkarBegrunnelse.module.css create mode 100644 packages/prosess-vilkar-overstyring/src/components-periodisert/FormState.ts delete mode 100644 packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringForm.spec.tsx rename packages/prosess-vilkar-overstyring/src/{components-old/VilkarresultatMedOverstyringForm.spec.tsx => components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.spec.tsx} (78%) rename packages/prosess-vilkar-overstyring/src/components-periodisert/{VilkarresultatMedOverstyringForm.tsx => VilkarresultatMedOverstyringFormPeriodisert.tsx} (56%) delete mode 100644 packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.spec.tsx delete mode 100644 packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.tsx delete mode 100644 packages/prosess-vilkar-overstyring/src/components-periodisert/vilkarresultatMedOverstyringForm.module.css rename packages/prosess-vilkar-overstyring/src/{components-old/vilkarresultatMedOverstyringForm.module.css => components-periodisert/vilkarresultatMedOverstyringFormPeriodisert.module.css} (100%) create mode 100644 packages/prosess-vilkar-overstyring/src/components/FormState.ts diff --git a/packages/fakta-inntektsmelding/package.json b/packages/fakta-inntektsmelding/package.json index bcadd8da61..8f437048b2 100644 --- a/packages/fakta-inntektsmelding/package.json +++ b/packages/fakta-inntektsmelding/package.json @@ -18,7 +18,7 @@ "@navikt/ds-css": "6.13.0", "@navikt/ds-icons": "3.4.3", "@navikt/ds-react": "6.13.0", - "@navikt/ft-form-hooks": "4.4.20", + "@navikt/ft-form-hooks": "5.0.0", "@navikt/ft-plattform-komponenter": "3.0.4", "@popperjs/core": "2.11.8", "classnames": "2.5.1", diff --git a/packages/fakta-medlemskap/package.json b/packages/fakta-medlemskap/package.json index 7dce3334c4..5e3614c01b 100644 --- a/packages/fakta-medlemskap/package.json +++ b/packages/fakta-medlemskap/package.json @@ -12,7 +12,7 @@ "@fpsak-frontend/shared-components": "1.0.0", "@fpsak-frontend/utils": "1.0.0", "@k9-sak-web/fakta-felles": "1.0.0", - "@navikt/ft-form-hooks": "4.4.20", + "@navikt/ft-form-hooks": "5.0.0", "@navikt/ft-plattform-komponenter": "3.0.4", "i18n-iso-countries": "7.11.3", "moment": "2.30.1", diff --git a/packages/prosess-felles/index.ts b/packages/prosess-felles/index.ts index 59435d67b9..1b7a07597c 100644 --- a/packages/prosess-felles/index.ts +++ b/packages/prosess-felles/index.ts @@ -1,6 +1,8 @@ export { default as ProsessStegBegrunnelseTextField } from './src/ProsessStegBegrunnelseTextField'; export { default as ProsessStegSubmitButton } from './src/ProsessStegSubmitButton'; +export type { default as StandardProsessFormProps } from './src/standardProsessFormPropsTsType'; +export { default as ProsessPanelTemplate } from './src/vilkar/ProsessPanelTemplate'; export { default as VilkarResultPicker } from './src/vilkar/VilkarResultPicker'; export { default as VilkarResultPickerPeriodisert } from './src/vilkar/VilkarResultPickerPeriodisert'; -export { default as ProsessPanelTemplate } from './src/vilkar/ProsessPanelTemplate'; -export type { default as StandardProsessFormProps } from './src/standardProsessFormPropsTsType'; +export { default as VilkarResultPickerPeriodisertRHF } from './src/vilkar/VilkarResultPickerPeriodisertRHF'; +export { default as VilkarResultPickerRHF } from './src/vilkar/VilkarResultPickerRHF'; diff --git a/packages/prosess-felles/src/vilkar/VilkarResultPickerPeriodisert.tsx b/packages/prosess-felles/src/vilkar/VilkarResultPickerPeriodisert.tsx index 167eb2c940..f5e1e7a969 100644 --- a/packages/prosess-felles/src/vilkar/VilkarResultPickerPeriodisert.tsx +++ b/packages/prosess-felles/src/vilkar/VilkarResultPickerPeriodisert.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import { FunctionComponent, ReactNode } from 'react'; import avslattImage from '@fpsak-frontend/assets/images/avslaatt.svg'; import innvilgetImage from '@fpsak-frontend/assets/images/check.svg'; @@ -7,14 +7,14 @@ import { isAksjonspunktOpen } from '@fpsak-frontend/kodeverk/src/aksjonspunktSta import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType'; import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components'; import { hasValidDate, isRequiredMessage, required } from '@fpsak-frontend/utils'; -import { Aksjonspunkt, KodeverkMedNavn, Vilkarperiode, vilkarUtfallPeriodisert } from '@k9-sak-web/types'; +import { Aksjonspunkt, KodeverkMedNavn, Periode, Vilkarperiode, vilkarUtfallPeriodisert } from '@k9-sak-web/types'; import { BodyShort } from '@navikt/ds-react'; import { parse } from 'date-fns'; import getPackageIntl from '../../i18n/getPackageIntl'; import styles from './vilkarResultPicker.module.css'; -type FormValues = { +export type VilkarResultPickerFormState = { erVilkarOk: string; periodeVilkarStatus: boolean; avslagCode?: string; @@ -23,6 +23,13 @@ type FormValues = { valgtPeriodeTom?: string; }; +type TransformedValues = { + erVilkarOk: boolean; + periode: Periode | null | undefined; + avslagskode?: string; + avslagDato?: string; +}; + interface OwnProps { avslagsarsaker?: KodeverkMedNavn[]; erVilkarOk?: string; @@ -39,12 +46,23 @@ interface OwnProps { valgtPeriodeTom?: string; } +interface StaticFunctions { + transformValues: (values: VilkarResultPickerFormState, periodeFom?: string, periodeTom?: string) => TransformedValues; + buildInitialValues: ( + avslagKode: string, + aksjonspunkter: Aksjonspunkt[], + status: string, + periode: Vilkarperiode, + ) => VilkarResultPickerFormState; + validate: (erVilkarOk: string, avslagCode: string) => { avslagCode?: [{ id: 'ValidationMessage.NotEmpty' }] }; +} + /** * VilkarResultPicker * * Presentasjonskomponent. Lar NAV-ansatt velge om vilkåret skal oppfylles eller avvises. */ -const VilkarResultPicker = ({ +const VilkarResultPicker: FunctionComponent & StaticFunctions = ({ avslagsarsaker, erVilkarOk, periodeVilkarStatus, @@ -58,7 +76,7 @@ const VilkarResultPicker = ({ periodeTom, valgtPeriodeFom, valgtPeriodeTom, -}: OwnProps) => { +}) => { const intl = getPackageIntl(); const gyldigFomDatoer = () => ({ @@ -218,7 +236,7 @@ VilkarResultPicker.buildInitialValues = ( aksjonspunkter: Aksjonspunkt[], status: string, periode: Vilkarperiode, -): FormValues => { +): VilkarResultPickerFormState => { const isOpenAksjonspunkt = aksjonspunkter.some(ap => isAksjonspunktOpen(ap.status.kode)); let erVilkarOk; @@ -237,7 +255,11 @@ VilkarResultPicker.buildInitialValues = ( }; }; -VilkarResultPicker.transformValues = (values: FormValues, periodeFom?: string, periodeTom?: string) => { +VilkarResultPicker.transformValues = ( + values: VilkarResultPickerFormState, + periodeFom?: string, + periodeTom?: string, +) => { switch (values.erVilkarOk) { case vilkarUtfallPeriodisert.OPPFYLT: return { diff --git a/packages/prosess-felles/src/vilkar/VilkarResultPickerPeriodisertRHF.tsx b/packages/prosess-felles/src/vilkar/VilkarResultPickerPeriodisertRHF.tsx new file mode 100644 index 0000000000..ea2c3a0c4a --- /dev/null +++ b/packages/prosess-felles/src/vilkar/VilkarResultPickerPeriodisertRHF.tsx @@ -0,0 +1,284 @@ +import avslattImage from '@fpsak-frontend/assets/images/avslaatt.svg'; +import innvilgetImage from '@fpsak-frontend/assets/images/check.svg'; +import { Label } from '@fpsak-frontend/form'; +import { isAksjonspunktOpen } from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus'; +import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType'; +import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components'; +import { hasValidDate, required } from '@fpsak-frontend/utils'; +import { Aksjonspunkt, KodeverkMedNavn, Periode, Vilkarperiode, vilkarUtfallPeriodisert } from '@k9-sak-web/types'; +import { BodyShort } from '@navikt/ds-react'; +import { Datepicker, RadioGroupPanel, SelectField } from '@navikt/ft-form-hooks'; +import { isAfter, isBefore, parse } from 'date-fns'; +import { FunctionComponent, ReactNode } from 'react'; +import styles from './vilkarResultPicker.module.css'; + +export type VilkarResultPickerFormState = { + erVilkarOk: string; + periodeVilkarStatus: boolean; + avslagCode?: string; + avslagDato?: string; + valgtPeriodeFom?: string; + valgtPeriodeTom?: string; +}; + +type TransformedValues = { + erVilkarOk: boolean; + periode: Periode | null | undefined; + avslagskode?: string; + avslagDato?: string; +}; + +interface OwnProps { + avslagsarsaker?: KodeverkMedNavn[]; + erVilkarOk?: string; + periodeVilkarStatus?: boolean; + customVilkarIkkeOppfyltText: string | ReactNode; + customVilkarOppfyltText: string | ReactNode; + readOnly: boolean; + erMedlemskapsPanel?: boolean; + visPeriodisering: boolean; + fieldNamePrefix?: string; + periodeFom?: string; + periodeTom?: string; + valgtPeriodeFom?: string; + valgtPeriodeTom?: string; +} + +interface StaticFunctions { + transformValues: (values: VilkarResultPickerFormState, periodeFom?: string, periodeTom?: string) => TransformedValues; + buildInitialValues: ( + avslagKode: string, + aksjonspunkter: Aksjonspunkt[], + status: string, + periode: Vilkarperiode, + ) => VilkarResultPickerFormState; +} + +/** + * VilkarResultPicker + * + * Presentasjonskomponent. Lar NAV-ansatt velge om vilkåret skal oppfylles eller avvises. + */ +const VilkarResultPickerPeriodisertRHF: FunctionComponent & StaticFunctions = ({ + avslagsarsaker, + erVilkarOk, + periodeVilkarStatus, + customVilkarIkkeOppfyltText, + customVilkarOppfyltText, + readOnly, + erMedlemskapsPanel = false, + visPeriodisering, + fieldNamePrefix, + periodeFom, + periodeTom, + valgtPeriodeFom, + valgtPeriodeTom, +}) => { + const ugyldigeFomDatoer = () => [ + (date: Date) => isBefore(date, parse(periodeFom, 'yyyy-MM-dd', new Date())), + (date: Date) => isAfter(date, parse(valgtPeriodeTom, 'yyyy-MM-dd', new Date())), + ]; + + const ugyldigeTomDatoer = () => [ + (date: Date) => isBefore(date, parse(valgtPeriodeFom, 'yyyy-MM-dd', new Date())), + (date: Date) => isAfter(date, parse(periodeTom, 'yyyy-MM-dd', new Date())), + ]; + + return ( +
+ + {readOnly && erVilkarOk !== undefined && ( + + + + + + + {erVilkarOk === vilkarUtfallPeriodisert.OPPFYLT && ( + {customVilkarOppfyltText} + )} + {erVilkarOk === vilkarUtfallPeriodisert.IKKE_OPPFYLT && ( + {customVilkarIkkeOppfyltText} + )} + + + + + )} + + {(!readOnly || erVilkarOk === undefined) && ( + , + }, + ...(visPeriodisering + ? [ + { + value: periodeVilkarStatus + ? vilkarUtfallPeriodisert.DELVIS_IKKE_OPPFYLT + : vilkarUtfallPeriodisert.DELVIS_OPPFYLT, + label: periodeVilkarStatus ? ( + <> + Vilkåret er delvis ikke oppfylt + + ) : ( + 'Vilkåret er delvis oppfylt' + ), + }, + ] + : []), + { + value: vilkarUtfallPeriodisert.IKKE_OPPFYLT, + label:
+ ); +}; + +VilkarResultPickerPeriodisertRHF.buildInitialValues = ( + avslagKode: string, + aksjonspunkter: Aksjonspunkt[], + status: string, + periode: Vilkarperiode, +): VilkarResultPickerFormState => { + const isOpenAksjonspunkt = aksjonspunkter.some(ap => isAksjonspunktOpen(ap.status.kode)); + let erVilkarOk; + + if (status === vilkarUtfallType.OPPFYLT) { + erVilkarOk = vilkarUtfallPeriodisert.OPPFYLT; + } else if (status === vilkarUtfallType.IKKE_OPPFYLT) { + erVilkarOk = vilkarUtfallPeriodisert.IKKE_OPPFYLT; + } + + return { + erVilkarOk, + periodeVilkarStatus: !isOpenAksjonspunkt && status === vilkarUtfallType.OPPFYLT, + avslagCode: erVilkarOk === vilkarUtfallType.IKKE_OPPFYLT && avslagKode ? avslagKode : undefined, + valgtPeriodeFom: periode.periode.fom, + valgtPeriodeTom: periode.periode.tom, + }; +}; + +VilkarResultPickerPeriodisertRHF.transformValues = ( + values: VilkarResultPickerFormState, + periodeFom?: string, + periodeTom?: string, +) => { + switch (values.erVilkarOk) { + case vilkarUtfallPeriodisert.OPPFYLT: + return { + erVilkarOk: true, + periode: periodeFom && periodeTom ? { fom: periodeFom, tom: periodeTom } : undefined, + }; + + case vilkarUtfallPeriodisert.DELVIS_OPPFYLT: + return { + erVilkarOk: true, + periode: { + fom: values.valgtPeriodeFom, + tom: values.valgtPeriodeTom, + }, + }; + + case vilkarUtfallPeriodisert.IKKE_OPPFYLT: + return { + erVilkarOk: false, + avslagskode: values.avslagCode, + avslagsDato: values.avslagDato, + periode: periodeFom && periodeTom ? { fom: periodeFom, tom: periodeTom } : undefined, + }; + + case vilkarUtfallPeriodisert.DELVIS_IKKE_OPPFYLT: + return { + erVilkarOk: false, + avslagskode: values.avslagCode, + periode: { + fom: values.valgtPeriodeFom, + tom: values.valgtPeriodeTom, + }, + }; + default: + return { + erVilkarOk: null, + avslagskode: null, + periode: null, + }; + } +}; + +export default VilkarResultPickerPeriodisertRHF; diff --git a/packages/prosess-felles/src/vilkar/VilkarResultPickerRHF.tsx b/packages/prosess-felles/src/vilkar/VilkarResultPickerRHF.tsx new file mode 100644 index 0000000000..5c8a7999d3 --- /dev/null +++ b/packages/prosess-felles/src/vilkar/VilkarResultPickerRHF.tsx @@ -0,0 +1,148 @@ +import avslattImage from '@fpsak-frontend/assets/images/avslaatt.svg'; +import innvilgetImage from '@fpsak-frontend/assets/images/check.svg'; +import { Label } from '@fpsak-frontend/form'; +import { isAksjonspunktOpen } from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus'; +import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType'; +import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components'; +import { hasValidDate, required } from '@fpsak-frontend/utils'; +import { Aksjonspunkt, KodeverkMedNavn } from '@k9-sak-web/types'; +import { BodyShort } from '@navikt/ds-react'; +import { Datepicker, RadioGroupPanel, SelectField } from '@navikt/ft-form-hooks'; +import { FunctionComponent, ReactNode } from 'react'; +import styles from './vilkarResultPicker.module.css'; + +export type VilkarResultPickerFormState = { + erVilkarOk: boolean; + avslagCode?: string; + avslagDato?: string; +}; + +type TransformedValues = { + erVilkarOk: boolean; + avslagskode?: string; + avslagDato?: string; +}; + +interface OwnProps { + avslagsarsaker?: KodeverkMedNavn[]; + erVilkarOk?: boolean; + customVilkarIkkeOppfyltText: string | ReactNode; + customVilkarOppfyltText: string | ReactNode; + readOnly: boolean; + erMedlemskapsPanel?: boolean; + fieldNamePrefix?: string; +} + +interface StaticFunctions { + transformValues: (values: VilkarResultPickerFormState, periodeFom?: string, periodeTom?: string) => TransformedValues; + buildInitialValues: ( + avslagKode: string, + aksjonspunkter: Aksjonspunkt[], + status: string, + ) => VilkarResultPickerFormState; +} + +/** + * VilkarResultPicker + * + * Presentasjonskomponent. Lar NAV-ansatt velge om vilkåret skal oppfylles eller avvises. + */ +const VilkarResultPickerRHF: FunctionComponent & StaticFunctions = ({ + avslagsarsaker, + erVilkarOk, + customVilkarIkkeOppfyltText, + customVilkarOppfyltText, + readOnly, + erMedlemskapsPanel = false, + fieldNamePrefix, +}) => { + return ( +
+ + {readOnly && erVilkarOk !== undefined && ( + + + + + + + {erVilkarOk && {customVilkarOppfyltText}} + {!erVilkarOk && {customVilkarIkkeOppfyltText}} + + + + + )} + {(!readOnly || erVilkarOk === undefined) && ( + , + }, + { + value: 'false', + label:
+ ); +}; + +VilkarResultPickerRHF.buildInitialValues = ( + avslagKode: string, + aksjonspunkter: Aksjonspunkt[], + status: string, +): VilkarResultPickerFormState => { + const isOpenAksjonspunkt = aksjonspunkter.some(ap => isAksjonspunktOpen(ap.status.kode)); + const erVilkarOk = isOpenAksjonspunkt ? undefined : vilkarUtfallType.OPPFYLT === status; + return { + erVilkarOk, + avslagCode: erVilkarOk === false && avslagKode ? avslagKode : undefined, + }; +}; + +VilkarResultPickerRHF.transformValues = (values: VilkarResultPickerFormState) => + values.erVilkarOk + ? { erVilkarOk: values.erVilkarOk } + : { + erVilkarOk: values.erVilkarOk, + avslagskode: values.avslagCode, + avslagDato: values.avslagDato, + }; + +export default VilkarResultPickerRHF; diff --git a/packages/prosess-uttak/package.json b/packages/prosess-uttak/package.json index ff73d80370..96ea29c1f0 100644 --- a/packages/prosess-uttak/package.json +++ b/packages/prosess-uttak/package.json @@ -17,7 +17,7 @@ "@hookform/resolvers": "^3.9.0", "@navikt/ds-css": "6.13.0", "@navikt/ds-react": "6.13.0", - "@navikt/ft-form-hooks": "4.4.20", + "@navikt/ft-form-hooks": "5.0.0", "@navikt/ft-form-validators": "2.3.18", "@navikt/ft-plattform-komponenter": "3.0.4", "@popperjs/core": "2.11.8", diff --git a/packages/prosess-uttak/src/ui/components/vurderDato/VurderDatoAksjonspunkt.tsx b/packages/prosess-uttak/src/ui/components/vurderDato/VurderDatoAksjonspunkt.tsx index 2650d0965d..1dbb921c4b 100644 --- a/packages/prosess-uttak/src/ui/components/vurderDato/VurderDatoAksjonspunkt.tsx +++ b/packages/prosess-uttak/src/ui/components/vurderDato/VurderDatoAksjonspunkt.tsx @@ -36,10 +36,8 @@ const VurderDatoAksjonspunkt = ({ avbryt, initialValues }: Props) => { name="virkningsdato" label="Endringsdato" defaultMonth={new Date()} - disabledDays={{ - fromDate: new Date('1 Jan 2019'), - toDate: new Date('31 Dec 2024'), - }} + fromDate={new Date('1 Jan 2019')} + toDate={new Date('31 Dec 2024')} validate={[required]} /> ( - { + const [erOverstyrt, toggleOverstyring] = React.useState(false); + return ( + -); + ] as Aksjonspunkt[] + } + submitCallback={action('button-click')} + toggleOverstyring={() => toggleOverstyring(!erOverstyrt)} + avslagsarsaker={avslagsarsaker} + panelTittelKode="Inngangsvilkar.Opptjeningsvilkaret" + lovReferanse="§§ Dette er en lovreferanse" + overstyringApKode={aksjonspunktCode.OVERSTYRING_AV_OPPTJENINGSVILKARET} + visPeriodisering={false} + vilkar={vilkarOpptjening} + visAllePerioder + erMedlemskapsPanel={false} + {...args} + /> + ); +}; visOverstyrtAksjonspunktSomErBekreftet.args = { overrideReadOnly: false, diff --git a/packages/prosess-vilkar-overstyring/src/VilkarresultatMedOverstyringProsessIndex.tsx b/packages/prosess-vilkar-overstyring/src/VilkarresultatMedOverstyringProsessIndex.tsx index 6dc931ebb9..8836aa1c85 100644 --- a/packages/prosess-vilkar-overstyring/src/VilkarresultatMedOverstyringProsessIndex.tsx +++ b/packages/prosess-vilkar-overstyring/src/VilkarresultatMedOverstyringProsessIndex.tsx @@ -5,10 +5,10 @@ import hentAktivePerioderFraVilkar from '@fpsak-frontend/utils/src/hentAktivePer import { Aksjonspunkt, Behandling, KodeverkMedNavn, SubmitCallback, Vilkar } from '@k9-sak-web/types'; import { SideMenu } from '@navikt/ft-plattform-komponenter'; import classNames from 'classnames/bind'; -import React, { SetStateAction, useEffect, useState } from 'react'; +import { SetStateAction, useEffect, useState } from 'react'; import { RawIntlProvider, createIntl, createIntlCache } from 'react-intl'; import messages from '../i18n/nb_NO.json'; -import VilkarresultatMedOverstyringFormPeriodisert from './components-periodisert/VilkarresultatMedOverstyringForm'; +import VilkarresultatMedOverstyringFormPeriodisert from './components-periodisert/VilkarresultatMedOverstyringFormPeriodisert'; import VilkarresultatMedOverstyringForm from './components/VilkarresultatMedOverstyringForm'; import VilkarresultatMedOverstyringHeader from './components/VilkarresultatMedOverstyringHeader'; import styles from './vilkarresultatMedOverstyringProsessIndex.module.css'; @@ -133,12 +133,10 @@ const VilkarresultatMedOverstyringProsessIndex = ({ aksjonspunkter={aksjonspunkter} submitCallback={submitCallback} overrideReadOnly={overrideReadOnly} - kanOverstyreAccess={kanOverstyreAccess} toggleOverstyring={toggleOverstyring} avslagsarsaker={avslagsarsaker} status={activePeriode.vilkarStatus.kode} erOverstyrt={erOverstyrt} - panelTittelKode={panelTittelKode} overstyringApKode={overstyringApKode} lovReferanse={activeVilkår.lovReferanse ?? lovReferanse} erMedlemskapsPanel={erMedlemskapsPanel} @@ -159,12 +157,10 @@ const VilkarresultatMedOverstyringProsessIndex = ({ aksjonspunkter={aksjonspunkter} submitCallback={submitCallback} overrideReadOnly={overrideReadOnly} - kanOverstyreAccess={kanOverstyreAccess} toggleOverstyring={toggleOverstyring} avslagsarsaker={avslagsarsaker} status={activePeriode.vilkarStatus.kode} erOverstyrt={erOverstyrt} - panelTittelKode={panelTittelKode} overstyringApKode={overstyringApKode} lovReferanse={activeVilkår.lovReferanse ?? lovReferanse} erMedlemskapsPanel={erMedlemskapsPanel} diff --git a/packages/prosess-vilkar-overstyring/src/components-old/OverstyrBekreftKnappPanel.spec.tsx b/packages/prosess-vilkar-overstyring/src/components-old/OverstyrBekreftKnappPanel.spec.tsx deleted file mode 100644 index e7b5da7c96..0000000000 --- a/packages/prosess-vilkar-overstyring/src/components-old/OverstyrBekreftKnappPanel.spec.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils'; -import { screen } from '@testing-library/react'; -import React from 'react'; -import messages from '../../i18n/nb_NO.json'; -import OverstyrBekreftKnappPanel from './OverstyrBekreftKnappPanel'; - -describe('', () => { - it('skal rendre submit-knapp når en ikke er i readonly-modus', () => { - renderWithIntl(, { - messages, - }); - expect(screen.getByRole('button', { name: 'Bekreft overstyring' })).toBeInTheDocument(); - }); - - it('skal ikke vise submit-knapp når en er i readonly-modus', () => { - renderWithIntl(, { messages }); - - expect(screen.queryByRole('button', { name: 'Bekreft overstyring' })).not.toBeInTheDocument(); - }); -}); diff --git a/packages/prosess-vilkar-overstyring/src/components-old/OverstyrBekreftKnappPanel.tsx b/packages/prosess-vilkar-overstyring/src/components-old/OverstyrBekreftKnappPanel.tsx deleted file mode 100644 index fad86d34eb..0000000000 --- a/packages/prosess-vilkar-overstyring/src/components-old/OverstyrBekreftKnappPanel.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Button } from '@navikt/ds-react'; -import React from 'react'; -import { FormattedMessage } from 'react-intl'; - -interface OwnProps { - submitting: boolean; - pristine: boolean; - overrideReadOnly: boolean; -} - -const OverstyrBekreftKnappPanel = ({ submitting, pristine, overrideReadOnly }: OwnProps) => { - if (overrideReadOnly) { - return null; - } - return ( - - ); -}; - -export default OverstyrBekreftKnappPanel; diff --git a/packages/prosess-vilkar-overstyring/src/components-old/VilkarBegrunnelse.tsx b/packages/prosess-vilkar-overstyring/src/components-old/VilkarBegrunnelse.tsx deleted file mode 100644 index 7547e8fe3b..0000000000 --- a/packages/prosess-vilkar-overstyring/src/components-old/VilkarBegrunnelse.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { useIntl } from 'react-intl'; - -import { TextAreaField } from '@fpsak-frontend/form'; -import { decodeHtmlEntity, hasValidText, maxLength, minLength, requiredIfNotPristine } from '@fpsak-frontend/utils'; -import { Aksjonspunkt } from '@k9-sak-web/types'; - -const minLength3 = minLength(3); -const maxLength1500 = maxLength(1500); - -interface OwnProps { - begrunnelseLabel?: string; - isReadOnly: boolean; -} - -/** - * VilkarBegrunnelse - * - * Presentasjonskomponent. Lar den NAV-ansatte skrive inn en begrunnelse før overstyring av vilkår eller beregning. - */ -const VilkarBegrunnelse = ({ isReadOnly, begrunnelseLabel = 'VilkarBegrunnelse.Vilkar' }: OwnProps) => { - const intl = useIntl(); - return ( - - ); -}; - -VilkarBegrunnelse.buildInitialValues = (aksjonspunkt: Aksjonspunkt) => ({ - begrunnelse: decodeHtmlEntity(aksjonspunkt && aksjonspunkt.begrunnelse ? aksjonspunkt.begrunnelse : ''), -}); - -VilkarBegrunnelse.transformValues = values => ({ - begrunnelse: values.begrunnelse, -}); - -export default VilkarBegrunnelse; diff --git a/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedBegrunnelse.tsx b/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedBegrunnelse.tsx deleted file mode 100644 index 23b4cc2548..0000000000 --- a/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedBegrunnelse.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react'; -import { FormattedMessage } from 'react-intl'; - -import { VerticalSpacer } from '@fpsak-frontend/shared-components'; -import { VilkarResultPicker } from '@k9-sak-web/prosess-felles'; -import { KodeverkMedNavn } from '@k9-sak-web/types'; - -import VilkarBegrunnelse from './VilkarBegrunnelse'; -import { CustomVilkarText } from './VilkarresultatMedOverstyringForm'; - -interface VilkarresultatMedBegrunnelseProps { - erVilkarOk?: boolean; - readOnly: boolean; - erMedlemskapsPanel: boolean; - avslagsarsaker: KodeverkMedNavn[]; - customVilkarIkkeOppfyltText?: CustomVilkarText; - customVilkarOppfyltText?: CustomVilkarText; - skalViseBegrunnelse?: boolean; -} - -/** - * VIlkarresultatMedBegrunnelse - * - * Presentasjonskomponent. Viser resultat av vilkårskjøring når det ikke finnes tilknyttede aksjonspunkter. - * Resultatet kan overstyres av Nav-ansatt med overstyr-rettighet. - */ -export const VilkarresultatMedBegrunnelse = ({ - erVilkarOk, - readOnly, - avslagsarsaker, - erMedlemskapsPanel, - skalViseBegrunnelse = true, - customVilkarIkkeOppfyltText, - customVilkarOppfyltText, -}: VilkarresultatMedBegrunnelseProps) => ( - <> - {skalViseBegrunnelse && ( - <> - - - - )} - {chunks}, - ...customVilkarIkkeOppfyltText.values, - } - : { b: chunks => {chunks} } - } - /> - } - customVilkarIkkeOppfyltText={ - {chunks}, - ...customVilkarIkkeOppfyltText.values, - } - : { b: chunks => {chunks} } - } - /> - } - erVilkarOk={erVilkarOk} - readOnly={readOnly} - erMedlemskapsPanel={erMedlemskapsPanel} - /> - -); - -VilkarresultatMedBegrunnelse.buildInitialValues = (avslagKode, aksjonspunkter, status, overstyringApKode, periode) => ({ - ...VilkarResultPicker.buildInitialValues(avslagKode, aksjonspunkter, status), - ...VilkarBegrunnelse.buildInitialValues(periode), -}); - -VilkarresultatMedBegrunnelse.transformValues = values => ({ - begrunnelse: values.begrunnelse, -}); - -VilkarresultatMedBegrunnelse.validate = ( - values: { erVilkarOk: boolean; avslagCode: string } = { erVilkarOk: false, avslagCode: '' }, -) => VilkarResultPicker.validate(values.erVilkarOk, values.avslagCode); - -export default VilkarresultatMedBegrunnelse; diff --git a/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringForm.tsx b/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringForm.tsx deleted file mode 100644 index c2aa6c3373..0000000000 --- a/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringForm.tsx +++ /dev/null @@ -1,274 +0,0 @@ -import advarselIkonUrl from '@fpsak-frontend/assets/images/advarsel_ny.svg'; -import { behandlingForm, behandlingFormValueSelector } from '@fpsak-frontend/form'; -import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus'; -import BehandlingType from '@fpsak-frontend/kodeverk/src/behandlingType'; -import { - AksjonspunktBox, - EditedIcon, - FlexColumn, - FlexContainer, - FlexRow, - Image, - VerticalSpacer, -} from '@fpsak-frontend/shared-components'; -import { DDMMYYYY_DATE_FORMAT } from '@fpsak-frontend/utils'; -import { VilkarResultPicker } from '@k9-sak-web/prosess-felles'; -import { Aksjonspunkt, Kodeverk, KodeverkMedNavn, SubmitCallback } from '@k9-sak-web/types'; -import Vilkarperiode from '@k9-sak-web/types/src/vilkarperiode'; -import { BodyShort, Button, Label } from '@navikt/ds-react'; -import moment from 'moment'; -import React, { SetStateAction, useEffect } from 'react'; -import { FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; -import { InjectedFormProps } from 'redux-form'; -import { createSelector } from 'reselect'; -import OverstyrBekreftKnappPanel from './OverstyrBekreftKnappPanel'; -import { VilkarresultatMedBegrunnelse } from './VilkarresultatMedBegrunnelse'; -import styles from './vilkarresultatMedOverstyringForm.module.css'; - -const getFormName = (overstyringApKode: string) => `VilkarresultatForm_${overstyringApKode}`; - -export interface CustomVilkarText { - id: string; - values?: any; -} - -interface VilkarresultatMedOverstyringFormProps { - aksjonspunkter: Aksjonspunkt[]; - avslagsarsaker: KodeverkMedNavn[]; - behandlingsresultat: { - type: Kodeverk; - }; - behandlingId: number; - behandlingVersjon: number; - behandlingType: Kodeverk; - customVilkarIkkeOppfyltText?: CustomVilkarText; - customVilkarOppfyltText?: CustomVilkarText; - erMedlemskapsPanel: boolean; - erOverstyrt?: boolean; - erVilkarOk?: boolean; - hasAksjonspunkt: boolean; - isReadOnly: boolean; - lovReferanse?: string; - medlemskapFom: string; - overrideReadOnly: boolean; - overstyringApKode: string; - status: string; - submitCallback: (props: SubmitCallback[]) => void; - toggleOverstyring: (overstyrtPanel: SetStateAction) => void; - avslagKode?: string; - periode?: Vilkarperiode; -} - -interface StateProps { - isSolvable: boolean; - periodeFom: string; - periodeTom: string; -} - -/** - * VilkarresultatForm - * - * Presentasjonskomponent. Viser resultat av vilkårskjøring når det ikke finnes tilknyttede aksjonspunkter. - * Resultatet kan overstyres av Nav-ansatt med overstyr-rettighet. - */ -export const VilkarresultatMedOverstyringForm = ({ - erOverstyrt, - isReadOnly, - overstyringApKode, - isSolvable, - erVilkarOk, - customVilkarIkkeOppfyltText, - customVilkarOppfyltText, - erMedlemskapsPanel, - hasAksjonspunkt, - avslagsarsaker, - overrideReadOnly, - toggleOverstyring, - reset, - handleSubmit, - submitting, - pristine, - periodeFom, - periodeTom, -}: Partial & StateProps & InjectedFormProps) => { - const toggleAv = () => { - reset(); - toggleOverstyring(oldArray => oldArray.filter(code => code !== overstyringApKode)); - }; - - useEffect( - () => () => { - reset(); - }, - [periodeFom, periodeTom], - ); - - return ( -
- {(erOverstyrt || hasAksjonspunkt) && ( - - - - - - {!erOverstyrt && erVilkarOk !== undefined && ( - <> - - - - - - - - - - - - - )} - {erOverstyrt && ( - - - - - - - - - - - - - - - - - - - - )} - - )} -
- ); -}; - -const buildInitialValues = createSelector( - [ - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.avslagKode, - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.aksjonspunkter, - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.status, - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.overstyringApKode, - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.periode, - ], - (avslagKode, aksjonspunkter, status, overstyringApKode, periode) => { - const aksjonspunkt = aksjonspunkter.find(ap => ap.definisjon.kode === overstyringApKode); - return { - isOverstyrt: aksjonspunkt !== undefined, - ...VilkarresultatMedBegrunnelse.buildInitialValues( - avslagKode, - aksjonspunkter, - status, - overstyringApKode, - periode, - ), - }; - }, -); - -const getCustomVilkarText = (medlemskapFom: string, behandlingType: Kodeverk, erOppfylt: boolean) => { - const customVilkarText = { id: '', values: null }; - const isBehandlingRevurderingFortsattMedlemskap = - behandlingType.kode === BehandlingType.REVURDERING && !!medlemskapFom; - if (isBehandlingRevurderingFortsattMedlemskap) { - customVilkarText.id = erOppfylt - ? 'VilkarResultPicker.VilkarOppfyltRevurderingFom' - : 'VilkarResultPicker.VilkarIkkeOppfyltRevurderingFom'; - customVilkarText.values = { fom: moment(medlemskapFom).format(DDMMYYYY_DATE_FORMAT) }; - } - return customVilkarText.id ? customVilkarText : undefined; -}; - -const getCustomVilkarTextForOppfylt = createSelector( - [(ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.medlemskapFom, ownProps => ownProps.behandlingType], - (medlemskapFom, behandlingType) => getCustomVilkarText(medlemskapFom, behandlingType, true), -); -const getCustomVilkarTextForIkkeOppfylt = createSelector( - [(ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.medlemskapFom, ownProps => ownProps.behandlingType], - (medlemskapFom, behandlingType) => getCustomVilkarText(medlemskapFom, behandlingType, false), -); - -const transformValues = (values, overstyringApKode, periodeFom, periodeTom) => ({ - kode: overstyringApKode, - ...VilkarResultPicker.transformValues(values), - ...VilkarresultatMedBegrunnelse.transformValues(values), - periode: periodeFom && periodeTom ? { fom: periodeFom, tom: periodeTom } : undefined, -}); - -const validate = values => VilkarresultatMedBegrunnelse.validate(values); - -const mapStateToPropsFactory = (_initialState, initialOwnProps: VilkarresultatMedOverstyringFormProps) => { - const { overstyringApKode, submitCallback, periode } = initialOwnProps; - const periodeFom = periode?.periode?.fom; - const periodeTom = periode?.periode?.tom; - const onSubmit = values => submitCallback([transformValues(values, overstyringApKode, periodeFom, periodeTom)]); - const validateFn = values => validate(values); - const formName = getFormName(overstyringApKode); - - return (state, ownProps) => { - const { behandlingId, behandlingVersjon, aksjonspunkter, erOverstyrt, overrideReadOnly } = ownProps; - - const aksjonspunkt = aksjonspunkter.find(ap => ap.definisjon.kode === overstyringApKode); - const isSolvable = - aksjonspunkt !== undefined - ? !(aksjonspunkt.status.kode === aksjonspunktStatus.OPPRETTET && !aksjonspunkt.kanLoses) - : false; - - const initialValues = buildInitialValues(ownProps); - - return { - onSubmit, - initialValues, - customVilkarOppfyltText: getCustomVilkarTextForOppfylt(ownProps), - customVilkarIkkeOppfyltText: getCustomVilkarTextForIkkeOppfylt(ownProps), - isSolvable: erOverstyrt || isSolvable, - isReadOnly: overrideReadOnly || !periode?.vurderesIBehandlingen, - hasAksjonspunkt: aksjonspunkt !== undefined, - validate: validateFn, - form: formName, - periodeFom, - periodeTom, - ...behandlingFormValueSelector(formName, behandlingId, behandlingVersjon)(state, 'isOverstyrt', 'erVilkarOk'), - }; - }; -}; - -// @ts-expect-error Kan ikkje senda med formnavn her sidan det er dynamisk. Må fikse på ein annan måte -const form = behandlingForm({ enableReinitialize: true })(VilkarresultatMedOverstyringForm); -export default connect(mapStateToPropsFactory)(form); diff --git a/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.spec.tsx b/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.spec.tsx deleted file mode 100644 index f787ca725b..0000000000 --- a/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.spec.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils'; -import { screen } from '@testing-library/react'; -import React from 'react'; -import { Provider } from 'react-redux'; -import { combineReducers, createStore } from 'redux'; -import { reducer } from 'redux-form'; -import messages from '../../i18n/nb_NO.json'; -import VilkarresultatMedOverstyringHeader from './VilkarresultatMedOverstyringHeader'; - -describe('', () => { - it('skal rendre header', () => { - renderWithIntl( - - undefined} - panelTittelKode="Inngangsvilkar.Medlemskapsvilkaret" - erOverstyrt - aksjonspunkter={[]} - /> - , - { messages }, - ); - expect(screen.getByRole('heading', { name: 'Medlemskap' })).toBeInTheDocument(); - expect(screen.getByText('§23')).toBeInTheDocument(); - }); -}); diff --git a/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.tsx b/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.tsx deleted file mode 100644 index 7fa5c93795..0000000000 --- a/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import avslattImage from '@fpsak-frontend/assets/images/avslaatt_hover.svg'; -import innvilgetImage from '@fpsak-frontend/assets/images/innvilget_hover.svg'; -import keyUtgraetImage from '@fpsak-frontend/assets/images/key-1-rotert-utgraet.svg'; -import keyImage from '@fpsak-frontend/assets/images/key-1-rotert.svg'; -import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType'; -import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components'; -import { Aksjonspunkt } from '@k9-sak-web/types'; -import { Detail, Heading, Label } from '@navikt/ds-react'; -import React, { SetStateAction } from 'react'; -import { FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; -import styles from './vilkarresultatMedOverstyringForm.module.css'; - -const isOverridden = (aksjonspunktCodes: string[], aksjonspunktCode: string) => - aksjonspunktCodes.some(code => code === aksjonspunktCode); -const isHidden = (kanOverstyre: boolean, aksjonspunktCodes: string[], aksjonspunktCode: string) => - !isOverridden(aksjonspunktCodes, aksjonspunktCode) && !kanOverstyre; - -const getVilkarOkMessage = originalErVilkarOk => { - let messageId = 'VilkarresultatMedOverstyringForm.IkkeBehandlet'; - if (originalErVilkarOk) { - messageId = 'VilkarresultatMedOverstyringForm.ErOppfylt'; - } else if (originalErVilkarOk === false) { - messageId = 'VilkarresultatMedOverstyringForm.ErIkkeOppfylt'; - } - - return ( - - ); -}; - -interface VilkarresultatMedOverstyringHeaderProps { - aksjonspunktCodes: string[]; - aksjonspunkter: Aksjonspunkt[]; - erOverstyrt?: boolean; - kanOverstyreAccess?: { - isEnabled: boolean; - }; - lovReferanse?: string; - originalErVilkarOk?: boolean; - overrideReadOnly: boolean; - overstyringApKode: string; - panelTittelKode: string; - toggleOverstyring: (overstyrtPanel: SetStateAction) => void; -} - -const VilkarresultatMedOverstyringHeader = ({ - panelTittelKode, - erOverstyrt, - overstyringApKode, - lovReferanse, - originalErVilkarOk, - overrideReadOnly, - kanOverstyreAccess, - aksjonspunktCodes, - toggleOverstyring, -}: Partial) => { - const togglePa = () => { - toggleOverstyring(oldArray => [...oldArray, overstyringApKode]); - }; - return ( - <> - - - {!erOverstyrt && originalErVilkarOk !== undefined && ( - - - - )} - - - - - - {lovReferanse && ( - - {lovReferanse} - - )} - - - - - {getVilkarOkMessage(originalErVilkarOk)} - - {originalErVilkarOk !== undefined && - !isHidden(kanOverstyreAccess.isEnabled, aksjonspunktCodes, overstyringApKode) && ( - <> - {!erOverstyrt && !overrideReadOnly && ( - - - - - )} - {(erOverstyrt || overrideReadOnly) && ( - - - - - )} - - )} - - - - - ); -}; - -const mapStateToPropsFactory = (_initialState, initialOwnProps: VilkarresultatMedOverstyringHeaderProps) => { - const aksjonspunktCodes = initialOwnProps.aksjonspunkter.map(a => a.definisjon.kode); - - return (state, ownProps) => { - const erOppfylt = vilkarUtfallType.OPPFYLT === ownProps.status; - const erVilkarOk = vilkarUtfallType.IKKE_VURDERT !== ownProps.status ? erOppfylt : undefined; - - return { - aksjonspunktCodes, - originalErVilkarOk: erVilkarOk, - }; - }; -}; - -export default connect(mapStateToPropsFactory)(VilkarresultatMedOverstyringHeader); diff --git a/packages/prosess-vilkar-overstyring/src/components-old/vilkarBegrunnelse.module.css b/packages/prosess-vilkar-overstyring/src/components-old/vilkarBegrunnelse.module.css deleted file mode 100644 index b720620b98..0000000000 --- a/packages/prosess-vilkar-overstyring/src/components-old/vilkarBegrunnelse.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.margin { - margin-top: 10px; -} diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/FormState.ts b/packages/prosess-vilkar-overstyring/src/components-periodisert/FormState.ts new file mode 100644 index 0000000000..290cf15440 --- /dev/null +++ b/packages/prosess-vilkar-overstyring/src/components-periodisert/FormState.ts @@ -0,0 +1,11 @@ +import { VilkarResultPickerFormState } from '@k9-sak-web/prosess-felles/src/vilkar/VilkarResultPickerPeriodisertRHF'; + +export type VilkarBegrunnelseFormState = { + begrunnelse: string; +}; + +export type VilkarresultatMedBegrunnelseState = VilkarBegrunnelseFormState & VilkarResultPickerFormState; + +export type VilkarresultatMedOverstyringFormState = VilkarresultatMedBegrunnelseState & { + isOverstyrt: boolean; +}; diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/OverstyrBekreftKnappPanel.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/OverstyrBekreftKnappPanel.tsx index fad86d34eb..c5225d1dca 100644 --- a/packages/prosess-vilkar-overstyring/src/components-periodisert/OverstyrBekreftKnappPanel.tsx +++ b/packages/prosess-vilkar-overstyring/src/components-periodisert/OverstyrBekreftKnappPanel.tsx @@ -1,6 +1,4 @@ import { Button } from '@navikt/ds-react'; -import React from 'react'; -import { FormattedMessage } from 'react-intl'; interface OwnProps { submitting: boolean; @@ -14,7 +12,7 @@ const OverstyrBekreftKnappPanel = ({ submitting, pristine, overrideReadOnly }: O } return ( ); }; diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarBegrunnelse.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarBegrunnelse.tsx index 7547e8fe3b..8b3186b67c 100644 --- a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarBegrunnelse.tsx +++ b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarBegrunnelse.tsx @@ -1,42 +1,43 @@ -import React from 'react'; -import { useIntl } from 'react-intl'; - -import { TextAreaField } from '@fpsak-frontend/form'; -import { decodeHtmlEntity, hasValidText, maxLength, minLength, requiredIfNotPristine } from '@fpsak-frontend/utils'; -import { Aksjonspunkt } from '@k9-sak-web/types'; +import { decodeHtmlEntity } from '@fpsak-frontend/utils'; +import { Vilkarperiode } from '@k9-sak-web/types'; +import { TextAreaField } from '@navikt/ft-form-hooks'; +import { hasValidText, maxLength, minLength, required } from '@navikt/ft-form-validators'; +import { FunctionComponent } from 'react'; +import { VilkarBegrunnelseFormState } from './FormState'; const minLength3 = minLength(3); const maxLength1500 = maxLength(1500); interface OwnProps { - begrunnelseLabel?: string; isReadOnly: boolean; } +interface StaticFunctions { + transformValues: (values: VilkarBegrunnelseFormState) => VilkarBegrunnelseFormState; + buildInitialValues: (periode: Vilkarperiode) => VilkarBegrunnelseFormState; +} + /** * VilkarBegrunnelse * * Presentasjonskomponent. Lar den NAV-ansatte skrive inn en begrunnelse før overstyring av vilkår eller beregning. */ -const VilkarBegrunnelse = ({ isReadOnly, begrunnelseLabel = 'VilkarBegrunnelse.Vilkar' }: OwnProps) => { - const intl = useIntl(); - return ( - - ); -}; +const VilkarBegrunnelse: FunctionComponent & StaticFunctions = ({ isReadOnly }) => ( + +); -VilkarBegrunnelse.buildInitialValues = (aksjonspunkt: Aksjonspunkt) => ({ - begrunnelse: decodeHtmlEntity(aksjonspunkt && aksjonspunkt.begrunnelse ? aksjonspunkt.begrunnelse : ''), +VilkarBegrunnelse.buildInitialValues = (periode: Vilkarperiode) => ({ + begrunnelse: decodeHtmlEntity(periode && periode.begrunnelse ? periode.begrunnelse : ''), }); -VilkarBegrunnelse.transformValues = values => ({ +VilkarBegrunnelse.transformValues = (values: VilkarBegrunnelseFormState) => ({ begrunnelse: values.begrunnelse, }); diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedBegrunnelse.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedBegrunnelse.tsx index e0018af99f..d252de7044 100644 --- a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedBegrunnelse.tsx +++ b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedBegrunnelse.tsx @@ -1,13 +1,14 @@ -import React from 'react'; import { FormattedMessage } from 'react-intl'; import { VerticalSpacer, useSaksbehandlerOppslag } from '@fpsak-frontend/shared-components'; -import { VilkarResultPickerPeriodisert as VilkarResultPicker } from '@k9-sak-web/prosess-felles'; -import { KodeverkMedNavn } from '@k9-sak-web/types'; +import { VilkarResultPickerPeriodisertRHF } from '@k9-sak-web/prosess-felles'; +import { Aksjonspunkt, KodeverkMedNavn, Vilkarperiode } from '@k9-sak-web/types'; import { AssessedBy } from '@navikt/ft-plattform-komponenter'; +import { FunctionComponent } from 'react'; +import { VilkarresultatMedBegrunnelseState } from './FormState'; import VilkarBegrunnelse from './VilkarBegrunnelse'; -import { CustomVilkarText } from './VilkarresultatMedOverstyringForm'; +import { CustomVilkarText } from './VilkarresultatMedOverstyringFormPeriodisert'; interface VilkarresultatMedBegrunnelseProps { erVilkarOk?: string; @@ -26,13 +27,23 @@ interface VilkarresultatMedBegrunnelseProps { opprettetAv?: string; } +interface StaticFunctions { + transformValues: (values: VilkarresultatMedBegrunnelseState) => { begrunnelse: string }; + buildInitialValues: ( + avslagKode: string, + aksjonspunkter: Aksjonspunkt[], + status: string, + periode: Vilkarperiode, + ) => VilkarresultatMedBegrunnelseState; +} + /** * VIlkarresultatMedBegrunnelse * * Presentasjonskomponent. Viser resultat av vilkårskjøring når det ikke finnes tilknyttede aksjonspunkter. * Resultatet kan overstyres av Nav-ansatt med overstyr-rettighet. */ -export const VilkarresultatMedBegrunnelse = ({ +export const VilkarresultatMedBegrunnelse: FunctionComponent & StaticFunctions = ({ erVilkarOk, periodeVilkarStatus, readOnly, @@ -58,7 +69,7 @@ export const VilkarresultatMedBegrunnelse = ({ )} - ({ - ...VilkarResultPicker.buildInitialValues(avslagKode, aksjonspunkter, status, periode), +VilkarresultatMedBegrunnelse.buildInitialValues = ( + avslagKode: string, + aksjonspunkter: Aksjonspunkt[], + status: string, + periode: Vilkarperiode, +) => ({ + ...VilkarResultPickerPeriodisertRHF.buildInitialValues(avslagKode, aksjonspunkter, status, periode), ...VilkarBegrunnelse.buildInitialValues(periode), }); -VilkarresultatMedBegrunnelse.transformValues = values => ({ +VilkarresultatMedBegrunnelse.transformValues = (values: VilkarresultatMedBegrunnelseState) => ({ begrunnelse: values.begrunnelse, }); -VilkarresultatMedBegrunnelse.validate = ( - values: { erVilkarOk: string; avslagCode: string } = { erVilkarOk: '', avslagCode: '' }, -) => VilkarResultPicker.validate(values.erVilkarOk, values.avslagCode); - export default VilkarresultatMedBegrunnelse; diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringForm.spec.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringForm.spec.tsx deleted file mode 100644 index 239ce0c8f6..0000000000 --- a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringForm.spec.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import behandlingType from '@fpsak-frontend/kodeverk/src/behandlingType'; -import { renderWithIntlAndReduxForm } from '@fpsak-frontend/utils-test/test-utils'; -import { reduxFormPropsMock } from '@fpsak-frontend/utils-test/redux-form-test-helper'; -import { vilkarUtfallPeriodisert } from '@k9-sak-web/types'; -import { screen } from '@testing-library/react'; -import React from 'react'; -import messages from '../../i18n/nb_NO.json'; -import { VilkarresultatMedOverstyringForm } from './VilkarresultatMedOverstyringForm'; - -describe('', () => { - it('skal rendre form med knapp når vilkåret er overstyrt', () => { - renderWithIntlAndReduxForm( - undefined} - visPeriodisering={false} - erOverstyrt - aksjonspunkter={[]} - behandlingsresultat={{ - type: { kode: 'test', kodeverk: 'test' }, - }} - behandlingId={1} - behandlingVersjon={2} - behandlingType={{ - kode: behandlingType.FORSTEGANGSSOKNAD, - kodeverk: '', - }} - medlemskapFom="10.10.2010" - status="" - submitCallback={() => undefined} - isSolvable - periodeFom="2019-01-01" - periodeTom="2020-01-01" - valgtPeriodeFom="2019-01-01" - valgtPeriodeTom="2020-01-01" - />, - { messages }, - ); - - expect(screen.getByText('Manuell overstyring av automatisk vurdering')).toBeInTheDocument(); - expect(screen.getByTestId('overstyringform')).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Bekreft overstyring' })).toBeInTheDocument(); - }); -}); diff --git a/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringForm.spec.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.spec.tsx similarity index 78% rename from packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringForm.spec.tsx rename to packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.spec.tsx index d15318be53..f5de487d05 100644 --- a/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringForm.spec.tsx +++ b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.spec.tsx @@ -1,17 +1,13 @@ import behandlingType from '@fpsak-frontend/kodeverk/src/behandlingType'; import { renderWithIntlAndReduxForm } from '@fpsak-frontend/utils-test/test-utils'; -import { reduxFormPropsMock } from '@fpsak-frontend/utils-test/redux-form-test-helper'; import { screen } from '@testing-library/react'; -import React from 'react'; import messages from '../../i18n/nb_NO.json'; -import { VilkarresultatMedOverstyringForm } from './VilkarresultatMedOverstyringForm'; +import { VilkarresultatMedOverstyringFormPeriodisert } from './VilkarresultatMedOverstyringFormPeriodisert'; describe('', () => { it('skal rendre form med knapp når vilkåret er overstyrt', () => { renderWithIntlAndReduxForm( - ', () => { hasAksjonspunkt overrideReadOnly={false} toggleOverstyring={() => undefined} - erMedlemskapsPanel={false} + visPeriodisering={false} erOverstyrt aksjonspunkter={[]} behandlingsresultat={{ @@ -37,9 +33,14 @@ describe('', () => { medlemskapFom="10.10.2010" status="" submitCallback={() => undefined} - isSolvable - periodeFom="2019-01-01" - periodeTom="2020-01-01" + periode={{ + periode: { + fom: '2020-01-01', + tom: '2020-01-31', + }, + merknadParametere: {}, + vilkarStatus: { kode: 'test', kodeverk: 'test' }, + }} />, { messages }, ); diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringForm.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx similarity index 56% rename from packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringForm.tsx rename to packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx index 9da85c0945..452f1d2044 100644 --- a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringForm.tsx +++ b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx @@ -1,5 +1,4 @@ import advarselIkonUrl from '@fpsak-frontend/assets/images/advarsel_ny.svg'; -import { behandlingForm, behandlingFormValueSelector } from '@fpsak-frontend/form'; import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus'; import BehandlingType from '@fpsak-frontend/kodeverk/src/behandlingType'; import { @@ -12,21 +11,19 @@ import { VerticalSpacer, } from '@fpsak-frontend/shared-components'; import { DDMMYYYY_DATE_FORMAT } from '@fpsak-frontend/utils'; -import VilkarResultPicker from '@k9-sak-web/prosess-felles/src/vilkar/VilkarResultPickerPeriodisert'; +import { VilkarResultPickerPeriodisertRHF } from '@k9-sak-web/prosess-felles'; import { Aksjonspunkt, Kodeverk, KodeverkMedNavn, SubmitCallback } from '@k9-sak-web/types'; import Vilkarperiode from '@k9-sak-web/types/src/vilkarperiode'; import { BodyShort, Button, Label } from '@navikt/ds-react'; +import { Form } from '@navikt/ft-form-hooks'; import moment from 'moment'; -import React, { SetStateAction, useEffect } from 'react'; +import { FunctionComponent, SetStateAction, useEffect } from 'react'; +import { useForm } from 'react-hook-form'; import { FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; -import { InjectedFormProps } from 'redux-form'; -import { createSelector } from 'reselect'; +import { VilkarresultatMedOverstyringFormState } from './FormState'; import OverstyrBekreftKnappPanel from './OverstyrBekreftKnappPanel'; import { VilkarresultatMedBegrunnelse } from './VilkarresultatMedBegrunnelse'; -import styles from './vilkarresultatMedOverstyringForm.module.css'; - -const getFormName = (overstyringApKode: string) => `VilkarresultatForm_${overstyringApKode}`; +import styles from './vilkarresultatMedOverstyringFormPeriodisert.module.css'; export interface CustomVilkarText { id: string; @@ -54,8 +51,6 @@ interface VilkarresultatMedOverstyringFormProps { erMedlemskapsPanel: boolean; visPeriodisering: boolean; erOverstyrt?: boolean; - erVilkarOk?: string; - periodeVilkarStatus?: boolean; hasAksjonspunkt: boolean; isReadOnly: boolean; lovReferanse?: string; @@ -70,62 +65,81 @@ interface VilkarresultatMedOverstyringFormProps { opprettetAv?: string; } -interface StateProps { - isSolvable: boolean; - periodeFom: string; - periodeTom: string; - valgtPeriodeFom: string; - valgtPeriodeTom: string; -} - /** * VilkarresultatForm * * Presentasjonskomponent. Viser resultat av vilkårskjøring når det ikke finnes tilknyttede aksjonspunkter. * Resultatet kan overstyres av Nav-ansatt med overstyr-rettighet. */ -export const VilkarresultatMedOverstyringForm = ({ - erOverstyrt, - isReadOnly, - overstyringApKode, - isSolvable, - erVilkarOk, - periodeVilkarStatus, - customVilkarIkkeOppfyltText, - customVilkarOppfyltText, - erMedlemskapsPanel, - visPeriodisering, - hasAksjonspunkt, +export const VilkarresultatMedOverstyringFormPeriodisert: FunctionComponent< + Partial +> = ({ + aksjonspunkter, + avslagKode, avslagsarsaker, + behandlingType, + erMedlemskapsPanel, + erOverstyrt, + medlemskapFom, overrideReadOnly, + overstyringApKode, + periode, + status, + submitCallback, toggleOverstyring, - reset, - handleSubmit, - submitting, - pristine, - periodeFom, - periodeTom, - valgtPeriodeFom, - valgtPeriodeTom, - opprettetAv, -}: Partial & StateProps & InjectedFormProps) => { + visPeriodisering, +}) => { + const buildInitialValues = (): VilkarresultatMedOverstyringFormState => { + const aksjonspunkt = aksjonspunkter.find(ap => ap.definisjon.kode === overstyringApKode); + return { + isOverstyrt: aksjonspunkt !== undefined, + ...VilkarresultatMedBegrunnelse.buildInitialValues(avslagKode, aksjonspunkter, status, periode), + }; + }; + const onSubmit = (values: VilkarresultatMedOverstyringFormState) => + submitCallback([transformValues(values, overstyringApKode, periodeFom, periodeTom)]); + const formMethods = useForm({ + defaultValues: buildInitialValues(), + }); + const toggleAv = () => { - reset(); + formMethods.reset(buildInitialValues()); toggleOverstyring(oldArray => oldArray.filter(code => code !== overstyringApKode)); }; + const periodeFom = periode?.periode?.fom; + const periodeTom = periode?.periode?.tom; + useEffect( () => () => { - reset(); + formMethods.reset(buildInitialValues()); }, [periodeFom, periodeTom], ); + const valgtPeriodeFom = formMethods.watch('valgtPeriodeFom'); + const valgtPeriodeTom = formMethods.watch('valgtPeriodeTom'); + const erVilkarOk = formMethods.watch('erVilkarOk'); + const periodeVilkarStatus = formMethods.watch('periodeVilkarStatus'); + + const customVilkarOppfyltText = getCustomVilkarTextForOppfylt(medlemskapFom, behandlingType); + const customVilkarIkkeOppfyltText = getCustomVilkarTextForIkkeOppfylt(medlemskapFom, behandlingType); + const overstyringAksjonspunkt = aksjonspunkter.find(ap => ap.definisjon.kode === overstyringApKode); + const isSolvable = + erOverstyrt || + (overstyringAksjonspunkt !== undefined + ? !(overstyringAksjonspunkt.status.kode === aksjonspunktStatus.OPPRETTET && !overstyringAksjonspunkt.kanLoses) + : false); + + const isReadOnly = overrideReadOnly || !periode?.vurderesIBehandlingen; + const hasAksjonspunkt = overstyringAksjonspunkt !== undefined; + const opprettetAv = overstyringAksjonspunkt ? overstyringAksjonspunkt.opprettetAv : ''; + return ( -
+ {(erOverstyrt || hasAksjonspunkt) && ( - )} -
+ ); }; -const buildInitialValues = createSelector( - [ - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.avslagKode, - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.aksjonspunkter, - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.status, - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.overstyringApKode, - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.periode, - ], - (avslagKode, aksjonspunkter, status, overstyringApKode, periode) => { - const aksjonspunkt = aksjonspunkter.find(ap => ap.definisjon.kode === overstyringApKode); - return { - isOverstyrt: aksjonspunkt !== undefined, - ...VilkarresultatMedBegrunnelse.buildInitialValues( - avslagKode, - aksjonspunkter, - status, - overstyringApKode, - periode, - ), - }; - }, -); - const getCustomVilkarText = (medlemskapFom: string, behandlingType: Kodeverk, erOppfylt: boolean) => { const customVilkarText = { id: '', values: null }; const isBehandlingRevurderingFortsattMedlemskap = @@ -239,67 +230,21 @@ const getCustomVilkarText = (medlemskapFom: string, behandlingType: Kodeverk, er return customVilkarText.id ? customVilkarText : undefined; }; -const getCustomVilkarTextForOppfylt = createSelector( - [(ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.medlemskapFom, ownProps => ownProps.behandlingType], - (medlemskapFom, behandlingType) => getCustomVilkarText(medlemskapFom, behandlingType, true), -); -const getCustomVilkarTextForIkkeOppfylt = createSelector( - [(ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.medlemskapFom, ownProps => ownProps.behandlingType], - (medlemskapFom, behandlingType) => getCustomVilkarText(medlemskapFom, behandlingType, false), -); +const getCustomVilkarTextForOppfylt = (medlemskapFom: string, behandlingType: Kodeverk) => + getCustomVilkarText(medlemskapFom, behandlingType, true); + +const getCustomVilkarTextForIkkeOppfylt = (medlemskapFom: string, behandlingType: Kodeverk) => + getCustomVilkarText(medlemskapFom, behandlingType, false); -const transformValues = (values, overstyringApKode, periodeFom, periodeTom) => ({ +const transformValues = ( + values: VilkarresultatMedOverstyringFormState, + overstyringApKode: string, + periodeFom: string, + periodeTom: string, +) => ({ kode: overstyringApKode, - ...VilkarResultPicker.transformValues(values, periodeFom, periodeTom), + ...VilkarResultPickerPeriodisertRHF.transformValues(values, periodeFom, periodeTom), ...VilkarresultatMedBegrunnelse.transformValues(values), }); -const validate = values => VilkarresultatMedBegrunnelse.validate(values); - -const mapStateToPropsFactory = (_initialState, initialOwnProps: VilkarresultatMedOverstyringFormProps) => { - const { overstyringApKode, submitCallback, periode } = initialOwnProps; - const periodeFom = periode?.periode?.fom; - const periodeTom = periode?.periode?.tom; - const onSubmit = values => submitCallback([transformValues(values, overstyringApKode, periodeFom, periodeTom)]); - const validateFn = values => validate(values); - const formName = getFormName(overstyringApKode); - - return (state, ownProps) => { - const { behandlingId, behandlingVersjon, aksjonspunkter, erOverstyrt, overrideReadOnly } = ownProps; - - const aksjonspunkt = aksjonspunkter.find(ap => ap.definisjon.kode === overstyringApKode); - const isSolvable = - aksjonspunkt !== undefined - ? !(aksjonspunkt.status.kode === aksjonspunktStatus.OPPRETTET && !aksjonspunkt.kanLoses) - : false; - - const initialValues = buildInitialValues(ownProps); - - return { - onSubmit, - initialValues, - customVilkarOppfyltText: getCustomVilkarTextForOppfylt(ownProps), - customVilkarIkkeOppfyltText: getCustomVilkarTextForIkkeOppfylt(ownProps), - isSolvable: erOverstyrt || isSolvable, - isReadOnly: overrideReadOnly || !periode?.vurderesIBehandlingen, - hasAksjonspunkt: aksjonspunkt !== undefined, - validate: validateFn, - form: formName, - periodeFom, - periodeTom, - opprettetAv: aksjonspunkt ? aksjonspunkt.opprettetAv : '', - ...behandlingFormValueSelector(formName, behandlingId, behandlingVersjon)( - state, - 'isOverstyrt', - 'erVilkarOk', - 'valgtPeriodeFom', - 'valgtPeriodeTom', - 'periodeVilkarStatus', - ), - }; - }; -}; - -// @ts-expect-error Kan ikkje senda med formnavn her sidan det er dynamisk. Må fikse på ein annan måte -const form = behandlingForm({ enableReinitialize: true })(VilkarresultatMedOverstyringForm); -export default connect(mapStateToPropsFactory)(form); +export default VilkarresultatMedOverstyringFormPeriodisert; diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.spec.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.spec.tsx deleted file mode 100644 index f787ca725b..0000000000 --- a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.spec.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils'; -import { screen } from '@testing-library/react'; -import React from 'react'; -import { Provider } from 'react-redux'; -import { combineReducers, createStore } from 'redux'; -import { reducer } from 'redux-form'; -import messages from '../../i18n/nb_NO.json'; -import VilkarresultatMedOverstyringHeader from './VilkarresultatMedOverstyringHeader'; - -describe('', () => { - it('skal rendre header', () => { - renderWithIntl( - - undefined} - panelTittelKode="Inngangsvilkar.Medlemskapsvilkaret" - erOverstyrt - aksjonspunkter={[]} - /> - , - { messages }, - ); - expect(screen.getByRole('heading', { name: 'Medlemskap' })).toBeInTheDocument(); - expect(screen.getByText('§23')).toBeInTheDocument(); - }); -}); diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.tsx deleted file mode 100644 index 7fa5c93795..0000000000 --- a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import avslattImage from '@fpsak-frontend/assets/images/avslaatt_hover.svg'; -import innvilgetImage from '@fpsak-frontend/assets/images/innvilget_hover.svg'; -import keyUtgraetImage from '@fpsak-frontend/assets/images/key-1-rotert-utgraet.svg'; -import keyImage from '@fpsak-frontend/assets/images/key-1-rotert.svg'; -import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType'; -import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components'; -import { Aksjonspunkt } from '@k9-sak-web/types'; -import { Detail, Heading, Label } from '@navikt/ds-react'; -import React, { SetStateAction } from 'react'; -import { FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; -import styles from './vilkarresultatMedOverstyringForm.module.css'; - -const isOverridden = (aksjonspunktCodes: string[], aksjonspunktCode: string) => - aksjonspunktCodes.some(code => code === aksjonspunktCode); -const isHidden = (kanOverstyre: boolean, aksjonspunktCodes: string[], aksjonspunktCode: string) => - !isOverridden(aksjonspunktCodes, aksjonspunktCode) && !kanOverstyre; - -const getVilkarOkMessage = originalErVilkarOk => { - let messageId = 'VilkarresultatMedOverstyringForm.IkkeBehandlet'; - if (originalErVilkarOk) { - messageId = 'VilkarresultatMedOverstyringForm.ErOppfylt'; - } else if (originalErVilkarOk === false) { - messageId = 'VilkarresultatMedOverstyringForm.ErIkkeOppfylt'; - } - - return ( - - ); -}; - -interface VilkarresultatMedOverstyringHeaderProps { - aksjonspunktCodes: string[]; - aksjonspunkter: Aksjonspunkt[]; - erOverstyrt?: boolean; - kanOverstyreAccess?: { - isEnabled: boolean; - }; - lovReferanse?: string; - originalErVilkarOk?: boolean; - overrideReadOnly: boolean; - overstyringApKode: string; - panelTittelKode: string; - toggleOverstyring: (overstyrtPanel: SetStateAction) => void; -} - -const VilkarresultatMedOverstyringHeader = ({ - panelTittelKode, - erOverstyrt, - overstyringApKode, - lovReferanse, - originalErVilkarOk, - overrideReadOnly, - kanOverstyreAccess, - aksjonspunktCodes, - toggleOverstyring, -}: Partial) => { - const togglePa = () => { - toggleOverstyring(oldArray => [...oldArray, overstyringApKode]); - }; - return ( - <> - - - {!erOverstyrt && originalErVilkarOk !== undefined && ( - - - - )} - - - - - - {lovReferanse && ( - - {lovReferanse} - - )} - - - - - {getVilkarOkMessage(originalErVilkarOk)} - - {originalErVilkarOk !== undefined && - !isHidden(kanOverstyreAccess.isEnabled, aksjonspunktCodes, overstyringApKode) && ( - <> - {!erOverstyrt && !overrideReadOnly && ( - - - - - )} - {(erOverstyrt || overrideReadOnly) && ( - - - - - )} - - )} - - - - - ); -}; - -const mapStateToPropsFactory = (_initialState, initialOwnProps: VilkarresultatMedOverstyringHeaderProps) => { - const aksjonspunktCodes = initialOwnProps.aksjonspunkter.map(a => a.definisjon.kode); - - return (state, ownProps) => { - const erOppfylt = vilkarUtfallType.OPPFYLT === ownProps.status; - const erVilkarOk = vilkarUtfallType.IKKE_VURDERT !== ownProps.status ? erOppfylt : undefined; - - return { - aksjonspunktCodes, - originalErVilkarOk: erVilkarOk, - }; - }; -}; - -export default connect(mapStateToPropsFactory)(VilkarresultatMedOverstyringHeader); diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/vilkarresultatMedOverstyringForm.module.css b/packages/prosess-vilkar-overstyring/src/components-periodisert/vilkarresultatMedOverstyringForm.module.css deleted file mode 100644 index 82f4dbaa76..0000000000 --- a/packages/prosess-vilkar-overstyring/src/components-periodisert/vilkarresultatMedOverstyringForm.module.css +++ /dev/null @@ -1,24 +0,0 @@ -.status { - height: 20px; - width: 20px; -} - -.key { - cursor: pointer; - height: 20px; - width: 20px; -} - -.keyWithoutCursor { - height: 20px; - width: 20px; -} - -.vilkar { - margin-top: 3px; -} - -.aksjonspunktMargin { - margin-left: -20px; - min-width: 400px; -} diff --git a/packages/prosess-vilkar-overstyring/src/components-old/vilkarresultatMedOverstyringForm.module.css b/packages/prosess-vilkar-overstyring/src/components-periodisert/vilkarresultatMedOverstyringFormPeriodisert.module.css similarity index 100% rename from packages/prosess-vilkar-overstyring/src/components-old/vilkarresultatMedOverstyringForm.module.css rename to packages/prosess-vilkar-overstyring/src/components-periodisert/vilkarresultatMedOverstyringFormPeriodisert.module.css diff --git a/packages/prosess-vilkar-overstyring/src/components/FormState.ts b/packages/prosess-vilkar-overstyring/src/components/FormState.ts new file mode 100644 index 0000000000..b86331b1af --- /dev/null +++ b/packages/prosess-vilkar-overstyring/src/components/FormState.ts @@ -0,0 +1,11 @@ +import { VilkarResultPickerFormState } from '@k9-sak-web/prosess-felles/src/vilkar/VilkarResultPickerRHF'; + +export type VilkarBegrunnelseFormState = { + begrunnelse: string; +}; + +export type VilkarresultatMedBegrunnelseState = VilkarBegrunnelseFormState & VilkarResultPickerFormState; + +export type VilkarresultatMedOverstyringFormState = VilkarresultatMedBegrunnelseState & { + isOverstyrt: boolean; +}; diff --git a/packages/prosess-vilkar-overstyring/src/components/VilkarBegrunnelse.tsx b/packages/prosess-vilkar-overstyring/src/components/VilkarBegrunnelse.tsx index 7547e8fe3b..8b3186b67c 100644 --- a/packages/prosess-vilkar-overstyring/src/components/VilkarBegrunnelse.tsx +++ b/packages/prosess-vilkar-overstyring/src/components/VilkarBegrunnelse.tsx @@ -1,42 +1,43 @@ -import React from 'react'; -import { useIntl } from 'react-intl'; - -import { TextAreaField } from '@fpsak-frontend/form'; -import { decodeHtmlEntity, hasValidText, maxLength, minLength, requiredIfNotPristine } from '@fpsak-frontend/utils'; -import { Aksjonspunkt } from '@k9-sak-web/types'; +import { decodeHtmlEntity } from '@fpsak-frontend/utils'; +import { Vilkarperiode } from '@k9-sak-web/types'; +import { TextAreaField } from '@navikt/ft-form-hooks'; +import { hasValidText, maxLength, minLength, required } from '@navikt/ft-form-validators'; +import { FunctionComponent } from 'react'; +import { VilkarBegrunnelseFormState } from './FormState'; const minLength3 = minLength(3); const maxLength1500 = maxLength(1500); interface OwnProps { - begrunnelseLabel?: string; isReadOnly: boolean; } +interface StaticFunctions { + transformValues: (values: VilkarBegrunnelseFormState) => VilkarBegrunnelseFormState; + buildInitialValues: (periode: Vilkarperiode) => VilkarBegrunnelseFormState; +} + /** * VilkarBegrunnelse * * Presentasjonskomponent. Lar den NAV-ansatte skrive inn en begrunnelse før overstyring av vilkår eller beregning. */ -const VilkarBegrunnelse = ({ isReadOnly, begrunnelseLabel = 'VilkarBegrunnelse.Vilkar' }: OwnProps) => { - const intl = useIntl(); - return ( - - ); -}; +const VilkarBegrunnelse: FunctionComponent & StaticFunctions = ({ isReadOnly }) => ( + +); -VilkarBegrunnelse.buildInitialValues = (aksjonspunkt: Aksjonspunkt) => ({ - begrunnelse: decodeHtmlEntity(aksjonspunkt && aksjonspunkt.begrunnelse ? aksjonspunkt.begrunnelse : ''), +VilkarBegrunnelse.buildInitialValues = (periode: Vilkarperiode) => ({ + begrunnelse: decodeHtmlEntity(periode && periode.begrunnelse ? periode.begrunnelse : ''), }); -VilkarBegrunnelse.transformValues = values => ({ +VilkarBegrunnelse.transformValues = (values: VilkarBegrunnelseFormState) => ({ begrunnelse: values.begrunnelse, }); diff --git a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedBegrunnelse.tsx b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedBegrunnelse.tsx index 433a2a63f8..c65cc18a8a 100644 --- a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedBegrunnelse.tsx +++ b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedBegrunnelse.tsx @@ -1,11 +1,12 @@ -import React from 'react'; import { FormattedMessage } from 'react-intl'; import { VerticalSpacer, useSaksbehandlerOppslag } from '@fpsak-frontend/shared-components'; -import { VilkarResultPicker } from '@k9-sak-web/prosess-felles'; -import { KodeverkMedNavn } from '@k9-sak-web/types'; +import { VilkarResultPickerRHF } from '@k9-sak-web/prosess-felles'; +import { Aksjonspunkt, KodeverkMedNavn, Vilkarperiode } from '@k9-sak-web/types'; import { AssessedBy } from '@navikt/ft-plattform-komponenter'; +import { FunctionComponent } from 'react'; +import { VilkarresultatMedBegrunnelseState } from './FormState'; import VilkarBegrunnelse from './VilkarBegrunnelse'; import { CustomVilkarText } from './VilkarresultatMedOverstyringForm'; @@ -20,13 +21,23 @@ interface VilkarresultatMedBegrunnelseProps { opprettetAv?: string; } +interface StaticFunctions { + transformValues: (values: VilkarresultatMedBegrunnelseState) => { begrunnelse: string }; + buildInitialValues: ( + avslagKode: string, + aksjonspunkter: Aksjonspunkt[], + status: string, + periode: Vilkarperiode, + ) => VilkarresultatMedBegrunnelseState; +} + /** * VilkarresultatMedBegrunnelse * * Presentasjonskomponent. Viser resultat av vilkårskjøring når det ikke finnes tilknyttede aksjonspunkter. * Resultatet kan overstyres av Nav-ansatt med overstyr-rettighet. */ -export const VilkarresultatMedBegrunnelse = ({ +export const VilkarresultatMedBegrunnelse: FunctionComponent & StaticFunctions = ({ erVilkarOk, readOnly, avslagsarsaker, @@ -35,7 +46,7 @@ export const VilkarresultatMedBegrunnelse = ({ customVilkarIkkeOppfyltText, customVilkarOppfyltText, opprettetAv, -}: VilkarresultatMedBegrunnelseProps) => { +}) => { const { hentSaksbehandlerNavn } = useSaksbehandlerOppslag(); return ( <> @@ -46,7 +57,7 @@ export const VilkarresultatMedBegrunnelse = ({ )} - ({ - ...VilkarResultPicker.buildInitialValues(avslagKode, aksjonspunkter, status), +VilkarresultatMedBegrunnelse.buildInitialValues = ( + avslagKode: string, + aksjonspunkter: Aksjonspunkt[], + status: string, + periode: Vilkarperiode, +) => ({ + ...VilkarResultPickerRHF.buildInitialValues(avslagKode, aksjonspunkter, status), ...VilkarBegrunnelse.buildInitialValues(periode), }); -VilkarresultatMedBegrunnelse.transformValues = values => ({ +VilkarresultatMedBegrunnelse.transformValues = (values: VilkarresultatMedBegrunnelseState) => ({ begrunnelse: values.begrunnelse, }); -VilkarresultatMedBegrunnelse.validate = ( - values: { erVilkarOk: boolean; avslagCode: string } = { erVilkarOk: false, avslagCode: '' }, -) => VilkarResultPicker.validate(values.erVilkarOk, values.avslagCode); - export default VilkarresultatMedBegrunnelse; diff --git a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.spec.tsx b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.spec.tsx index d15318be53..9a4b5c04b9 100644 --- a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.spec.tsx +++ b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.spec.tsx @@ -1,8 +1,7 @@ import behandlingType from '@fpsak-frontend/kodeverk/src/behandlingType'; -import { renderWithIntlAndReduxForm } from '@fpsak-frontend/utils-test/test-utils'; import { reduxFormPropsMock } from '@fpsak-frontend/utils-test/redux-form-test-helper'; +import { renderWithIntlAndReduxForm } from '@fpsak-frontend/utils-test/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import messages from '../../i18n/nb_NO.json'; import { VilkarresultatMedOverstyringForm } from './VilkarresultatMedOverstyringForm'; @@ -11,15 +10,12 @@ describe('', () => { renderWithIntlAndReduxForm( undefined} erMedlemskapsPanel={false} @@ -37,9 +33,6 @@ describe('', () => { medlemskapFom="10.10.2010" status="" submitCallback={() => undefined} - isSolvable - periodeFom="2019-01-01" - periodeTom="2020-01-01" />, { messages }, ); diff --git a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.tsx b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.tsx index 1548f4203d..392186ec6e 100644 --- a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.tsx +++ b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.tsx @@ -1,5 +1,4 @@ import advarselIkonUrl from '@fpsak-frontend/assets/images/advarsel_ny.svg'; -import { behandlingForm, behandlingFormValueSelector } from '@fpsak-frontend/form'; import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus'; import BehandlingType from '@fpsak-frontend/kodeverk/src/behandlingType'; import { @@ -12,22 +11,20 @@ import { VerticalSpacer, } from '@fpsak-frontend/shared-components'; import { DDMMYYYY_DATE_FORMAT } from '@fpsak-frontend/utils'; -import { VilkarResultPicker } from '@k9-sak-web/prosess-felles'; +import { VilkarResultPickerRHF } from '@k9-sak-web/prosess-felles'; import { Aksjonspunkt, Kodeverk, KodeverkMedNavn, SubmitCallback } from '@k9-sak-web/types'; import Vilkarperiode from '@k9-sak-web/types/src/vilkarperiode'; import { BodyShort, Button, Label } from '@navikt/ds-react'; +import { Form } from '@navikt/ft-form-hooks'; import moment from 'moment'; -import React, { SetStateAction, useEffect } from 'react'; +import { SetStateAction, useEffect } from 'react'; +import { useForm } from 'react-hook-form'; import { FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; -import { InjectedFormProps } from 'redux-form'; -import { createSelector } from 'reselect'; +import { VilkarresultatMedOverstyringFormState } from './FormState'; import OverstyrBekreftKnappPanel from './OverstyrBekreftKnappPanel'; -import { VilkarresultatMedBegrunnelse } from './VilkarresultatMedBegrunnelse'; +import VilkarresultatMedBegrunnelse from './VilkarresultatMedBegrunnelse'; import styles from './vilkarresultatMedOverstyringForm.module.css'; -const getFormName = (overstyringApKode: string) => `VilkarresultatForm_${overstyringApKode}`; - export interface CustomVilkarText { id: string; values?: any; @@ -42,13 +39,8 @@ interface VilkarresultatMedOverstyringFormProps { behandlingId: number; behandlingVersjon: number; behandlingType: Kodeverk; - customVilkarIkkeOppfyltText?: CustomVilkarText; - customVilkarOppfyltText?: CustomVilkarText; erMedlemskapsPanel: boolean; erOverstyrt?: boolean; - erVilkarOk?: boolean; - hasAksjonspunkt: boolean; - isReadOnly: boolean; lovReferanse?: string; medlemskapFom: string; overrideReadOnly: boolean; @@ -58,13 +50,6 @@ interface VilkarresultatMedOverstyringFormProps { toggleOverstyring: (overstyrtPanel: SetStateAction) => void; avslagKode?: string; periode?: Vilkarperiode; - opprettetAv?: string; -} - -interface StateProps { - isSolvable: boolean; - periodeFom: string; - periodeTom: string; } /** @@ -74,48 +59,71 @@ interface StateProps { * Resultatet kan overstyres av Nav-ansatt med overstyr-rettighet. */ export const VilkarresultatMedOverstyringForm = ({ - erOverstyrt, - isReadOnly, - overstyringApKode, - isSolvable, - erVilkarOk, - customVilkarIkkeOppfyltText, - customVilkarOppfyltText, - erMedlemskapsPanel, - hasAksjonspunkt, + aksjonspunkter, + avslagKode, avslagsarsaker, + behandlingType, + erMedlemskapsPanel, + erOverstyrt, + medlemskapFom, overrideReadOnly, + overstyringApKode, + periode, + submitCallback, + status, toggleOverstyring, - reset, - handleSubmit, - submitting, - pristine, - periodeFom, - periodeTom, - opprettetAv, -}: Partial & StateProps & InjectedFormProps) => { +}: Partial) => { + const buildInitialValues = (): VilkarresultatMedOverstyringFormState => { + const aksjonspunkt = aksjonspunkter.find(ap => ap.definisjon.kode === overstyringApKode); + return { + isOverstyrt: aksjonspunkt !== undefined, + ...VilkarresultatMedBegrunnelse.buildInitialValues(avslagKode, aksjonspunkter, status, periode), + }; + }; + const formMethods = useForm({ + defaultValues: buildInitialValues(), + }); const toggleAv = () => { - reset(); + formMethods.reset(buildInitialValues()); toggleOverstyring(oldArray => oldArray.filter(code => code !== overstyringApKode)); }; + const periodeFom = periode?.periode?.fom; + const periodeTom = periode?.periode?.tom; + + const onSubmit = (values: VilkarresultatMedOverstyringFormState) => + submitCallback([transformValues(values, overstyringApKode, periodeFom, periodeTom)]); + useEffect( () => () => { - reset(); + formMethods.reset(buildInitialValues()); }, [periodeFom, periodeTom], ); + const erVilkarOk = formMethods.watch('erVilkarOk'); + + const customVilkarOppfyltText = getCustomVilkarTextForOppfylt(medlemskapFom, behandlingType); + const customVilkarIkkeOppfyltText = getCustomVilkarTextForIkkeOppfylt(medlemskapFom, behandlingType); + const overstyringAksjonspunkt = aksjonspunkter.find(ap => ap.definisjon.kode === overstyringApKode); + const isReadOnly = overrideReadOnly || !periode?.vurderesIBehandlingen; + const opprettetAv = overstyringAksjonspunkt ? overstyringAksjonspunkt.opprettetAv : ''; + const isSolvable = + erOverstyrt || + (overstyringAksjonspunkt !== undefined + ? !(overstyringAksjonspunkt.status.kode === aksjonspunktStatus.OPPRETTET && !overstyringAksjonspunkt.kanLoses) + : false); + return ( -
- {(erOverstyrt || hasAksjonspunkt) && ( + + {(erOverstyrt || !!overstyringAksjonspunkt) && ( - )} -
+ ); }; -const buildInitialValues = createSelector( - [ - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.avslagKode, - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.aksjonspunkter, - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.status, - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.overstyringApKode, - (ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.periode, - ], - (avslagKode, aksjonspunkter, status, overstyringApKode, periode) => { - const aksjonspunkt = aksjonspunkter.find(ap => ap.definisjon.kode === overstyringApKode); - return { - isOverstyrt: aksjonspunkt !== undefined, - ...VilkarresultatMedBegrunnelse.buildInitialValues( - avslagKode, - aksjonspunkter, - status, - overstyringApKode, - periode, - ), - }; - }, -); - const getCustomVilkarText = (medlemskapFom: string, behandlingType: Kodeverk, erOppfylt: boolean) => { const customVilkarText = { id: '', values: null }; const isBehandlingRevurderingFortsattMedlemskap = @@ -218,60 +203,22 @@ const getCustomVilkarText = (medlemskapFom: string, behandlingType: Kodeverk, er return customVilkarText.id ? customVilkarText : undefined; }; -const getCustomVilkarTextForOppfylt = createSelector( - [(ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.medlemskapFom, ownProps => ownProps.behandlingType], - (medlemskapFom, behandlingType) => getCustomVilkarText(medlemskapFom, behandlingType, true), -); -const getCustomVilkarTextForIkkeOppfylt = createSelector( - [(ownProps: VilkarresultatMedOverstyringFormProps) => ownProps.medlemskapFom, ownProps => ownProps.behandlingType], - (medlemskapFom, behandlingType) => getCustomVilkarText(medlemskapFom, behandlingType, false), -); +const getCustomVilkarTextForOppfylt = (medlemskapFom: string, behandlingType: Kodeverk) => + getCustomVilkarText(medlemskapFom, behandlingType, true); + +const getCustomVilkarTextForIkkeOppfylt = (medlemskapFom: string, behandlingType: Kodeverk) => + getCustomVilkarText(medlemskapFom, behandlingType, false); -const transformValues = (values, overstyringApKode, periodeFom, periodeTom) => ({ +const transformValues = ( + values: VilkarresultatMedOverstyringFormState, + overstyringApKode: string, + periodeFom: string, + periodeTom: string, +) => ({ kode: overstyringApKode, - ...VilkarResultPicker.transformValues(values), + ...VilkarResultPickerRHF.transformValues(values), ...VilkarresultatMedBegrunnelse.transformValues(values), periode: periodeFom && periodeTom ? { fom: periodeFom, tom: periodeTom } : undefined, }); -const validate = values => VilkarresultatMedBegrunnelse.validate(values); - -const mapStateToPropsFactory = (_initialState, initialOwnProps: VilkarresultatMedOverstyringFormProps) => { - const { overstyringApKode, submitCallback, periode } = initialOwnProps; - const periodeFom = periode?.periode?.fom; - const periodeTom = periode?.periode?.tom; - const onSubmit = values => submitCallback([transformValues(values, overstyringApKode, periodeFom, periodeTom)]); - const validateFn = values => validate(values); - const formName = getFormName(overstyringApKode); - - return (state, ownProps) => { - const { behandlingId, behandlingVersjon, aksjonspunkter, erOverstyrt, overrideReadOnly } = ownProps; - - const aksjonspunkt = aksjonspunkter.find(ap => ap.definisjon.kode === overstyringApKode); - const isSolvable = - aksjonspunkt !== undefined - ? !(aksjonspunkt.status.kode === aksjonspunktStatus.OPPRETTET && !aksjonspunkt.kanLoses) - : false; - - const initialValues = buildInitialValues(ownProps); - return { - onSubmit, - initialValues, - customVilkarOppfyltText: getCustomVilkarTextForOppfylt(ownProps), - customVilkarIkkeOppfyltText: getCustomVilkarTextForIkkeOppfylt(ownProps), - isSolvable: erOverstyrt || isSolvable, - isReadOnly: overrideReadOnly || !periode?.vurderesIBehandlingen, - hasAksjonspunkt: aksjonspunkt !== undefined, - validate: validateFn, - form: formName, - periodeFom, - periodeTom, - opprettetAv: aksjonspunkt ? aksjonspunkt.opprettetAv : '', - ...behandlingFormValueSelector(formName, behandlingId, behandlingVersjon)(state, 'isOverstyrt', 'erVilkarOk'), - }; - }; -}; - -// @ts-expect-error Kan ikkje senda med formnavn her sidan det er dynamisk. Må fikse på ein annan måte -const form = behandlingForm({ enableReinitialize: true })(VilkarresultatMedOverstyringForm); -export default connect(mapStateToPropsFactory)(form); +export default VilkarresultatMedOverstyringForm; diff --git a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.spec.tsx b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.spec.tsx index e3e870f93b..96228e88cf 100644 --- a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.spec.tsx +++ b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.spec.tsx @@ -1,6 +1,5 @@ import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { Provider } from 'react-redux'; import { combineReducers, createStore } from 'redux'; import { reducer } from 'redux-form'; @@ -12,7 +11,6 @@ describe('', () => { renderWithIntl( ', () => { panelTittelKode="Inngangsvilkar.Medlemskapsvilkaret" erOverstyrt aksjonspunkter={[]} + status="" /> , { messages }, diff --git a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx index 7fa5c93795..2b2b367d39 100644 --- a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx +++ b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx @@ -6,9 +6,8 @@ import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType'; import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components'; import { Aksjonspunkt } from '@k9-sak-web/types'; import { Detail, Heading, Label } from '@navikt/ds-react'; -import React, { SetStateAction } from 'react'; +import { SetStateAction } from 'react'; import { FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; import styles from './vilkarresultatMedOverstyringForm.module.css'; const isOverridden = (aksjonspunktCodes: string[], aksjonspunktCode: string) => @@ -16,17 +15,17 @@ const isOverridden = (aksjonspunktCodes: string[], aksjonspunktCode: string) => const isHidden = (kanOverstyre: boolean, aksjonspunktCodes: string[], aksjonspunktCode: string) => !isOverridden(aksjonspunktCodes, aksjonspunktCode) && !kanOverstyre; -const getVilkarOkMessage = originalErVilkarOk => { - let messageId = 'VilkarresultatMedOverstyringForm.IkkeBehandlet'; +const getVilkarOkMessage = (originalErVilkarOk: boolean) => { + let messageId = 'Ikke behandlet'; if (originalErVilkarOk) { - messageId = 'VilkarresultatMedOverstyringForm.ErOppfylt'; + messageId = 'Vilkåret er oppfylt'; } else if (originalErVilkarOk === false) { - messageId = 'VilkarresultatMedOverstyringForm.ErIkkeOppfylt'; + messageId = 'Vilkåret er avslått'; } return ( ); }; @@ -39,11 +38,11 @@ interface VilkarresultatMedOverstyringHeaderProps { isEnabled: boolean; }; lovReferanse?: string; - originalErVilkarOk?: boolean; overrideReadOnly: boolean; overstyringApKode: string; panelTittelKode: string; toggleOverstyring: (overstyrtPanel: SetStateAction) => void; + status: string; } const VilkarresultatMedOverstyringHeader = ({ @@ -51,12 +50,15 @@ const VilkarresultatMedOverstyringHeader = ({ erOverstyrt, overstyringApKode, lovReferanse, - originalErVilkarOk, overrideReadOnly, kanOverstyreAccess, - aksjonspunktCodes, toggleOverstyring, + aksjonspunkter, + status, }: Partial) => { + const aksjonspunktCodes = aksjonspunkter.map(a => a.definisjon.kode); + const erOppfylt = vilkarUtfallType.OPPFYLT === status; + const erVilkarOk = vilkarUtfallType.IKKE_VURDERT !== status ? erOppfylt : undefined; const togglePa = () => { toggleOverstyring(oldArray => [...oldArray, overstyringApKode]); }; @@ -64,9 +66,9 @@ const VilkarresultatMedOverstyringHeader = ({ <> - {!erOverstyrt && originalErVilkarOk !== undefined && ( + {!erOverstyrt && erVilkarOk !== undefined && ( - + )} @@ -83,9 +85,9 @@ const VilkarresultatMedOverstyringHeader = ({ - {getVilkarOkMessage(originalErVilkarOk)} + {getVilkarOkMessage(erVilkarOk)} - {originalErVilkarOk !== undefined && + {erVilkarOk !== undefined && !isHidden(kanOverstyreAccess.isEnabled, aksjonspunktCodes, overstyringApKode) && ( <> {!erOverstyrt && !overrideReadOnly && ( @@ -109,18 +111,4 @@ const VilkarresultatMedOverstyringHeader = ({ ); }; -const mapStateToPropsFactory = (_initialState, initialOwnProps: VilkarresultatMedOverstyringHeaderProps) => { - const aksjonspunktCodes = initialOwnProps.aksjonspunkter.map(a => a.definisjon.kode); - - return (state, ownProps) => { - const erOppfylt = vilkarUtfallType.OPPFYLT === ownProps.status; - const erVilkarOk = vilkarUtfallType.IKKE_VURDERT !== ownProps.status ? erOppfylt : undefined; - - return { - aksjonspunktCodes, - originalErVilkarOk: erVilkarOk, - }; - }; -}; - -export default connect(mapStateToPropsFactory)(VilkarresultatMedOverstyringHeader); +export default VilkarresultatMedOverstyringHeader; diff --git a/packages/sak-app/package.json b/packages/sak-app/package.json index 8dca041192..02ba7a0e3e 100644 --- a/packages/sak-app/package.json +++ b/packages/sak-app/package.json @@ -46,7 +46,7 @@ "@k9-sak-web/types": "1.0.0", "@navikt/ds-react": "6.13.0", "@navikt/ft-fakta-beregning-redesign": "1.2.21", - "@navikt/ft-form-hooks": "4.4.20", + "@navikt/ft-form-hooks": "5.0.0", "@navikt/ft-plattform-komponenter": "3.0.4", "@navikt/ft-prosess-beregningsgrunnlag": "6.5.26", "@navikt/ft-ui-komponenter": "2.3.19", diff --git a/packages/sak-notat/package.json b/packages/sak-notat/package.json index 81ee9eb9ea..77dc37bdcd 100644 --- a/packages/sak-notat/package.json +++ b/packages/sak-notat/package.json @@ -9,7 +9,7 @@ "@k9-sak-web/types": "1.0.0", "@navikt/aksel-icons": "6.13.0", "@navikt/ds-react": "6.13.0", - "@navikt/ft-form-hooks": "4.4.20", + "@navikt/ft-form-hooks": "5.0.0", "@navikt/ft-form-validators": "2.3.18", "@tanstack/react-query": "^5.51.23", "date-fns": "3.6.0", diff --git a/packages/types/src/aksjonspunktTsType.ts b/packages/types/src/aksjonspunktTsType.ts index ca4455fe3b..b6c80f8ee3 100644 --- a/packages/types/src/aksjonspunktTsType.ts +++ b/packages/types/src/aksjonspunktTsType.ts @@ -13,6 +13,7 @@ export type Aksjonspunkt = Readonly<{ kanLoses: boolean; erAktivt: boolean; venteårsakVariant?: string; + opprettetAv?: string; }>; export default Aksjonspunkt; diff --git a/yarn.lock b/yarn.lock index 2ca45ee7ed..3888516e8b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2267,7 +2267,7 @@ __metadata: "@fpsak-frontend/utils": 1.0.0 "@fpsak-frontend/utils-test": 1.0.0 "@k9-sak-web/fakta-felles": 1.0.0 - "@navikt/ft-form-hooks": 4.4.20 + "@navikt/ft-form-hooks": 5.0.0 "@navikt/ft-plattform-komponenter": 3.0.4 i18n-iso-countries: 7.11.3 moment: 2.30.1 @@ -3961,7 +3961,7 @@ __metadata: "@navikt/ds-css": 6.13.0 "@navikt/ds-icons": 3.4.3 "@navikt/ds-react": 6.13.0 - "@navikt/ft-form-hooks": 4.4.20 + "@navikt/ft-form-hooks": 5.0.0 "@navikt/ft-plattform-komponenter": 3.0.4 "@popperjs/core": 2.11.8 classnames: 2.5.1 @@ -4249,7 +4249,7 @@ __metadata: "@hookform/resolvers": ^3.9.0 "@navikt/ds-css": 6.13.0 "@navikt/ds-react": 6.13.0 - "@navikt/ft-form-hooks": 4.4.20 + "@navikt/ft-form-hooks": 5.0.0 "@navikt/ft-form-validators": 2.3.18 "@navikt/ft-plattform-komponenter": 3.0.4 "@popperjs/core": 2.11.8 @@ -4274,7 +4274,7 @@ __metadata: "@fpsak-frontend/shared-components": 1.0.0 "@fpsak-frontend/utils": 1.0.0 "@k9-sak-web/types": 1.0.0 - "@navikt/ft-form-hooks": 4.4.20 + "@navikt/ft-form-hooks": 5.0.0 "@navikt/ft-form-validators": 2.3.18 react: 18.3.1 react-hook-form: 7.52.2 @@ -4400,7 +4400,7 @@ __metadata: "@k9-sak-web/types": 1.0.0 "@navikt/ds-react": 6.13.0 "@navikt/ft-fakta-beregning-redesign": 1.2.21 - "@navikt/ft-form-hooks": 4.4.20 + "@navikt/ft-form-hooks": 5.0.0 "@navikt/ft-plattform-komponenter": 3.0.4 "@navikt/ft-prosess-beregningsgrunnlag": 6.5.26 "@navikt/ft-ui-komponenter": 2.3.19 @@ -4487,7 +4487,7 @@ __metadata: "@k9-sak-web/types": 1.0.0 "@navikt/aksel-icons": 6.13.0 "@navikt/ds-react": 6.13.0 - "@navikt/ft-form-hooks": 4.4.20 + "@navikt/ft-form-hooks": 5.0.0 "@navikt/ft-form-validators": 2.3.18 "@tanstack/react-query": ^5.51.23 date-fns: 3.6.0 @@ -4712,7 +4712,40 @@ __metadata: languageName: node linkType: hard -"@navikt/ft-form-hooks@npm:4.4.20, @navikt/ft-form-hooks@npm:^4.4.20": +"@navikt/ft-form-hooks@npm:5.0.0": + version: 5.0.0 + resolution: "@navikt/ft-form-hooks@npm:5.0.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fft-form-hooks%2F5.0.0%2F428d791811c515fc80f6513ae47b82fc0937b148" + dependencies: + "@navikt/aksel-icons": 6.13.0 + "@navikt/ds-css": 6.13.0 + "@navikt/ds-react": 6.13.0 + "@navikt/ft-form-validators": ^2.3.18 + "@navikt/ft-types": ^2.4.15 + "@navikt/ft-ui-komponenter": ^2.3.19 + "@navikt/ft-utils": ^2.3.18 + classnames: 2.5.1 + dayjs: 1.11.12 + lodash.throttle: 4.1.1 + react: 18.3.1 + react-hook-form: 7.52.2 + peerDependencies: + "@navikt/aksel-icons": 6.12.0 + "@navikt/ds-css": 6.12.0 + "@navikt/ds-react": 6.12.0 + "@navikt/ft-form-validators": 2.x + "@navikt/ft-types": 2.x + "@navikt/ft-ui-komponenter": 2.x + "@navikt/ft-utils": 2.x + classnames: 2.5.1 + dayjs: 1.11.11 + lodash.throttle: 4.1.1 + react: 18.3.1 + react-hook-form: 7.52.0 + checksum: 89babbe3817091180e181049b24995189fffeb45b85e4994d7922b47401b7152d95573639ed08a2c58ea5b27c16e0e73227f0df20a086a94394cea4c401cbea1 + languageName: node + linkType: hard + +"@navikt/ft-form-hooks@npm:^4.4.20": version: 4.4.20 resolution: "@navikt/ft-form-hooks@npm:4.4.20::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fft-form-hooks%2F4.4.20%2F09aa9dfe224903f4ee9463bace47bfb36b80c5ac" dependencies: