[PRME-188] fix and reuse full name logic from patient summary (#749)

Author: kamenbachvarov-nhs

app/src/components/blocks/_documentUpload/documentSelectStage/DocumentSelectStage.test.tsx

@@ -17,6 +17,7 @@ import { formatNhsNumber } from '../../../../helpers/utils/formatNhsNumber';
 import { routeChildren, routes } from '../../../../types/generic/routes';
 import { DOCUMENT_TYPE, UploadDocument } from '../../../../types/pages/UploadDocumentsPage/types';
 import DocumentSelectStage, { Props } from './DocumentSelectStage';
+import { getFormattedPatientFullName } from '../../../../helpers/utils/formatPatientFullName';
 
 vi.mock('../../../../helpers/hooks/usePatient');
 vi.mock('react-router-dom', async () => {
@@ -133,7 +134,7 @@ describe('DocumentSelectStage', () => {
                 .closest('.nhsuk-inset-text');
             expect(insetText).toBeInTheDocument();
 
-            const expectedFullName = `${patientDetails.familyName}, ${patientDetails.givenName}`;
+            const expectedFullName = getFormattedPatientFullName(patientDetails);
             expect(screen.getByText(/Patient name/i)).toBeInTheDocument();
             expect(screen.getByText(expectedFullName)).toBeInTheDocument();
 

app/src/components/blocks/_documentUpload/documentUploadCompleteStage/DocumentUploadCompleteStage.test.tsx

@@ -7,6 +7,7 @@ import { buildPatientDetails } from '../../../../helpers/test/testBuilders';
 import { getFormattedDate } from '../../../../helpers/utils/formatDate';
 import { formatNhsNumber } from '../../../../helpers/utils/formatNhsNumber';
 import usePatient from '../../../../helpers/hooks/usePatient';
+import { getFormattedPatientFullName } from '../../../../helpers/utils/formatPatientFullName';
 
 const mockNavigate = vi.fn();
 vi.mock('../../../../helpers/hooks/usePatient');
@@ -37,7 +38,7 @@ describe('DocumentUploadCompleteStage', () => {
             ),
         ).toBeInTheDocument();
 
-        const expectedFullName = `${patientDetails.familyName}, ${patientDetails.givenName}`;
+        const expectedFullName = getFormattedPatientFullName(patientDetails);
         expect(screen.getByTestId("patient-name").textContent).toEqual("Patient name: " + expectedFullName)
 
         const expectedNhsNumber = formatNhsNumber(patientDetails.nhsNumber);

app/src/components/blocks/_documentUpload/documentUploadCompleteStage/DocumentUploadCompleteStage.tsx

@@ -5,17 +5,18 @@ import useTitle from '../../../../helpers/hooks/useTitle';
 import usePatient from '../../../../helpers/hooks/usePatient';
 import { formatNhsNumber } from '../../../../helpers/utils/formatNhsNumber';
 import { getFormattedDateFromString } from '../../../../helpers/utils/formatDate';
+import { getFormattedPatientFullName } from '../../../../helpers/utils/formatPatientFullName';
 
 const DocumentUploadCompleteStage = () => {
     const navigate = useNavigate();
     const patientDetails = usePatient();
     const nhsNumber: string = patientDetails?.nhsNumber ?? '';
     const formattedNhsNumber = formatNhsNumber(nhsNumber);
     const dob: string = getFormattedDateFromString(patientDetails?.birthDate)
+    const patientName = getFormattedPatientFullName(patientDetails);
 
     useTitle({ pageTitle: 'Record upload complete' });
 
-    const patientName = `${patientDetails?.familyName}, ${patientDetails?.givenName}`
 
     return (
         <div className="lloydgeorge_upload-complete" data-testid="upload-complete-page">

app/src/components/blocks/_documentUpload/documentUploadConfirmStage/DocumentUploadConfirmStage.test.tsx

@@ -13,6 +13,7 @@ import * as ReactRouter from 'react-router-dom';
 import { MemoryHistory, createMemoryHistory } from 'history';
 import userEvent from '@testing-library/user-event';
 import { routeChildren, routes } from '../../../../types/generic/routes';
+import { getFormattedPatientFullName } from '../../../../helpers/utils/formatPatientFullName';
 
 const mockedUseNavigate = vi.fn();
 vi.mock('../../../../helpers/hooks/usePatient');
@@ -100,7 +101,7 @@ describe('DocumentUploadCompleteStage', () => {
                 .closest('.nhsuk-inset-text');
             expect(insetText).toBeInTheDocument();
 
-            const expectedFullName = `${patientDetails.familyName}, ${patientDetails.givenName}`;
+            const expectedFullName = getFormattedPatientFullName(patientDetails);
             expect(screen.getByText(/Patient name/i)).toBeInTheDocument();
             expect(screen.getByText(expectedFullName)).toBeInTheDocument();
 

app/src/components/generic/patientSummary/PatientSummary.tsx

@@ -4,6 +4,7 @@ import { getFormattedDate } from '../../../helpers/utils/formatDate';
 import { SummaryList, Tag } from 'nhsuk-react-components';
 import type { PatientDetails } from '../../../types/generic/patientDetails';
 import { formatNhsNumber } from '../../../helpers/utils/formatNhsNumber';
+import { getFormattedPatientFullName } from '../../../helpers/utils/formatPatientFullName';
 
 /**
  * Props for the PatientSummary component.
@@ -79,7 +80,7 @@ const Details: React.FC<{ item: PatientInfo }> = ({ item }) => {
         case PatientInfo.FULL_NAME:
             key = 'Patient name';
             elementId = 'patient-summary-full-name';
-            value = `${patientDetails?.familyName}, ${patientDetails?.givenName?.join(' ')}`;
+            value = getFormattedPatientFullName(patientDetails)
             break;
         case PatientInfo.NHS_NUMBER:
             key = 'NHS number';

app/src/helpers/utils/formatPatientFullName.test.tsx

@@ -0,0 +1,23 @@
+import { buildPatientDetails } from "../test/testBuilders";
+import { getFormattedPatientFullName } from "./formatPatientFullName";
+
+const patientDetails = buildPatientDetails();
+
+describe('getFormattedPatientFullName', () => {
+  test.each([
+        ['Doe', ['John'], 'Doe, John'],
+        ['Doe', ['John,Michael'], 'Doe, John Michael'],
+        ['  Doe ', ['  John ,  Michael '], 'Doe, John Michael'],
+        ['Doe', [''], 'Doe,'],
+        ['', ['John'], ', John'],
+        ['', [''], ',']
+    ])('should format "%s" and "%s" as "%s"', (familyName, givenName, expected) => {
+        patientDetails.familyName = familyName;
+        patientDetails.givenName = givenName;
+        expect(getFormattedPatientFullName(patientDetails)).toBe(expected);
+    });
+
+    it('should handle null input', () => {
+        expect(getFormattedPatientFullName(null)).toBe(',');
+    });
+});

app/src/helpers/utils/formatPatientFullName.ts

@@ -0,0 +1,12 @@
+import { PatientDetails } from "../../types/generic/patientDetails";
+
+export const getFormattedPatientFullName = (patientDetails: PatientDetails | null): string => {
+    const familyName = patientDetails?.familyName?.trim() || '';
+
+    const givenNames = patientDetails?.givenName
+        ?.flatMap(name => name.split(','))
+        .map(name => name.trim())
+        .join(' ') || '';
+
+    return `${familyName}, ${givenNames}`.trim();
+};