From 6ce389c6a49b83e1f795d008c0684557cece38f4 Mon Sep 17 00:00:00 2001
From: Sean Craig <sean.craig2@va.gov>
Date: Mon, 22 Jul 2024 10:17:10 -0500
Subject: [PATCH] fixed style for error message

---
 client/app/nonComp/pages/ReportPage.jsx       | 84 +++++++++++--------
 .../REPORT_PAGE_VALIDATION_ERRORS.json        |  1 +
 .../test/app/nonComp/pages/ReportPage.test.js |  3 +-
 3 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/client/app/nonComp/pages/ReportPage.jsx b/client/app/nonComp/pages/ReportPage.jsx
index 4f3caa5e921..70d9f14fcaa 100644
--- a/client/app/nonComp/pages/ReportPage.jsx
+++ b/client/app/nonComp/pages/ReportPage.jsx
@@ -148,11 +148,7 @@ const ReportPageButtons = ({
   );
 };
 
-const CheckBoxes = ({ header, options, name }) => {
-  const { field } = useController({
-    name
-  });
-  const [value, setValue] = React.useState({});
+const EventCheckboxGroup = ({ header, options, name, onChange }) => {
 
   return (
     <div>
@@ -164,12 +160,8 @@ const CheckBoxes = ({ header, options, name }) => {
             key={`${name}.${option.id}`}
             label={option.label}
             stronglabel
-            onChange={(val) => {
-              value[option.id] = val;
-              field.onChange(value);
-              setValue(value);
-            }}
             unpadded
+            onChange={(val) => onChange({ option, val })}
           />
         </div>
       ))}
@@ -177,46 +169,65 @@ const CheckBoxes = ({ header, options, name }) => {
   );
 };
 
-const RHFCheckboxGroup = ({ options, name }) => {
+const RHFCheckboxGroup = ({ options, name, control }) => {
   const { errors } = useFormContext();
 
   let fieldClasses = 'checkbox';
   const errorMessage = get(errors, name)?.message;
 
+  const { field } = useController({
+    control,
+    name
+  });
+
   if (errorMessage) {
     fieldClasses += ' usa-input-error';
     fieldClasses += ' less-error-padding';
   }
 
-  const errorSubMessage = 'Please select a checkbox from one of the sections below';
+  const [value, setValue] = React.useState({});
+
+  const onCheckboxClick = ({ option, val }) => {
+    value[option.id] = val;
+    field.onChange(value);
+    setValue(value);
+  };
 
   return (
     <fieldset>
       {name === 'specificEventType' ?
-        <div {...outerContainerStyling} className={fieldClasses}>
-          {errorMessage && <Alert type="error" title={errorMessage} message={errorSubMessage} />}
-          <CheckBoxes
-            header= "System"
-            options={options[0].system}
-            name={name}
-          />
-          <CheckBoxes
-            header= "General"
-            options={options[0].general}
-            name={name}
-          />
-          <CheckBoxes
-            header= "Requests"
-            options={options[0].requests}
-            name={name}
-          />
+        <div>
+          {errorMessage && <Alert type="error" message={ERRORS.AT_LEAST_ONE_CHECKBOX_OPTION} />}
+          <div {...outerContainerStyling} style={{ paddingTop: '30px' }} >
+            <EventCheckboxGroup
+              header="System"
+              options={options[0].system}
+              name={name}
+              onChange={onCheckboxClick}
+            />
+            <EventCheckboxGroup
+              header="General"
+              options={options[0].general}
+              name={name}
+              onChange={onCheckboxClick}
+            />
+            <EventCheckboxGroup
+              header="Requests"
+              options={options[0].requests}
+              name={name}
+              onChange={onCheckboxClick}
+            />
+          </div>
         </div> :
-        <div {...outerContainerStyling} className={fieldClasses}>
+        <div>
           {errorMessage ? <div className="usa-input-error-message">{ errorMessage }</div> : null}
-          <CheckBoxes
-            options={options}
-            name={name}
-          />
+          <div {...outerContainerStyling} className={fieldClasses}>
+            <EventCheckboxGroup
+              options={options}
+              name={name}
+              onChange={onCheckboxClick}
+            />
+          </div>
         </div>
       }
     </fieldset>
@@ -472,9 +483,10 @@ RHFCheckboxGroup.propTypes = {
   errorMessage: PropTypes.string
 };
 
-CheckBoxes.propTypes = {
-  header: PropTypes.string,
+EventCheckboxGroup.propTypes = {
   options: PropTypes.array,
+  onChange: PropTypes.func,
+  header: PropTypes.string,
   name: PropTypes.string
 };
 
diff --git a/client/constants/REPORT_PAGE_VALIDATION_ERRORS.json b/client/constants/REPORT_PAGE_VALIDATION_ERRORS.json
index 6757f9945d4..17ec7ce7621 100644
--- a/client/constants/REPORT_PAGE_VALIDATION_ERRORS.json
+++ b/client/constants/REPORT_PAGE_VALIDATION_ERRORS.json
@@ -8,5 +8,6 @@
   "END_DATE_SMALL": "End date must be greater than the start date",
   "DATE_FUTURE": "Date cannot be in the future",
   "AT_LEAST_ONE_OPTION": "Please select at least one option",
+  "AT_LEAST_ONE_CHECKBOX_OPTION": "Please select at least one checkbox from one of the sections below.",
   "MISSING_PERSONNEL": "Please select at least one team member"
 }
diff --git a/client/test/app/nonComp/pages/ReportPage.test.js b/client/test/app/nonComp/pages/ReportPage.test.js
index cd65243113e..000efd127af 100644
--- a/client/test/app/nonComp/pages/ReportPage.test.js
+++ b/client/test/app/nonComp/pages/ReportPage.test.js
@@ -13,6 +13,7 @@ import { getVhaUsers } from 'test/helpers/reportPageHelper';
 import CombinedNonCompReducer from 'app/nonComp/reducers';
 
 import REPORT_TYPE_CONSTANTS from 'constants/REPORT_TYPE_CONSTANTS';
+import * as ERRORS from 'constants/REPORT_PAGE_VALIDATION_ERRORS';
 
 describe('ReportPage', () => {
   const setup = (storeValues = {}) => {
@@ -422,7 +423,7 @@ describe('ReportPage', () => {
         await userEvent.click(generateTaskReport);
 
         await waitFor(() => {
-          expect(screen.getAllByText('Please select at least one option').length).toBe(1);
+          expect(screen.getAllByText(ERRORS.AT_LEAST_ONE_CHECKBOX_OPTION).length).toBe(1);
         });
 
       });