resolve conflicts

packages/esm-ward-app/mock.tsx

@@ -4,6 +4,8 @@ import { useInpatientAdmission } from './src/hooks/useInpatientAdmission';
 import { createAndGetWardPatientGrouping } from './src/ward-view/ward-view.resource';
 import { useInpatientRequest } from './src/hooks/useInpatientRequest';
 import { useWardPatientGrouping } from './src/hooks/useWardPatientGrouping';
+import { type WardViewContext } from './src/types';
+import DefaultWardPatientCardHeader from './src/ward-view/default-ward/default-ward-patient-card-header.component';
 
 jest.mock('./src/hooks/useAdmissionLocation', () => ({
   useAdmissionLocation: jest.fn(),
@@ -51,4 +53,10 @@ export const mockWardPatientGroupDetails = jest.mocked(useWardPatientGrouping).m
   inpatientAdmissionResponse: mockInpatientAdmissionResponse(),
   inpatientRequestResponse: mockInpatientRequestResponse(),
   ...createAndGetWardPatientGrouping(mockInpatientAdmissions, mockAdmissionLocation, mockInpatientRequest),
+  isLoading: false,
 });
+
+export const mockWardViewContext: WardViewContext = {
+  wardPatientGroupDetails: mockWardPatientGroupDetails(),
+  WardPatientHeader: DefaultWardPatientCardHeader,
+};

packages/esm-ward-app/src/beds/empty-bed-skeleton.tsx

@@ -1,11 +1,11 @@
 import { SkeletonIcon } from '@carbon/react';
 import React from 'react';
-import styles from './empty-bed.scss';
-import WardPatientSkeletonText from '../ward-patient-card/row-elements/ward-pateint-skeleton-text';
+import styles from './ward-bed.scss';
+import WardPatientSkeletonText from '../ward-patient-card/row-elements/ward-patient-skeleton-text';
 
 const EmptyBedSkeleton = () => {
   return (
-    <div className={styles.container + ' ' + styles.skeleton}>
+    <div className={styles.emptyBed + ' ' + styles.skeleton}>
       <SkeletonIcon />
       <WardPatientSkeletonText />
     </div>

packages/esm-ward-app/src/beds/empty-bed.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './empty-bed.scss';
+import styles from './ward-bed.scss';
 import wardPatientCardStyles from '../ward-patient-card/ward-patient-card.scss';
 import { type Bed } from '../types';
 import { useTranslation } from 'react-i18next';
@@ -12,11 +12,11 @@ const EmptyBed: React.FC<EmptyBedProps> = ({ bed }) => {
   const { t } = useTranslation();
 
   return (
-    <div className={styles.container}>
+    <div className={styles.emptyBed}>
       <span className={`${wardPatientCardStyles.wardPatientBedNumber} ${wardPatientCardStyles.empty}`}>
         {bed.bedNumber}
       </span>
-      <p className={styles.emptyBed}>{t('emptyBed', 'Empty bed')}</p>
+      <p className={styles.emptyBedText}>{t('emptyBed', 'Empty bed')}</p>
     </div>
   );
 };

packages/esm-ward-app/src/beds/ward-bed.component.tsx

@@ -0,0 +1,41 @@
+import React, { type ReactNode } from 'react';
+import { type Bed } from '../types';
+import EmptyBed from './empty-bed.component';
+import styles from './ward-bed.scss';
+import { useTranslation } from 'react-i18next';
+import { Tag } from '@carbon/react';
+
+export interface WardBedProps {
+  patientCards: Array<ReactNode>;
+  bed: Bed;
+}
+
+const WardBed: React.FC<WardBedProps> = ({ bed, patientCards }) => {
+  return patientCards?.length > 0 ? <OccupiedBed bed={bed} patientCards={patientCards} /> : <EmptyBed bed={bed} />;
+};
+
+const OccupiedBed: React.FC<WardBedProps> = ({ patientCards }) => {
+  // interlace patient card with bed dividers between each of them
+  const patientCardsWithDividers = patientCards.flatMap((patientCard, index) => {
+    if (index == 0) {
+      return [patientCard];
+    } else {
+      return [<BedShareDivider key={'divider-' + index} />, patientCard];
+    }
+  });
+
+  return <div className={styles.occupiedBed}>{patientCardsWithDividers}</div>;
+};
+
+const BedShareDivider = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.bedDivider}>
+      <div className={styles.bedDividerLine}></div>
+      <Tag>{t('bedShare', 'Bed share')}</Tag>
+      <div className={styles.bedDividerLine}></div>
+    </div>
+  );
+};
+
+export default WardBed;

packages/esm-ward-app/src/beds/ward-bed.scss

@@ -0,0 +1,45 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars';
+@use '@carbon/type';
+
+.occupiedBed {
+  display: flex;
+  flex-direction: column;
+  background-color: vars.$ui-02;
+  height: fit-content;
+}
+
+.bedDivider {
+  background-color: vars.$ui-02;
+  color: vars.$text-02;
+  padding: layout.$spacing-01;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bedDividerLine {
+  height: 1px;
+  background-color: vars.$ui-05;
+  width: 30%;
+}
+.emptyBed {
+  display: flex;
+  gap: layout.$spacing-04;
+  justify-content: center;
+  align-items: center;
+  border: 1px dashed vars.$ui-04;
+  padding: layout.$spacing-03 layout.$spacing-04;
+  height: fit-content;
+}
+
+.emptyBed:hover:not(.skeleton) {
+  border: 1px solid transparent;
+  box-shadow: inset 0px 0px 0px 2px vars.$color-blue-60-2;
+  cursor: pointer;
+}
+
+.emptyBedText {
+  @include type.type-style('heading-compact-01');
+  color: vars.$text-02;
+}

packages/esm-ward-app/src/beds/occupied-bed.test.tsx → packages/esm-ward-app/src/beds/ward-bed.test.tsx

@@ -10,7 +10,9 @@ import {
 } from '../../../../__mocks__';
 import { bedLayoutToBed, filterBeds } from '../ward-view/ward-view.resource';
 import useWardLocation from '../hooks/useWardLocation';
-import OccupiedBed from './occupied-bed.component';
+import WardBed from './ward-bed.component';
+import { type WardPatient } from '../types';
+import DefaultWardPatientCard from '../ward-view/default-ward/default-ward-patient-card.component';
 
 const defaultConfig: WardConfigObject = getDefaultsFromConfigSchema(configSchema);
 
@@ -31,34 +33,43 @@ mockedUseWardLocation.mockReturnValue({
 const mockBedToUse = mockBedLayouts[0];
 const mockBed = bedLayoutToBed(mockBedToUse);
 
-const mockWardPatientProps = {
-  admitted: true,
+const mockWardPatientAliceProps: WardPatient = {
   visit: null,
-  encounterAssigningToCurrentInpatientLocation: null,
-  firstAdmissionOrTransferEncounter: null,
+  patient: mockPatientAlice,
+  bed: mockBed,
+  inpatientAdmission: null,
+  inpatientRequest: null,
 };
 
-describe('Occupied bed', () => {
+const mockWardPatientBrianProps: WardPatient = {
+  visit: null,
+  patient: mockPatientBrian,
+  bed: mockBed,
+  inpatientAdmission: null,
+  inpatientRequest: null,
+};
+
+describe('Ward bed', () => {
   it('renders a single bed with patient details', () => {
-    render(<OccupiedBed wardPatients={[{ ...mockWardPatientProps, patient: mockPatientAlice }]} bed={mockBed} />);
+    render(
+      <WardBed
+        patientCards={[<DefaultWardPatientCard key={mockPatientAlice.uuid} {...mockWardPatientAliceProps} />]}
+        bed={mockBed}
+      />,
+    );
     const patientName = screen.getByText('Alice Johnson');
     expect(patientName).toBeInTheDocument();
     const patientAge = `${mockPatientAlice.person.age} yrs`;
     expect(screen.getByText(patientAge)).toBeInTheDocument();
-    const defaultAddressFields = ['cityVillage', 'country'];
-    defaultAddressFields.forEach((addressField) => {
-      const addressFieldValue = mockPatientAlice.person.preferredAddress[addressField] as string;
-      expect(screen.getByText(addressFieldValue)).toBeInTheDocument();
-    });
   });
 
   it('renders a divider for shared patients', () => {
     render(
-      <OccupiedBed
+      <WardBed
         bed={mockBed}
-        wardPatients={[
-          { ...mockWardPatientProps, patient: mockPatientAlice },
-          { ...mockWardPatientProps, patient: mockPatientBrian },
+        patientCards={[
+          <DefaultWardPatientCard key={mockPatientAlice.uuid} {...mockWardPatientAliceProps} />,
+          <DefaultWardPatientCard key={mockPatientBrian.uuid} {...mockWardPatientBrianProps} />,
         ]}
       />,
     );