Make SensitiveTopicsTooltipModal more composable

CDCgov · Nov 5, 2024 · f1d1da0 · f1d1da0
1 parent 8e4aa72
commit f1d1da0
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 22 deletions.
diff --git a/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/HIVAoEForm.tsx b/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/HIVAoEForm.tsx
@@ -6,6 +6,7 @@ import MultiSelect from "../../../commonComponents/MultiSelect/MultiSelect";
 import { AoeQuestionResponses } from "../TestCardFormReducer";
 import { QueriedTestOrder } from "../types";
 import { useTranslatedConstants } from "../../../constants";
+import { AoeQuestionName } from "../TestCardForm.utils";
 
 import {
   generateAoeListenerHooks,
@@ -78,7 +79,14 @@ export const HIVAoEForm = ({
             validationStatus={
               showGenderOfSexualPartnersError ? "error" : undefined
             }
-            hintText={<SensitiveTopicsTooltipModal />}
+            hintText={
+              <SensitiveTopicsTooltipModal
+                aoeQuestionTopics={[
+                  AoeQuestionName.GENDER_OF_SEXUAL_PARTNERS,
+                  AoeQuestionName.PREGNANCY,
+                ]}
+              />
+            }
             hintTextClassName={""}
             errorMessage={
               showGenderOfSexualPartnersError &&

diff --git a/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/HepatitisCAoeForm.tsx b/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/HepatitisCAoeForm.tsx
@@ -8,13 +8,15 @@ import YesNoRadioGroup from "../../../commonComponents/YesNoRadioGroup";
 import Checkboxes from "../../../commonComponents/Checkboxes";
 import TextInput from "../../../commonComponents/TextInput";
 import { formatDate } from "../../../utils/date";
+import { AoeQuestionName } from "../TestCardForm.utils";
 
 import {
   generateAoeListenerHooks,
   generateSymptomAoeConstants,
 } from "./aoeUtils";
 import { PregnancyAoe } from "./aoeQuestionComponents/PregnancyAoe";
 import { GenderOfSexualPartnersAoe } from "./aoeQuestionComponents/GenderOfSexualPartnersAoe";
+import { SensitiveTopicsTooltipModal } from "./SensitiveTopicsTooltipModal";
 
 interface HepatitisCAoeFormProps {
   testOrder: QueriedTestOrder;
@@ -58,6 +60,14 @@ export const HepatitisCAoeForm = ({
             hasAttemptedSubmit={hasAttemptedSubmit}
             onResponseChange={onResponseChange}
             required
+            sensitiveTopicsTooltipModal={
+              <SensitiveTopicsTooltipModal
+                aoeQuestionTopics={[
+                  AoeQuestionName.GENDER_OF_SEXUAL_PARTNERS,
+                  AoeQuestionName.PREGNANCY,
+                ]}
+              />
+            }
           />
         </div>
       </div>

diff --git a/.../src/app/testQueue/TestCardForm/diseaseSpecificComponents/SensitiveTopicsTooltipModal.tsx b/.../src/app/testQueue/TestCardForm/diseaseSpecificComponents/SensitiveTopicsTooltipModal.tsx
@@ -3,17 +3,18 @@ import { Button } from "@trussworks/react-uswds";
 
 import { TextWithTooltipButton } from "../../../commonComponents/TextWithTooltipButton";
 import Modal from "../../../commonComponents/Modal";
+import { AoeQuestionName } from "../TestCardForm.utils";
 
 interface Props {
   tooltipText?: string;
   modalTitle?: string;
-  showSyphilis?: boolean;
+  aoeQuestionTopics: AoeQuestionName[];
 }
 
 export const SensitiveTopicsTooltipModal = ({
   tooltipText = "Why SimpleReport asks about sensitive topics like this",
   modalTitle = "Why we ask for gender of sexual partners and other sensitive topics",
-  showSyphilis = false,
+  aoeQuestionTopics,
 }: Props): React.ReactElement => {
   const [modalIsOpen, setModalIsOpen] = React.useState(false);
 
@@ -32,21 +33,33 @@ export const SensitiveTopicsTooltipModal = ({
         <Modal.Header styleClassNames={"font-sans-lg line-height-sans-3"}>
           {modalTitle}
         </Modal.Header>
-        <h2 className={"font-sans-md margin-bottom-05em"}>
-          Gender of sexual partners
-        </h2>
-        <p className={"margin-top-05em"}>
-          This helps public health departments understand which types of sexual
-          connections are leading to STI spread and understand which populations
-          to focus their support on.
-        </p>
-        <h2 className={"font-sans-md margin-bottom-05em"}>Patient pregnancy</h2>
-        <p className={"margin-top-05em"}>
-          If a patient is pregnant, this increases the public health
-          department's prioritization of the patient's care as STIs can pass
-          onto the child.
-        </p>
-        {showSyphilis && (
+        {aoeQuestionTopics.includes(
+          AoeQuestionName.GENDER_OF_SEXUAL_PARTNERS
+        ) && (
+          <>
+            <h2 className={"font-sans-md margin-bottom-05em"}>
+              Gender of sexual partners
+            </h2>
+            <p className={"margin-top-05em"}>
+              This helps public health departments understand which types of
+              sexual connections are leading to STI spread and understand which
+              populations to focus their support on.
+            </p>
+          </>
+        )}
+        {aoeQuestionTopics.includes(AoeQuestionName.PREGNANCY) && (
+          <>
+            <h2 className={"font-sans-md margin-bottom-05em"}>
+              Patient pregnancy
+            </h2>
+            <p className={"margin-top-05em"}>
+              If a patient is pregnant, this increases the public health
+              department's prioritization of the patient's care as STIs can pass
+              onto the child.
+            </p>
+          </>
+        )}
+        {aoeQuestionTopics.includes(AoeQuestionName.SYPHILIS_HISTORY) && (
           <>
             <h2 className={"font-sans-md margin-bottom-05em"}>
               Syphilis symptoms

diff --git a/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/SyphilisAoEForm.tsx b/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/SyphilisAoEForm.tsx
@@ -15,11 +15,12 @@ import YesNoRadioGroup from "../../../commonComponents/YesNoRadioGroup";
 import Checkboxes from "../../../commonComponents/Checkboxes";
 import TextInput from "../../../commonComponents/TextInput";
 import { formatDate } from "../../../utils/date";
+import { AoeQuestionName } from "../TestCardForm.utils";
 
 import {
   generateAoeListenerHooks,
-  generateSymptomAoeConstants,
   generateSexualActivityAoeConstants,
+  generateSymptomAoeConstants,
 } from "./aoeUtils";
 import { SensitiveTopicsTooltipModal } from "./SensitiveTopicsTooltipModal";
 
@@ -90,7 +91,15 @@ export const SyphilisAoEForm = ({
               </>
             }
             required
-            hintText={<SensitiveTopicsTooltipModal showSyphilis={true} />}
+            hintText={
+              <SensitiveTopicsTooltipModal
+                aoeQuestionTopics={[
+                  AoeQuestionName.GENDER_OF_SEXUAL_PARTNERS,
+                  AoeQuestionName.SYPHILIS_HISTORY,
+                  AoeQuestionName.PREGNANCY,
+                ]}
+              />
+            }
             hintTextClassName={""}
             validationStatus={
               showGenderOfSexualPartnersError ? "error" : undefined

diff --git a/...estCardForm/diseaseSpecificComponents/aoeQuestionComponents/GenderOfSexualPartnersAoe.tsx b/...estCardForm/diseaseSpecificComponents/aoeQuestionComponents/GenderOfSexualPartnersAoe.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 
-import { SensitiveTopicsTooltipModal } from "../SensitiveTopicsTooltipModal";
 import MultiSelect from "../../../../commonComponents/MultiSelect/MultiSelect";
 import { GENDER_IDENTITY_VALUES } from "../../../../constants";
 import { AoeQuestionProps } from "../aoeUtils";
@@ -11,6 +10,7 @@ export const GenderOfSexualPartnersAoe = ({
   hasAttemptedSubmit,
   onResponseChange,
   required = false,
+  sensitiveTopicsTooltipModal,
 }: AoeQuestionProps) => {
   const onSexualPartnerGenderChange = (selectedItems: string[]) => {
     onResponseChange({
@@ -43,7 +43,7 @@ export const GenderOfSexualPartnersAoe = ({
         </>
       }
       required={required}
-      hintText={<SensitiveTopicsTooltipModal showSyphilis={false} />}
+      hintText={sensitiveTopicsTooltipModal}
       hintTextClassName={""}
       validationStatus={showGenderOfSexualPartnersError ? "error" : undefined}
       errorMessage={

diff --git a/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/aoeUtils.ts b/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/aoeUtils.ts
@@ -22,6 +22,7 @@ export interface AoeQuestionProps {
   onResponseChange: (responses: AoeQuestionResponses) => void;
   hasAttemptedSubmit: boolean;
   required?: boolean;
+  sensitiveTopicsTooltipModal?: React.ReactNode;
 }
 
 export function generateAoeListenerHooks(