From 35a9feae4047f6bbf8b4cd3721d1151393d347d2 Mon Sep 17 00:00:00 2001
From: benmartin-coforma <126210497+benmartin-coforma@users.noreply.github.com>
Date: Wed, 22 Jan 2025 14:30:45 -0700
Subject: [PATCH] Disable delivery system edit buttons, unless selected (#91)

---
 services/app-api/forms/qms.ts                 | 64 +++++++++++--------
 .../src/components/report/Page.test.tsx       |  1 +
 .../ui-src/src/components/report/Page.tsx     |  3 +-
 .../report/QualityMeasureTable.test.tsx       | 28 ++++++++
 .../components/report/QualityMeasureTable.tsx | 11 +++-
 5 files changed, 78 insertions(+), 29 deletions(-)
 create mode 100644 services/ui-src/src/components/report/QualityMeasureTable.test.tsx

diff --git a/services/app-api/forms/qms.ts b/services/app-api/forms/qms.ts
index 43fd6b18..107965c7 100644
--- a/services/app-api/forms/qms.ts
+++ b/services/app-api/forms/qms.ts
@@ -6,6 +6,7 @@ import {
   MeasureTemplateName,
   MeasurePageTemplate,
 } from "../types/reports";
+import { DeliverySystem } from "../utils/constants";
 
 export const qmsReportTemplate: ReportTemplate = {
   type: ReportType.QMS,
@@ -312,16 +313,17 @@ export const qmsReportTemplate: ReportTemplate = {
         },
         {
           type: ElementType.Radio,
+          formKey: "delivery-method-radio",
           label: "Which delivery systems were used to report this measure?",
           value: [
-            { label: "Fee-For-Service (FFS)", value: "fee-for-service" },
+            { label: "Fee-For-Service (FFS)", value: DeliverySystem.FFS },
             {
               label: "Managed Long-Term Services and Supports (MLTSS)",
-              value: "managed-long-term-services-and-supports",
+              value: DeliverySystem.MLTSS,
             },
             {
               label: "Both FFS and MLTSS (separate)",
-              value: "both-ffs-and-mltss",
+              value: [DeliverySystem.FFS, DeliverySystem.MLTSS].join(","),
             },
           ],
         },
@@ -407,16 +409,17 @@ export const qmsReportTemplate: ReportTemplate = {
         },
         {
           type: ElementType.Radio,
+          formKey: "delivery-method-radio",
           label: "Which delivery systems were used to report this measure?",
           value: [
-            { label: "Fee-For-Service (FFS)", value: "fee-for-service" },
+            { label: "Fee-For-Service (FFS)", value: DeliverySystem.FFS },
             {
               label: "Managed Long-Term Services and Supports (MLTSS)",
-              value: "managed-long-term-services-and-supports",
+              value: DeliverySystem.MLTSS,
             },
             {
               label: "Both FFS and MLTSS (separate)",
-              value: "both-ffs-and-mltss",
+              value: [DeliverySystem.FFS, DeliverySystem.MLTSS].join(","),
             },
           ],
         },
@@ -503,16 +506,17 @@ export const qmsReportTemplate: ReportTemplate = {
         },
         {
           type: ElementType.Radio,
+          formKey: "delivery-method-radio",
           label: "Which delivery systems were used to report this measure?",
           value: [
-            { label: "Fee-For-Service (FFS)", value: "fee-for-service" },
+            { label: "Fee-For-Service (FFS)", value: DeliverySystem.FFS },
             {
               label: "Managed Long-Term Services and Supports (MLTSS)",
-              value: "managed-long-term-services-and-supports",
+              value: DeliverySystem.MLTSS,
             },
             {
               label: "Both FFS and MLTSS (separate)",
-              value: "both-ffs-and-mltss",
+              value: [DeliverySystem.FFS, DeliverySystem.MLTSS].join(","),
             },
           ],
         },
@@ -599,16 +603,17 @@ export const qmsReportTemplate: ReportTemplate = {
         },
         {
           type: ElementType.Radio,
+          formKey: "delivery-method-radio",
           label: "Which delivery systems were used to report this measure?",
           value: [
-            { label: "Fee-For-Service (FFS)", value: "fee-for-service" },
+            { label: "Fee-For-Service (FFS)", value: DeliverySystem.FFS },
             {
               label: "Managed Long-Term Services and Supports (MLTSS)",
-              value: "managed-long-term-services-and-supports",
+              value: DeliverySystem.MLTSS,
             },
             {
               label: "Both FFS and MLTSS (separate)",
-              value: "both-ffs-and-mltss",
+              value: [DeliverySystem.FFS, DeliverySystem.MLTSS].join(","),
             },
           ],
         },
@@ -695,16 +700,17 @@ export const qmsReportTemplate: ReportTemplate = {
         },
         {
           type: ElementType.Radio,
+          formKey: "delivery-method-radio",
           label: "Which delivery systems were used to report this measure?",
           value: [
-            { label: "Fee-For-Service (FFS)", value: "fee-for-service" },
+            { label: "Fee-For-Service (FFS)", value: DeliverySystem.FFS },
             {
               label: "Managed Long-Term Services and Supports (MLTSS)",
-              value: "managed-long-term-services-and-supports",
+              value: DeliverySystem.MLTSS,
             },
             {
               label: "Both FFS and MLTSS (separate)",
-              value: "both-ffs-and-mltss",
+              value: [DeliverySystem.FFS, DeliverySystem.MLTSS].join(","),
             },
           ],
         },
@@ -782,16 +788,17 @@ export const qmsReportTemplate: ReportTemplate = {
         },
         {
           type: ElementType.Radio,
+          formKey: "delivery-method-radio",
           label: "Which delivery systems were used to report this measure?",
           value: [
-            { label: "Fee-For-Service (FFS)", value: "fee-for-service" },
+            { label: "Fee-For-Service (FFS)", value: DeliverySystem.FFS },
             {
               label: "Managed Long-Term Services and Supports (MLTSS)",
-              value: "managed-long-term-services-and-supports",
+              value: DeliverySystem.MLTSS,
             },
             {
               label: "Both FFS and MLTSS (separate)",
-              value: "both-ffs-and-mltss",
+              value: [DeliverySystem.FFS, DeliverySystem.MLTSS].join(","),
             },
           ],
         },
@@ -868,16 +875,17 @@ export const qmsReportTemplate: ReportTemplate = {
         },
         {
           type: ElementType.Radio,
+          formKey: "delivery-method-radio",
           label: "Which delivery systems were used to report this measure?",
           value: [
-            { label: "Fee-For-Service (FFS)", value: "fee-for-service" },
+            { label: "Fee-For-Service (FFS)", value: DeliverySystem.FFS },
             {
               label: "Managed Long-Term Services and Supports (MLTSS)",
-              value: "managed-long-term-services-and-supports",
+              value: DeliverySystem.MLTSS,
             },
             {
               label: "Both FFS and MLTSS (separate)",
-              value: "both-ffs-and-mltss",
+              value: [DeliverySystem.FFS, DeliverySystem.MLTSS].join(","),
             },
           ],
         },
@@ -1034,16 +1042,17 @@ export const qmsReportTemplate: ReportTemplate = {
         },
         {
           type: ElementType.Radio,
+          formKey: "delivery-method-radio",
           label: "Which delivery systems were used to report this measure?",
           value: [
-            { label: "Fee-For-Service (FFS)", value: "fee-for-service" },
+            { label: "Fee-For-Service (FFS)", value: DeliverySystem.FFS },
             {
               label: "Managed Long-Term Services and Supports (MLTSS)",
-              value: "managed-long-term-services-and-supports",
+              value: DeliverySystem.MLTSS,
             },
             {
               label: "Both FFS and MLTSS (separate)",
-              value: "both-ffs-and-mltss",
+              value: [DeliverySystem.FFS, DeliverySystem.MLTSS].join(","),
             },
           ],
         },
@@ -1129,16 +1138,17 @@ export const qmsReportTemplate: ReportTemplate = {
         },
         {
           type: ElementType.Radio,
+          formKey: "delivery-method-radio",
           label: "Which delivery systems were used to report this measure?",
           value: [
-            { label: "Fee-For-Service (FFS)", value: "fee-for-service" },
+            { label: "Fee-For-Service (FFS)", value: DeliverySystem.FFS },
             {
               label: "Managed Long-Term Services and Supports (MLTSS)",
-              value: "managed-long-term-services-and-supports",
+              value: DeliverySystem.MLTSS,
             },
             {
               label: "Both FFS and MLTSS (separate)",
-              value: "both-ffs-and-mltss",
+              value: [DeliverySystem.FFS, DeliverySystem.MLTSS].join(","),
             },
           ],
         },
diff --git a/services/ui-src/src/components/report/Page.test.tsx b/services/ui-src/src/components/report/Page.test.tsx
index 640d96ca..ead23d4c 100644
--- a/services/ui-src/src/components/report/Page.test.tsx
+++ b/services/ui-src/src/components/report/Page.test.tsx
@@ -21,6 +21,7 @@ mockedUseStore.mockReturnValue(mockUseStore);
 jest.mock("react-hook-form", () => ({
   useFormContext: () => ({
     register: jest.fn(),
+    getValues: jest.fn(),
   }),
 }));
 
diff --git a/services/ui-src/src/components/report/Page.tsx b/services/ui-src/src/components/report/Page.tsx
index e0691778..5e7ad9e4 100644
--- a/services/ui-src/src/components/report/Page.tsx
+++ b/services/ui-src/src/components/report/Page.tsx
@@ -52,9 +52,10 @@ export const Page = ({ elements }: Props) => {
 
   const composedElements = elements.map((element, index) => {
     const ComposedElement = renderElement(element);
+    const formKey = (element as any).formKey ?? buildFormKey(index);
     return (
       <ComposedElement
-        formkey={buildFormKey(index)}
+        formkey={formKey}
         key={index}
         element={element}
         disabled={!userIsEndUser}
diff --git a/services/ui-src/src/components/report/QualityMeasureTable.test.tsx b/services/ui-src/src/components/report/QualityMeasureTable.test.tsx
new file mode 100644
index 00000000..60fd4821
--- /dev/null
+++ b/services/ui-src/src/components/report/QualityMeasureTable.test.tsx
@@ -0,0 +1,28 @@
+import { QualityMeasureTableElement } from "./QualityMeasureTable";
+import { render, screen } from "@testing-library/react";
+import { useStore } from "utils";
+import { mockUseStore } from "utils/testing/setupJest";
+
+jest.mock("utils/state/useStore");
+const mockedUseStore = useStore as jest.MockedFunction<typeof useStore>;
+mockedUseStore.mockReturnValue({ ...mockUseStore });
+
+jest.mock("react-hook-form", () => ({
+  useFormContext: jest.fn().mockReturnValue({
+    getValues: jest.fn().mockReturnValue({ answer: "FFS" }),
+  }),
+}));
+
+describe("Quality Measure Table", () => {
+  it("should enable each delivery system's button correctly", () => {
+    render(<QualityMeasureTableElement />);
+
+    const ffsRow = screen.getByRole("row", { name: /FFS CMIT# 960/ });
+    const ffsButton = ffsRow.querySelector("button");
+    expect(ffsButton).toBeEnabled();
+
+    const mltssRow = screen.getByRole("row", { name: /MLTSS CMIT# 960/ });
+    const mltssButton = mltssRow.querySelector("button");
+    expect(mltssButton).toBeDisabled();
+  });
+});
diff --git a/services/ui-src/src/components/report/QualityMeasureTable.tsx b/services/ui-src/src/components/report/QualityMeasureTable.tsx
index 1324c84c..946f21a7 100644
--- a/services/ui-src/src/components/report/QualityMeasureTable.tsx
+++ b/services/ui-src/src/components/report/QualityMeasureTable.tsx
@@ -11,13 +11,18 @@ import {
 import { useStore } from "utils";
 import { TableStatusIcon } from "components/tables/TableStatusIcon";
 import { CMIT_LIST } from "cmit";
+import { useFormContext } from "react-hook-form";
 
 export const QualityMeasureTableElement = () => {
   const { cmit } = useStore();
   const cmitInfo = CMIT_LIST.find((item) => item.cmit === cmit);
+  const form = useFormContext();
 
   // Build Rows
   const rows = cmitInfo?.deliverySystem.map((system, index) => {
+    const selections = form.getValues("delivery-method-radio")?.answer ?? "";
+    const deliverySystemIsSelected = selections.split(",").includes(system);
+
     return (
       <Tr key={index}>
         <Td>
@@ -28,7 +33,11 @@ export const QualityMeasureTableElement = () => {
           <Text>CMIT# {cmit}</Text>
         </Td>
         <Td>
-          <Button variant="outline" onClick={() => {}}>
+          <Button
+            variant="outline"
+            disabled={!deliverySystemIsSelected}
+            onClick={() => {}}
+          >
             Edit
           </Button>
         </Td>