@openmrs/esm-ward-app 9.2.1-pre.7254 → 9.2.1-pre.7261

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

@@ -1,44 +1,44 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InlineNotification } from '@carbon/react';
-import { useAppContext } from '@openmrs/esm-framework';
+import { useAppContext, Workspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
 import { type WardViewContext } from '../../types';
-import {
-  AdmissionRequestsWorkspaceContextProvider,
-  type AdmissionRequestsWorkspaceContextProps,
-} from './admission-requests-context';
 import AdmissionRequestsEmptyState from './admission-requests-empty-state.component';
 import useEmrConfiguration from '../../hooks/useEmrConfiguration';
 import styles from './admission-requests-workspace.scss';
+export interface AdmissionRequestsWorkspaceProps {
+  wardPendingPatients: ReactNode;
+}
 
-const AdmissionRequestsWorkspace: React.FC<AdmissionRequestsWorkspaceContextProps> = ({ wardPendingPatients }) => {
+const AdmissionRequestsWorkspace: React.FC<Workspace2DefinitionProps<AdmissionRequestsWorkspaceProps>> = ({
+  workspaceProps: { wardPendingPatients },
+}) => {
   const { t } = useTranslation();
   const { errorFetchingEmrConfiguration } = useEmrConfiguration();
   const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
-  const { inpatientRequests, isLoading, error } = wardPatientGroupDetails?.inpatientRequestResponse ?? {};
+  const { inpatientRequests, isLoading } = wardPatientGroupDetails?.inpatientRequestResponse ?? {};
 
   return (
-    <div className={styles.admissionRequestsWorkspaceContainer}>
-      {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>
-      )}
-      {inpatientRequests?.length === 0 && !isLoading && <AdmissionRequestsEmptyState />}
-      <AdmissionRequestsWorkspaceContextProvider
-        value={{ wardPendingPatients } as unknown as AdmissionRequestsWorkspaceContextProps}>
+    <Workspace2 title={t('admissionRequests', 'Admission requests')}>
+      <div className={styles.admissionRequestsWorkspaceContainer}>
+        {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>
+        )}
+        {inpatientRequests?.length === 0 && !isLoading && <AdmissionRequestsEmptyState />}
         <div className={styles.content}>{wardPendingPatients}</div>
-      </AdmissionRequestsWorkspaceContextProvider>
-    </div>
+      </div>
+    </Workspace2>
   );
 };
 

package/src/ward-workspace/admit-patient-button.component.tsx

@@ -3,11 +3,12 @@ import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
 import {
   ArrowRightIcon,
-  launchWorkspace,
+  launchWorkspace2,
   showSnackbar,
   useAppContext,
   useFeatureFlag,
   useLayoutType,
+  Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
 import useWardLocation from '../hooks/useWardLocation';
 import type { DispositionType, WardPatient, WardPatientWorkspaceProps, WardViewContext } from '../types';
@@ -39,7 +40,7 @@ const AdmitPatientButton: React.FC<AdmitPatientButtonProps> = ({
   const [isAdmitting, setIsAdmitting] = useState(false);
 
   const launchPatientAdmissionForm = () =>
-    launchWorkspace<WardPatientWorkspaceProps>('admit-patient-form-workspace', { wardPatient });
+    launchWorkspace2<WardPatientWorkspaceProps, {}, {}>('admit-patient-form-workspace', { wardPatient });
 
   const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
 

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

@@ -7,12 +7,13 @@ import {
   useAppContext,
   useFeatureFlag,
   useSession,
+  type Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
 import { mockInpatientRequestAlice, mockLocationInpatientWard, mockPatientAlice } from '__mocks__';
 import { renderWithSwr } from 'tools';
 import { mockWardPatientGroupDetails, mockWardViewContext } from '../../../mock';
 import { useAssignedBedByPatient } from '../../hooks/useAssignedBedByPatient';
-import type { WardPatient, WardViewContext } from '../../types';
+import type { WardPatient, WardPatientWorkspaceProps, WardViewContext } from '../../types';
 import { assignPatientToBed, removePatientFromBed, useAdmitPatient } from '../../ward.resource';
 import AdmitPatientFormWorkspace from './admit-patient-form.workspace';
 import useWardLocation from '../../hooks/useWardLocation';
@@ -64,13 +65,6 @@ const mockUseAdmitPatientObj: ReturnType<typeof useAdmitPatient> = {
 };
 jest.mocked(useAdmitPatient).mockReturnValue(mockUseAdmitPatientObj);
 
-const mockWorkspaceProps: DefaultWorkspaceProps = {
-  closeWorkspaceWithSavedChanges: jest.fn(),
-  promptBeforeClosing: jest.fn(),
-  setTitle: jest.fn(),
-  closeWorkspace: jest.fn(),
-};
-
 const mockWardPatientAliceProps: WardPatient = {
   visit: mockInpatientRequestAlice.visit,
   patient: mockPatientAlice,
@@ -79,12 +73,21 @@ const mockWardPatientAliceProps: WardPatient = {
   inpatientRequest: mockInpatientRequestAlice,
 };
 
+const mockWorkspaceProps: Workspace2DefinitionProps<WardPatientWorkspaceProps, {}, {}> = {
+  closeWorkspace: jest.fn(),
+  launchChildWorkspace: jest.fn(),
+  workspaceProps: {
+    wardPatient: mockWardPatientAliceProps,
+  },
+  windowProps: {},
+  groupProps: {},
+  workspaceName: '',
+  windowName: '',
+  isRootWorkspace: false,
+};
+
 function renderAdmissionForm() {
-  renderWithSwr(
-    <AdmitPatientFormWorkspace
-      {...{ ...mockWorkspaceProps, wardPatient: mockWardPatientAliceProps, WardPatientHeader: jest.fn() }}
-    />,
-  );
+  renderWithSwr(<AdmitPatientFormWorkspace {...mockWorkspaceProps} />);
 }
 
 describe('Testing AdmitPatientForm', () => {
@@ -151,9 +154,7 @@ describe('Testing AdmitPatientForm', () => {
     renderAdmissionForm();
     const cancelButton = screen.getByRole('button', { name: 'Cancel' });
     await user.click(cancelButton);
-    expect(mockWorkspaceProps.closeWorkspace).toHaveBeenCalledWith({
-      ignoreChanges: true,
-    });
+    expect(mockWorkspaceProps.closeWorkspace).toHaveBeenCalledWith();
     screen.getByText('Admit');
     expect(screen.getByText('Select a bed')).toBeInTheDocument();
 

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

@@ -4,7 +4,13 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { showSnackbar, useAppContext } from '@openmrs/esm-framework';
+import {
+  closeWorkspaceGroup2,
+  showSnackbar,
+  useAppContext,
+  Workspace2,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
 import type { WardPatientWorkspaceProps, WardViewContext } from '../../types';
 import { useAssignedBedByPatient } from '../../hooks/useAssignedBedByPatient';
 import { assignPatientToBed, removePatientFromBed, useAdmitPatient } from '../../ward.resource';
@@ -19,11 +25,9 @@ import styles from './admit-patient-form.scss';
  * the bed management module is installed. It asks to (optionally) select
  * a bed to assign to patient
  */
-const AdmitPatientFormWorkspace: React.FC<WardPatientWorkspaceProps> = ({
-  wardPatient,
+const AdmitPatientFormWorkspace: React.FC<Workspace2DefinitionProps<WardPatientWorkspaceProps, {}, {}>> = ({
+  workspaceProps: { wardPatient },
   closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
 }) => {
   const { patient, inpatientRequest, visit } = wardPatient ?? {};
   const dispositionType = inpatientRequest?.dispositionType ?? 'ADMIT';
@@ -59,10 +63,6 @@ const AdmitPatientFormWorkspace: React.FC<WardPatientWorkspaceProps> = ({
     resolver: zodResolver(zodSchema),
   });
 
-  useEffect(() => {
-    promptBeforeClosing(() => isDirty);
-  }, [isDirty, promptBeforeClosing]);
-
   const onSubmit = (values: FormValues) => {
     setShowErrorNotifications(false);
     setIsSubmitting(true);
@@ -115,6 +115,8 @@ const AdmitPatientFormWorkspace: React.FC<WardPatientWorkspaceProps> = ({
                 }),
               });
             }
+            closeWorkspace({ discardUnsavedChanges: true });
+            closeWorkspaceGroup2();
           }
         },
         () => {
@@ -131,7 +133,6 @@ const AdmitPatientFormWorkspace: React.FC<WardPatientWorkspaceProps> = ({
       .finally(async () => {
         await wardPatientGroupDetails?.mutate?.();
         setIsSubmitting(false);
-        closeWorkspaceWithSavedChanges();
       });
   };
 
@@ -143,66 +144,68 @@ const AdmitPatientFormWorkspace: React.FC<WardPatientWorkspaceProps> = ({
   if (!wardPatientGroupDetails) return <></>;
 
   return (
-    <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>
-                );
-              })}
+    <Workspace2 title={t('admitPatient', 'Admit patient')} hasUnsavedChanges={isDirty}>
+      <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>
-    </div>
+          <ButtonSet className={styles.buttonSet}>
+            <Button size="xl" kind="secondary" onClick={() => closeWorkspace()}>
+              {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>
+    </Workspace2>
   );
 };
 

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

@@ -0,0 +1,176 @@
+import React, { useCallback, 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 {
+  closeWorkspaceGroup2,
+  getCoreTranslation,
+  ResponsiveWrapper,
+  showSnackbar,
+  useAppContext,
+  Workspace2,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import type { ObsPayload, WardPatient, WardViewContext } from '../../types';
+import { useCreateEncounter } from '../../ward.resource';
+import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
+import styles from './cancel-admission-request.scss';
+
+interface CancelAdmissionRequestProps {
+  wardPatient: WardPatient;
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
+}
+
+const CancelAdmissionRequest: React.FC<CancelAdmissionRequestProps> = ({ closeWorkspace, wardPatient }) => {
+  const { patient, visit } = wardPatient ?? {};
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { createEncounter, emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } =
+    useCreateEncounter();
+  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 {
+    formState: { errors, isDirty },
+    control,
+    handleSubmit,
+  } = useForm<FormValues>({
+    resolver: zodResolver(zodSchema),
+    defaultValues: { note: '' },
+  });
+
+  const onSubmit = useCallback(
+    (values: FormValues) => {
+      setIsSubmitting(true);
+      const obs: Array<ObsPayload> = [
+        {
+          concept: emrConfiguration?.consultFreeTextCommentsConcept?.uuid,
+          value: values.note,
+        },
+        {
+          concept: emrConfiguration?.admissionDecisionConcept?.uuid,
+          value: {
+            uuid: emrConfiguration?.denyAdmissionConcept?.uuid,
+          },
+        },
+      ];
+
+      createEncounter(patient, emrConfiguration?.cancelADTRequestEncounterType, visit?.uuid, obs)
+        .then(() => {
+          showSnackbar({
+            title: t('admissionRequestCancelled', 'Admission request cancelled.'),
+            kind: 'success',
+          });
+          closeWorkspace({ discardUnsavedChanges: true });
+          closeWorkspaceGroup2();
+        })
+        .catch((err: Error) => {
+          showSnackbar({
+            title: t('errorCancellingAdmissionRequest', 'Error cancelling admission request'),
+            subtitle: err.message,
+            kind: 'error',
+          });
+        })
+        .finally(() => {
+          setIsSubmitting(false);
+          wardPatientGroupDetails.mutate();
+        });
+    },
+    [
+      emrConfiguration?.consultFreeTextCommentsConcept?.uuid,
+      emrConfiguration?.admissionDecisionConcept?.uuid,
+      emrConfiguration?.denyAdmissionConcept?.uuid,
+      emrConfiguration?.cancelADTRequestEncounterType,
+      createEncounter,
+      patient,
+      t,
+      wardPatientGroupDetails,
+      visit?.uuid,
+      closeWorkspace,
+    ],
+  );
+
+  const onError = useCallback(() => {
+    setIsSubmitting(false);
+  }, []);
+
+  if (!wardPatientGroupDetails) return null;
+
+  return (
+    <Workspace2 title={t('cancelAdmissionRequest', 'Cancel admission request')} hasUnsavedChanges={isDirty}>
+      <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}>
+              <Controller
+                name="note"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <ResponsiveWrapper>
+                    <TextArea
+                      {...field}
+                      id="clinical-notes"
+                      labelText={t('clinicalNotes', 'Clinical notes')}
+                      invalid={!!error}
+                      invalidText={error?.message}
+                    />
+                  </ResponsiveWrapper>
+                )}
+              />
+            </div>
+          </div>
+          <ButtonSet className={styles.buttonSet}>
+            <Button size="xl" kind="secondary" onClick={() => closeWorkspace()}>
+              {getCoreTranslation('cancel')}
+            </Button>
+            <Button
+              type="submit"
+              size="xl"
+              disabled={isLoadingEmrConfiguration || isSubmitting || errorFetchingEmrConfiguration || !patient}>
+              {getCoreTranslation('save')}
+            </Button>
+          </ButtonSet>
+        </Form>
+      </div>
+    </Workspace2>
+  );
+};
+
+export default CancelAdmissionRequest;

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

@@ -50,14 +50,7 @@ mockedUseWardLocation.mockReturnValue({
   errorFetchingLocation: null,
 });
 
-const mockWorkspaceProps: DefaultWorkspaceProps = {
-  closeWorkspaceWithSavedChanges: jest.fn(),
-  promptBeforeClosing: jest.fn(),
-  setTitle: jest.fn(),
-  closeWorkspace: jest.fn(),
-};
-
-const mockWardPatientAliceProps: WardPatient = {
+const mockWardPatientAlice: WardPatient = {
   visit: mockInpatientRequestAlice.visit,
   patient: mockPatientAlice,
   bed: null,
@@ -70,7 +63,16 @@ jest.mocked(useAppContext<WardViewContext>).mockReturnValue(mockWardViewContext)
 function renderCancelAdmissionRequestWorkspace() {
   renderWithSwr(
     <CancelAdmissionRequestWorkspace
-      {...{ ...mockWorkspaceProps, wardPatient: mockWardPatientAliceProps, WardPatientHeader: jest.fn() }}
+      launchChildWorkspace={jest.fn()}
+      closeWorkspace={jest.fn()}
+      workspaceProps={{
+        wardPatient: mockWardPatientAlice,
+      }}
+      windowProps={undefined}
+      groupProps={undefined}
+      workspaceName={''}
+      windowName={''}
+      isRootWorkspace={false}
     />,
   );
 }