(fix) O3-3284: Display correctly formatted patient name throughout patient chart apps

packages/esm-patient-banner-app/src/banner/patient-banner.component.tsx

@@ -6,6 +6,7 @@ import {
   PatientBannerPatientInfo,
   PatientBannerToggleContactDetailsButton,
   PatientPhoto,
+  displayName,
 } from '@openmrs/esm-framework';
 import styles from './patient-banner.scss';
 
@@ -34,7 +35,7 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, hid
     };
   }, [patientBannerRef, setIsTabletViewport]);
 
-  const patientName = `${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`;
+  const patientName = patient ? displayName(patient) : '';
 
   const [showContactDetails, setShowContactDetails] = useState(false);
   const toggleContactDetails = useCallback(() => {

packages/esm-patient-chart-app/src/patient-details-tile/patient-details-tile.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import capitalize from 'lodash-es/capitalize';
 import { InlineLoading } from '@carbon/react';
-import { age, formatDate, usePatient, parseDate } from '@openmrs/esm-framework';
+import { age, displayName, formatDate, usePatient, parseDate } from '@openmrs/esm-framework';
 import styles from './patient-details-tile.scss';
 
 interface PatientDetailsTileInterface {
@@ -19,9 +19,7 @@ const PatientDetailsTile: React.FC<PatientDetailsTileInterface> = ({ patientUuid
 
   return (
     <div className={styles.container}>
-      <p className={styles.name}>
-        {patient?.name[0].given.join(' ')} {patient?.name[0].family}
-      </p>
+      <p className={styles.name}>{patient ? displayName(patient) : ''}</p>
       <div className={styles.details}>
         <span>{capitalize(patient?.gender)}</span> &middot; <span>{age(patient?.birthDate)}</span> &middot;{' '}
         <span>{formatDate(parseDate(patient?.birthDate), { mode: 'wide', time: false })}</span>

packages/esm-patient-chart-app/src/visit-header/visit-header.component.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Header, HeaderGlobalBar, HeaderMenuButton, Tag, Tooltip } from '@carbon/react';
 import {
   age,
+  displayName,
   ConfigurableLink,
   useAssignedExtensions,
   useLayoutType,
@@ -48,7 +49,7 @@ const PatientInfo: React.FC<PatientInfoProps> = ({ patient }) => {
     [t],
   );
 
-  const name = `${patient?.name?.[0].given?.join(' ')} ${patient?.name?.[0].family}`;
+  const name = patient ? displayName(patient) : '';
   const patientUuid = `${patient?.id}`;
   const { currentVisit } = useVisit(patientUuid);
   const patientNameIsTooLong = !isTablet && name.trim().length > 25;

packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.workspace.tsx

@@ -4,7 +4,7 @@ import capitalize from 'lodash-es/capitalize';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
 import { ArrowLeft } from '@carbon/react/icons';
-import { age, formatDate, parseDate, useLayoutType, usePatient } from '@openmrs/esm-framework';
+import { age, displayName, formatDate, parseDate, useLayoutType, usePatient } from '@openmrs/esm-framework';
 import {
   type DefaultPatientWorkspaceProps,
   type OrderBasketItem,
@@ -35,7 +35,7 @@ export default function AddLabOrderWorkspace({
 
   const isTablet = useLayoutType() === 'tablet';
 
-  const patientName = `${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`;
+  const patientName = patient ? displayName(patient) : '';
 
   const cancelOrder = useCallback(() => {
     closeWorkspace({

packages/esm-patient-labs-app/src/test-results/print-modal/print-modal.extension.tsx

@@ -20,6 +20,7 @@ import {
 import { useReactToPrint } from 'react-to-print';
 import {
   age,
+  displayName,
   formatDate,
   useConfig,
   useLayoutType,
@@ -77,7 +78,7 @@ function PrintModal({ patientUuid, closeDialog }) {
       ) ?? [];
 
     return {
-      name: `${patient?.patient?.name?.[0]?.given?.join(' ')} ${patient?.patient?.name?.[0].family}`,
+      name: patient?.patient ? displayName(patient?.patient) : '',
       age: age(patient?.patient?.birthDate),
       gender: getGender(patient?.patient?.gender),
       location: patient?.patient?.address?.[0].city,

packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.component.tsx

@@ -28,6 +28,7 @@ import { type Control, Controller, useController, useForm } from 'react-hook-for
 import {
   ExtensionSlot,
   age,
+  displayName,
   formatDate,
   parseDate,
   translateFrom,
@@ -317,7 +318,7 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
 
   const [showStickyMedicationHeader, setShowMedicationHeader] = useState(false);
   const { patient, isLoading: isLoadingPatientDetails } = usePatient();
-  const patientName = `${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`;
+  const patientName = patient ? displayName(patient) : '';
   const { maxDispenseDurationInDays } = useConfig();
 
   const observer = useRef(null);

packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx

@@ -23,7 +23,7 @@ import {
   useLaunchWorkspaceRequiringVisit,
 } from '@openmrs/esm-patient-common-lib';
 import { Add, User, Printer } from '@carbon/react/icons';
-import { age, formatDate, useConfig, useLayoutType, usePatient } from '@openmrs/esm-framework';
+import { age, displayName, formatDate, useConfig, useLayoutType, usePatient } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { type AddDrugOrderWorkspaceAdditionalProps } from '../add-drug-order/add-drug-order.workspace';
 import { type DrugOrderBasketItem } from '../types';
@@ -178,7 +178,7 @@ const MedicationsDetailsTable: React.FC<ActiveMedicationsProps> = ({
       ) ?? [];
 
     return {
-      name: `${patient?.patient?.name?.[0]?.given?.join(' ')} ${patient?.patient?.name?.[0].family}`,
+      name: patient?.patient ? displayName(patient?.patient) : '',
       age: age(patient?.patient?.birthDate),
       gender: getGender(patient?.patient?.gender),
       location: patient?.patient?.address?.[0].city,

packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx

@@ -42,7 +42,15 @@ import {
   launchPatientWorkspace,
 } from '@openmrs/esm-patient-common-lib';
 import { Add, Printer } from '@carbon/react/icons';
-import { age, formatDate, useConfig, useLayoutType, usePagination, usePatient } from '@openmrs/esm-framework';
+import {
+  age,
+  displayName,
+  formatDate,
+  useConfig,
+  useLayoutType,
+  usePagination,
+  usePatient,
+} from '@openmrs/esm-framework';
 import { buildLabOrder, buildMedicationOrder, compare, orderPriorityToColor, orderStatusColor } from '../utils/utils';
 import MedicationRecord from './medication-record.component';
 import PrintComponent from '../print/print.component';
@@ -227,7 +235,7 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ title, patientUuid, sh
       ) ?? [];
 
     return {
-      name: `${patient?.patient?.name?.[0]?.given?.join(' ')} ${patient?.patient?.name?.[0].family}`,
+      name: patient?.patient ? displayName(patient?.patient) : '',
       age: age(patient?.patient?.birthDate),
       gender: getGender(patient?.patient?.gender),
       location: patient?.patient?.address?.[0].city,

packages/esm-patient-vitals-app/src/vitals/vitals-overview.component.tsx

@@ -4,7 +4,7 @@ import { useReactToPrint } from 'react-to-print';
 import { Button, ContentSwitcher, DataTableSkeleton, IconSwitch, InlineLoading } from '@carbon/react';
 import { Add, ChartLineSmooth, Table, Printer } from '@carbon/react/icons';
 import { CardHeader, EmptyState, ErrorState, useVisitOrOfflineVisit } from '@openmrs/esm-patient-common-lib';
-import { age, formatDate, parseDate, useConfig, useLayoutType, usePatient } from '@openmrs/esm-framework';
+import { age, displayName, formatDate, parseDate, useConfig, useLayoutType, usePatient } from '@openmrs/esm-framework';
 import type { ConfigObject } from '../config-schema';
 import { launchVitalsAndBiometricsForm } from '../utils';
 import { useVitalsAndBiometrics, useVitalsConceptMetadata, withUnit } from '../common';
@@ -63,7 +63,7 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, pageSize,
       ) ?? [];
 
     return {
-      name: `${patient?.patient?.name?.[0]?.given?.join(' ')} ${patient?.patient?.name?.[0].family}`,
+      name: patient?.patient ? displayName(patient?.patient) : '',
       age: age(patient?.patient?.birthDate),
       gender: getGender(patient?.patient?.gender),
       location: patient?.patient?.address?.[0].city,