IO-3537 Bill Entry Scroll to Top for Errors

Signed-off-by: Allan Carr <allan@imexsystems.ca>

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

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>

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"

client/src/translations/es/common.json

@@ -1367,6 +1367,7 @@
         "unknown": "Desconocido",
         "unsavedchanges": "",
         "username": "",
+        "validationerror": "",
         "view": "",
         "wednesday": "",
         "yes": ""

client/src/translations/fr/common.json

@@ -1367,6 +1367,7 @@
         "unknown": "Inconnu",
         "unsavedchanges": "",
         "username": "",
+        "validationerror": "",
         "view": "",
         "wednesday": "",
         "yes": ""