Refaktor prosess-vilkar overstyring

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",

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",

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';

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<OwnProps> & 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 {