feat: adds research types and special population combo boxes to agree…

…ment edit form
HHS · Jan 30, 2025 · 9eead75 · 9eead75
1 parent 0d8ddf7
commit 9eead75
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 16 deletions.
diff --git a/frontend/src/components/Agreements/AgreementEditor/AgreementEditForm.jsx b/frontend/src/components/Agreements/AgreementEditor/AgreementEditForm.jsx
@@ -33,6 +33,8 @@ import {
     useSetState,
     useUpdateAgreement
 } from "./AgreementEditorContext.hooks";
+import ResearchTypeComboBox from "../ResearchTypeComboBox";
+import SpecialTopicComboBox from "../SpecialTopicComboBox";
 
 /**
  * Renders the "Create Agreement" step of the Create Agreement flow.
@@ -82,6 +84,8 @@ export const AgreementEditForm = ({
     const setAgreementNotes = useUpdateAgreement("notes");
     const setContractType = useUpdateAgreement("contract_type");
     const setServiceReqType = useUpdateAgreement("service_requirement_type");
+    const setResearchTypes = useUpdateAgreement("research_types");
+    const setSpecialPopulations = useUpdateAgreement("special_populations");
 
     const [showModal, setShowModal] = React.useState(false);
     const [modalProps, setModalProps] = React.useState({});
@@ -109,7 +113,9 @@ export const AgreementEditForm = ({
         agreement_reason: agreementReason,
         team_members: selectedTeamMembers,
         contract_type: contractType,
-        service_requirement_type: serviceReqType
+        service_requirement_type: serviceReqType,
+        research_types: researchTypes,
+        special_populations: specialPopulations
     } = agreement;
 
     const {
@@ -415,7 +421,6 @@ export const AgreementEditForm = ({
                     onChangeSelectedProcurementShop={handleOnChangeSelectedProcurementShop}
                 />
             </div>
-
             <div className="display-flex margin-top-3">
                 <AgreementReasonSelect
                     name="agreement_reason"
@@ -450,7 +455,28 @@ export const AgreementEditForm = ({
                     />
                 </fieldset>
             </div>
-
+            <div
+                className="margin-top-3"
+                style={{ maxWidth: "30rem" }}
+            >
+                <ResearchTypeComboBox
+                    researchTypes={researchTypes}
+                    setResearchTypes={setResearchTypes}
+                    messages={res.getErrors("research_types")}
+                    onChange={(name, value) => {
+                        runValidate(name, value);
+                    }}
+                />
+            </div>
+            <div
+                className="margin-top-3"
+                style={{ maxWidth: "30rem" }}
+            >
+                <SpecialTopicComboBox
+                    specialPopulations={specialPopulations}
+                    setSpecialPopulations={setSpecialPopulations}
+                />
+            </div>
             <div className="display-flex margin-top-3">
                 <ProjectOfficerComboBox
                     selectedProjectOfficer={selectedProjectOfficer}

diff --git a/frontend/src/components/Agreements/AgreementEditor/AgreementEditFormSuite.js b/frontend/src/components/Agreements/AgreementEditor/AgreementEditFormSuite.js
@@ -37,6 +37,9 @@ const suite = create((data = {}, fieldName) => {
         enforce(data.contract_type).notEquals("-Select an option-");
         enforce(data.contract_type).isNotEmpty();
     });
+    test("research_types", "This is required information", () => {
+        enforce(data.research_types).lengthNotEquals(0);
+    });
     test("team-members", "This is required information", () => {
         enforce(data.team_members).lengthNotEquals(0);
     });

diff --git a/frontend/src/components/Agreements/AgreementEditor/AgreementEditorContext.hooks.js b/frontend/src/components/Agreements/AgreementEditor/AgreementEditorContext.hooks.js
@@ -17,7 +17,9 @@ export const defaultState = {
         project_id: null,
         awarding_entity_id: null,
         contract_type: null,
-        service_requirement_type: SERVICE_REQ_TYPES.NON_SEVERABLE
+        service_requirement_type: SERVICE_REQ_TYPES.NON_SEVERABLE,
+        research_types:[],
+        special_populations: [],
     },
     selected_project: {},
     selected_product_service_code: {},

diff --git a/frontend/src/components/Agreements/ResearchTypeComboBox/ResearchTypeComboBox.jsx b/frontend/src/components/Agreements/ResearchTypeComboBox/ResearchTypeComboBox.jsx
@@ -1,8 +1,6 @@
-import React from "react";
 import ComboBox from "../../UI/Form/ComboBox";
 
-function ResearchTypeComboBox({ legendClassName = "usa-label margin-top-0" }) {
-    const [selected, setSelected] = React.useState([]);
+function ResearchTypeComboBox({ researchTypes, setResearchTypes, messages, onChange = () => {} }) {
     const data = [
         {
             id: 1,
@@ -35,22 +33,37 @@ function ResearchTypeComboBox({ legendClassName = "usa-label margin-top-0" }) {
             status: "TRANSLATION_AND_COMMUNICATION"
         }
     ];
+
+    const handleChange = (researchTypes) => {
+        setResearchTypes(researchTypes);
+        onChange("research_types", researchTypes);
+    };
     return (
         <div className="display-flex flex-column width-full">
             <label
-                className={legendClassName}
+                className={` ${messages.length ? "usa-label--error" : ""}`}
                 htmlFor="research-type-combobox-input"
             >
                 Research Type
             </label>
+            {messages?.length > 0 && (
+                <span
+                    className="usa-error-message"
+                    id="research-types-combobox-input-error-message"
+                    role="alert"
+                >
+                    {messages[0]}
+                </span>
+            )}
             <p className="usa-hint margin-top-neg-2px margin-bottom-1">Select all that apply</p>
             <ComboBox
-                selectedData={selected}
-                setSelectedData={setSelected}
+                selectedData={researchTypes}
+                setSelectedData={handleChange}
                 namespace="research-type-combobox"
                 data={data}
                 defaultString="not implemented yet"
                 isMulti={true}
+                messages={messages}
             />
         </div>
     );

diff --git a/frontend/src/components/Agreements/SpecialTopicComboBox/SpecialTopicComboBox.jsx b/frontend/src/components/Agreements/SpecialTopicComboBox/SpecialTopicComboBox.jsx
@@ -1,8 +1,10 @@
-import React from "react";
 import ComboBox from "../../UI/Form/ComboBox";
 
-function SpecialTopicComboBox({ legendClassName = "usa-label margin-top-0" }) {
-    const [selected, setSelected] = React.useState([]);
+function SpecialTopicComboBox({
+    specialPopulations,
+    setSpecialPopulations,
+    legendClassName = "usa-label margin-top-0"
+}) {
     const data = [
         {
             id: 1,
@@ -16,7 +18,7 @@ function SpecialTopicComboBox({ legendClassName = "usa-label margin-top-0" }) {
         },
         {
             id: 3,
-            title: "Indigenous/tribal/Native American populations",
+            title: "Indigenous/Tribal/Native American populations",
             status: "INDIGENOUS_TRIBAL_NATIVE_AMERICAN_POPULATIONS"
         },
         {
@@ -45,8 +47,8 @@ function SpecialTopicComboBox({ legendClassName = "usa-label margin-top-0" }) {
             </label>
             <p className="usa-hint margin-top-neg-2px margin-bottom-1">Select all that apply</p>
             <ComboBox
-                selectedData={selected}
-                setSelectedData={setSelected}
+                selectedData={specialPopulations}
+                setSelectedData={setSpecialPopulations}
                 namespace="research-type-combobox"
                 data={data}
                 defaultString="not implemented yet"