Infant's name to display on the Mother banner

packages/esm-commons-lib/src/components/banner-tags/mother-infant-tag.component.tsx

@@ -0,0 +1,53 @@
+import { useState, useEffect, useCallback } from 'react';
+import { fetchPatientRelationships } from '@ohri/openmrs-esm-ohri-commons-lib';
+
+export const usePatientFamilyNames = (patientUuid: string) => {
+  const [childrenNames, setChildrenNames] = useState<string[]>([]);
+  const [motherName, setMotherName] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isError, setIsError] = useState<boolean>(false);
+
+  const fetchFamilyData = useCallback(async () => {
+    try {
+      const relationships = await fetchPatientRelationships(patientUuid);
+
+      if (!relationships || !Array.isArray(relationships)) {
+        console.warn('No valid relationships data:', relationships);
+        setChildrenNames([]);
+        setMotherName(null);
+        setIsLoading(false);
+        return;
+      }
+
+      // Fetch child relationships
+      const childRelationships = relationships
+        .filter((relationship) => relationship.relationshipType?.displayBIsToA === 'Child')
+        .map((relationship) => relationship.personB?.display);
+
+      setChildrenNames(childRelationships);
+
+      // Fetch mother's relationship
+      const motherRelationship = relationships.find(
+        (relationship) =>
+          relationship.relationshipType?.displayAIsToB === 'Mother' ||
+          relationship.relationshipType?.displayBIsToA === 'Child',
+      );
+
+      setMotherName(motherRelationship?.personA?.display || 'Mother not found');
+
+      setIsLoading(false);
+    } catch (error) {
+      console.error('Error fetching family names:', error);
+      setIsError(true);
+      setIsLoading(false);
+    }
+  }, [patientUuid]);
+
+  useEffect(() => {
+    if (patientUuid) {
+      fetchFamilyData();
+    }
+  }, [fetchFamilyData, patientUuid]);
+
+  return { childrenNames, motherName, isLoading, isError };
+};

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

@@ -1,16 +1,36 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Tag } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { usePatientHivStatus } from './patientHivStatus';
+import { usePatientFamilyNames } from './usePatientFamilyNames';
 
 export function PatientStatusBannerTag({ patientUuid }) {
   const { t } = useTranslation();
   const { hivStatus } = usePatientHivStatus(patientUuid);
+  const { childrenNames, motherName, patientAge, patientGender, isLoading, isError } =
+    usePatientFamilyNames(patientUuid);
+
+  if (isLoading) {
+    return null;
+  }
+
+  if (isError) {
+    return <div>Error fetching family information</div>;
+  }
 
   return (
     <>
+      {/* HIV Status Display */}
       {hivStatus === 'positive' && <Tag type="red">{t('hivPositive', 'HIV Positive')}</Tag>}
       {hivStatus === 'negative' && <Tag type="green">{t('hivNegative', 'HIV Negative')}</Tag>}
+
+      {/* Mother Name Display (if patient is under 10) */}
+      {patientAge !== null && patientAge <= 10 && motherName && <Tag type="purple">Mother: {motherName}</Tag>}
+
+      {/* Children Names Display (if patient is female and over 10) */}
+      {patientAge !== null && patientAge > 10 && patientGender === 'F' && childrenNames.length > 0 && (
+        <Tag type="purple">Children: {childrenNames.join(', ')}</Tag>
+      )}
     </>
   );
 }

packages/esm-commons-lib/src/components/banner-tags/usePatientFamilyNames.ts

@@ -0,0 +1,60 @@
+import { useState, useEffect, useCallback } from 'react';
+import { fetchPatientRelationships } from '@ohri/openmrs-esm-ohri-commons-lib';
+
+export const usePatientFamilyNames = (patientUuid: string) => {
+  const [childrenNames, setChildrenNames] = useState<string[]>([]);
+  const [motherName, setMotherName] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isError, setIsError] = useState<boolean>(false);
+  const [patientAge, setPatientAge] = useState<number | null>(null);
+  const [patientGender, setPatientGender] = useState<string | null>(null);
+
+  const fetchFamilyData = useCallback(async () => {
+    try {
+      // Fetch patient demographics (age and gender)
+      const response = await fetch(`/openmrs/ws/rest/v1/patient/${patientUuid}?v=full`);
+      const patient = await response.json();
+      setPatientAge(patient.person.age);
+      setPatientGender(patient.person.gender);
+
+      // Fetch relationships
+      const relationships = await fetchPatientRelationships(patientUuid);
+
+      if (!relationships || !Array.isArray(relationships)) {
+        console.warn('No valid relationships data:', relationships);
+        setChildrenNames([]);
+        setMotherName(null);
+        setIsLoading(false);
+        return;
+      }
+
+      const childRelationships = relationships
+        .filter((relationship) => relationship.relationshipType?.displayBIsToA === 'Child')
+        .map((relationship) => relationship.personB?.display);
+
+      setChildrenNames(childRelationships);
+
+      const motherRelationship = relationships.find(
+        (relationship) =>
+          relationship.relationshipType?.displayAIsToB === 'Mother' ||
+          relationship.relationshipType?.displayBIsToA === 'Child',
+      );
+
+      setMotherName(motherRelationship?.personA?.display || 'Mother not found');
+
+      setIsLoading(false);
+    } catch (error) {
+      console.error('Error fetching family names:', error);
+      setIsError(true);
+      setIsLoading(false);
+    }
+  }, [patientUuid]);
+
+  useEffect(() => {
+    if (patientUuid) {
+      fetchFamilyData();
+    }
+  }, [fetchFamilyData, patientUuid]);
+
+  return { childrenNames, motherName, patientAge, patientGender, isLoading, isError };
+};