diff --git a/services/ui-src/src/components/fields/Integer.jsx b/services/ui-src/src/components/fields/Integer.jsx index ecd344142..a3246256f 100644 --- 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 index 54f8672ab..3c4bb0a23 100644 --- 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("", () => { id: "2023-00-a-01-01", label: "Example Question", answer: { entry: "5" }, - mask: "lessThanEleven", + mask: lteMask, }, printView: true, }; @@ -130,7 +134,7 @@ describe("", () => { id: "2023-00-a-01-01", label: "Example Question", answer: { entry: "12" }, - mask: "lessThanEleven", + mask: lteMask, }, printView: true, }; @@ -145,7 +149,7 @@ describe("", () => { 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 index 4f408b5bd..b178a4415 100644 --- 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 (
@@ -48,7 +59,7 @@ const SynthesizedTable = ({ question, tableTitle }) => { > - {question.fieldset_info.headers.map((header, index) => ( + {headers.map((header, index) => ( {header.contents} diff --git a/services/ui-src/src/components/fields/SynthesizedValue.jsx b/services/ui-src/src/components/fields/SynthesizedValue.jsx index dba9a6d73..df824cf36 100644 --- 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 ( -
- Computed: {value} - {question.questions && - question.questions.map((q) => ( - - ))} -
+ showValue && ( +
+ Computed: {renderValue()} + {question.questions && + question.questions.map((q) => ( + + ))} +
+ ) ); }; SynthesizedValue.propTypes = { diff --git a/services/ui-src/src/util/constants.js b/services/ui-src/src/util/constants.js index c34bb3f1a..6c4dcbebd 100644 --- 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";