[AEA-5926] tweaks content for patient banner

Author: Orkastrated

packages/cpt-ui/__tests__/BasicDetailsSearchResultsPage.test.tsx

@@ -328,8 +328,8 @@ describe("BasicDetailsSearchResultsPage", () => {
     renderWithRouter()
 
     await waitFor(() => {
-      expect(screen.getAllByText(STRINGS.NOT_AVAILABLE)[0]).toBeInTheDocument()
-      expect(screen.getAllByText(STRINGS.NOT_AVAILABLE)[1]).toBeInTheDocument()
+      expect(screen.getAllByText(STRINGS.NOT_ON_RECORD)[0]).toBeInTheDocument()
+      expect(screen.getAllByText(STRINGS.NOT_ON_RECORD)[1]).toBeInTheDocument()
       expect(screen.getByText("123 Brundel Close, Headingley, Leeds, West Yorkshire")).toBeInTheDocument()
       expect(screen.getByText("LS6 1JL")).toBeInTheDocument()
     })
@@ -364,7 +364,7 @@ describe("BasicDetailsSearchResultsPage", () => {
     renderWithRouter()
 
     await waitFor(() => {
-      expect(screen.getAllByText(STRINGS.NOT_AVAILABLE)).toHaveLength(4)
+      expect(screen.getAllByText(STRINGS.NOT_ON_RECORD)).toHaveLength(4)
     })
   })
 

packages/cpt-ui/__tests__/PatientDetailsBanner.test.tsx

@@ -67,7 +67,7 @@ describe("PatientDetailsBanner", () => {
     expect(screen.getByTestId("patient-details-banner").className).not.toMatch(/patient-details-partial-data/)
   })
 
-  it("renders partial patient details with missing data message", async () => {
+  it("renders partial patient details with missing data message when pds call fails", async () => {
     render(
       <MockPatientDetailsProvider patientDetails={{nhsNumber: "5900009890"}} patientFallback={true}>
         <PatientDetailsBanner />
@@ -79,22 +79,44 @@ describe("PatientDetailsBanner", () => {
     })
 
     // Minimum details returned is just NHS Number
-    expect(screen.getByTestId("patient-details-banner-name")).toHaveTextContent(STRINGS.UNKNOWN)
-    expect(
-      screen.getByTestId("patient-details-banner-gender")).toHaveTextContent(`${STRINGS.GENDER}: ${STRINGS.UNKNOWN}`)
-    expect(
-      screen.getByTestId("patient-details-banner-nhsNumber")).toHaveTextContent(`${STRINGS.NHS_NUMBER}: 590 000 9890`)
-    expect(
-      screen.getByTestId("patient-details-banner-dob")).toHaveTextContent(`${STRINGS.DOB}: ${STRINGS.UNKNOWN}`)
-    expect(
-      screen.getByTestId("patient-details-banner-address")).toHaveTextContent(`${STRINGS.ADDRESS}: ${STRINGS.UNKNOWN}`)
+    expect(screen.getByTestId("patient-details-banner-name")).toHaveTextContent(STRINGS.NOT_AVAILABLE)
+    expect(screen.getByTestId("patient-details-banner-gender")).toHaveTextContent(
+      `${STRINGS.GENDER}: ${STRINGS.NOT_AVAILABLE}`)
+    expect(screen.getByTestId("patient-details-banner-nhsNumber")).toHaveTextContent(
+      `${STRINGS.NHS_NUMBER}: 590 000 9890`)
+    expect(screen.getByTestId("patient-details-banner-dob")).toHaveTextContent(
+      `${STRINGS.DOB}: ${STRINGS.NOT_AVAILABLE}`)
+    expect(screen.getByTestId("patient-details-banner-address")).toHaveTextContent(
+      `${STRINGS.ADDRESS}: ${STRINGS.NOT_AVAILABLE}`)
 
     // The missing data message should be rendered.
     expect(screen.getByTestId("patient-detail-banner-incomplete")).toBeInTheDocument()
     expect(screen.getByTestId("patient-detail-banner-incomplete")).toHaveTextContent(STRINGS.MISSING_DATA)
+  })
 
-    // The banner should now have the class for partial data.
-    expect(screen.getByTestId("patient-details-banner").className).toMatch(/patient-details-partial-data/)
+  // eslint-disable-next-line max-len
+  it("does not render the missing data message when details are completed from prescription details after a pds failure", async () => {
+    render(
+      <MockPatientDetailsProvider
+        patientDetails={{
+          nhsNumber: "5900009890",
+          givenName: ["William"],
+          familyName: "Wolderton",
+          gender: "male",
+          dateOfBirth: "1988-11-01",
+          address: ["55 Oak Street", "OAK LANE", "Leeds"],
+          postcode: "LS1 1XX"
+        }}
+        patientFallback={true}>
+        <PatientDetailsBanner />
+      </MockPatientDetailsProvider>
+    )
+
+    await waitFor(() => {
+      expect(screen.getByTestId("patient-details-banner")).toBeInTheDocument()
+    })
+
+    expect(screen.queryByTestId("patient-detail-banner-incomplete")).not.toBeInTheDocument()
   })
 
   it("renders not available content for fields when pds record has missing data", async () => {
@@ -116,15 +138,15 @@ describe("PatientDetailsBanner", () => {
       expect(screen.getByTestId("patient-details-banner")).toBeInTheDocument()
     })
 
-    expect(screen.getByTestId("patient-details-banner-name")).toHaveTextContent(STRINGS.NAME_NOT_AVAILABLE)
+    expect(screen.getByTestId("patient-details-banner-name")).toHaveTextContent(STRINGS.NAME_NOT_ON_RECORD)
     expect(screen.getByTestId("patient-details-banner-gender")).toHaveTextContent(
-      `${STRINGS.GENDER}: ${STRINGS.NOT_AVAILABLE}`)
+      `${STRINGS.GENDER}: ${STRINGS.NOT_ON_RECORD}`)
     expect(screen.getByTestId("patient-details-banner-nhsNumber")).toHaveTextContent(
       `${STRINGS.NHS_NUMBER}: 590 000 9890`)
     expect(screen.getByTestId("patient-details-banner-dob")).toHaveTextContent(
-      `${STRINGS.DOB}: ${STRINGS.NOT_AVAILABLE}`)
+      `${STRINGS.DOB}: ${STRINGS.NOT_ON_RECORD}`)
     expect(screen.getByTestId("patient-details-banner-address")).toHaveTextContent(
-      `${STRINGS.ADDRESS}: ${STRINGS.NOT_AVAILABLE}`)
+      `${STRINGS.ADDRESS}: ${STRINGS.NOT_ON_RECORD}`)
 
     // // Verify that the missing data message is not rendered
     expect(screen.queryByTestId("patient-detail-banner-incomplete")).not.toBeInTheDocument()
@@ -152,7 +174,7 @@ describe("PatientDetailsBanner", () => {
       expect(screen.getByTestId("patient-details-banner")).toBeInTheDocument()
     })
 
-    expect(screen.getByTestId("patient-details-banner-name")).toHaveTextContent(STRINGS.NAME_NOT_AVAILABLE)
+    expect(screen.getByTestId("patient-details-banner-name")).toHaveTextContent(STRINGS.NAME_NOT_ON_RECORD)
   })
 
   it("renders patient details correctly when family name is missing from the pds record", async () => {
@@ -174,7 +196,7 @@ describe("PatientDetailsBanner", () => {
       expect(screen.getByTestId("patient-details-banner")).toBeInTheDocument()
     })
 
-    expect(screen.getByTestId("patient-details-banner-name")).toHaveTextContent(STRINGS.NAME_NOT_AVAILABLE)
+    expect(screen.getByTestId("patient-details-banner-name")).toHaveTextContent(STRINGS.NAME_NOT_ON_RECORD)
   })
 
   it("renders patient details correctly when name is temporary", async () => {

packages/cpt-ui/src/components/PatientDetailsBanner.tsx

@@ -9,11 +9,11 @@ import {DOB_FORMAT, NHS_NUMBER_FORMAT_REGEX} from "@/constants/misc"
 
 export default function PatientDetailsBanner() {
   const emptyPatientDetailsText = {
-    name: STRINGS.UNKNOWN,
-    gender: STRINGS.UNKNOWN,
+    name: STRINGS.NOT_AVAILABLE,
+    gender: STRINGS.NOT_AVAILABLE,
     nhsNumber: "",
-    dob: STRINGS.UNKNOWN,
-    address: STRINGS.UNKNOWN
+    dob: STRINGS.NOT_AVAILABLE,
+    address: STRINGS.NOT_AVAILABLE
   }
 
   const [patientDetailsText, setPatientDetailsText] = useState(emptyPatientDetailsText)
@@ -31,7 +31,7 @@ export default function PatientDetailsBanner() {
     const patientDetailsText = structuredClone(emptyPatientDetailsText)
     if (patientDetails.givenName && patientDetails.familyName) {
       if (patientDetails.givenName === NOT_AVAILABLE || patientDetails.familyName === NOT_AVAILABLE) {
-        patientDetailsText.name = STRINGS.NAME_NOT_AVAILABLE
+        patientDetailsText.name = STRINGS.NAME_NOT_ON_RECORD
       } else {
         patientDetailsText.name =
           `${patientDetails.givenName.filter(Boolean).join(" ")} ${patientDetails.familyName.toLocaleUpperCase()}${
@@ -40,20 +40,20 @@ export default function PatientDetailsBanner() {
     }
 
     if (patientDetails.gender) {
-      patientDetailsText.gender = patientDetails.gender === NOT_AVAILABLE ? STRINGS.NOT_AVAILABLE :
+      patientDetailsText.gender = patientDetails.gender === NOT_AVAILABLE ? STRINGS.NOT_ON_RECORD :
         `${patientDetails.gender.charAt(0).toUpperCase()}${patientDetails.gender.slice(1)}`
     }
 
     patientDetailsText.nhsNumber = patientDetails.nhsNumber.replace(NHS_NUMBER_FORMAT_REGEX, "$1 $2 $3")
 
     if (patientDetails.dateOfBirth) {
-      patientDetailsText.dob = patientDetails.dateOfBirth === NOT_AVAILABLE ? STRINGS.NOT_AVAILABLE :
+      patientDetailsText.dob = patientDetails.dateOfBirth === NOT_AVAILABLE ? STRINGS.NOT_ON_RECORD :
         format(new Date(patientDetails.dateOfBirth), DOB_FORMAT)
     }
 
     if (patientDetails.address && patientDetails.postcode) {
       if (patientDetails.address === NOT_AVAILABLE && patientDetails.postcode === NOT_AVAILABLE) {
-        patientDetailsText.address = STRINGS.NOT_AVAILABLE
+        patientDetailsText.address = STRINGS.NOT_ON_RECORD
       } else {
         const addressParts: Array<string> = []
         if (patientDetails.address !== NOT_AVAILABLE){
@@ -78,7 +78,7 @@ export default function PatientDetailsBanner() {
 
   return (
     <div
-      className={`patient-details-banner ${patientFallback ? "patient-details-partial-data" : ""}`}
+      className={"patient-details-banner"}
       data-testid="patient-details-banner">
       <div className={"patient-detail-banner-row"}>
         <div
@@ -93,7 +93,7 @@ export default function PatientDetailsBanner() {
       </div>
       {
         // Places the missing data message on the next line
-        patientFallback && (
+        (patientFallback && Object.values(patientDetailsText).some((v) => v === STRINGS.NOT_AVAILABLE)) && (
           <div
             className="patient-detail-banner-row"
             data-testid="patient-detail-banner-incomplete">

packages/cpt-ui/src/constants/ui-strings/PatientDetailsBannerStrings.ts

@@ -1,11 +1,11 @@
 export const STRINGS = {
-  UNKNOWN: "Unavailable",
-  NOT_AVAILABLE: "Not on patient record",
-  NAME_NOT_AVAILABLE: "Name not on patient record",
+  NOT_AVAILABLE: "Not available",
+  NOT_ON_RECORD: "Not on patient record",
+  NAME_NOT_ON_RECORD: "Name not on patient record",
   GENDER: "Gender",
   NHS_NUMBER: "NHS number",
   DOB: "Date of birth",
   ADDRESS: "Address",
-  MISSING_DATA: "Some information is unavailable right now. It may help to refresh the page or try again later.",
+  MISSING_DATA: "Some information is not available. Refresh the page or try again later.",
   TEMPORARY: " (temporary)"
 }

packages/cpt-ui/src/helpers/formatters.tsx

@@ -60,7 +60,7 @@ export function formatDobForDisplay({
   dobMonth,
   dobYear
 }: Pick<BasicDetailsSearchType, "dobDay" | "dobMonth" | "dobYear">): string {
-  if (!dobDay || !dobMonth || !dobYear) return STRINGS.UNKNOWN
+  if (!dobDay || !dobMonth || !dobYear) return STRINGS.NOT_AVAILABLE
 
   const day = dobDay.padStart(2, "0")
   const monthIndex = parseInt(dobMonth, 10) - 1
@@ -74,7 +74,7 @@ export function formatDobForDisplay({
  */
 export const formatDobTextForDisplay = (dobText: string): string => {
   const date = parseDate(dobText)
-  return date ? formatDate(date) : STRINGS.UNKNOWN
+  return date ? formatDate(date) : STRINGS.NOT_AVAILABLE
 }
 
 export function formatMessageDateTime(isoDateString: string): string {

packages/cpt-ui/src/pages/BasicDetailsSearchResultsPage.tsx

@@ -39,23 +39,23 @@ const TableResultsRow = ({patient}: TableResultsRowProps) => {
   const searchContext = useSearchContext()
   const navigationContext = useNavigationContext()
 
-  let nameText = STRINGS.NOT_AVAILABLE
+  let nameText = STRINGS.NOT_ON_RECORD
   if (patient.givenName !== NOT_AVAILABLE && patient.familyName !== NOT_AVAILABLE) {
     nameText = `${patient.givenName?.filter(Boolean).join(" ")} ${patient.familyName}${
       patient.nameUse === PatientNameUse.TEMP ? STRINGS.TEMPORARY : ""}`
   }
 
   const nhsNumberText = patient.nhsNumber.replace(NHS_NUMBER_FORMAT_REGEX, "$1 $2 $3")
 
-  const genderText = patient.gender === NOT_AVAILABLE ? STRINGS.NOT_AVAILABLE :
+  const genderText = patient.gender === NOT_AVAILABLE ? STRINGS.NOT_ON_RECORD :
     `${patient.gender?.charAt(0).toUpperCase()}${patient.gender?.slice(1)}`
 
-  const dobText = patient.dateOfBirth === NOT_AVAILABLE ? STRINGS.NOT_AVAILABLE :
+  const dobText = patient.dateOfBirth === NOT_AVAILABLE ? STRINGS.NOT_ON_RECORD :
     format(new Date(patient.dateOfBirth as string), DOB_FORMAT)
 
   let addressText
   if (patient.address === NOT_AVAILABLE && patient.postcode === NOT_AVAILABLE) {
-    addressText = STRINGS.NOT_AVAILABLE
+    addressText = STRINGS.NOT_ON_RECORD
   } else {
     const addressParts: Array<string> = []
     if (patient.address !== NOT_AVAILABLE){