From 9eaf45ac88406b5b4d339e145222ec64bdeca52d Mon Sep 17 00:00:00 2001
From: Allan Carr <allan@imexsystems.ca>
Date: Mon, 23 Feb 2026 23:44:24 -0800
Subject: [PATCH] IO-3537 Bill Entry Scroll to Top for Errors

Signed-off-by: Allan Carr <allan@imexsystems.ca>
---
 .../bill-enter-modal.container.jsx            | 19 ++++++++++++++-----
 .../form-fields-changed-alert.component.jsx   |  4 +++-
 client/src/translations/en_us/common.json     |  1 +
 client/src/translations/es/common.json        |  1 +
 client/src/translations/fr/common.json        |  1 +
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
index f3bfe6fab..773881c68 100644
--- a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
+++ b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
@@ -2,7 +2,7 @@ import { useApolloClient, useMutation } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Modal, Space } from "antd";
 import _ from "lodash";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -53,6 +53,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
   const client = useApolloClient();
   const [generateLabel, setGenerateLabel] = useLocalStorage("enter_bill_generate_label", false);
   const notification = useNotification();
+  const formTopRef = useRef(null);
 
   const {
     treatments: { Enhanced_Payroll, Imgproxy }
@@ -447,13 +448,21 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         autoComplete={"off"}
         layout="vertical"
         form={form}
-        onFinishFailed={() => {
+        onFinishFailed={(errorInfo) => {
           setEnterAgain(false);
+          // Scroll to the top of the form to show validation errors
+          if (errorInfo.errorFields && errorInfo.errorFields.length > 0) {
+            setTimeout(() => {
+              formTopRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+            }, 100);
+          }
         }}
       >
-        <RbacWrapper action="bills:enter">
-          <BillFormContainer form={form} disableInvNumber={billEnterModal.context.disableInvNumber} />
-        </RbacWrapper>
+        <div ref={formTopRef}>
+          <RbacWrapper action="bills:enter">
+            <BillFormContainer form={form} disableInvNumber={billEnterModal.context.disableInvNumber} />
+          </RbacWrapper>
+        </div>
       </Form>
     </Modal>
   );
diff --git a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
index 56f4a5881..0f265d7db 100644
--- a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
+++ b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
@@ -39,11 +39,13 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
               {errors.length > 0 && (
                 <AlertComponent
                   type="error"
-                  title={
+                  message={t("general.labels.validationerror")}
+                  description={
                     <div>
                       <ul>{errors.map((e, idx) => e.errors.map((e2, idx2) => <li key={`${idx}${idx2}`}>{e2}</li>))}</ul>
                     </div>
                   }
+                  showIcon
                 />
               )}
             </Space>
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 626ab5e4c..e0659a985 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -1367,6 +1367,7 @@
         "unknown": "Unknown",
         "unsavedchanges": "Unsaved changes.",
         "username": "Username",
+        "validationerror": "Please fix the following errors:",
         "view": "View",
         "wednesday": "Wednesday",
         "yes": "Yes"
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 664c5081c..1e7663798 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -1367,6 +1367,7 @@
         "unknown": "Desconocido",
         "unsavedchanges": "",
         "username": "",
+        "validationerror": "",
         "view": "",
         "wednesday": "",
         "yes": ""
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 67a14d5ff..1d2fdfb5a 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -1367,6 +1367,7 @@
         "unknown": "Inconnu",
         "unsavedchanges": "",
         "username": "",
+        "validationerror": "",
         "view": "",
         "wednesday": "",
         "yes": ""