[CMDCT-4013] Hide Some Calculated Values in Print View (#139775)

Enterprise-CMCS · Sep 25, 2024 · bca1f76 · bca1f76
1 parent 7a88f62
commit bca1f76
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 35 deletions.
diff --git a/services/ui-src/src/components/fields/Integer.jsx b/services/ui-src/src/components/fields/Integer.jsx
@@ -1,8 +1,11 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { TextField } from "@cmsgov/design-system";
 import { useSelector } from "react-redux";
+import { TextField } from "@cmsgov/design-system";
+//utils
 import { generateQuestionNumber } from "../utils/helperFunctions";
+import { lteMask } from "../../util/constants";
+//types
+import PropTypes from "prop-types";
 
 const getPrevYearValue = (question, lastYearFormData) => {
   let prevYearValue;
@@ -68,12 +71,7 @@ const Integer = ({ onChange, question, prevYear, printView, ...props }) => {
   };
 
   const isLessThanElevenMask = (value) => {
-    return (
-      printView &&
-      question.mask === "lessThanEleven" &&
-      value <= 10 &&
-      value > 0
-    );
+    return printView && question.mask === lteMask && value <= 10 && value > 0;
   };
 
   const renderAnswer = () => {

diff --git a/services/ui-src/src/components/fields/Integer.test.jsx b/services/ui-src/src/components/fields/Integer.test.jsx
@@ -1,9 +1,13 @@
 import React from "react";
 import { Provider } from "react-redux";
-import configureMockStore from "redux-mock-store";
+//testing
 import { shallow, mount } from "enzyme";
-import Integer from "./Integer";
+import configureMockStore from "redux-mock-store";
 import { screen, render, fireEvent } from "@testing-library/react";
+//components
+import Integer from "./Integer";
+//utils
+import { lteMask } from "../../util/constants";
 
 const mockStore = configureMockStore();
 const lastYearFormData = [
@@ -114,7 +118,7 @@ describe("<Integer />", () => {
         id: "2023-00-a-01-01",
         label: "Example Question",
         answer: { entry: "5" },
-        mask: "lessThanEleven",
+        mask: lteMask,
       },
       printView: true,
     };
@@ -130,7 +134,7 @@ describe("<Integer />", () => {
         id: "2023-00-a-01-01",
         label: "Example Question",
         answer: { entry: "12" },
-        mask: "lessThanEleven",
+        mask: lteMask,
       },
       printView: true,
     };
@@ -145,7 +149,7 @@ describe("<Integer />", () => {
         id: "2023-00-a-01-01",
         label: "Example Question",
         answer: { entry: "0" },
-        mask: "lessThanEleven",
+        mask: lteMask,
       },
       printView: true,
     };

diff --git a/services/ui-src/src/components/fields/SynthesizedTable.jsx b/services/ui-src/src/components/fields/SynthesizedTable.jsx
@@ -2,10 +2,11 @@ import React from "react";
 import { useSelector, shallowEqual } from "react-redux";
 //utils
 import synthesizeValue from "../../util/synthesize";
+import { lteMask } from "../../util/constants";
 //types
 import PropTypes from "prop-types";
 
-const SynthesizedTable = ({ question, tableTitle }) => {
+const SynthesizedTable = ({ question, tableTitle, printView }) => {
   const [allStatesData, stateName, stateUserAbbr, chipEnrollments, formData] =
     useSelector(
       (state) => [
@@ -18,8 +19,12 @@ const SynthesizedTable = ({ question, tableTitle }) => {
       shallowEqual
     );
 
-  const rows = question.fieldset_info.rows.map((row) =>
-    row.map((cell) => {
+  const rows = question.fieldset_info.rows.map((row) => {
+    let contents = row;
+    if (printView) {
+      contents = row.filter((cell) => cell?.mask !== lteMask);
+    }
+    return contents.map((cell) => {
       const value = synthesizeValue(
         cell,
         allStatesData,
@@ -32,8 +37,14 @@ const SynthesizedTable = ({ question, tableTitle }) => {
       return typeof value.contents === "number" && Number.isNaN(value.contents)
         ? { contents: "Not Available" }
         : value;
-    })
-  );
+    });
+  });
+
+  const headers = printView
+    ? question.fieldset_info.headers.filter(
+        (header) => header?.mask !== lteMask
+      )
+    : question.fieldset_info.headers;
 
   return (
     <div className="synthesized-table ds-u-margin-top--2">
@@ -48,7 +59,7 @@ const SynthesizedTable = ({ question, tableTitle }) => {
       >
         <thead>
           <tr>
-            {question.fieldset_info.headers.map((header, index) => (
+            {headers.map((header, index) => (
               <th scope="col" key={index}>
                 {header.contents}
               </th>

diff --git a/services/ui-src/src/components/fields/SynthesizedValue.jsx b/services/ui-src/src/components/fields/SynthesizedValue.jsx
@@ -4,10 +4,11 @@ import { useSelector, shallowEqual } from "react-redux";
 import Question from "./Question";
 //utils
 import synthesizeValue from "../../util/synthesize";
+import { lteMask } from "../../util/constants";
 //types
 import PropTypes from "prop-types";
 
-const SynthesizedValue = ({ question, ...props }) => {
+const SynthesizedValue = ({ question, printView, ...props }) => {
   const [allStatesData, stateName, stateUserAbbr, chipEnrollments, formData] =
     useSelector(
       (state) => [
@@ -20,23 +21,29 @@ const SynthesizedValue = ({ question, ...props }) => {
       shallowEqual
     );
 
-  const value = synthesizeValue(
-    question.fieldset_info,
-    allStatesData,
-    stateName,
-    stateUserAbbr,
-    chipEnrollments,
-    formData
-  ).contents;
+  const showValue = !(printView && question.fieldset_info.mask === lteMask);
+
+  const renderValue = () => {
+    return synthesizeValue(
+      question.fieldset_info,
+      allStatesData,
+      stateName,
+      stateUserAbbr,
+      chipEnrollments,
+      formData
+    ).contents;
+  };
 
   return (
-    <div>
-      <strong>Computed:</strong> {value}
-      {question.questions &&
-        question.questions.map((q) => (
-          <Question key={q.id} question={q} {...props} />
-        ))}
-    </div>
+    showValue && (
+      <div>
+        <strong>Computed:</strong> {renderValue()}
+        {question.questions &&
+          question.questions.map((q) => (
+            <Question key={q.id} question={q} {...props} />
+          ))}
+      </div>
+    )
   );
 };
 SynthesizedValue.propTypes = {

diff --git a/services/ui-src/src/util/constants.js b/services/ui-src/src/util/constants.js
@@ -1,2 +1,4 @@
 // import.meta.env is threaded through here in order to mock it out for jest
 export const { MODE, BASE_URL } = import.meta.env;
+
+export const lteMask = "lessThanEleven";