From 2543e1b54f57282b39a7fa9e6648c3c485958bbf Mon Sep 17 00:00:00 2001
From: chibongho <cbho@pih.org>
Date: Tue, 3 Sep 2024 17:06:09 -0400
Subject: [PATCH] =?UTF-8?q?(fix)=20O3-3902=20-=20make=20age()=20function?=
 =?UTF-8?q?=20(and=20its=20usage)=20handle=20null=20birth=E2=80=A6=20(#130?=
 =?UTF-8?q?6)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../patient-banner/banner/patient-banner.component.tsx   | 9 +++++++--
 .../ward-patient-card/row-elements/ward-patient-age.tsx  | 2 +-
 .../patient-details/ward-patient.workspace.tsx           | 4 +++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/esm-patient-search-app/src/patient-search-page/patient-banner/banner/patient-banner.component.tsx b/packages/esm-patient-search-app/src/patient-search-page/patient-banner/banner/patient-banner.component.tsx
index 1e6ac61cc..64a29d535 100644
--- a/packages/esm-patient-search-app/src/patient-search-page/patient-banner/banner/patient-banner.component.tsx
+++ b/packages/esm-patient-search-app/src/patient-search-page/patient-banner/banner/patient-banner.component.tsx
@@ -86,8 +86,13 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, hid
               />
             </div>
             <div className={styles.demographics}>
-              <span>{getGender(patient.person.gender)}</span> &middot; <span>{age(patient.person.birthdate)}</span>{' '}
-              &middot; <span>{formatDate(parseDate(patient.person.birthdate), { mode: 'wide', time: false })}</span>
+              <span>{getGender(patient.person.gender)}</span>
+              {patient.person.birthdate && (
+                <>
+                  &middot; <span>{age(patient.person.birthdate)}</span> &middot;{' '}
+                  <span>{formatDate(parseDate(patient.person.birthdate), { mode: 'wide', time: false })}</span>
+                </>
+              )}
             </div>
             <div>
               <div className={styles.identifiers}>
diff --git a/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-age.tsx b/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-age.tsx
index 6348d091e..74ae36587 100644
--- a/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-age.tsx
+++ b/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-age.tsx
@@ -6,7 +6,7 @@ export interface WardPatientAgeProps {
 }
 
 const WardPatientAge: React.FC<WardPatientAgeProps> = ({ patient }) => {
-  return <div>{age(patient.person?.birthdate)}</div>;
+  return patient.person?.birthdate ? <div>{age(patient.person.birthdate)}</div> : null;
 };
 
 export default WardPatientAge;
diff --git a/packages/esm-ward-app/src/ward-workspace/patient-details/ward-patient.workspace.tsx b/packages/esm-ward-app/src/ward-workspace/patient-details/ward-patient.workspace.tsx
index 1d7a01d59..efcaa41aa 100644
--- a/packages/esm-ward-app/src/ward-workspace/patient-details/ward-patient.workspace.tsx
+++ b/packages/esm-ward-app/src/ward-workspace/patient-details/ward-patient.workspace.tsx
@@ -45,7 +45,9 @@ const PatientWorkspaceTitle: React.FC<WardPatientWorkspaceViewProps> = ({ patien
     <>
       <div>{patient.person.display} &nbsp;</div>
       <div className={styles.headerPatientDetail}>&middot; &nbsp; {getGender(t, patient.person?.gender)}</div>
-      <div className={styles.headerPatientDetail}>&middot; &nbsp; {age(patient.person?.birthdate)}</div>
+      {patient.person?.birthdate && (
+        <div className={styles.headerPatientDetail}>&middot; &nbsp; {age(patient.person?.birthdate)}</div>
+      )}
     </>
   );
 };