[CMDCT-3976] <11 Print View Fix (#139751)

Enterprise-CMCS · Sep 12, 2024 · 26eed16 · 26eed16
1 parent 5ceb795
commit 26eed16
Show file tree

Hide file tree

Showing 14 changed files with 3,812 additions and 10,960 deletions.
diff --git a/services/app-api/libs/validation/backend-section.schema.ts b/services/app-api/libs/validation/backend-section.schema.ts
@@ -359,6 +359,9 @@ export const sectionSchema = {
           hint: {
             type: "string",
           },
+          mask: {
+            type: "string",
+          },
           questions: {
             type: "array",
             items: {

diff --git a/services/database/data/seed-local/seed-section.json b/services/database/data/seed-local/seed-section.json
diff --git a/services/ui-src/src/components/fields/DataGrid.jsx b/services/ui-src/src/components/fields/DataGrid.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import Question from "./Question";
 import { ADD_TO_TOTAL, FINISH_CALCULATION } from "../../store/lastYearTotals";
 
-const DataGrid = ({ question }) => {
+const DataGrid = ({ question, printView }) => {
   const [renderQuestions, setRenderQuestions] = useState([]);
   const [questionsToSet, setQuestionsToSet] = useState([]);
   const lastYearFormData = useSelector((state) => state.lastYearFormData);
@@ -139,6 +139,7 @@ const DataGrid = ({ question }) => {
               hideNumber={question.type !== "fieldset"}
               question={question.question}
               prevYear={question.prevYear}
+              printView={printView}
             />
           </div>
         );
@@ -149,6 +150,7 @@ const DataGrid = ({ question }) => {
 
 DataGrid.propTypes = {
   question: PropTypes.object.isRequired,
+  printView: PropTypes.bool,
 };
 
 export default DataGrid;
diff --git a/services/ui-src/src/components/fields/Integer.jsx b/services/ui-src/src/components/fields/Integer.jsx
@@ -47,7 +47,7 @@ const getPrevYearValue = (question, lastYearFormData) => {
   return prevYearValue;
 };
 
-const Integer = ({ onChange, question, prevYear, ...props }) => {
+const Integer = ({ onChange, question, prevYear, printView, ...props }) => {
   const [error, setError] = useState(false);
   const [answer, setAnswer] = useState(question.answer.entry);
   const lastYearFormData = useSelector((state) => state.lastYearFormData);
@@ -67,11 +67,23 @@ const Integer = ({ onChange, question, prevYear, ...props }) => {
     }
   };
 
+  const isLessThanElevenMask = (value) => {
+    return (
+      printView &&
+      question.mask === "lessThanEleven" &&
+      value <= 10 &&
+      value > 0
+    );
+  };
+
   const renderAnswer = () => {
     if (answer === null) {
-      return getPrevYearValue(question, lastYearFormData) ?? prevYear?.value;
+      const value =
+        getPrevYearValue(question, lastYearFormData) ?? prevYear?.value;
+      if (isLessThanElevenMask(value)) return "<11";
+      return value;
     } else {
-      // may attempt to rerender string on page load, so both answer || isInteger
+      if (isLessThanElevenMask(answer)) return "<11";
       return answer || Number.isInteger(answer) ? answer : "";
     }
   };
@@ -93,6 +105,7 @@ Integer.propTypes = {
   onChange: PropTypes.func.isRequired,
   question: PropTypes.object.isRequired,
   prevYear: PropTypes.object,
+  printView: PropTypes.bool,
 };
 
 export default Integer;
diff --git a/services/ui-src/src/components/fields/Integer.test.jsx b/services/ui-src/src/components/fields/Integer.test.jsx
@@ -47,6 +47,7 @@ const buildInteger = (intProps) => {
     </Provider>
   );
 };
+
 describe("<Integer />", () => {
   it("should render correctly", () => {
     const props = { question: { id: "2023-00-a-01-01", answer: 1 } };
@@ -62,7 +63,7 @@ describe("<Integer />", () => {
     const props = {
       question: {
         id: "2023-00-a-01-01",
-        label: "How many lightbulbs does it take to change a man?",
+        label: "Example Question",
         answer: { entry: 123 },
       },
     };
@@ -78,7 +79,7 @@ describe("<Integer />", () => {
     const props = {
       question: {
         id: "2023-00-a-01-01",
-        label: "How many lightbulbs does it take to change a man?",
+        label: "Example Question",
         answer: { entry: 123 },
       },
     };
@@ -94,7 +95,7 @@ describe("<Integer />", () => {
     const props = {
       question: {
         id: "2023-00-a-01-01",
-        label: "How many lightbulbs does it take to change a man?",
+        label: "Example Question",
         answer: { entry: "hope" },
       },
     };
@@ -107,6 +108,52 @@ describe("<Integer />", () => {
     expect(screen.getByRole("alert")).toBeInTheDocument();
   });
 
+  it("should show <11 if passed >0 and <=10 with printView and lessThanEleven", () => {
+    const props = {
+      question: {
+        id: "2023-00-a-01-01",
+        label: "Example Question",
+        answer: { entry: "5" },
+        mask: "lessThanEleven",
+      },
+      printView: true,
+    };
+
+    render(buildInteger(props));
+    expect(screen.getByDisplayValue("<11")).toBeInTheDocument();
+    expect(screen.queryByDisplayValue("5")).not.toBeInTheDocument();
+  });
+
+  it("should show original answer if passed >=11 with printView and lessThanEleven mask", () => {
+    const props = {
+      question: {
+        id: "2023-00-a-01-01",
+        label: "Example Question",
+        answer: { entry: "12" },
+        mask: "lessThanEleven",
+      },
+      printView: true,
+    };
+
+    render(buildInteger(props));
+    expect(screen.getByDisplayValue("12")).toBeInTheDocument();
+  });
+
+  it("should show original answer if passed 0 with printView and lessThanEleven mask", () => {
+    const props = {
+      question: {
+        id: "2023-00-a-01-01",
+        label: "Example Question",
+        answer: { entry: "0" },
+        mask: "lessThanEleven",
+      },
+      printView: true,
+    };
+
+    render(buildInteger(props));
+    expect(screen.getByDisplayValue("0")).toBeInTheDocument();
+  });
+
   it("should render previous year value for appropriate 3c part 5 or 6 questions", () => {
     const props = {
       question: {

diff --git a/services/ui-src/src/components/fields/Objective.jsx b/services/ui-src/src/components/fields/Objective.jsx
@@ -4,14 +4,13 @@ import { AccordionButton, AccordionPanel } from "@reach/accordion";
 
 import Question from "./Question";
 
-const Objective = ({ headerRef, objective, objectiveNumber }) => {
+const Objective = ({ headerRef, objective, objectiveNumber, printView }) => {
   const first = objective.questions[0].answer.readonly === true;
   const name = first
     ? objective.questions[0].answer.default_entry
     : objective.questions[0].answer.entry;
 
   const children = first ? objective.questions.slice(1) : objective.questions;
-
   return (
     <>
       <div className="accordion-header" ref={headerRef}>
@@ -27,7 +26,7 @@ const Objective = ({ headerRef, objective, objectiveNumber }) => {
       <AccordionPanel>
         {children.map((q) => (
           <div className="ds-c-choice__checkedChild">
-            <Question key={q.id} question={q} />
+            <Question key={q.id} question={q} printView={printView} />
           </div>
         ))}
       </AccordionPanel>
@@ -38,6 +37,7 @@ Objective.propTypes = {
   headerRef: PropTypes.func.isRequired,
   objective: PropTypes.object.isRequired,
   objectiveNumber: PropTypes.number.isRequired,
+  printView: PropTypes.bool,
 };
 
 export { Objective };

diff --git a/services/ui-src/src/components/fields/Objectives.jsx b/services/ui-src/src/components/fields/Objectives.jsx
@@ -16,9 +16,9 @@ const Objectives = ({
   disabled,
   question,
   removeObjectiveFrom,
+  printView,
 }) => {
   const ref = useRef();
-
   const add = () => {
     addObjectiveTo(question.id);
 
@@ -47,7 +47,12 @@ const Objectives = ({
       >
         {question.questions.map((q, i) => (
           <AccordionItem key={q.id}>
-            <Objective headerRef={ref} objective={q} objectiveNumber={i + 1} />
+            <Objective
+              headerRef={ref}
+              objective={q}
+              objectiveNumber={i + 1}
+              printView={printView}
+            />
           </AccordionItem>
         ))}
 
@@ -92,6 +97,7 @@ Objectives.propTypes = {
   disabled: PropTypes.bool.isRequired,
   question: PropTypes.object.isRequired,
   removeObjectiveFrom: PropTypes.func.isRequired,
+  printView: PropTypes.bool,
 };
 
 const mapDispatchToProps = {

diff --git a/services/ui-src/src/components/fields/Question.jsx b/services/ui-src/src/components/fields/Question.jsx
@@ -57,7 +57,14 @@ Container.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-const Question = ({ hideNumber, question, prevYear, tableTitle, ...props }) => {
+const Question = ({
+  hideNumber,
+  question,
+  prevYear,
+  tableTitle,
+  printView,
+  ...props
+}) => {
   let Component = Text;
   if (questionTypes.has(question.type)) {
     Component = questionTypes.get(question.type);
@@ -144,6 +151,7 @@ const Question = ({ hideNumber, question, prevYear, tableTitle, ...props }) => {
             false
           }
           prevYear={prevYear}
+          printView={printView}
         />
 
         {/* If there are subquestions, wrap them so they are indented with the
@@ -153,7 +161,12 @@ const Question = ({ hideNumber, question, prevYear, tableTitle, ...props }) => {
         {shouldRenderChildren && (
           <div className="ds-c-choice__checkedChild">
             {question.questions.map((q) => (
-              <Question key={q.id} question={q} setAnswer={setAnswerEntry} />
+              <Question
+                key={q.id}
+                question={q}
+                setAnswer={setAnswerEntry}
+                printView={printView}
+              />
             ))}
           </div>
         )}
@@ -167,6 +180,7 @@ Question.propTypes = {
   question: PropTypes.object.isRequired,
   prevYear: PropTypes.object,
   tableTitle: PropTypes.string,
+  printView: PropTypes.bool,
 };
 Question.defaultProps = {
   hideNumber: false,

diff --git a/services/ui-src/src/components/fields/Repeatable.jsx b/services/ui-src/src/components/fields/Repeatable.jsx
@@ -4,7 +4,7 @@ import { AccordionButton, AccordionPanel } from "@reach/accordion";
 
 import Question from "./Question";
 
-const Repeatable = ({ headerRef, number, question, type }) => {
+const Repeatable = ({ headerRef, number, question, type, printView }) => {
   const children = question.questions ? question.questions : [];
 
   const title = type ? `${type} ${number}` : `${number}`;
@@ -20,7 +20,7 @@ const Repeatable = ({ headerRef, number, question, type }) => {
       </div>
       <AccordionPanel>
         {children.map((q) => (
-          <Question key={q.id} question={q} />
+          <Question key={q.id} question={q} printView={printView} />
         ))}
       </AccordionPanel>
     </>
@@ -31,6 +31,7 @@ Repeatable.propTypes = {
   number: PropTypes.number.isRequired,
   question: PropTypes.object.isRequired,
   type: PropTypes.oneOf([PropTypes.string, null]),
+  printView: PropTypes.bool,
 };
 
 Repeatable.defaultProps = {

diff --git a/services/ui-src/src/components/fields/Repeatables.jsx b/services/ui-src/src/components/fields/Repeatables.jsx
@@ -17,6 +17,7 @@ const Repeatables = ({
   question,
   removeRepeatableFrom,
   type,
+  printView,
 }) => {
   const ref = useRef();
 
@@ -62,6 +63,7 @@ const Repeatables = ({
               number={i + 1}
               question={q}
               type={question.typeLabel ? question.typeLabel : type}
+              printView={printView}
             />
           </AccordionItem>
         ))}
@@ -107,6 +109,7 @@ Repeatables.propTypes = {
   question: PropTypes.object.isRequired,
   removeRepeatableFrom: PropTypes.func.isRequired,
   type: PropTypes.oneOf([PropTypes.string, null]),
+  printView: PropTypes.bool,
 };
 Repeatables.defaultProps = {
   type: null,

diff --git a/services/ui-src/src/components/layout/Part.jsx b/services/ui-src/src/components/layout/Part.jsx
@@ -9,7 +9,7 @@ import { selectFragment } from "../../store/formData";
 import { selectQuestionsForPart } from "../../store/selectors";
 import { shouldDisplay } from "../../util/shouldDisplay";
 
-const Part = ({ partId, partNumber, nestedSubsectionTitle }) => {
+const Part = ({ partId, partNumber, nestedSubsectionTitle, printView }) => {
   const [, section] = partId.split("-");
 
   const [
@@ -67,6 +67,7 @@ const Part = ({ partId, partNumber, nestedSubsectionTitle }) => {
               question={question}
               tableTitle={title}
               data-testid="part-question"
+              printView={printView}
             />
           ))}
         </>

diff --git a/services/ui-src/src/components/layout/Section.jsx b/services/ui-src/src/components/layout/Section.jsx
@@ -8,7 +8,7 @@ import FormNavigation from "./FormNavigation";
 import FormActions from "./FormActions";
 import Autosave from "../fields/Autosave";
 
-const Section = ({ subsectionId, sectionId }) => {
+const Section = ({ subsectionId, sectionId, printView }) => {
   const formData = useSelector((state) => state.formData);
   const title = selectSectionTitle(formData, sectionId);
 
@@ -17,7 +17,11 @@ const Section = ({ subsectionId, sectionId }) => {
       <main id="main-content" className="main">
         <PageInfo />
         <h2 data-testid="section-title">{title}</h2>
-        <Subsection key={subsectionId} subsectionId={subsectionId} />
+        <Subsection
+          key={subsectionId}
+          subsectionId={subsectionId}
+          printView={printView}
+        />
       </main>
       <div className="form-footer">
         <Autosave />
@@ -30,6 +34,7 @@ const Section = ({ subsectionId, sectionId }) => {
 Section.propTypes = {
   subsectionId: PropTypes.string.isRequired,
   sectionId: PropTypes.number.isRequired,
+  printView: PropTypes.bool,
 };
 
 export default Section;
diff --git a/services/ui-src/src/components/layout/Subsection.jsx b/services/ui-src/src/components/layout/Subsection.jsx
@@ -8,7 +8,7 @@ import { selectSubsectionTitleAndPartIDs } from "../../store/selectors";
 //types
 import PropTypes from "prop-types";
 
-const Subsection = ({ subsectionId }) => {
+const Subsection = ({ subsectionId, printView }) => {
   const formData = useSelector((state) => state.formData);
 
   const subsection = selectSubsectionTitleAndPartIDs(formData, subsectionId);
@@ -31,13 +31,15 @@ const Subsection = ({ subsectionId }) => {
           partId={partId}
           partNumber={partIds.length > 1 ? index + 1 : null}
           nestedSubsectionTitle={!!title}
+          printView={printView}
         />
       ))}
     </div>
   );
 };
 Subsection.propTypes = {
   subsectionId: PropTypes.string.isRequired,
+  printView: PropTypes.bool,
 };
 Subsection.defaultProps = {
   text: null,