@kenyaemr/esm-ward-app 8.0.1-pre.95 → 8.0.2

package/src/ward-workspace/admission-request-card/admission-request-card-actions.component.tsx

@@ -1,25 +1,89 @@
 import { Button } from '@carbon/react';
-import { ArrowRightIcon, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
-import React, { useCallback } from 'react';
+import {
+  ArrowRightIcon,
+  launchWorkspace,
+  showSnackbar,
+  useAppContext,
+  useFeatureFlag,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import React, { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { WardPatientCard } from '../../types';
+import useWardLocation from '../../hooks/useWardLocation';
+import type { WardPatientCardType, WardPatientWorkspaceProps, WardViewContext } from '../../types';
+import { useAdmitPatient } from '../../ward.resource';
+import { AdmissionRequestsWorkspaceContext } from '../admission-request-workspace/admission-requests.workspace';
 import type { AdmitPatientFormWorkspaceProps } from '../admit-patient-form-workspace/types';
 import styles from './admission-request-card.scss';
 
-const AdmissionRequestCardActions: WardPatientCard = ({ patient, inpatientRequest }) => {
+const AdmissionRequestCardActions: WardPatientCardType = (wardPatient) => {
+  const { patient, inpatientRequest } = wardPatient;
   const { dispositionType } = inpatientRequest;
   const { t } = useTranslation();
+  const { location } = useWardLocation();
   const responsiveSize = useLayoutType() === 'tablet' ? 'lg' : 'md';
+  const { WardPatientHeader, wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { admitPatient, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useAdmitPatient();
+
   const launchPatientAdmissionForm = useCallback(
     () => launchWorkspace<AdmitPatientFormWorkspaceProps>('admit-patient-form-workspace', { patient, dispositionType }),
     [],
   );
+
+  const launchPatientTransferForm = useCallback(() => {
+    launchWorkspace<WardPatientWorkspaceProps>('patient-transfer-request-workspace', {
+      wardPatient,
+      WardPatientHeader,
+    });
+  }, [wardPatient, WardPatientHeader]);
+  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
+  const { closeWorkspaceWithSavedChanges } = useContext(AdmissionRequestsWorkspaceContext);
+
+  // If bed management module is installed, open the next form
+  // for bed selection. If not, admit patient directly
+  const onAdmit = () => {
+    if (isBedManagementModuleInstalled) {
+      launchPatientAdmissionForm();
+    } else {
+      admitPatient(patient, dispositionType)
+        .then(
+          (response) => {
+            if (response && response?.ok) {
+              showSnackbar({
+                kind: 'success',
+                title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
+                subtitle: t('patientAdmittedWoBed', 'Patient admitted successfully to {{location}}', {
+                  location: location?.display,
+                }),
+              });
+            }
+          },
+          (err: Error) => {
+            showSnackbar({
+              kind: 'error',
+              title: t('errorCreatingEncounter', 'Failed to admit patient'),
+              subtitle: err.message,
+            });
+          },
+        )
+        .finally(() => {
+          wardPatientGroupDetails?.mutate?.();
+          closeWorkspaceWithSavedChanges();
+        });
+    }
+  };
+
   return (
     <div className={styles.admissionRequestActionBar}>
-      <Button kind="ghost" size={responsiveSize}>
+      <Button kind="ghost" size={responsiveSize} onClick={launchPatientTransferForm}>
         {t('transferElsewhere', 'Transfer elsewhere')}
       </Button>
-      <Button kind="ghost" renderIcon={ArrowRightIcon} size={responsiveSize} onClick={launchPatientAdmissionForm}>
+      <Button
+        kind="ghost"
+        renderIcon={ArrowRightIcon}
+        size={responsiveSize}
+        disabled={isLoadingEmrConfiguration || errorFetchingEmrConfiguration}
+        onClick={onAdmit}>
         {t('admitPatient', 'Admit patient')}
       </Button>
     </div>

package/src/ward-workspace/admission-request-card/admission-request-card-header.component.tsx

@@ -1,33 +1,25 @@
-import { ExtensionSlot, formatDatetime, getLocale } from '@openmrs/esm-framework';
+import { formatDatetime, getLocale } from '@openmrs/esm-framework';
 import classNames from 'classnames';
 import React from 'react';
-import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
-import styles from './admission-request-card.scss';
-import type WardPatientCard from '../../ward-patient-card/ward-patient-card.component';
-import { useCurrentWardCardConfig } from '../../hooks/useCurrentWardCardConfig';
-import { WardPatientCardElement } from '../../ward-patient-card/ward-patient-card-element.component';
+import { type WardPatientCardType } from '../../types';
+import WardPatientAge from '../../ward-patient-card/row-elements/ward-patient-age';
+import WardPatientGender from '../../ward-patient-card/row-elements/ward-patient-gender.component';
+import WardPatientIdentifier from '../../ward-patient-card/row-elements/ward-patient-identifier';
 import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name';
+import styles from './admission-request-card.scss';
 
-const AdmissionRequestCardHeader: WardPatientCard = (wardPatient) => {
+const AdmissionRequestCardHeader: WardPatientCardType = (wardPatient) => {
   const { inpatientRequest } = wardPatient;
   const { dispositionEncounter } = inpatientRequest;
-  const { id, headerRowElements } = useCurrentWardCardConfig();
   const { patient } = wardPatient;
-  const extensionSlotState = wardPatient;
-
-  const rowsExtensionSlotName = id == 'default' ? 'ward-patient-card-slot' : `ward-patient-card-${id}-slot`;
 
   return (
     <div className={styles.admissionRequestCardHeaderContainer}>
       <div className={styles.admissionRequestCardHeader}>
         <WardPatientName patient={patient} />
-        {headerRowElements.map((elementId, i) => (
-          <WardPatientCardElement
-            key={`ward-card-${patient.uuid}-header-${i}`}
-            elementId={elementId}
-            {...wardPatient}
-          />
-        ))}
+        <WardPatientIdentifier id="patient-identifier" patient={patient} />
+        <WardPatientGender patient={patient} />
+        <WardPatientAge patient={patient} />
       </div>
       <div className={classNames(styles.admissionRequestCardHeader, styles.admissionEncounterDetails)}>
         <div>
@@ -39,11 +31,6 @@ const AdmissionRequestCardHeader: WardPatientCard = (wardPatient) => {
         <div>{dispositionEncounter?.encounterProviders?.map((provider) => provider?.provider?.display).join(',')}</div>
         <div>{dispositionEncounter?.location?.display}</div>
       </div>
-      <ExtensionSlot
-        name={rowsExtensionSlotName}
-        state={extensionSlotState}
-        className={styles.admissionRequestCardRow}
-      />
     </div>
   );
 };

package/src/ward-workspace/admission-request-card/admission-request-card.component.tsx

@@ -1,13 +1,19 @@
-import React from 'react';
-import type { WardPatientCard } from '../../types';
+import React, { type ReactNode } from 'react';
+import type { WardPatient, WardPatientCardType } from '../../types';
 import AdmissionRequestCardActions from './admission-request-card-actions.component';
 import AdmissionRequestCardHeader from './admission-request-card-header.component';
 import styles from './admission-request-card.scss';
 
-const AdmissionRequestCard: WardPatientCard = (wardPatient) => {
+interface AdmissionRequestCardProps {
+  wardPatient: WardPatient;
+  children?: ReactNode;
+}
+
+const AdmissionRequestCard: React.FC<AdmissionRequestCardProps> = ({ wardPatient, children }) => {
   return (
     <div className={styles.admissionRequestCard}>
       <AdmissionRequestCardHeader {...wardPatient} />
+      {children}
       <AdmissionRequestCardActions {...wardPatient} />
     </div>
   );

package/src/ward-workspace/admission-request-card/admission-request-card.scss

@@ -8,6 +8,11 @@
   height: fit-content;
   color: $color-gray-70;
   margin-bottom: layout.$spacing-05;
+
+  > div {
+    margin: layout.$spacing-04;
+    width: unset;
+  }
 }
 
 .admissionRequestCardHeaderContainer {
@@ -25,10 +30,14 @@
   }
 }
 
-.admissionRequestCardRow {
-  padding: layout.$spacing-05;
-  margin: layout.$spacing-03;
-  background-color: white;
+.admissionRequestCardExtensionSlot {
+  display: none;
+
+  &:has(div:not(:empty)) {
+    display: block;
+    margin: layout.$spacing-03 0;
+    background-color: white;
+  }
 }
 
 .admissionEncounterDetails {

package/src/ward-workspace/admission-request-workspace/admission-requests-workspace.test.tsx

@@ -1,48 +1,70 @@
-import React from 'react';
+import { useAppContext } from '@openmrs/esm-framework';
 import { screen } from '@testing-library/react';
-import { defineConfigSchema } from '@openmrs/esm-framework';
-import { useInpatientRequest } from '../../hooks/useInpatientRequest';
-import { configSchema } from '../../config-schema';
-import useWardLocation from '../../hooks/useWardLocation';
-import AdmissionRequestsWorkspace from './admission-requests.workspace';
-import { mockInpatientRequest, mockLocationInpatientWard } from '../../../../../__mocks__';
+import React from 'react';
 import { renderWithSwr } from '../../../../../tools';
+import { mockWardViewContext } from '../../../mock';
+import useEmrConfiguration from '../../hooks/useEmrConfiguration';
+import { type WardViewContext } from '../../types';
+import DefaultWardPendingPatients from '../../ward-view/default-ward/default-ward-pending-patients.component';
+import AdmissionRequestsWorkspace, { type AdmissionRequestsWorkspaceProps } from './admission-requests.workspace';
 
-defineConfigSchema('@openmrs/esm-ward-app', configSchema);
-
-jest.mock('../../hooks/useInpatientRequest', () => ({
-  useInpatientRequest: jest.fn(),
-}));
-jest.mock('../../hooks/useWardLocation', () => jest.fn());
-
-const mockUseWardLocation = useWardLocation as jest.Mock;
-mockUseWardLocation.mockReturnValue({
-  location: mockLocationInpatientWard,
-  isLoadingLocation: false,
-  errorFetchingLocation: null,
-  invalidLocation: false,
-});
-
-const mockInpatientRequestResponse = {
-  error: undefined,
-  mutate: jest.fn(),
-  isValidating: false,
-  isLoading: false,
-  inpatientRequests: [mockInpatientRequest],
-};
+jest.mocked(useAppContext<WardViewContext>).mockReturnValue(mockWardViewContext);
 
-jest.mocked(useInpatientRequest).mockReturnValue(mockInpatientRequestResponse);
+jest.mock('../../hooks/useEmrConfiguration', () => jest.fn());
+const mockedUseEmrConfiguration = jest.mocked(useEmrConfiguration);
 
-const workspaceProps = {
+const workspaceProps: AdmissionRequestsWorkspaceProps = {
   closeWorkspace: jest.fn(),
   promptBeforeClosing: jest.fn(),
   closeWorkspaceWithSavedChanges: jest.fn(),
   setTitle: jest.fn(),
+  wardPendingPatients: <DefaultWardPendingPatients />,
 };
 
 describe('Admission Requests Workspace', () => {
-  it('should render a admission request card', () => {
+  beforeEach(() => {
+    mockedUseEmrConfiguration.mockReturnValue({
+      isLoadingEmrConfiguration: false,
+      errorFetchingEmrConfiguration: null,
+      // @ts-ignore - we only need these keys for now
+      emrConfiguration: {
+        admissionEncounterType: {
+          uuid: 'admission-encounter-type-uuid',
+          display: 'Admission Encounter',
+        },
+        transferWithinHospitalEncounterType: {
+          uuid: 'transfer-within-hospital-encounter-type-uuid',
+          display: 'Transfer Within Hospital Encounter Type',
+        },
+        clinicianEncounterRole: {
+          uuid: 'clinician-encounter-role-uuid',
+        },
+      },
+      mutateEmrConfiguration: jest.fn(),
+    });
+  });
+
+  it('should render an admission request card', () => {
+    renderWithSwr(<AdmissionRequestsWorkspace {...workspaceProps} />);
+    const alice = mockWardViewContext.wardPatientGroupDetails.inpatientRequestResponse.inpatientRequests[0].patient;
+    expect(screen.getByText(alice.person?.preferredName?.display as string)).toBeInTheDocument();
+  });
+
+  it('should render an admission request card with disabled "admit patient" button when emr config fails to load', () => {
+    mockedUseEmrConfiguration.mockReturnValue({
+      isLoadingEmrConfiguration: false,
+      errorFetchingEmrConfiguration: true,
+      emrConfiguration: null,
+      mutateEmrConfiguration: jest.fn(),
+    });
+
     renderWithSwr(<AdmissionRequestsWorkspace {...workspaceProps} />);
-    expect(screen.getByText(mockInpatientRequest.patient.person?.preferredName?.display as string)).toBeInTheDocument();
+    expect(screen.getByText("Some parts of the form didn't load")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'Fetching EMR configuration failed. Try refreshing the page or contact your system administrator.',
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Admit patient/i })).toBeDisabled();
   });
 });

package/src/ward-workspace/admission-request-workspace/admission-requests.workspace.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import styles from './admission-requests-workspace.scss';
-import AdmissionRequestCard from '../admission-request-card/admission-request-card.component';
-import { Search } from '@carbon/react';
-import { ErrorState } from '@openmrs/esm-framework';
+import { InlineNotification, Search } from '@carbon/react';
+import { type DefaultWorkspaceProps } from '@openmrs/esm-framework';
+import React, { createContext, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useInpatientRequest } from '../../hooks/useInpatientRequest';
-import { type InpatientRequest } from '../../types';
+import useEmrConfiguration from '../../hooks/useEmrConfiguration';
+import styles from './admission-requests-workspace.scss';
+
+export interface AdmissionRequestsWorkspaceProps extends DefaultWorkspaceProps {
+  wardPendingPatients: ReactNode;
+}
 
-interface AdmissionRequestsWorkspaceProps {}
-const AdmissionRequestsWorkspace: React.FC<AdmissionRequestsWorkspaceProps> = () => {
-  const {
-    inpatientRequests,
-    isLoading: isLoadingInpatientRequests,
-    error: errorFetchingInpatientRequests,
-  } = useInpatientRequest(['ADMIT', 'TRANSFER']);
+export const AdmissionRequestsWorkspaceContext = createContext<AdmissionRequestsWorkspaceProps>(null);
+
+const AdmissionRequestsWorkspace: React.FC<AdmissionRequestsWorkspaceProps> = (props) => {
+  const { wardPendingPatients } = props;
   const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = React.useState('');
   const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(event.target.value);
   };
+  const { errorFetchingEmrConfiguration } = useEmrConfiguration();
 
   return (
     <div className={styles.admissionRequestsWorkspaceContainer}>
@@ -30,30 +30,23 @@ const AdmissionRequestsWorkspace: React.FC<AdmissionRequestsWorkspaceProps> = ()
         placeholder={t('searchForPatient', 'Search for a patient')}
         disabled
       />
-
-      <div className={styles.content}>
-        {isLoadingInpatientRequests ? (
-          <>Loading</>
-        ) : errorFetchingInpatientRequests ? (
-          <ErrorState
-            headerTitle={t('admissionRequests', 'Admission requests')}
-            error={errorFetchingInpatientRequests}
+      {errorFetchingEmrConfiguration && (
+        <div className={styles.formError}>
+          <InlineNotification
+            kind="error"
+            title={t('somePartsOfTheFormDidntLoad', "Some parts of the form didn't load")}
+            subtitle={t(
+              'fetchingEmrConfigurationFailed',
+              'Fetching EMR configuration failed. Try refreshing the page or contact your system administrator.',
+            )}
+            lowContrast
+            hideCloseButton
           />
-        ) : (
-          <>
-            {inpatientRequests.map((request: InpatientRequest, i) => (
-              <AdmissionRequestCard
-                key={`admission-request-card-${i}`}
-                patient={request.patient}
-                visit={request.visit}
-                bed={null}
-                inpatientRequest={request}
-                inpatientAdmission={null}
-              />
-            ))}
-          </>
-        )}
-      </div>
+        </div>
+      )}
+      <AdmissionRequestsWorkspaceContext.Provider value={props}>
+        <div className={styles.content}>{wardPendingPatients}</div>
+      </AdmissionRequestsWorkspaceContext.Provider>
     </div>
   );
 };