Refactor vessel error handling and input identifiers for improved usability

thefishman-fish · thefishman-fish · commit 67ac97ca0489 · 2026-06-03T16:39:12.000+01:00
diff --git a/app/.server/directLanding.ts b/app/.server/directLanding.ts
@@ -171,14 +171,16 @@ const transformError = (
       },
     };
   } else if (errorKey === "vessel.vesselName") {
+    // FI0-11239: DAC_Error_Focus_Usability_02 (AAA)
+    const vesselNameErrorKey = errorKey.replaceAll(".", "-");
     // FIO-10474: Handle vessel errors separately without date-related params
     return {
-      [errorKey]: {
+      [vesselNameErrorKey]: {
         key: errors[errorKey],
       },
     };
   } else if (errorKey.includes("exportWeight")) {
-    const index: number = parseInt(errorKey.split(".")[1]);
+    const index: number = Number.parseInt(errorKey.split(".")[1]);
     const product = products.items[index].product;
 
     return {
diff --git a/app/.server/manualEntryLanding.ts b/app/.server/manualEntryLanding.ts
@@ -204,7 +204,7 @@ const onAddLandingResponse = async (
     case 200:
     case 204:
       return await response.json();
-    case 400:
+    case 400: {
       const errorsResponse = await response.json();
       const products: ProductLanded[] = errorsResponse?.items ?? [];
       const product: string =
@@ -228,7 +228,7 @@ const onAddLandingResponse = async (
           }
 
           return {
-            key: error,
+            key: error === "vessel.vesselName" ? error.replaceAll(".", "-") : error,
             message: getErrorMessage(messageKey),
             ...(messageKey === "error.dateLanded.date.max" && {
               value: { dynamicValue: getEnv().LANDING_LIMIT_DAYS_FUTURE },
@@ -242,6 +242,7 @@ const onAddLandingResponse = async (
           };
         }),
       };
+    }
     case 403:
       return {
         unauthorised: true,
diff --git a/app/helpers/lookupErrorText.ts b/app/helpers/lookupErrorText.ts
@@ -471,7 +471,7 @@ export const getTransformedError = (errors: IError[], vesselInput?: string): IEr
     // Vessel fallback: if error is 'ccAddLandingVesselNameUnpopulatedError' but vessel field is not empty, show 'ccAddLandingSelectVesselListNullError'
     let errorMessage = error.message;
     if (
-      errorKey === "vessel.vesselName" &&
+      errorKey === "vessel-vesselName" &&
       error.message === "ccAddLandingVesselNameUnpopulatedError" &&
       vesselInput !== undefined &&
       vesselInput.trim() !== ""
diff --git a/app/routes/create-catch-certificate.$documentNumber.add-landings.tsx b/app/routes/create-catch-certificate.$documentNumber.add-landings.tsx
@@ -112,7 +112,7 @@ const hasMaxLandingExceeded = (errors: any, maxLandingExceeded: boolean) => {
     };
   }
 };
-const getVesselClassName = (errors: any) => errors["vessel.vesselName"] ?? "";
+const getVesselClassName = (errors: any) => errors["vessel-vesselName"] ?? "";
 
 const intialProcessedValues = (
   values: Pick<AddLandingsType, "gearCategory" | "availableGearTypes" | "gearType" | "selectedRfmo">
@@ -397,7 +397,7 @@ const AddLandings = () => {
     "eez.2",
     "eez.3",
     "eez.4",
-    "vessel.vesselName",
+    "vessel-vesselName",
     "exportWeight",
     "gearCategory",
     "gearType",
@@ -602,11 +602,11 @@ const AddLandings = () => {
                 rfmos={rfmos}
               />
               <AutocompleteFormField
-                id="vessel.vesselName"
+                id="vessel-vesselName"
                 name="vessel"
                 errorMessageText={
-                  errors["vessel.vesselName"]?.message
-                    ? t(errors["vessel.vesselName"].message, { ns: "errorsText" })
+                  errors["vessel-vesselName"]?.message
+                    ? t(errors["vessel-vesselName"].message, { ns: "errorsText" })
                     : ""
                 }
                 defaultValue={values.vessel ?? selectedVessel ?? ""}
@@ -626,7 +626,7 @@ const AddLandings = () => {
                 labelText={t("ccAddLandingVesselNameLabel", { ns: "directLandings" })}
                 hintText={t("ccAddLandingVesselNameHint", { ns: "directLandings" })}
                 containerClassName={
-                  isEmpty(errors["vessel.vesselName"])
+                  isEmpty(errors["vessel-vesselName"])
                     ? "govuk-form-group govuk-!-width-one-half"
                     : "govuk-form-group govuk-!-width-one-half govuk-form-group--error"
                 }
@@ -635,9 +635,9 @@ const AddLandings = () => {
                   selectClassName: vesselClassName,
                 }}
                 inputProps={{
-                  id: "vessel.vesselName",
+                  id: "vessel-vesselName",
                   className: vesselClassName,
-                  "aria-describedby": "vessel.vesselName-hint",
+                  "aria-describedby": "vessel-vesselName-hint",
                 }}
                 onChange={enableChange ? handleVesselChange : undefined}
                 onSelected={handleVesselSelected}
diff --git a/app/routes/create-catch-certificate.$documentNumber.direct-landing.tsx b/app/routes/create-catch-certificate.$documentNumber.direct-landing.tsx
@@ -160,7 +160,7 @@ const DirectLanding = () => {
 
   // vessel input
   const getVesselErrorText = () => {
-    const vesselNameError = errors?.["vessel.vesselName"]?.message ?? "";
+    const vesselNameError = errors?.["vessel-vesselName"]?.message ?? "";
     const vesselIsListedError = errors?.["vessel.isListed"]?.message ?? "";
     const error = vesselNameError || vesselIsListedError;
     return isEmpty(error) ? "" : t(error, { ns: "errorsText" });
@@ -292,10 +292,10 @@ const DirectLanding = () => {
   const faoValue = normalize(faoArea) ?? normalize(directLandings?.faoArea) ?? "FAO27";
   const { "vessel.isListed": isListedError, ...restErrors } = errors;
   const errorsForSummary =
-    isListedError && !restErrors["vessel.vesselName"]
+    isListedError && !restErrors["vessel-vesselName"]
       ? {
           ...restErrors,
-          "vessel.vesselName": { ...isListedError, fieldId: "vessel.vesselName-error", key: "vessel.vesselName" },
+          "vessel-vesselName": { ...isListedError, fieldId: "vessel-vesselName-error", key: "vessel-vesselName" },
         }
       : restErrors;
 
@@ -317,7 +317,7 @@ const DirectLanding = () => {
             "eez.2",
             "eez.3",
             "eez.4",
-            "vessel.vesselName",
+            "vessel-vesselName",
             "gearCategory",
             "gearType",
             "weight",
@@ -425,7 +425,7 @@ const DirectLanding = () => {
                 rfmoHelpSectionContentTwoLink={t("ccRfmoHelpSectionContentTwoLink")}
               />
               <AutocompleteFormField
-                id="vessel.vesselName"
+                id="vessel-vesselName"
                 name="vessel"
                 errorMessageText={getVesselErrorText()}
                 defaultValue={values?.vessels ?? vesselSelected ?? ""}
@@ -445,16 +445,16 @@ const DirectLanding = () => {
                 }}
                 containerClassName={classNames("govuk-form-group", "govuk-!-width-one-half", {
                   "govuk-form-group--error":
-                    !isEmpty(errors["vessel.vesselName"]) || !isEmpty(errors["vessel.isListed"]),
+                    !isEmpty(errors["vessel-vesselName"]) || !isEmpty(errors["vessel.isListed"]),
                 })}
                 selectProps={{
                   selectClassName: classNames("govuk-select", {
-                    "govuk-select--error": !isEmpty(errors["vessel.vesselName"]) || !isEmpty(errors["vessel.isListed"]),
+                    "govuk-select--error": !isEmpty(errors["vessel-vesselName"]) || !isEmpty(errors["vessel.isListed"]),
                   }),
                 }}
                 inputProps={{
                   className: classNames("govuk-input", {
-                    "govuk-input--error": !isEmpty(errors["vessel.vesselName"]) || !isEmpty(errors["vessel.isListed"]),
+                    "govuk-input--error": !isEmpty(errors["vessel-vesselName"]) || !isEmpty(errors["vessel.isListed"]),
                   }),
                 }}
                 onChange={enableChange ? handleVesselChange : undefined}
diff --git a/tests/cypress/integration/helpers/lookupErrorText.spec.ts b/tests/cypress/integration/helpers/lookupErrorText.spec.ts
@@ -14,7 +14,7 @@ describe("lookupErrorText helpers", () => {
           message: "ccAddLandingForProductError",
         },
         {
-          key: "vessel.vesselName",
+          key: "vessel-vesselName",
           message: "ccAddVesselFormVesselNameError",
         },
       ];
@@ -28,39 +28,39 @@ describe("lookupErrorText helpers", () => {
           value: undefined,
           fieldId: "product-error",
         },
-        "vessel.vesselName": {
-          key: "vessel.vesselName",
+        "vessel-vesselName": {
+          key: "vessel-vesselName",
           message: "ccAddVesselFormVesselNameError",
           value: undefined,
-          fieldId: "vessel.vesselName-error",
+          fieldId: "vessel-vesselName-error",
         },
       });
     });
 
     it("should show 'select from list' error when vessel input is non-empty but vessel is not found", () => {
       const errors: IError[] = [
         {
-          key: "vessel.vesselName",
+          key: "vessel-vesselName",
           message: "ccAddLandingVesselNameUnpopulatedError",
         },
       ];
 
       const result = getTransformedError(errors, "INVALID123");
 
-      expect(result["vessel.vesselName"].message).to.equal("ccAddLandingSelectVesselListNullError");
+      expect(result["vessel-vesselName"].message).to.equal("ccAddLandingSelectVesselListNullError");
     });
 
     it("should keep 'unpopulated' error when vessel input is empty", () => {
       const errors: IError[] = [
         {
-          key: "vessel.vesselName",
+          key: "vessel-vesselName",
           message: "ccAddLandingVesselNameUnpopulatedError",
         },
       ];
 
       const result = getTransformedError(errors, "");
 
-      expect(result["vessel.vesselName"].message).to.equal("ccAddLandingVesselNameUnpopulatedError");
+      expect(result["vessel-vesselName"].message).to.equal("ccAddLandingVesselNameUnpopulatedError");
     });
 
     it("should include error values when provided", () => {
@@ -91,10 +91,10 @@ describe("lookupErrorText helpers", () => {
   describe("displayErrorMessagesInOrder", () => {
     it("should return errors in the specified order", () => {
       const errors: IErrorsTransformed = {
-        "vessel.vesselName": {
-          key: "vessel.vesselName",
+        "vessel-vesselName": {
+          key: "vessel-vesselName",
           message: "ccAddVesselFormVesselNameError",
-          fieldId: "vessel.vesselName-error",
+          fieldId: "vessel-vesselName-error",
         },
         product: {
           key: "product",
@@ -108,14 +108,14 @@ describe("lookupErrorText helpers", () => {
         },
       };
 
-      const errorKeysInOrder = ["product", "dateLanded", "vessel.vesselName"];
+      const errorKeysInOrder = ["product", "dateLanded", "vessel-vesselName"];
 
       const result = displayErrorMessagesInOrder(errors, errorKeysInOrder);
 
       expect(result).to.have.length(3);
       expect(result[0].key).to.equal("product");
       expect(result[1].key).to.equal("dateLanded");
-      expect(result[2].key).to.equal("vessel.vesselName");
+      expect(result[2].key).to.equal("vessel-vesselName");
     });
 
     it("should handle errors with the same prefix (e.g., multiple products)", () => {
@@ -276,7 +276,7 @@ describe("lookupErrorText helpers", () => {
         "eez.2",
         "eez.3",
         "eez.4",
-        "vessel.vesselName",
+        "vessel-vesselName",
         "exportWeight",
         "gearCategory",
         "gearType",
diff --git a/tests/cypress/integration/routes/addLandings.spec.ts b/tests/cypress/integration/routes/addLandings.spec.ts
@@ -21,7 +21,7 @@ const verifyLandingFormIsReset = (isProductEmpty: boolean) => {
   cy.get("#dateLanded").should("have.value", "");
   cy.get("#select-faoArea").should("have.value", "FAO27");
   cy.get("#highSeasArea").should("not.be.checked");
-  cy.get(String.raw`#vessel\.vesselName`).should("have.value", "");
+  cy.get(String.raw`#vessel-vesselName`).should("have.value", "");
   cy.get("#weight").should("have.value", "");
   cy.get("select#gearCategory option:selected").should("have.value", "");
   cy.get("select#gearType option:selected").should("have.value", "");
@@ -55,8 +55,8 @@ const populateLandingForm = () => {
   //High Seas Area
   cy.get("#highSeasArea").check();
   // vessel
-  cy.get(String.raw`#vessel\.vesselName`).invoke("val", "CARINA (BF803)");
-  cy.get(String.raw`#vessel\.vesselName`)
+  cy.get(String.raw`#vessel-vesselName`).invoke("val", "CARINA (BF803)");
+  cy.get(String.raw`#vessel-vesselName`)
     .should("have.prop", "value")
     .and("not.be.empty");
   // weight
@@ -484,7 +484,7 @@ describe("Manual landing page: post-action behaviour", () => {
     cy.get("#dateLanded").should("not.have.value", "");
     cy.get("#dateLanded").should("not.have.value", "");
     cy.get("#select-faoArea").should("have.value", "FAO27");
-    cy.get(String.raw`#vessel\.vesselName`).should("not.have.value", "");
+    cy.get(String.raw`#vessel-vesselName`).should("not.have.value", "");
     cy.get("#weight").should("not.have.value", "");
     cy.get("select#gearCategory option:selected").should("not.have.value", "");
     cy.get("select#gearType option:selected").should("not.have.value", "");
@@ -516,7 +516,7 @@ describe("Manual landing page: post-action behaviour", () => {
     cy.get("#dateLanded").should("not.have.value", "");
     cy.get("#dateLanded").should("not.have.value", "");
     cy.get("#select-faoArea").should("have.value", "FAO27");
-    cy.get(String.raw`#vessel\.vesselName`).should("not.have.value", "");
+    cy.get(String.raw`#vessel-vesselName`).should("not.have.value", "");
     cy.get("#weight").should("not.have.value", "");
     cy.get("select#gearCategory option:selected").should("not.have.value", "");
     cy.get("select#gearType option:selected").should("not.have.value", "");
@@ -540,7 +540,7 @@ describe("Manual landing page: post-action behaviour", () => {
     cy.get("#dateLanded").should("not.have.value", "");
     cy.get("#dateLanded").should("not.have.value", "");
     cy.get("#select-faoArea").should("have.value", "FAO27");
-    cy.get(String.raw`#vessel\.vesselName`).should("not.have.value", "");
+    cy.get(String.raw`#vessel-vesselName`).should("not.have.value", "");
     cy.get("#weight").should("not.have.value", "");
     cy.get("select#gearCategory option:selected").should("not.have.value", "");
     cy.get("select#gearType option:selected").should("not.have.value", "");
@@ -564,7 +564,7 @@ describe("Manual landing page: post-action behaviour", () => {
     cy.get("#dateLanded").should("not.have.value", "");
     cy.get("#dateLanded").should("not.have.value", "");
     cy.get("#select-faoArea").should("have.value", "FAO27");
-    cy.get(String.raw`#vessel\.vesselName`).should("not.have.value", "");
+    cy.get(String.raw`#vessel-vesselName`).should("not.have.value", "");
     cy.get("#weight").should("not.have.value", "");
     cy.get("select#gearCategory option:selected").should("not.have.value", "");
     cy.get("select#gearType option:selected").should("not.have.value", "");
@@ -1169,15 +1169,15 @@ describe("Manual landing page: Date Landed and Vessel validation", () => {
   });
 
   it("should not allow vessel selection until Date Landed is valid", () => {
-    cy.get(String.raw`#vessel\.vesselName`).type("SHOULDNOTWORK", { force: true });
-    cy.get(String.raw`#vessel\.vesselName`).should("have.value", "");
+    cy.get(String.raw`#vessel-vesselName`).type("SHOULDNOTWORK", { force: true });
+    cy.get(String.raw`#vessel-vesselName`).should("have.value", "");
     cy.get("#dateLanded").type("12");
     cy.get("#dateLanded-month").type("05");
-    cy.get(String.raw`#vessel\.vesselName`).type("SHOULDNOTWORK", { force: true });
-    cy.get(String.raw`#vessel\.vesselName`).should("have.value", "");
+    cy.get(String.raw`#vessel-vesselName`).type("SHOULDNOTWORK", { force: true });
+    cy.get(String.raw`#vessel-vesselName`).should("have.value", "");
     const today = new Date();
     cy.get("#dateLanded-year").type(today.getFullYear().toString());
-    cy.get(String.raw`#vessel\.vesselName`).type("SHOULDWORK", { force: true });
+    cy.get(String.raw`#vessel-vesselName`).type("SHOULDWORK", { force: true });
   });
 
   it("should clear vessel input if Date Landed is changed to invalid", () => {
diff --git a/tests/cypress/integration/routes/directLanding.spec.ts b/tests/cypress/integration/routes/directLanding.spec.ts
