Do not invoke validator onlyAvailableItems when 'landvelger' or 'valutavelger' because there is a bug within the validation that occurs on the summary page, which leads to the user being prevented from submitting a complete application. It applies to these two components since their values are fetched asynchronous, and the component's 'get ready'-promise is not respected for some reason (when display='wizard'), resulting in validation running before values are fetched.

akgagnat · akgagnat · commit 7af0e43752f2 · 2024-02-16T12:03:26.000+01:00
diff --git a/mocks/mocks/data/formio-api/nav083501.json b/mocks/mocks/data/formio-api/nav083501.json
diff --git a/mocks/mocks/data/innsending-api/mellomlagring/nav083591/complete.json b/mocks/mocks/data/innsending-api/mellomlagring/nav083591/complete.json
@@ -0,0 +1,111 @@
+{
+  "brukerId": "03876399856",
+  "skjemanr": "NAV 08-35.01",
+  "tittel": "Inntektsopplysninger for selvstendig næringsdrivende og/eller frilansere som skal ha sykepenger",
+  "tema": "SYK",
+  "spraak": "nb",
+  "hoveddokument": {
+    "vedleggsnr": "NAV 08-35.01",
+    "tittel": "Inntektsopplysninger for selvstendig næringsdrivende og/eller frilansere som skal ha sykepenger",
+    "label": "Inntektsopplysninger for selvstendig næringsdrivende og/eller frilansere som skal ha sykepenger",
+    "pakrevd": true,
+    "mimetype": "application/pdf"
+  },
+  "hoveddokumentVariant": {
+    "vedleggsnr": "NAV 08-35.01",
+    "tittel": "Inntektsopplysninger for selvstendig næringsdrivende og/eller frilansere som skal ha sykepenger",
+    "label": "Inntektsopplysninger for selvstendig næringsdrivende og/eller frilansere som skal ha sykepenger",
+    "pakrevd": false,
+    "mimetype": "application/json",
+    "document": {
+      "language": "nb-NO",
+      "data": {
+        "data": {
+          "jegPlikterAGiDeOpplysningerOgLevereDeDokumenteneSomErNodvendigeForAtNavSkalKunneVurdereMineRettigheter": true,
+          "jegHarGjortMegKjentMedMinPliktTilAInformereNavOmEndringerSomKanHaBetydningForSykepengeneJegFarUtbetalt": true,
+          "hvaSlagsVirksomhetDriverDu": {
+            "selvstendigNaeringsdrivende": true,
+            "frilanser": true
+          },
+          "fornavnSoker": "test",
+          "etternavnSoker": "test",
+          "harDuNorskFodselsnummerEllerDNummer": "ja",
+          "fodselsnummerDNummerSoker": "25058236813",
+          "oppgiDatoForForsteSykefravaersdagDdMmAaaa": "2024-02-01",
+          "hvaSlagsSelvstendigNaeringsvirksomhetDriverDu": {
+            "enkeltpersonforetak": true,
+            "fiskeBladA": false,
+            "fiskeBladB": false,
+            "fiskeLott": false,
+            "fiskeHyre": false,
+            "jordbrukSkogbruk": false,
+            "dagmammaIEgetHjem": false,
+            "annenVirksomhet": false
+          },
+          "harDuInntekterSomArbeidstakerITilleggTilInntektSomSelvstendigNaeringsdrivendeOgEllerFrilanser": "nei",
+          "andreOpplysningerDuMenerErViktigeNarNavSkalFastsetteSykepengegrunnlagetDitt": "nei",
+          "harDuDokumentasjonDuOnskerALeggeVedSoknaden": "ja",
+          "hvaOnskerDuALeggeVed": {
+            "personinntektsskjema": true,
+            "resultatregnskap": true,
+            "naeringsoppgave": false,
+            "annet": false
+          },
+          "narStartetDuSomFrilanserDdMmAaaa": "2023-11-01",
+          "harDuInntektFraFosterhjem": "nei",
+          "orgNr": "242667913",
+          "narStartetDuVirksomhetenDinDdMmAaaa": "2024-02-14",
+          "hvaHarDuHattINaeringsresultatForSkattDeSiste12Manedene": 1200000,
+          "harDetVaertDriftIVirksomhetenFremTilDuBleSykmeldt": "ja",
+          "vilDuFortsattHaNaeringsinntektMensDuErSykmeldt": "nei",
+          "erVirksomhetenRegistrertINorge": "nei",
+          "landvelger": {
+            "label": "Frankrike",
+            "value": "FR"
+          },
+          "harDuFattEnVarigEndringAvArbeidssituasjonenVirksomhetenILopetAvDeSisteFireArene": "nei",
+          "personinntektsskjema1": "leggerVedNaa",
+          "resultatregnskap1": "leggerVedNaa"
+        },
+        "metadata": {
+          "timezone": "Europe/Oslo",
+          "offset": 60,
+          "origin": "https://fyllut-preprod.intern.dev.nav.no",
+          "referrer": "https://fyllut-preprod.intern.dev.nav.no/fyllut/nav083501",
+          "browserName": "Netscape",
+          "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
+          "pathName": "/fyllut/nav083501/vedlegg",
+          "onLine": true
+        },
+        "state": "submitted",
+        "_vnote": ""
+      }
+    }
+  },
+  "innsendingsId": "2db25aab-3524-4426-a333-489542bf16bf",
+  "status": "Opprettet",
+  "vedleggsListe": [
+    {
+      "vedleggsnr": "L2",
+      "tittel": "Personinntektsskjema",
+      "label": "Personinntektsskjema",
+      "pakrevd": true,
+      "beskrivelse": "",
+      "formioId": "eiaivlp"
+    },
+    {
+      "vedleggsnr": "L2",
+      "tittel": "Resultatregnskap",
+      "label": "Resultatregnskap",
+      "pakrevd": true,
+      "beskrivelse": "",
+      "formioId": "etpewjh"
+    }
+  ],
+  "kanLasteOppAnnet": true,
+  "fristForEttersendelse": 14,
+  "endretDato": "2024-02-15T10:26:31.152815+01:00",
+  "skalSlettesDato": "2024-04-11",
+  "skjemaPath": "nav083501",
+  "visningsType": "fyllUt"
+}
diff --git a/mocks/mocks/routes/formio-api.js b/mocks/mocks/routes/formio-api.js
@@ -19,6 +19,7 @@ const translationsSubmissionMethod = require('../data/formio-api/submission-meth
 const globalTranslationsEn = require('../data/formio-api/global-translation.json');
 const formCustomCompsAlert = require('../data/formio-api/custom-components-alert.json');
 const formActivities = require('../data/formio-api/activities.json');
+const nav083501 = require('../data/formio-api/nav083501.json');
 
 const allForms = [
   { form: formCypress101, translations: translationsCypress101 },
@@ -35,6 +36,7 @@ const allForms = [
   { form: formTestPrefillData, translations: undefined },
   { form: formSelectV1, formV2: formSelectV2, translations: undefined },
   { form: formActivities, translations: undefined },
+  { form: nav083501, translations: undefined },
 ];
 
 const findTestdata = (formPath) => allForms.find((testdata) => testdata.form.path === formPath);
diff --git a/mocks/mocks/routes/innsending-api.js b/mocks/mocks/routes/innsending-api.js
@@ -12,6 +12,7 @@ const formSelectSoknadCompleteV1 = require('../data/innsending-api/mellomlagring
 const formSelectSoknadInvalidCountryV1 = require('../data/innsending-api/mellomlagring/form-select/saved-invalid-country-v1.json');
 const formSelectSoknadInvalidInstrumentV1 = require('../data/innsending-api/mellomlagring/form-select/saved-invalid-instrument-v2.json');
 const mellomlagringActivities = require('../data/innsending-api/activities/mellomlagring-activities.json');
+const nav083591soknadComplete = require('../data/innsending-api/mellomlagring/nav083591/complete.json');
 const objectToByteArray = (obj) => Array.from(new TextEncoder().encode(JSON.stringify(obj)));
 
 const base64Encode = (data) => {
@@ -223,6 +224,14 @@ module.exports = [
           body: convertToInnsendingApiResponse(formSelectSoknadInvalidInstrumentV1),
         },
       },
+      {
+        id: 'nav083501-complete-v1',
+        type: 'json',
+        options: {
+          status: 200,
+          body: convertToInnsendingApiResponse(nav083591soknadComplete),
+        },
+      },
       {
         id: 'not-found',
         type: 'json',
diff --git a/packages/fyllut/cypress/e2e/mellomlagring.cy.ts b/packages/fyllut/cypress/e2e/mellomlagring.cy.ts
@@ -373,8 +373,9 @@ describe('Mellomlagring', () => {
             cy.findByRole('heading', { name: TEXTS.statiske.summaryPage.title }).should('exist');
           });
 
-          it('when submission data contains invalid country', () => {
-            cy.mocksUseRouteVariant('get-soknad:form-select-invalid-country-v1');
+          it('when form-v2 does not allow value anymore', () => {
+            cy.mocksUseRouteVariant('get-form:success-v2');
+            cy.mocksUseRouteVariant('get-soknad:form-select-invalid-instrument-v1');
 
             cy.visit(
               '/fyllut/testselect/oppsummering?sub=digital&innsendingsId=df6c8a69-9eb0-4878-b51f-38b3849ef9b6&lang=nb-NO',
@@ -385,50 +386,62 @@ describe('Mellomlagring', () => {
               .within(() => {
                 cy.get('dt').should('have.length', 3);
                 cy.get('dt').eq(0).should('contain.text', 'Velg instrument');
-                cy.get('dd').eq(0).should('contain.text', 'Piano');
+                cy.get('dd').eq(0).should('contain.text', 'Piano'); // <- invalid in form v2
                 cy.get('dt').eq(1).should('contain.text', 'Velg land du vil reise til');
-                cy.get('dd').eq(1).should('contain.text', 'Invalid country'); // <- invalid (dataSrc=url)
+                cy.get('dd').eq(1).should('contain.text', 'Italia');
                 cy.get('dt').eq(2).should('contain.text', 'Velg valuta du vil betale med');
                 cy.get('dd').eq(2).should('contain.text', 'Euro (EUR)');
               });
             cy.findByText(/Alle steg som mangler informasjon er markert med/).should('exist');
             cy.findByRole('button', { name: TEXTS.grensesnitt.navigation.saveAndContinue }).should('not.exist');
             cy.findByRole('heading', { name: TEXTS.statiske.summaryPage.title }).should('exist');
           });
+        });
 
-          it('when form-v2 does not allow value anymore', () => {
-            cy.mocksUseRouteVariant('get-form:success-v2');
-            cy.mocksUseRouteVariant('get-soknad:form-select-invalid-instrument-v1');
+        describe('allows user to continue to sendinn application', () => {
+          it('when submission data is complete and valid', () => {
+            cy.mocksUseRouteVariant('get-soknad:form-select-complete-v1');
+
+            cy.intercept('PUT', '/fyllut/api/send-inn/utfyltsoknad', (req) => {
+              const { submission, attachments, ...rest } = req.body;
+              expect(submission.data.velgInstrument).to.deep.eq({ label: 'Piano', value: 'piano' });
+              expect(submission.data.velgLand).to.deep.eq({ label: 'Italia', value: 'IT' });
+              expect(submission.data.velgValutaDuVilBetaleMed).to.deep.eq({ label: 'Euro (EUR)', value: 'EUR' });
+              expect(attachments).to.have.length(1);
+              expect(attachments[0].vedleggsnr).to.eq('P2');
+            }).as('submitMellomlagring');
 
             cy.visit(
               '/fyllut/testselect/oppsummering?sub=digital&innsendingsId=df6c8a69-9eb0-4878-b51f-38b3849ef9b6&lang=nb-NO',
             );
             cy.wait('@getMellomlagring');
+            cy.findByRole('button', { name: /Veiledning/ }).should('exist');
             cy.get('dl')
               .eq(0)
               .within(() => {
                 cy.get('dt').should('have.length', 3);
                 cy.get('dt').eq(0).should('contain.text', 'Velg instrument');
-                cy.get('dd').eq(0).should('contain.text', 'Piano'); // <- invalid in form v2
+                cy.get('dd').eq(0).should('contain.text', 'Piano');
                 cy.get('dt').eq(1).should('contain.text', 'Velg land du vil reise til');
                 cy.get('dd').eq(1).should('contain.text', 'Italia');
                 cy.get('dt').eq(2).should('contain.text', 'Velg valuta du vil betale med');
                 cy.get('dd').eq(2).should('contain.text', 'Euro (EUR)');
               });
-            cy.findByText(/Alle steg som mangler informasjon er markert med/).should('exist');
-            cy.findByRole('button', { name: TEXTS.grensesnitt.navigation.saveAndContinue }).should('not.exist');
+            cy.findByRole('button', { name: TEXTS.grensesnitt.navigation.saveAndContinue }).should('exist');
+            cy.findByText(/Alle steg som mangler informasjon er markert med/).should('not.exist');
             cy.findByRole('heading', { name: TEXTS.statiske.summaryPage.title }).should('exist');
+
+            cy.clickSaveAndContinue();
+            cy.wait('@submitMellomlagring');
           });
-        });
 
-        describe('allows user to continue to sendinn application', () => {
-          it('when submission data is complete and valid', () => {
-            cy.mocksUseRouteVariant('get-soknad:form-select-complete-v1');
+          it('even if submission data contains an invalid country', () => {
+            cy.mocksUseRouteVariant('get-soknad:form-select-invalid-country-v1');
 
             cy.intercept('PUT', '/fyllut/api/send-inn/utfyltsoknad', (req) => {
-              const { submission, attachments, ...rest } = req.body;
+              const { submission, attachments } = req.body;
               expect(submission.data.velgInstrument).to.deep.eq({ label: 'Piano', value: 'piano' });
-              expect(submission.data.velgLand).to.deep.eq({ label: 'Italia', value: 'IT' });
+              expect(submission.data.velgLand).to.deep.eq({ label: 'Invalid country', value: 'INVALID' });
               expect(submission.data.velgValutaDuVilBetaleMed).to.deep.eq({ label: 'Euro (EUR)', value: 'EUR' });
               expect(attachments).to.have.length(1);
               expect(attachments[0].vedleggsnr).to.eq('P2');
@@ -438,15 +451,14 @@ describe('Mellomlagring', () => {
               '/fyllut/testselect/oppsummering?sub=digital&innsendingsId=df6c8a69-9eb0-4878-b51f-38b3849ef9b6&lang=nb-NO',
             );
             cy.wait('@getMellomlagring');
-            cy.findByRole('button', { name: /Veiledning/ }).should('exist');
             cy.get('dl')
               .eq(0)
               .within(() => {
                 cy.get('dt').should('have.length', 3);
                 cy.get('dt').eq(0).should('contain.text', 'Velg instrument');
                 cy.get('dd').eq(0).should('contain.text', 'Piano');
                 cy.get('dt').eq(1).should('contain.text', 'Velg land du vil reise til');
-                cy.get('dd').eq(1).should('contain.text', 'Italia');
+                cy.get('dd').eq(1).should('contain.text', 'Invalid country'); // <- invalid (dataSrc=url)
                 cy.get('dt').eq(2).should('contain.text', 'Velg valuta du vil betale med');
                 cy.get('dd').eq(2).should('contain.text', 'Euro (EUR)');
               });
@@ -459,6 +471,28 @@ describe('Mellomlagring', () => {
           });
         });
       });
+
+      it('Allows user to submit complete submission', () => {
+        cy.mocksUseRouteVariant('get-soknad:nav083501-complete-v1');
+        cy.intercept('PUT', '/fyllut/api/send-inn/utfyltsoknad', (req) => {
+          const { submission, attachments } = req.body;
+          expect(submission.data.landvelger).to.deep.eq({ label: 'Frankrike', value: 'FR' });
+          expect(attachments).to.have.length(2);
+          expect(attachments[0].label).to.eq('Personinntektsskjema');
+          expect(attachments[1].label).to.eq('Resultatregnskap');
+        }).as('submitMellomlagring');
+        cy.intercept('GET', '/fyllut/api/send-inn/soknad/2db25aab-3524-4426-a333-489542bf16bf').as('getMellomlagring');
+
+        cy.visit(
+          '/fyllut/nav083501/oppsummering?sub=digital&innsendingsId=2db25aab-3524-4426-a333-489542bf16bf&lang=nb-NO',
+        );
+        cy.wait('@getMellomlagring');
+        cy.findByRole('button', { name: TEXTS.grensesnitt.navigation.saveAndContinue }).should('exist');
+        cy.findByText(/Alle steg som mangler informasjon er markert med/).should('not.exist');
+        cy.findByRole('heading', { name: TEXTS.statiske.summaryPage.title }).should('exist');
+        cy.clickSaveAndContinue();
+        cy.wait('@submitMellomlagring');
+      });
     });
   });
 });
diff --git a/packages/shared-components/src/formio/components/base/index.d.ts b/packages/shared-components/src/formio/components/base/index.d.ts
@@ -43,7 +43,7 @@ interface ReactComponentType {
   } | null;
   builderMode: boolean;
   validators: any[];
-  init(): any;
+  init(options?: {}): any;
   redraw(): any;
   attach(element: any): any;
   detach(): void;
diff --git a/packages/shared-components/src/formio/components/core/select/Select.tsx b/packages/shared-components/src/formio/components/core/select/Select.tsx
@@ -94,6 +94,8 @@ const ReactSelectWrapper = ({
   );
 };
 
+type SelectInitOptions = { skipOnlyAvailableItems?: boolean };
+
 /**
  * TODO: Rename this to Select and dont use wrapper when we change to Aksel component.
  */
@@ -180,9 +182,10 @@ class NavSelect extends BaseComponent {
     }
   }
 
-  init() {
+  init(options: SelectInitOptions = {}) {
     super.init();
-    this.validators = this.validators.concat(['onlyAvailableItems']);
+    const { skipOnlyAvailableItems = false } = options;
+    this.validators = this.validators.concat(skipOnlyAvailableItems ? [] : ['onlyAvailableItems']);
     this.loadItems();
   }
 
diff --git a/packages/shared-components/src/formio/components/extensions/country-select/CountrySelect.ts b/packages/shared-components/src/formio/components/extensions/country-select/CountrySelect.ts
@@ -13,9 +13,17 @@ class CountrySelect extends NavSelect {
       },
       dataSrc: 'url',
       disableLimit: true,
+      validate: {
+        required: true,
+        onlyAvailableItems: false,
+      },
     };
   }
 
+  init() {
+    super.init({ skipOnlyAvailableItems: true });
+  }
+
   static get builderInfo() {
     return countrySelectBuilder();
   }
diff --git a/packages/shared-components/src/formio/components/extensions/currency-select/CurrencySelect.ts b/packages/shared-components/src/formio/components/extensions/currency-select/CurrencySelect.ts
@@ -14,9 +14,17 @@ class CurrencySelect extends NavSelect {
       },
       dataSrc: 'url',
       disableLimit: true,
+      validate: {
+        required: true,
+        onlyAvailableItems: false,
+      },
     };
   }
 
+  init() {
+    super.init({ skipOnlyAvailableItems: true });
+  }
+
   static get builderInfo() {
     return currencySelectBuilder();
   }

Original file line number	Diff line number	Diff line change
`@@ -94,6 +94,8 @@ const ReactSelectWrapper = ({`
`94`	`94`	`);`
`95`	`95`	`};`
`96`	`96`
	`97`	`+type SelectInitOptions = { skipOnlyAvailableItems?: boolean };`
	`98`	`+`
`97`	`99`	`/**`
`98`	`100`	`* TODO: Rename this to Select and dont use wrapper when we change to Aksel component.`
`99`	`101`	`*/`
`@@ -180,9 +182,10 @@ class NavSelect extends BaseComponent {`
`180`	`182`	`}`
`181`	`183`	`}`
`182`	`184`
`183`		`- init() {`
	`185`	`+ init(options: SelectInitOptions = {}) {`
`184`	`186`	`super.init();`
`185`		`- this.validators = this.validators.concat(['onlyAvailableItems']);`
	`187`	`+ const { skipOnlyAvailableItems = false } = options;`
	`188`	`+ this.validators = this.validators.concat(skipOnlyAvailableItems ? [] : ['onlyAvailableItems']);`
`186`	`189`	`this.loadItems();`
`187`	`190`	`}`
`188`	`191`