(Refactor) Ensure that Infant status outcomes show for infants on the infant banner

packages/esm-commons-lib/src/components/banner-tags/.patient-status-tag.test.tsx

@@ -3,23 +3,14 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { PatientStatusBannerTag } from './patient-status-tag.component';
 import { usePatientHivStatus } from './patientHivStatus';
-import { usePatientOutcome } from './useInfantFinalOutcome';
-import { usePatientFamilyNames } from './usePatientFamilyNames';
 
 jest.mock('./patientHivStatus', () => ({
   usePatientHivStatus: jest.fn(),
 }));
 
-jest.mock('./useInfantFinalOutcome', () => ({
-  usePatientOutcome: jest.fn(),
-}));
-
-jest.mock('./usePatientFamilyNames', () => ({
-  usePatientFamilyNames: jest.fn(),
-}));
-
 describe('PatientStatusBannerTag', () => {
   const hivPositiveSampleUuid = '138571AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+  const patientUuid = '22ab3fdb-1510-4675-85aa-f180064de450';
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -32,19 +23,6 @@ describe('PatientStatusBannerTag', () => {
       isError: false,
     });
 
-    (usePatientOutcome as jest.Mock).mockReturnValue({
-      patientOutcome: null,
-    });
-
-    (usePatientFamilyNames as jest.Mock).mockReturnValue({
-      childrenNames: [],
-      motherName: null,
-      patientAge: null,
-      patientGender: null,
-      isLoading: true,
-      isError: false,
-    });
-
     const { container } = render(<PatientStatusBannerTag patientUuid={hivPositiveSampleUuid} />);
     expect(container.firstChild).toBeNull();
   });
@@ -56,22 +34,8 @@ describe('PatientStatusBannerTag', () => {
       isError: false,
     });
 
-    (usePatientOutcome as jest.Mock).mockReturnValue({
-      patientOutcome: 'Still in Care',
-    });
-
-    (usePatientFamilyNames as jest.Mock).mockReturnValue({
-      childrenNames: [],
-      motherName: null,
-      patientAge: null,
-      patientGender: null,
-      isLoading: false,
-      isError: false,
-    });
-
     render(<PatientStatusBannerTag patientUuid={hivPositiveSampleUuid} />);
     expect(screen.getByText('HIV Positive')).toBeInTheDocument();
-    expect(screen.getByText('Still in Care')).toBeInTheDocument();
   });
 
   it('should display the correct tag for HIV negative status', () => {
@@ -81,69 +45,33 @@ describe('PatientStatusBannerTag', () => {
       isError: false,
     });
 
-    (usePatientOutcome as jest.Mock).mockReturnValue({
-      patientOutcome: 'HIV negative infant discharged from PMTCT',
-    });
-
-    (usePatientFamilyNames as jest.Mock).mockReturnValue({
-      childrenNames: [],
-      motherName: null,
-      patientAge: null,
-      patientGender: null,
-      isLoading: false,
-      isError: false,
-    });
-
     render(<PatientStatusBannerTag patientUuid={hivPositiveSampleUuid} />);
     expect(screen.getByText('HIV Negative')).toBeInTheDocument();
-    expect(screen.getByText('HIV negative infant discharged from PMTCT')).toBeInTheDocument();
   });
 
-  it('should display mother’s name on the Infant banner', () => {
-    (usePatientHivStatus as jest.Mock).mockReturnValue({
-      hivStatus: 'negative',
-      isLoading: false,
-      isError: false,
-    });
-
-    (usePatientOutcome as jest.Mock).mockReturnValue({
-      patientOutcome: 'Still in Care',
-    });
-
-    (usePatientFamilyNames as jest.Mock).mockReturnValue({
-      childrenNames: [],
-      motherName: 'Jane Doe',
-      patientAge: 10,
-      patientGender: 'M',
-      isLoading: false,
-      isError: false,
-    });
+  it('should display the correct outcome tag', () => {
+    render(<PatientStatusBannerTag patientUuid="patientUuid" mappedOutcome="Dead" outcomeTagColor="red" />);
+    expect(screen.getByText('Dead')).toBeInTheDocument();
+  });
 
-    render(<PatientStatusBannerTag patientUuid={hivPositiveSampleUuid} />);
+  it('should display the mother tag', () => {
+    render(<PatientStatusBannerTag patientUuid="patientUuid" motherName="Jane Doe" />);
     expect(screen.getByText('Mother: Jane Doe')).toBeInTheDocument();
   });
 
-  it('should show an error message when there is an error fetching data', () => {
-    (usePatientHivStatus as jest.Mock).mockReturnValue({
-      hivStatus: null,
-      isLoading: false,
-      isError: false,
-    });
-
-    (usePatientOutcome as jest.Mock).mockReturnValue({
-      patientOutcome: null,
-    });
-
-    (usePatientFamilyNames as jest.Mock).mockReturnValue({
-      childrenNames: [],
-      motherName: null,
-      patientAge: null,
-      patientGender: null,
-      isLoading: false,
-      isError: true,
-    });
+  it('should not display children tag if childrenNames is empty', () => {
+    render(<PatientStatusBannerTag patientUuid={patientUuid} patientGender="F" childrenNames={[]} />);
+    expect(screen.queryByText('Children:')).toBeNull();
+  });
 
-    render(<PatientStatusBannerTag patientUuid={hivPositiveSampleUuid} />);
-    expect(screen.getByText('Error fetching family information')).toBeInTheDocument();
+  it('should display children tag for female patients', () => {
+    render(
+      <PatientStatusBannerTag
+        patientUuid={patientUuid}
+        patientGender="F"
+        childrenNames={['Mark obadi', 'Grace Obadi']}
+      />,
+    );
+    expect(screen.getByText('Children: Mark obadi || Grace Obadi')).toBeInTheDocument();
   });
 });

packages/esm-commons-lib/src/components/banner-tags/patient-status-tag.component.tsx

@@ -2,48 +2,40 @@ import React from 'react';
 import { Tag } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { usePatientHivStatus } from './patientHivStatus';
-import { usePatientOutcome } from './useInfantFinalOutcome';
-import { usePatientFamilyNames } from './usePatientFamilyNames';
 
-export function PatientStatusBannerTag({ patientUuid }) {
+interface PatientStatusBannerTagProps {
+  patientUuid: string;
+  outcomeTagColor?: string;
+  mappedOutcome?: string;
+  motherName?: string;
+  childrenNames?: string[];
+  patientGender?: string;
+}
+
+export const PatientStatusBannerTag: React.FC<PatientStatusBannerTagProps> = ({
+  patientUuid,
+  outcomeTagColor,
+  mappedOutcome,
+  motherName,
+  childrenNames,
+  patientGender,
+}) => {
   const { t } = useTranslation();
 
   const { hivStatus } = usePatientHivStatus(patientUuid);
 
-  const { patientOutcome } = usePatientOutcome(patientUuid);
-
-  const greenOutcomes = ['Still in Care', 'HIV negative infant discharged from PMTCT'];
-  const redOutcomes = ['Confirmed HIV positive', 'Lost to follow up', 'Dead', 'Transferred out'];
-
-  let outcomeTagColor = '';
-  if (greenOutcomes.includes(patientOutcome)) {
-    outcomeTagColor = 'green';
-  } else if (redOutcomes.includes(patientOutcome)) {
-    outcomeTagColor = 'red';
-  }
-
-  const { childrenNames, motherName, patientGender, isLoading, isError } = usePatientFamilyNames(patientUuid);
-
-  if (isLoading) {
-    return null;
-  }
-
-  if (isError) {
-    return <div>Error fetching family information</div>;
-  }
-
   return (
     <>
       {hivStatus === 'positive' && <Tag type="red">{t('hivPositive', 'HIV Positive')}</Tag>}
       {hivStatus === 'negative' && <Tag type="green">{t('hivNegative', 'HIV Negative')}</Tag>}
 
-      {patientOutcome && outcomeTagColor && <Tag type={outcomeTagColor}>{patientOutcome}</Tag>}
+      {mappedOutcome && outcomeTagColor && <Tag type={outcomeTagColor}>{mappedOutcome}</Tag>}
 
       {motherName && <Tag type="purple">Mother: {motherName}</Tag>}
 
       {patientGender === 'F' && childrenNames.length > 0 && (
-        <Tag type="purple">Children: {childrenNames.join('     ||     ')}</Tag>
+        <Tag type="purple">Children: {childrenNames.join(' || ')}</Tag>
       )}
     </>
   );
-}
+};

packages/esm-commons-lib/src/index.ts

@@ -1,7 +1,7 @@
 import { FormEngine } from '@openmrs/openmrs-form-engine-lib';
 import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
-import { PatientStatusBannerTag } from './components/banner-tags/patient-status-tag.component';
 import { configSchema } from './config.schema';
+import { PatientStatusBannerTag } from './components/banner-tags/patient-status-tag.component';
 
 export * from './constants';
 export * from './api.resource';
@@ -30,6 +30,7 @@ export * from './components/patient-lists/patient-list.component';
 export * from './components/tile/ohri-programme-summary-tiles.component';
 export * from './components/tile/ohri-summary-tile-tablet.component';
 export * from './components/tile/ohri-summary-tile.component';
+export * from './components/banner-tags/patient-status-tag.component';
 export * from './utils/compare';
 export * from './utils/createOHRIDashboardLink';
 export * from './utils/createNewOHRIDashboardLink';
@@ -72,5 +73,3 @@ export function startupApp() {
 
 // t('ohriForms', "OHRI Forms")
 export const ohriFormsWorkspace = getSyncLifecycle(FormEngine, options);
-
-export const patientStatusBannerTagExtension = getSyncLifecycle(PatientStatusBannerTag, options);

packages/esm-commons-lib/src/routes.json

@@ -5,11 +5,6 @@
   },
   "pages": [],
   "extensions": [
-    {
-      "name": "patient-status-banner-tag",
-      "slot": "patient-banner-tags-slot",
-      "component": "patientStatusBannerTagExtension"
-    }
   ],
   "workspaces": [
     {

packages/esm-ohri-pmtct-app/src/index.ts

@@ -101,3 +101,8 @@ export const maternalChildDashboard = getSyncLifecycle(OHRIHome, {
 export const ptrackerReportNavLink = getSyncLifecycle(ptrackerdashboardPath, options);
 
 export const patientStatusBannerTagExtension = getSyncLifecycle(PatientStatusBannerTag, options);
+
+export const pmtctBannerTagExtension = getAsyncLifecycle(
+  () => import('./pmtct/patient-chart/banner-tags/banner-tags.component'),
+  options,
+)

packages/esm-ohri-pmtct-app/src/pmtct/patient-chart/banner-tags/banner-tags.component.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePatientOutcome } from './useInfantFinalOutcome';
+import { usePatientFamilyNames } from './usePatientFamilyNames';
+import { PatientStatusBannerTag } from '@ohri/openmrs-esm-ohri-commons-lib';
+
+interface MotherChildTagProps {
+  patientUuid: string;
+}
+
+const MotherChildTag: React.FC<MotherChildTagProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+
+  const { patientOutcome } = usePatientOutcome(patientUuid);
+  const { childrenNames, motherName, patientGender, isLoading, isError } = usePatientFamilyNames(patientUuid);
+
+  if (isLoading) {
+    return null;
+  }
+
+  if (isError) {
+    console.error('Error fetching family information');
+    return null;
+  }
+
+  const outcomeColorMapping: { [key: string]: string } = {
+    'Still in Care': 'green',
+    'HIV negative infant discharged from PMTCT': 'green',
+    'Lost to followup': 'red',
+    'Dead': 'red',
+    'Transferred out': 'red',
+    'Transfer in': 'red',
+    'Confirmed HIV positive': 'red',
+  };
+
+  const outcomeTagColor = outcomeColorMapping[patientOutcome] || 'gray';
+  //Not to future self -- transfer in shouldnt be confirmed HIV positive
+  const mappedOutcome =
+    patientOutcome === 'Transfer in' ? t('confirmedHivPositive', 'Confirmed HIV Positive') : patientOutcome;
+
+  return (
+    <PatientStatusBannerTag
+      patientUuid={patientUuid}
+      outcomeTagColor={outcomeTagColor}
+      mappedOutcome={mappedOutcome}
+      motherName={motherName}
+      childrenNames={childrenNames}
+      patientGender={patientGender}
+    />
+  );
+};
+
+export default MotherChildTag;

packages/esm-ohri-pmtct-app/src/routes.json

@@ -6,10 +6,11 @@
   "pages": [],
   "extensions": [
     {
-      "name": "patient-status-banner-tag",
+      "name": "pmtct-status-banner-tag",
       "slot": "patient-banner-tags-slot",
-      "component": "patientStatusBannerTagExtension"
+      "component": "pmtctBannerTagExtension"
     },
+
     {
       "name": "maternal-child-health-results-summary",
       "slot": "homepage-dashboard-slot",