@kenyaemr/esm-ward-app 8.1.1-pre.124 → 8.1.2-pre.152

package/src/ward-workspace/admit-patient-form-workspace/admit-patient-form.workspace.tsx

@@ -1,17 +1,17 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, ButtonSet, Column, Form, InlineNotification, Row } from '@carbon/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { showSnackbar, useAppContext } from '@openmrs/esm-framework';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
+import { showSnackbar, useAppContext } from '@openmrs/esm-framework';
+import type { WardPatientWorkspaceProps, WardViewContext } from '../../types';
 import { useAssignedBedByPatient } from '../../hooks/useAssignedBedByPatient';
-import useWardLocation from '../../hooks/useWardLocation';
-import type { WardViewContext } from '../../types';
 import { assignPatientToBed, removePatientFromBed, useAdmitPatient } from '../../ward.resource';
+import useWardLocation from '../../hooks/useWardLocation';
 import BedSelector from '../bed-selector.component';
+import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
 import styles from './admit-patient-form.scss';
-import type { AdmitPatientFormWorkspaceProps } from './types';
 
 /**
  * This form gets rendered when the user clicks "admit patient" in
@@ -19,13 +19,15 @@ import type { AdmitPatientFormWorkspaceProps } from './types';
  * the bed management module is installed. It asks to (optionally) select
  * a bed to assign to patient
  */
-const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
-  patient,
-  dispositionType,
+const AdmitPatientFormWorkspace: React.FC<WardPatientWorkspaceProps> = ({
+  wardPatient,
   closeWorkspace,
   closeWorkspaceWithSavedChanges,
   promptBeforeClosing,
 }) => {
+  const { patient, inpatientRequest } = wardPatient ?? {};
+  const dispositionType = inpatientRequest?.dispositionType ?? 'ADMIT';
+
   const { t } = useTranslation();
   const { location } = useWardLocation();
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -44,7 +46,7 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
       z.object({
         bedId: z.number().optional(),
       }),
-    [beds],
+    [],
   );
 
   type FormValues = z.infer<typeof zodSchema>;
@@ -59,7 +61,7 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
 
   useEffect(() => {
     promptBeforeClosing(() => isDirty);
-  }, [isDirty]);
+  }, [isDirty, promptBeforeClosing]);
 
   const onSubmit = (values: FormValues) => {
     setShowErrorNotifications(false);
@@ -139,64 +141,68 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
   }, []);
 
   if (!wardPatientGroupDetails) return <></>;
+
   return (
-    <Form control={control} className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
-      <div className={styles.formContent}>
-        <Row>
-          <Column>
-            <h2 className={styles.productiveHeading02}>{t('selectABed', 'Select a bed')}</h2>
-            <div className={styles.bedSelectionDropdown}>
-              <Controller
-                control={control}
-                name="bedId"
-                render={({ field: { onChange, value }, fieldState: { error } }) => {
-                  return (
-                    <BedSelector
-                      beds={beds}
-                      isLoadingBeds={isLoading}
-                      currentPatient={patient}
-                      selectedBedId={value}
-                      error={error}
-                      control={control}
-                      onChange={onChange}
-                    />
-                  );
-                }}
-              />
-            </div>
-          </Column>
-        </Row>
-        <div className={styles.errorNotifications}>
-          {showErrorNotifications &&
-            Object.entries(errors).map(([key, value]) => {
-              return (
-                <Row key={key}>
-                  <Column>
-                    <InlineNotification kind="error" subtitle={value.message} lowContrast />
-                  </Column>
-                </Row>
-              );
-            })}
+    <div className={styles.flexWrapper}>
+      <WardPatientWorkspaceBanner {...{ wardPatient }} />
+      <Form control={control} className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
+        <div className={styles.formContent}>
+          <Row>
+            <Column>
+              <h2 className={styles.productiveHeading02}>{t('selectABed', 'Select a bed')}</h2>
+              <div className={styles.bedSelectionDropdown}>
+                <Controller
+                  control={control}
+                  name="bedId"
+                  render={({ field: { onChange, value }, fieldState: { error } }) => {
+                    return (
+                      <BedSelector
+                        beds={beds}
+                        isLoadingBeds={isLoading}
+                        currentPatient={patient}
+                        selectedBedId={value}
+                        error={error}
+                        control={control}
+                        onChange={onChange}
+                      />
+                    );
+                  }}
+                />
+              </div>
+            </Column>
+          </Row>
+          <div className={styles.errorNotifications}>
+            {showErrorNotifications &&
+              Object.entries(errors).map(([key, value]) => {
+                return (
+                  <Row key={key}>
+                    <Column>
+                      <InlineNotification kind="error" subtitle={value.message} lowContrast />
+                    </Column>
+                  </Row>
+                );
+              })}
+          </div>
         </div>
-      </div>
-      <ButtonSet className={styles.buttonSet}>
-        <Button size="xl" kind="secondary" onClick={() => closeWorkspace({ ignoreChanges: true })}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button
-          type="submit"
-          size="xl"
-          disabled={
-            isSubmitting ||
-            isLoadingEmrConfiguration ||
-            errorFetchingEmrConfiguration ||
-            isLoading ||
-            isLoadingBedsAssignedToPatient
-          }>
-          {!isSubmitting ? t('admit', 'Admit') : t('admitting', 'Admitting...')}
-        </Button>
-      </ButtonSet>
-    </Form>
+        <ButtonSet className={styles.buttonSet}>
+          <Button size="xl" kind="secondary" onClick={() => closeWorkspace({ ignoreChanges: true })}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button
+            type="submit"
+            size="xl"
+            disabled={
+              isSubmitting ||
+              isLoadingEmrConfiguration ||
+              errorFetchingEmrConfiguration ||
+              isLoading ||
+              isLoadingBedsAssignedToPatient
+            }>
+            {!isSubmitting ? t('admit', 'Admit') : t('admitting', 'Admitting...')}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </div>
   );
 };
 

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

@@ -0,0 +1,55 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.flexWrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #393939;
+}
+
+.workspaceContent {
+  padding: layout.$spacing-05;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #393939;
+}
+
+.field {
+  margin-bottom: layout.$spacing-05;
+  & > h2 {
+    margin-bottom: layout.$spacing-03;
+  }
+}
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+}
+
+.formContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.buttonSet {
+  display: flex;
+  align-items: center;
+  margin: 0 (-(layout.$spacing-05)) (-(layout.$spacing-05)) (-(layout.$spacing-05));
+
+  button {
+    max-width: unset !important;
+    width: 50% !important;
+
+    > svg {
+      fill: currentColor !important;
+    }
+  }
+}
+
+.notifications {
+  margin-top: layout.$spacing-05;
+}

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useAppContext, type DefaultWorkspaceProps } from '@openmrs/esm-framework';
+import { mockInpatientRequestAlice, mockLocationInpatientWard, mockPatientAlice } from '__mocks__';
+import { renderWithSwr } from 'tools';
+import useWardLocation from '../../hooks/useWardLocation';
+import type { WardPatient, WardViewContext } from '../../types';
+import { useCreateEncounter } from '../../ward.resource';
+import CancelAdmissionRequestWorkspace from './cancel-admission-request.workspace';
+import { mockWardViewContext } from '../../../mock';
+
+jest.mock('../../hooks/useWardLocation', () => jest.fn());
+
+jest.mock('../../hooks/useInpatientRequest', () => ({
+  useInpatientRequest: jest.fn(),
+}));
+
+jest.mock('../../hooks/useWardPatientGrouping', () => ({
+  useWardPatientGrouping: jest.fn(),
+}));
+
+jest.mock('../../hooks/useInpatientAdmission', () => ({
+  useInpatientAdmission: jest.fn(),
+}));
+
+jest.mock('../../ward.resource', () => ({
+  useCreateEncounter: jest.fn(),
+}));
+
+const mockedUseWardLocation = jest.mocked(useWardLocation);
+const mockedCreateEncounter = jest.fn().mockResolvedValue({
+  ok: true,
+  data: {
+    uuid: 'encounter-uuid',
+  },
+});
+const mockedUseCreateEncounter = jest.mocked(useCreateEncounter);
+mockedUseCreateEncounter.mockReturnValue({
+  createEncounter: mockedCreateEncounter,
+  isLoadingEmrConfiguration: false,
+  errorFetchingEmrConfiguration: false,
+  emrConfiguration: null,
+});
+
+mockedUseWardLocation.mockReturnValue({
+  location: mockLocationInpatientWard,
+  invalidLocation: false,
+  isLoadingLocation: false,
+  errorFetchingLocation: null,
+});
+
+const mockWorkspaceProps: DefaultWorkspaceProps = {
+  closeWorkspaceWithSavedChanges: jest.fn(),
+  promptBeforeClosing: jest.fn(),
+  setTitle: jest.fn(),
+  closeWorkspace: jest.fn(),
+};
+
+const mockWardPatientAliceProps: WardPatient = {
+  visit: mockInpatientRequestAlice.visit,
+  patient: mockPatientAlice,
+  bed: null,
+  inpatientAdmission: null,
+  inpatientRequest: mockInpatientRequestAlice,
+};
+
+jest.mocked(useAppContext<WardViewContext>).mockReturnValue(mockWardViewContext);
+
+function renderCancelAdmissionRequestWorkspace() {
+  renderWithSwr(
+    <CancelAdmissionRequestWorkspace
+      {...{ ...mockWorkspaceProps, wardPatient: mockWardPatientAliceProps, WardPatientHeader: jest.fn() }}
+    />,
+  );
+}
+
+describe('CancelAdmissionRequestWorkspace', () => {
+  it('should cancel admission request form creates encounter when form is filled out and submitted ', async () => {
+    const user = userEvent.setup();
+    renderCancelAdmissionRequestWorkspace();
+
+    const textbox = screen.getByRole('textbox');
+    expect(textbox).toBeInTheDocument();
+    const submit = screen.getByRole('button', { name: /save/i });
+    await user.click(submit);
+
+    const warningText = /notes required for cancelling admission or transfer request/i;
+    const warning = screen.getByText(warningText);
+    expect(warning).toBeInTheDocument();
+
+    await user.type(textbox, 'Test note');
+    expect(screen.queryByText(warningText)).not.toBeInTheDocument();
+
+    await user.click(submit);
+
+    expect(mockedCreateEncounter).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,174 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button, ButtonSet, Form, InlineNotification, TextArea } from '@carbon/react';
+import classNames from 'classnames';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { ResponsiveWrapper, showSnackbar, useAppContext, useSession } from '@openmrs/esm-framework';
+import type { ObsPayload, WardPatientWorkspaceProps, WardViewContext } from '../../types';
+import { useCreateEncounter } from '../../ward.resource';
+import useWardLocation from '../../hooks/useWardLocation';
+import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
+import styles from './cancel-admission-request.scss';
+
+export default function CancelAdmissionRequestWorkspace({
+  closeWorkspaceWithSavedChanges,
+  wardPatient,
+  promptBeforeClosing,
+}: WardPatientWorkspaceProps) {
+  const { patient } = wardPatient ?? {};
+  const { t } = useTranslation();
+  const [showErrorNotifications, setShowErrorNotifications] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { createEncounter, emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } =
+    useCreateEncounter();
+  const { currentProvider } = useSession();
+  const { location } = useWardLocation();
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
+
+  const zodSchema = useMemo(
+    () =>
+      z.object({
+        note: z
+          .string()
+          .trim()
+          .min(1, {
+            message: t(
+              'notesRequiredForCancellingRequest',
+              'Notes required for cancelling admission or transfer request',
+            ),
+          }),
+      }),
+    [t],
+  );
+
+  type FormValues = z.infer<typeof zodSchema>;
+
+  const formDefaultValues: Partial<FormValues> = {
+    note: '',
+  };
+
+  const {
+    formState: { errors, isDirty },
+    control,
+    handleSubmit,
+  } = useForm<FormValues>({ resolver: zodResolver(zodSchema), defaultValues: formDefaultValues });
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+    return () => promptBeforeClosing(null);
+  }, [isDirty, promptBeforeClosing]);
+
+  const onSubmit = useCallback(
+    (values: FormValues) => {
+      setIsSubmitting(true);
+      setShowErrorNotifications(false);
+      const obs: Array<ObsPayload> = [
+        {
+          concept: emrConfiguration?.consultFreeTextCommentsConcept?.uuid,
+          value: values.note,
+        },
+        {
+          concept: emrConfiguration?.admissionDecisionConcept?.uuid,
+          value: {
+            uuid: emrConfiguration?.denyAdmissionConcept?.uuid,
+          },
+        },
+      ];
+
+      createEncounter(patient, emrConfiguration?.cancelADTRequestEncounterType, obs)
+        .then(() => {
+          showSnackbar({
+            title: t('admissionRequestCancelled', 'Admission request cancelled.'),
+            kind: 'success',
+          });
+        })
+        .catch((err: Error) => {
+          showSnackbar({
+            title: t('Error cancelling admission request', 'Error cancelling admission request'),
+            subtitle: err.message,
+            kind: 'error',
+          });
+        })
+        .finally(() => {
+          setIsSubmitting(false);
+          closeWorkspaceWithSavedChanges();
+          wardPatientGroupDetails.mutate();
+        });
+    },
+    [
+      emrConfiguration?.consultFreeTextCommentsConcept?.uuid,
+      emrConfiguration?.admissionDecisionConcept?.uuid,
+      emrConfiguration?.denyAdmissionConcept?.uuid,
+      emrConfiguration?.cancelADTRequestEncounterType,
+      createEncounter,
+      patient,
+      t,
+      closeWorkspaceWithSavedChanges,
+      wardPatientGroupDetails,
+    ],
+  );
+
+  const onError = useCallback(() => {
+    setIsSubmitting(false);
+    setShowErrorNotifications(true);
+  }, []);
+
+  if (!wardPatientGroupDetails) return <></>;
+  return (
+    <div className={styles.flexWrapper}>
+      <WardPatientWorkspaceBanner wardPatient={wardPatient} />
+      <Form
+        onSubmit={handleSubmit(onSubmit, onError)}
+        className={classNames(styles.formContainer, styles.workspaceContent)}>
+        <div>
+          {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
+              />
+            </div>
+          )}
+          <div className={styles.field}>
+            <h2 className={styles.productiveHeading02}>{t('clinicalNotes', 'Clinical notes')}</h2>
+            <Controller
+              name="note"
+              control={control}
+              render={({ field, fieldState: { error } }) => (
+                <ResponsiveWrapper>
+                  <TextArea {...field} labelText={''} />
+                </ResponsiveWrapper>
+              )}
+            />
+          </div>
+          {showErrorNotifications && (
+            <div className={styles.notifications}>
+              {Object.values(errors).map((error) => (
+                <InlineNotification key={error.message} lowContrast subtitle={error?.message} hideCloseButton />
+              ))}
+            </div>
+          )}
+        </div>
+        <ButtonSet className={styles.buttonSet}>
+          <Button size="xl" kind="secondary" onClick={closeWorkspaceWithSavedChanges}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button
+            type="submit"
+            size="xl"
+            disabled={isLoadingEmrConfiguration || isSubmitting || errorFetchingEmrConfiguration || !patient}>
+            {t('save', 'Save')}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </div>
+  );
+}

package/src/ward-workspace/patient-banner/patient-banner.component.tsx

@@ -1,21 +1,23 @@
 import { useAppContext } from '@openmrs/esm-framework';
 import React from 'react';
-import type { WardPatient, WardViewContext } from '../../types';
+import type { WardPatientCardType, WardViewContext } from '../../types';
 import styles from './style.scss';
 
-const WardPatientWorkspaceBanner = (wardPatient: WardPatient) => {
-  const { patient } = wardPatient;
-  const {WardPatientHeader} = useAppContext<WardViewContext>('ward-view-context') ?? {};
+const WardPatientWorkspaceBanner: WardPatientCardType = ({ wardPatient }) => {
+  const { patient } = wardPatient ?? {};
+  const { WardPatientHeader } = useAppContext<WardViewContext>('ward-view-context') ?? {};
 
   if (!patient) {
     console.warn('Patient details were not received by the ward workspace');
     return null;
   }
 
-  return (
-    <div className={styles.patientBanner}>
-      {WardPatientHeader && <WardPatientHeader {...wardPatient} />}
+  return WardPatientHeader ? (
+    <div className={styles.wardWorkspacePatientBanner}>
+      <WardPatientHeader wardPatient={wardPatient} />
     </div>
+  ) : (
+    <></>
   );
 };
 

package/src/ward-workspace/patient-banner/style.scss

@@ -1,23 +1,7 @@
-@use '@carbon/layout';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
-.patientBanner {
-  @extend .dotSeparatedChildren;
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  padding: layout.$spacing-04;
-  background: $ui-01;
-}
-
-.dotSeparatedChildren {
-  > div:not(div:first-of-type):not(:empty) {
-    display: flex;
-    align-items: center;
-
-    &::before {
-      content: '·';
-      padding: 0 layout.$spacing-02;
-    }
+.wardWorkspacePatientBanner {
+  > div {
+    background: $ui-01;
   }
 }

package/src/ward-workspace/patient-clinical-forms-workspace/patient-clinical-forms.workspace.tsx

@@ -1,6 +1,7 @@
-import React, { useMemo } from 'react';
 import { ExtensionSlot } from '@openmrs/esm-framework';
+import React, { useMemo } from 'react';
 import type { WardPatientWorkspaceProps } from '../../types';
+import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
 
 const WardPatientClinicalFormsWorkspace: React.FC<WardPatientWorkspaceProps> = (props) => {
   const { wardPatient, ...restWorkspaceProps } = props;
@@ -17,7 +18,12 @@ const WardPatientClinicalFormsWorkspace: React.FC<WardPatientWorkspaceProps> = (
     [patientUuid, restWorkspaceProps],
   );
 
-  return <ExtensionSlot name="ward-patient-clinical-forms-workspace-slot" state={clinicalFormsExtensionState} />;
+  return (
+    <div>
+      <WardPatientWorkspaceBanner {...{ wardPatient }} />
+      <ExtensionSlot name="ward-patient-clinical-forms-workspace-slot" state={clinicalFormsExtensionState} />
+    </div>
+  );
 };
 
 export default WardPatientClinicalFormsWorkspace;

package/src/ward-workspace/patient-details/ward-patient-action-button.extension.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { UserAvatarIcon } from '@openmrs/esm-framework';
-import { ActionMenuButton, launchWorkspace } from '@openmrs/esm-framework';
+import { ActionMenuButton, launchWorkspace, UserAvatarIcon } from '@openmrs/esm-framework';
 import type { WardPatientWorkspaceProps } from '../../types';
 
 export default function WardPatientActionButton() {
@@ -12,7 +11,7 @@ export default function WardPatientActionButton() {
       getIcon={(props) => <UserAvatarIcon {...props} />}
       label={t('Patient', 'patient')}
       iconDescription={t('Patient', 'patient')}
-      handler={() =>  launchWorkspace<WardPatientWorkspaceProps>('ward-patient-workspace')}
+      handler={() => launchWorkspace<WardPatientWorkspaceProps>('ward-patient-workspace')}
       type={'ward'}
     />
   );

package/src/ward-workspace/patient-details/ward-patient.style.scss

@@ -5,7 +5,19 @@
   min-height: var(--desktop-workspace-window-height);
 }
 
+.patientWorkspace {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+
 .headerPatientDetail {
   @include type.type-style('body-compact-02');
   margin: 0 layout.$spacing-02;
 }
+
+.patientWorkspaceContentSlot {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}